Css的盒子模型

Css的盒子模型

1.盒模型的组成部分
盒模型规定了网页元素如何显示以及元素之间相互关系，包含边框、边界、补白、内容区
2.border属性
border-width边框宽度
border-color边框颜色
border-style边框样式solid/dashed/dottedd/double
简写border：1px solid red
border-top/bottom/left/right
3.margin属性：元素外边的空白区域被称为外边距
margin-top/bottom/left/right
属性值的4种方式：
上 右 下 左
上 左右 下
上下 左右
四个方向
margin-top有兼容问题时，应该给父元素添加边框border-top或给父元素（或子元素添加浮动）或给父元素添加overflow：hidden
margin可以给负值，margin:0 auto可以让一个有宽度的容器水平居中
4.padding属性
padding-top/bottom/left/right
padding在设定页面中一个元素的边缘（边框）之间的距离，也称补白
用来调整内容在容器中的位置关系
padding是额外加在元素原有大小基础上的，若想元素大小不改变，需要从宽或高减掉添加的padding值
属性值的4种方式：
上 右 下 左
上 左右 下
上下 左右
四个方向
5.页面中的书写问题
（1）去除input点击上去之后的蓝色边框outline：none
（2）input和button之间在水平上有间距
把input和button写在一行上（不推荐）
把input和button进行浮动
（3）所有的图片在默认情况下，都会向下撑大3-4像素
给img添加声明，display:block/vertical-align:top
(4)清除缝隙
*{margin:0;padding:0;}清除所有标签自带的缝隙
标签{line-height：1}清除文字上下缝隙，需调整文字上下缝隙用margin或padding
当line-height与字号大小一致，可以清除文字自带的缝隙
当line-height等于高度时，文字是垂直居中的
（5）页面书写必须有版心，版心必须要居中，而居中要用margin：0 auto且盒子要有宽度
（6）表单控件有横向有空隙：给表单控件添加浮动
（7）a超链接需要清除下划线：text-decoration：none
（8）li需要清除小黑点：list-style:none
（9）大图img，小图背景图
扩展：Css哪些属性可以继承：font-family、font-size、color、font-weight、font-style、text-decoration、line-height、list-style、letter-spacing
Css哪些样式不能继承：width、height、border、margin、padding、background、overflow、position