CSS基础学习总结

1.标准文档流

2.块级标签和行级标签
块级标签
div、form、p、h1等
行级标签
span、strong、input、img等
strong 文字加粗
块级标签和行级标签都是盒子模型

3.盒子模型
都有的属性border、margin、pading、content
四个值：上右下左，顺时针方向
三个值：上（左右）下
两个值：（上下）（左右）
一个值：上下左右相同

4.样式
优先级（就近原则）：行内样式>局部样式>全局样式
border:1px solid #000;
*{margin:0;padding:0;}

5.盒子3D模型
从上倒下依次是：边框—>内容、内边距—>图像->背景色->外边距

6.自动居中
margin：0 auto；上下外边距为0，左右平分外边距

7.浮动
使用场景：能够实现横向多列布局
float3个属性值：left左浮动、right右浮动、none不浮动
清除浮动：
常用clear:both；或clear:left;或clear:right;//一般用于紧邻后面的元素清除浮动
同时设置宽度width:100%（或者固定宽度）+overflow:hidden;
注：
当元素没有设置宽度值，而设置了浮动属性，元素的宽度随内容的变化而变化
当元素设置浮动属性后，会对相邻的元素产生影响，相邻元素特指紧邻后面的元素
当父包含块缩成一条时，用clear:both方法清除浮动无效，它一般用于紧邻后面的元素清除浮动

8.定位
position：静态定位、相对定位、绝对定位
static静态定位、relative相对定位、absolute绝对定位、fixed固定定位
relative定位：z_index属性，产生层级，还处在标准文档流中
absolute定位：脱离标准文档流，宽度随着内容的变化而变化
注：
当一个元素设置绝对定位，没有设置宽度时，元素的宽度根据内容进行调节
无已定位祖先元素，以html标签为偏移参照基准
有已定位的祖先元素，以距其最近的已定位祖先元素为偏移参照基准