web前端攻城狮 学习笔记——CSS布局

CSS布局（layout）
确定内容的大小和算法，依据元素、容器、兄弟节点和内容等信息来计算
三种模式：常规流（行级块级、表格布局等）、浮动和绝对定位

1 常规流
常规流包括行级、块级、表格布局、Flexble Box和Grid
根元素、浮动和绝对定位的元素会脱离常规流，其它元素都在常规流之内（in-flow）
有的时候会说成文档流。常规流中的盒子，在某种排版上下文中参与排版
1.1 行级排版上下文
Inline Formatting Context（IFC）：只包含行级盒子的容器胡创建一个IFC
IFC排版规则：盒⼦在⼀⾏内⽔平摆放；⼀⾏放不下时，换⾏显⽰；text-align 决定⼀⾏内盒⼦的⽔平对齐；vertical-align 决定⼀个盒⼦在⾏内的垂直对齐；避开浮动(float)元素*

<div>
This is a paragraph of text with long word
Honorificabilitudinitatibus. Here is an image
<img
src="https:WJp4.ssl.qhimg.com/t01364272cf34a8f4d1.png"
alt="cat">
And <em>Inline BlockXÿem>
</div>#div是块级的
<style>
div {
   
width: 10em;
font-size: 20px;
#overflow-wrap: break-word;#设置一个over-wrap: break-word就可以长单词换行（如图所示）
background: #fcc;
}
em {
   
display: inline-block;
width: 3em;
background: #99f;
}
</style>

1.2 块级排版上下文
Block Formatting Context（BFC）
某些容器会创建BFC：根元素；浮动、绝对定位、inline-block；Flex⼦项和Grid⼦项；overflow 值不是 visible 的块盒
排版规则：盒⼦从上到下摆放；垂直 margin 合并；BFC 内盒⼦的margin不会与外⾯的合并；BFC 不会和浮动元素重叠

<span>
This is a text and
<div>block</div>
and other text.
</span>#如果块级外面是行级：块级的盒子将前后两部分都用匿名的块级包起来
<style>
span {
   
line-height: 3;
border: 2px solid red;
background: coral;
}
div {
   
line-height: 1.5;
background: lime;
}
</style>

2 Flexible Box
一种新的排版上下文
可以控制子级盒子的：摆放流向、摆放顺序、盒⼦宽度和⾼度、⽔平和垂直⽅向的对齐、是否允许折⾏
display:flex
display: flex 使元素⽣成⼀个块级的 Flex 容器
display: inline-flex 使元素⽣成⼀个⾏级的 Flex 容器

<div class="container">
 <div class="a">A </div>
 <div class="b">B </div>
 <div class="c">C </div>
</div>
<style>
 .container {
   
 display: flex;#加上这句就表示按照flex摆放，即从左到右摆放，如下图所示
 border: 2px solid red;
 }
 .a, .b, .c {
   
 textalign: center;
 padding: 1em;
 }
 .a {
    background: #fcc; }
 .b {
    background: #cfc; }
 .c {
    background: #ccf; }
</style>

flex-direction：控制流向：左到右、右到左

flex-direction: row 
flex-direction: row-reverse 
flex-direction: column 
flex-direction: column-reverse

上面四个分别如下图所示

flex-wrap：换行

flex-direction: row
flex-wrap: nowrap

flex-direction: row
flex-wrap: wrap#执行这个命令后由图1变成了图2

flexibility
设置宽度：flexibility可以设置弹性
flex-grow 有剩余空间时的伸展能⼒。默认值0，宽度（被设置的会不按照width的宽度设置，而是将整体宽度按照比例分配）

.a, .b, .c {
    width: 100px }

.a, .b, .c {
    width: 100px }
.a {
    flex-grow: 1 }#表示A将剩余的部分全部占满

.a, .b, .c {
    width: 100px }
.a, .b {
    flex-grow: 1 }#AB将剩余部分全部占满，比例为1：1

.a, .b, .c {
    width: 100px }
.a {
    flex-grow: 2 }
.b {
    flex-grow: 1 }#比例为2:1

四种情况分别为




flex-shrink 容器空间不⾜时收缩的能⼒。都是0则溢出容器

.a, .b, .c {
    width: 70% }#都是70%，则三者将空间三等分

.a, .b, .c {
    width: 70% }
.a {
    flex-shrink: 0 }#A的可收缩值设置为0，表示A不可收缩，因此A占满了70%

.a, .b, .c {
    width: 70% }
.a, .b {
    flex-shrink: 0 }#AB都不能收缩，则最终溢出

flex-basis 没有伸展或收缩时的基础长度。基础空间，等于设置了一个容器的大小

.a {
   
 width: 20%;
 flex-basis: 50%#优先级比width要高，A设置为占据50%
}
.a {
   
 width: 20%#没有设置其他的，则就是20%
}
.a {
   
 flex-basis: content#这句话可以不要，如果不要也是表示设置为内容的宽度
}

flex：三个一起设置：flex:flex-grow flex-shrink flex-basis

.a {
   
 flex: 1 1 auto#grow、shrink都为1，basis自动
}
.a, .b, .c {
   
 flex-grow: 1#代表占剩余空间的能力是1，基准的宽度不一样，则最终是不一样的
}
.a, .b, .c {
   
 flex: 1 1 0#续上面，设置basis为0，则这三个为1
}

对齐概念:主轴和侧轴
主轴：子元素流动的方向。
侧轴和主轴垂直

justify-content

justify-content: flex-start #主轴出发的方向
justify-content: flex-end #主轴结束的方向（这是因为可能上下也可能左右，因此用开始和结束）
justify-content: center #居中
justify-content: space-between #在ABC中间加上空白
justify-content: space-around #中间和旁边都加上空白
justify-content: space-evenly #中间和旁边的空白是一样的距离

align-items