盒子模型：一个盒子分为内容区content 内边距padding 边框border和外边距margin
盒子大小= 内容区＋内边距 +边框
边框border：
border-width：10px 20px 30px 40px 分别是上右下左 10上 20左右 30下 10上下 20左右
border-style：solid实线 dotted点状边框 dashed虚线。border-color：设置颜色 这三个属性缺一不可
borer:10px red solid; 可以同时设置四个边框的宽度 边框 颜色，没有顺序要求
也可以分别设置 参数为 -top -bottom -left -right 可以同时设置然后单独设置某个边框
内边距padding：指的是盒子的内容区和边框之间的距离，四个方向，影响可见框的的大小
参数为 -top -bottom -left -right
padding：10px 20px 30px 40px 分别是上右下左 10上 20左右 30下 10上下 20左右
外边距margin：指的是这个盒子和别的盒子之间的距离，不会影响可见框的大小，但是影响盒子的位置
水平方向设置auto盒子居中
垂直外边距重叠，相邻的两个兄弟元素外边距取得是最大值，不是取和
父子元素的垂直外边距如果相邻了，子元素的外边距会传递给父元素
overflow：hidden；解决重叠
清楚浏览器的默认样式：*{padding：0 margin：0}
内联元素的盒模型：内联元素设置不了宽和高 可以设置水平方向的内边距 和边框，垂直方向支持但不影响
布局 外边距只支持水平方向
display：规定元素类型 block把一个行内元素改成块显示 inline把块元素改成行内元素显示
inline-block行内块可以设置宽高也不会独占一行
none 就不显示这个元素并且在页面中也不会继续占有位置
visibility： 规定元素是否可见 hidden不显示这个元素但占有位置
overflow：可以设置父元素如何处理溢出的内容
hidden修剪内容 剪掉的不可见 也能解决父子元素重叠
scroll浏览器会显示滚动条以便查看其余内容 底部右边显示滚动条
auto智能添加滚动条
文档流:网页=文档 每一个网页都是一个文档 网页是一个多层的结构 我们看见的就是最上面的一层文档流是
最基础的一层 创建的元素都默认在文档流中 块元素只有在文档流中才会独占一行宽度默认是父元素的百分之百
高度是由内容撑开。
浮动：float：left；right；脱离文档流 当为一个元素设置浮动后，这个元素或脱离文档流他下边的元素会马上往上移动
只能浮动到父元素的边 通过浮动可以把块元素横着排，如果浮动的元素上边是一个没有浮动的块那么浮动的元素不会超过
上边的块，浮动的元素不会超过上边的兄弟元素 最多平齐
文字绕图： 浮动的元素不会盖着文字 文字会自动环绕
内联元素的浮动：内联元素脱离文档流设置宽高都有效会被内容撑开