一、盒模型
属性：
width:内容的宽度
height:内容的高度
padding:内边距 内容到边框的距离
border:边框
margin:外边距 另一个边到另一个边的距离 盒模型的计算：
总结：如果保证盒模型的大小不变，加padding 就一定要减width或者减height
前提是：在标准文档流
padding：父子之间调整位置
margin: 兄弟之间调整位置
1.1 adding的设置
padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
1.写小属性,分别设置不同方向的padding
标签的默认padding
比如ul，ol标签，有默认的padding-left值。
那么我们一般在写网页的时候，是要清除页面标签中默认的padding和margin。以便于我们更好的去调整元素的位置。
*{
padding:0;
margin:0;
}通用适配器
1.2 border的设置
-border
三要素：线性的宽度 线性的样式 颜色
border: 1px solid red;
silid实线 dotted点线 double双线 dashed虚线 border-left: 1px solid red;
1.3margin的设置
-margin
前提必须是标准文档流下
margin的水平不会出现任何问题
垂直方向上 margin会出现'塌陷问题'2.display 显示（重要）
前提必须是标准文档流下 属性：
block 块级标签
- 独占一行
- 可以设置宽高，如果不设置宽，默认是父盒子宽度的100%
inline 行内标签
- 在一行内显示
- 不可以设置宽高，根据内容来显示宽高
inline-block 行内块
- 在一行内显示
- 可以设置宽高 none 不显示 隐藏 不在文档上占位置 visibility：hidden;隐藏 在文档上占位置
3.浮动 （重要）
3.1浮动的四大特性
1.浮动的元素会脱离标准文档流
2.浮动的元素互相贴靠
3.浮动的元素有"子围"效果
4.收缩的效果
收缩：一个浮动元素。如果没有设置width，那么就自动收缩为文字的宽度（这点跟行内元素很像）
四大特性
float:none;
left;左浮动
right;右浮动 浮动：脱离了标准文档流
作用好处：使元素实现并排（布局）
在页面上占位置 浮动带来的问题：
子盒子浮动，不在页面占位置，如果父盒子不设置高度，那么撑不起父盒子的高度，页面出现紊乱 清除浮动：
1.给父盒子设置固定高度（后期不好维护）
2.clear:both;
给浮动元素的最后面，加一个空的块级标签(标准文档流的块级标签)
给当前这个标签设置一个clearfix类名，设置该标签属性cleart:both 问题：代码冗余
3. .clearfix:after {
content: ".";
display: block;
height: 0; 1
visibility: hidden; 2 有1，2清楚content添加的.
clear: both
} 父盒子浮动和子盒子浮动没有关系，子盒子该浮动就浮动 4.overflow:hidden; 超出部分默认可见（visible）
超级：清除浮动 最牛逼的方法，以上三种都是渣渣
补充：
overflow：auto 超出部分出现左右滚动条
overflow: scroll 超出部分出现上下滚动条 要浮动一起浮动，有浮动，清除浮动