CSS知识点（样式）

1.字体样式

font-family: “楷体”;
font-size: 50px;
font-style: italic;
font-weight: 900;
字体属性的顺序：字体风格→字体粗细→字体大小→字体类型

2.文本样式

			.sp {
				/* color: blue; */
				/* color: #ff0000; */
				/* color: rgb(255,0,0); */
				/* color: rgba(255,0,0,0.1); */ /*alpha*/
			}

当内容是单行时: 设置行高和容器的高度一致,可以用于垂直居中
当内容是多行时: 表示行与行之间的间距

3.列表样式

ul li {
				/* list-style: none;
				list-style-image: url(../img/b_2.gif);
				list-style-position: inside; 
				list-style-type: none; */
			}

4.背景样式

.div1 {
				border: 1px solid red;
				width: 300px;
				height: 300px;
				/* background-color: red; */
				/* background-image: url(../img/b_2.gif);
				background-repeat: no-repeat;
				background-position: 0px 0px; */
				background: url(../img/b_2.gif) no-repeat;
				background-size: contain;
				
			}

5.盒子模型

margin: 外边距 距离兄弟容器或者父容器边框的距离
padding: 内边距 边框和内容之间的距离(留白)
border: 边框
content: 内容 (放置容器的文本和元素)
width: 元素的宽度
height: 元素的高度

			一个盒子所占浏览器的面积是: 外边距 + 边框 + 内边距 + 内容
			我们所关系的一个盒子的面积: 边框 + 内边距 + 内容
			
			默认我们定义元素的宽度和高度指的是 内容的宽度和高度,是固定不变
			这种盒子成为 content-box
			可以设置盒子位边框盒子

6.圆角边框

border-radius: 20px 10px 50px 30px;
四个属性值按顺时针排列

利用border-radius属性制作圆形的两个要点
元素的宽度和高度必须相同
圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%

半圆形
利用border-radius属性制作半圆形的两个要点
制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值
制作左半圆或右半圆时，元素的高度是宽度的2倍，而且圆角半径为元素的宽度值

扇形
利用border-radius属性制作扇形遵循“三同，一不同”原则
“三同”是元素宽度、高度、圆角半径相同
“一不同”是圆角取值位置不同

7.盒子阴影

box-shadow: -13px -14px 10px（模糊半径） 10px（阴影宽度） red inset;

8.display属性

行内元素:
1.在一行显示
2.不能够设置宽高

		块级元素:
			1.独占一行
			2.能够设置宽高
		
		display: block; 能够将行内元素变成块级元素
		display: inline; 能够将块级元素变成行内元素
		display: none; 设置元素显示或者隐藏
		display: inline-block; 具备行内元素在一行显示的特点，同时具备块级元素的能够设置宽高的特点
		
		inline-block: 能够让元素水平排列
		水平排列的方式
			1.inline-block
			2.float

9.float属性

float浮动
浮动的理解:
1.浮动的盒子可以向左浮动，也可以向右浮动，
直到它的外边缘碰到了包含框或者另一个浮动盒子为止
2.设置了浮动的元素和未设置浮动的元素是不在一个水平面上的，
未设置浮动元素的内容会流向浮动元素的浮动方向的反方向
3.如果父级元素里面所有的元素都设置了浮动，那么会导致父级边框塌陷
4.解决父级边框塌陷问题有三种办法
方式一: 设置空div防止父级塌陷
方式二: 给父级边框设置高度
方式三: 给父级边框设置overflow属性

		排列方式:
			默认都是标准流排列方式
			标准流排列方式: 块级元素元素从上至下，行内元素从左至右排布

浮动的理解:
1.浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到了包含框或者另一个浮动盒子为止
2.设置了浮动的元素和未设置浮动的元素是不在一个水平面上的，未设置浮动元素的内容会流向浮动元素的浮动方向的反方向
3.如果父级元素里面所有的元素都设置了浮动，那么会导致父级边框塌陷
4.解决父级边框塌陷问题有三种办法
方式一: 设置空div放置父级塌陷
方式二: 给父级边框设置高度
方式三: 给父级边框设置overflow属性

10.overflow属性

浮动的理解:
1.浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到了包含框或者另一个浮动盒子为止
2.设置了浮动的元素和未设置浮动的元素是不在一个水平面上的，未设置浮动元素的内容会流向浮动元素的浮动方向的反方向
3.如果父级元素里面所有的元素都设置了浮动，那么会导致父级边框塌陷
4.解决父级边框塌陷问题有三种办法
方式一: 设置空div放置父级塌陷
方式二: 给父级边框设置高度
方式三: 给父级边框设置overflow属性