html、css盒子模型

盒子模型
一．文档流
网页是多层结构的，一层叠着一层
可以通过css设置每一层样式
浏览器呈现用户的永远是最上面的一层
文档流是页面最底下的一层，是所有层的基础，所有元素默认都是在文档流中排列
二．元素的二种状态
在文档流：
块元素：
独占一行，自上向下垂直排列
默认宽度是父元素的宽度，高度是由内容撑开
行内元素：
不会独占一行，宽高由内容撑开
脱离文档流
完全脱离：子元素不在撑开父元素的高度，子标签高于文档流，不占用盒子模型的空间，有z-index属性
不完全脱离：浮动的结果，如果清除浮动就会重新撑开父元素的高度
三．盒子模型
css的基本模型之一，所有元素都包含在盒模型里面，由元素内容（content），内边距（padding），边框（border），外边距（margin）组成
content：内容的宽高
padding：设置内容离边框的距离
border：设置元素的边框
border-style：设置边框的样式：solid（实线），dashed（虚线），dotted（点状），double（双线）
border-width：设置边框的宽度
border-color：设置边框的颜色
margin：设置元素与元素之间的距离
注：行元素可以设置padding、border、margin，但是上下padding、border、margin不影响其他元素的布局

四．盒子模型布局
水平方向：margin-left+border-left+padding-left+width+padding-right+border-right+margin-right
可以设置auto：margin+width
元素实际宽度= margin-left+border-left+padding-left+width+padding-right+border-right+margin-right；
当有属性设置为auto，则浏览器自动设置auto的值，使等式成立
当设置auto的属性有width，浏览器优先设置width的值，
当width为定值，margin-left和margin-right设置auto，则元素的左右margin值相同，使元素与父元素中居中
如果没有属性值为auto，则浏览器自动调整margin-right的值
垂直方向：元素高度默认为内容高度撑开，如果高度没有设置定值，则元素高度是内容高度，如果设置定值，元素高度为定值

内容溢出：
内容宽高>元素宽高：内容会溢出元素
元素可以通过overflow设置溢出内容样式
overflow：visible（默认值，溢出内容在元素外部显示）
hidden（溢出内容被裁剪）
scroll（生成滚动条）
auto（根据需要生成滚动条）
overflow是overflow-x和overflow-y的简写方式
盒子大小：
box-sizing：content-box/border-box
content-box：默认值，width和height设置的是内容盒的大小，
border-box：设置width和height设置的大小是border+padding+content

盒子阴影：
box-shadow：none/inset x-offset y-offset blur-radius spread-radius rgba;
none/inset：设置阴影的类型，可选，默认为外投影，inset设置内投影
x-offset：在水平方向的偏移，正值是右边，负值是左边
y-offset：在垂直方向的偏移，正值是底边，负值是顶边
blur-radius：阴影的模糊半径
spread-radius：设置阴影扩展半径，可选，正值扩大，负值缩小
rgba：阴影的颜色设置

圆角：
border-radius：上左 上右 下右 下左；
border-top-left-radius
borde-top-right-radius
border-bottom-right-radius
border-bottom-left-radius