CSS布局|青训营笔记

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

常规流布局：盒子模型，行级，块级，表格布局，FlexBox，Gird布局

盒子模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

CSS中盒子模型是非常基础的，盒子模型就是把HTML页面中的元素当作一个矩形区域，相当于把元素装入一个盒子，然后只要设置盒子的内外边距，边框和内容四个属性，就可以简单明了的将页面内元素进行区分以及元素内部内容的位置与周围的间距。

margin:外边距，是边框外的区域

下列代码使用margin演示如何设置外边距，padding类似。也可以使用margin-top等单独设置某个方向的外间距值。

margin:25px 50px 75px 100px;/*上边距25px，右边距50px，下边距75px，左边距100px*/
margin:25px 50px 75px;/*上边距25px，左右边距50px，下边距75px*/
margin:25px 50px; /*上下边距25px，左右边距75px*/
margin:25px;/*上下左右边距25px*/
margin:auto;/*水平居中，但边距会过于依赖浏览器，margin值也可以设置为百分比，也可以设置负值，表示存在重叠内容*/

border:边框，指定容器边框样式、粗细和颜色属性

border-style: none无，solid实线，dashed虚线，dotted点虚线
border-width:
border-color:
border-radius：圆角边框
……

padding:内边框，内容和边框中间的区域

content:内容，即盒子的内容，用于显示文本和图像

块级和行级

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

块级元素

不和其他盒子并排摆放
适用于所有盒模型属性
使用display：block转化
生成块级盒子：body、article、div、main、section、h1、p、ul、li等

行级元素

可以和其他行级盒子放一行或拆成多行
不适用盒模型中的width和height属性
使用display：inline转换
生成行级盒子：内容分散在多个行盒中span、em、strong、cite、code等

行级排版上下文（IFC） 只包含行级盒子的容器会创造

盒子在一行内水平摆放
一行放不下换行显示
text-align决定一行内盒子的水平对齐
vertical-align决定一个盒子在行内的垂直对齐
避开浮动float元素

块级排版上下文（BFC）

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

创建BFC的情况：

根元素
浮动、绝对定位、inline-block
Flex子项和Gird子项
overflow值不是visible的块盒
display：flow-root

Flex Box弹性盒

单一方向布局，可以控制自己盒子的摆放流向，顺序，盒子的宽高，水平垂直方向的对齐，是否允许折行

justify-content：设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式
align-items：定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式
flex-grow：设置有剩余空间的伸缩能力，多余空间按比例分配
flex-shrink：设置空间不足时收缩的能力
flex-basis：设置基础长度

Gird布局

二位方向布局，Gird布局可以从行和列控制盒子的各个属性，像划分网格线一样

Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。

浮动与定位

浮动

改变单调的排列方式，使用float使元素进行左右的浮动，使用时应注意：

浮动后元素都会成为块级元素，宽度默认auto
浮动元素外边缘不会超过其父元素的边缘
如果一个浮动元素在另一个浮动元素后显示，且空间不足时，会换行显示

定位

使用positio属性

position常用属性值
static	静态定位（默认）
relative	相对定位，相对于其原文档流的位置进行定位。发生偏移，但原位置依旧保留空间
absolu	绝对定位，相对于static定位以外的第一个上级元素进行定位。发生偏移，且原位置不保留
fixed	固定定位，相对于浏览器窗口进行定位。页面滚动依旧停留在原位
sticky	一定要有top、right等，在第一个元素中fixed

层叠

使用z-index来表示z轴的深度，取值可为正整数、负整数和0（默认），数字越大越上面。 在static上无效。