CSS的层叠性:指CSS样式在针对同一元素配置同一属性时,依据层叠规则(权重)来处理冲突,选择应用权重高的CSS选择器所指定的属性,一般也被描述为权重高的覆盖权重低的,因此也称作叠层

解析规则1:当不同选择符的样式设置有冲突的时候,高权重选择符的样式会覆盖低权重选择符的样式

解析规则2:相同权重的选择符,样式遵循就近原则:哪个选择符最后定义,就采用哪个选择符样式

CSS的浮动属性: 1. float  描述:float:  left;   元素靠左边浮动

                            2. float  描述:float:  right;   元素靠右边浮动

                            3. float  描述:float:  none;   元素不浮动

                            浮动的作用1:定义网页中其他文本如何环绕该元素显示

                            浮动的作用2:就是让竖着的东西横着来

正常文档流,竖向排列,独占一行.   当一个元素不再在文档流中占据空间,而是漂浮在文档流的上方的时候,叫做脱离文档流

浮动会脱离网页文档,与其他不浮动的元素发生重叠(文字环绕效果,网页开发里没有)

CSS的清除浮动:1. clear 描述:Clear:  none;   允许有浮动对象

2. clear 描述:Clear:  right;   不允许右边有浮动对象

3. clear 描述:Clear:  left;   不允许左边有浮动对象

4. clear 描述:Clear:both;   不允许有浮动对象

清除浮动只是改变元素的排列方式,该元素还是漂浮着,不占据文档位置

案例:

盒子模型的组成:盒模型是css布局的基石,它规定了网页元素如何显示以及元素间相互关系. css定义所有的元素都可以拥有像盒子一样的外形和平面空间,即都包含边框,边界,补白,内容区,这就是盒模型

Margin属性:

使用方法:

           边界:  margin.在元素外边的空白区域,被称为边距

margin-left:左边界   margin-right:右边界  margin-top:上边界  margin-bottom:下边界

属性值的4种方式:margin可以给负数

四个值:上  右  下  左      三个值:上  左右  下      二个值: 上下  左右

一个值: 四个方向 margin:2px;/*定义元素四边边界为2px*/

margin:0 auto;/*一个有宽度的元素在浏览器中横向居中. */

区别:

色块搭建:

方法: