布局（Layout）是什么

• 确定内容的大小和位置的算法
• 依据元素、容器、兄弟节点和内容等信息来计算  

布局相关技术

• 1.常规流（行级、块级、表格布局、FlexBox、Grid布局）
• 2.浮动
• 3.绝对定位

 

width

• 指定content box宽度
• 取值为长度、百分数、auto
• auto由浏览器根据其他属性确定
• 百分数相对于容器的content box 宽度

 

height

• 指定content box高度
• 取值为长度、百分数、auto
• auto取值由内容计算得来
• 百分数相对于容器的content box 高度
• 容器有指定的高度时，百分数才生效  

padding

• 指定元素四个方向的内边距
• 百分数相对于容器宽度

 

border

• 指定容器边框样式、粗细和颜色

• 三个属性
• • border-width
• • border-style
• • border-color

• 四个方向
• • border-top
• • border-right
• • border-bottom
• • border-left

 

margin

• 指定元素四个方向的外边距
• 取值可以是长度、百分数、auto
• 百分数相对于容器宽度

 

使用margin：auto水平居中

       div{               width:200px;               height:200px;               background:coral;               margin-left:auto;               margin-right:auto;        }