css+div页面布局详解（三）

css三大特性与盒子模型讲解

1.css的三大原型：层叠性、继承性、优先级
2.层叠性原则：样式冲突，就近原则，后定义，后生效；样式不冲突，无论定义先后，始终有效
3.继承性：子代会继承父元素的某些样式，如文本颜色、字体属性等。
4.优先级：在同一个元素被制定了多个选择器，需掌握了css的优先级，才能准确地分析出到底会用那个选择器中的样式

选择器	权重
继承或 *	0.0.0.0
标签选择器	0.0.0.1
类选择器 / 伪类选择器	0.0.1.0
id 选择器	0.1.0.0
行内样式	1.0.0.0
!important	无穷大

当使用复合选择器时才需要考虑权重叠加的问题
5.盒子模型包括实际内容、内边距、边框和外边距四个部分
6.边框（border）

属性	作用
border-width	边框粗细，单位是 px
border-style	solid 实线 / dashed 虚线 / dotted 点线
border-color	边框的颜色

单独设值一个边框：

 border-bottom: 1px solid #000;（下边框）

border-top: 1px solid #000;（上边框）

border-left: 1px solid #000;（左边框）

border-right: 1px solid #000;（右边框）

border-collapse可以将表格的相邻边框合并到一起（只使用于表格）
7.内边距（padding）：

padding-top: 10px;（上）
padding-right: 20px;（右）
padding-bottom: 30px;（下）
padding-left: 40px;（左）

padding的复合属性

值的个数	含义
padding: 5px;	四周都是5px
padding: 5px 10px;	上下 5px / 左右 10px
padding: 5px 10px 20px;	上 5px / 左右 10px / 下 20px
padding: 5px 10px 20px 30px;	上 / 右 / 下 / 左，顺时针

8.外边距（margin）：

margin-top: 10px;（上）
margin-right: 20px;（右）
margin-bottom: 30px;（下）
margin-left: 40px;（左）

复合写法：

值的个数	含义
margin: 5px;	四周都是5px
margin: 5px 10px;	上下 5px / 左右 10px
margin: 5px 10px 20px;	上 5px / 左右 10px / 下 20px
margin: 5px 10px 20px 30px;	上 / 右 / 下 / 左，顺时针