这是我参与「第五届青训营 」伴学笔记创作活动的第 4 天
重点内容
1、什么是布局
布局是确定内容的大小和位置的算法，依据元素、容器、兄弟节点和内容等信息来计算。
2、布局相关技术
浮动
把元素移除正常布局流，并吸附到父元素的左边或右边，正常布局中的位于该元素之下的内容会自动排布在浮动元素周围。浮动元素会创建BFC，这个元素内容占多大地方，这个块就要有多大。
定位
默认值：static
相对定位：相对定位通常用来对布局进行微调，相对于元素在正常文档流中的位置来移动它，仍然占据正常文档流中的位置。
绝对定位：将元素从正常布局流中移除，相当于放到另一个图层中，可以相对于body元素的边缘固定，或相对于最近的被非静态定位的父元素来固定。我们称这个被参照的元素为"包含块"
固定定位：与绝对定位类似，但是相对于浏览器视窗来固定位置的。
width
·指定content box宽度
·取值为长度、百分数、auto
·auto由浏览器根据其他属性确定
·百分数相对于容器的content box宽度
height
·指定content box高度
·取值为长度、百分数、auto
·auto取值由内容计算得来
·百分数相对于容器的content box高度
·容器有指定的高度时，百分数才生效
padding
·指定元素四个方向的内边框
·百分数相对于容器宽度
border
·指定容器边框样式、粗细和颜色
margin
·指定元素四个方向的外边框
·取值可以是长度、百分数、auto
·百分数相对于容器宽度
display属性
·block————块级盒子
·inline————行级盒子
·inline—block————本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
·none————排版时完全被忽略
