CSS层叠样式表深层理解

盒子模型

width（宽度）- 设置模型的内容宽度
height（高度）- 设置模型的内容高度
padding（内边距）- 设置模型的内边距的距离
margin（外边距）- 设置模型的外边距的距离
border（边框）- 设置模型的边框大小

分方向显示时的属性值

padding和margin都一样。

 四个值都设置： 上 右 下 左

三个值设置了： 上 右左 下

 两个值设置了： 上下 右左

 只设置了一个： 上右下左

padding、margin、border-方向（top/right/bottom/left 上右下左）

块级元素和行内元素的区别

块级元素： 独自霸占一行，不能与其他元素同行。

可以设置宽高值，如果不设置宽度，就与父盒子宽度相同。（

内部可以嵌套其他的元素（无论是块级元素还是行内元素都可以）

div、ul、li、ol、p、hn、hr、table、form等

行内元素： 和其他的行内元素共处一行

 不能设置宽高，宽高由内容自动填充

文本标签（a,span,i,s,b,strong,img…）表单元素（input,textarea,select,button）

块级元素变成内联元素：加css属性 display:inline

内联元素变成块级元素：加css属性 display:block

border的边框可以分别设置四个方向实现
border-方向：粗细 样式 颜色
方向包括（top、right、bottom、left）