css盒子模型

1.css盒子模型
组成：content->padding->border->margin
物品 填充物 包装盒 盒子跟盒子之间的距离
content：内容区域 width height组成
padding：内边距
只写一个值：30px 表示上下左右
写两个：30px 40px（上下，左右）
写四个值：30px 40px 50px 60px(上，右，下，左)
单一样式只能写一个值：
padding—left：左边距
padding-right：右边距
padding-top：上边距
padding-bottom：下边距
margin：（外边距）
只写一个值：30px 表示上下左右
写两个：30px 40px（上下，左右）
写四个值：30px 40px 50px 60px(上，右，下，左)
单一样式只能写一个值：
margin—left：左边距
margin-right：右边距
margin-top：上边距
margin-bottom：下边距
注释：
1.背景色会填充到margin以内的区域（不包括margin区域）
2.文字会再content区域
3.padding不能出现负值，margin时可以出现负值的
box-sizing：
盒子寸：可以改变盒子模型的展示形态
默认值：content-box：width，height->content
border-box：width，height->content padding border
使用场景：
1.不用在计算某些值
2.解决一些百分比的问题
盒子模型的一些问题：
1.margin叠加问题，出现再margin上下同时存在的情况，会取上下中值较大的作为叠加的值
2.margin传递问题，只会出现在，嵌套结构当中，且只有margin-top会有传递问题，其他三个方向是没有传递问题的。
解决方案：
1.bfc规范
2.给父容器添加边框
3.margin换成padding
盒子模型扩展：
1.左右可以自适应auto扩展，上下不行
2.width，height不设置的时候对盒子模型的影响，会自动计算容器大小，节省代码
标签分类：
按类型：
块block(独占一行，支持所有样式，不写宽的时候跟父元素相同，所占区域是一个矩形)：div,p,ul,li,h1....
内联inline（挨在一起，有些样式不支持例如：宽高，边距。不写宽的时候宽度由内容决定，所占区域不一定是矩形，内链标签之间会会由空隙）:span,a,em,strong,img...
内联-块inline-block（挨在一起，支持宽高）:input,select....
注释：布局一般用块标签，修饰一般用内联标签
按内容：
flow：流内容
metadata：元数据
sectioning：分区
heading：标题
phrasing：措辞
embedded：嵌入的
interactive：互动的