这是我参与「第四届青训营 」笔记创作活动的第5天

位置布局

border

三种属性

• border-width
• border-style
• border-color

四个方向

• border-top
• border-right
• border-botton
• border-left

使用margin:auto水平居中

盒子的CSS

<style>
html{
  font-size:24px;
}
.a{
width:100%;
padding:1em;
border:3px solid #ccc;
}
.a{
box-sizing:border-box;//重点！！！
width:100%;
padding:1em;
border:3px solid #ccc;
}
</style>

overflow的使用

块级 vs .行级\

Block Level Box

• 不和其它盒子并列摆放
• 适用所有的盒模型属性

Inline Level Box 

• 和其它行级盒子一起放在一行或拆开成多行
•  盒模型中的 width 、 height 不适用

块级元素

• 生成块级盒子
•  body 、 article 、 div 、 main 、section 、h1-6、 p 、 ul 、 li 等
• display : block display : inline

行级元素

﹣生成行级盒子
﹣内容分散在多个行盒（ line box ）中

•  span 、 em 、 strong 、 cite 、 code 等
•  display : block display : inline

display 属性

 block  块级盒子
inline 行级盒子
inline - block 本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
none 排版时完全被忽略

行级排版上下文

 1.inline Formating Sontext ( IFC )
2.只包含行级盒子的容器会创建一个 IFC 
3.lFC 内的排版规则
-盒子在一行内水平摆放
-一行放不下时，换行显示
- text - align 决定一行内盒子的水平对齐
- vertical - align 决定一个盒子在行内的垂直对齐
- 避开浮动（ float ）元素＊

BFC内的排版规则

• 盒子从到下摆放
• 垂直 margin 合并
• BFC 内盒子的 margin 不会与外面的合并
• BFC 不会和浮动元素重叠

Flex Box

1.一种新的排版上下文
2.它可以控制子级盒子的：

• 摆放的流向（上下左右)
• 摆放顺序
• 盒子宽度和高度
• 水平和垂直方向的对齐
• 是否允许折行

主轴与侧轴

Grid布局