内边距（内容区、边框共同影响可见框大小）：
box{
width: 200px;
height: 200px;
border:20px red；
padding-top；
}
padding-top
padding-right、右边距
padding-left、
padding-bottom
padding：100px全部边距设置完毕。
使用padding可以同时设置四个边框的样式，规则和border-width一致
外边距（不会影响可见框大小。只会影响盒子的位置，扩大了外部位置）
自己设置外边距（只有一个盒子）。对于右面的外边距，由于距离离得远，移动看不出效果。对于自己来说，自身位置变，就是上左外边距。
如果盒子与其相邻，会使右面下面其他的东西位置改变。
外边距可以设置为负值，往右和左走。
下面的外边距bottom设为负值以后，在其下面的盒子往上走，而本身不动。（应用，看商品，底下出现详情）
box{
border:20px red；
margin-top；
}
margin-top/right/bottom/left。
bottom-left：auto 自动（只给水平方向设置），有有多少都设置为最大值（到最右面）。
bottom-left：auto
bottom-right：auto居中
bottom ：0 auto（常用）
简洁方法和padding和border一样。
外边距的重叠（垂直方向的相邻的盒子（中间加a就不会重叠），取边距值最大）
box{
border:20px red；
margin-bottom：200；
}
box{
border:20px red；
margin-top：100；
父子元素
子元素变了父元素也变了。解决办法：
border padding 加内容。
浏览器默认样式
默认内外边距
body（p，ul）{
margin：0
}
推出=以下
*{
margin：0
padding：0
}（性能不好）
以上块元素模型
列表。
*{
margin: 0;
padding: 0;
}
内联元素盒模型
内联样式不能设置宽高
内联元素可以设置水平方向内边距
左右可以
边框可以设置。内联样式设置垂直方向大小，不会改变位置。
边框。设置垂直方向大小，不会改变布局。左右会影响布局
水平外边距，内联元素支持水平方向的外边距
左右可以用。水平方向二个是求和的
垂直方向。不可用（没效果）。
（水平方向都要=有，就当垂直都不行）
display和visibility
！内联变块元素 display ：block
块元素 可以转为内联display ： inline
inline-block行内块 宽可设置不占一行。
none 就不显示了，隐藏了不占位置了。
visibility
规定元素是否可见。
visibility：visvle；
visibility： hidden ；隐藏也占用位置。
overflow
当子元素超出父元素的时候。（溢出））
在父元素里面加
overflow：visibale 溢出
overflow： hidden 溢出内容减掉
overflow：scroll 滚动（不超出父元素）（不管溢出否 水平垂直都加滚动条）
overflow：auto 根据情况自己加滚动条
文档流（网页就是文档）
最基础的一层，表示页面的位置。
块元素
在文档流，自上到下，独占一行。
不设宽度，就是默认浏览器宽度auto。设置宽度在设padding就会影响可见框大小。没设置宽度，auto，宽还是父元素100%，里面内容会往后挤。
高被撑开了。
内联元素
在文档流，只占自身大小。从左到右排列。
宽高都被内容撑开了。
浮动
$3 123快捷键
块元素 可以转为内联display ： inline-block
《》《》 == <><>挨着没空格
但是不想横着写：
float 浮动 不继承
float ：right；）（左上右上浮动，浮动到父元素边框或者不浮动对象就不浮动）
块独占一行。浮动不上去。--》可以换位置解决。
一行放不下，浮动目标，自动换行。
文字绕图
浮动不会盖住文字，所以文字自动环绕。（图片一个效果）
内联元素的浮动
在文档流中，子元素的宽度默认占父元素的全部
内联元素脱离文档流以后会变成块元素*
简单布局
1/固定布局
2/自适应布局
