什么是布局?
就是根据需要,将 dom 元素进行排列。
常规流动布局
常规是什么,常规就是默认,就是啥也不做,事情本来应该是什么样就什么样。所以常规流动布局就是你的 html 文档结构怎么样,就怎么。比如下面的四个矩形,就是按照它们在文档中出现的顺序依次布局的,排列的也是很整齐,没什么不妥。
css
<div style="background: black;height: 50px;"></div>
<div style="background: green; height: 50px;"></div>
<div style="background: red; height: 50px;"></div>
<div style="background: blue; height: 50px;"></div>
在常规流动布局中,有块级元素和行内元素两种元素,块级元素宽度自动 100%,行内元素如果不设置的话则视内容多少而定,会按照不同的排列方式依次排列,直到占满换行。
常规布局是日常开始中用到最多的,但也是最容易被忽略的。因为一切都是默认的,除非想用其它布局方式,否则都会当做理所当然,自然也就想不起来。
关于常规流布局,我觉得养成良好的 html 文档写作习惯非常重要。在一开始就把结构梳理好了,能节约大量用来布局的事件。
flex 弹性盒子布局
flex弹性盒子布局是我见过的代码里面用到非常多的一个。那么,什么是 flex 弹性盒子布局呢?
什么是flex 弹性盒子布局?
首先,它是一个布局方式。 那它是什么样的布局方式呢? 是一种可以把元素按行逐个排列的方式,有点类似于正常的流布局。但是它和正常的流布局不同的地方在于,它对每行的空间分配具有非常大的灵活性。既可以对某一行设置固定的宽高,也可以让它基于容器变化。 它还是一种可以改变元素默认的排列方式,让原先逐行排列的布局变成逐列排序。并且可以灵活的分配每列的空间。 它还可以调整元素的显示顺序。
所以,flex 布局就是一种可以按行或者按列布局,且能够灵活分配空间的布局方式
怎么使用flex布局?
- 首先需要确定需要布局的元素,然后把它们放到一个容器里。
比如下面这四个矩形,现在想用 flex 来重新布局成纵向的。首先需要将它们放到一个盒子里面,并将其 display 属性设置为 flex,使其成为容器。如下
css
<div class="container">
<div style="background: black;height: 50px;width: 100px;"></div>
<div style="background: green;height: 50px;width: 100px;"></div>
<div style="background: red; height: 50px;width: 100px;"></div>
<div style="background: blue; height: 50px;width: 100px;"></div>
</div>
<style>
.container{
display: flex;
}
</style>
原先的一列四行一下子变成了一行四列。但是我们又额外的写了一些代码,就是给每一个子元素都加了宽,否则就啥都看不见。这是因为把容器设置为 flex 后,它里面的子元素都会跟着发生变化。这块先搁置一下,继续探索被设置成 flex 的容器。
一个容器被设置成flex 后,默认是按照列来布局的,要改变这一属性,就需要匹配的另外一个属性flex-direction
,它的默认值就是 row
,也就是按所有内容都放到一行,还有一个参数值叫column
,也就是所有内容都放到一列。对应的,它们两个都有一个反转值,也就是row-reverse
,column-reverse
。下面的例子使用了row-reverse
.
这里首先能看到的是矩形的位置做了个反转,但同时整体的位置也发生了调换,直接从左边跳到了右边去了。这是因为当容器被设置成 flex 盒子时,会默认设置两条从左上角出发的线,一条向右,叫主轴main axis
,一条向下,叫交叉轴 cross axis
,出发点叫 start,结束点叫 end。当把flex-direction
的属性值设置为column
时,主轴和交叉轴互换。而使用对应的 reverse 时,起点则换到了盒子右上角。因此,这里我们使用了flex-direction: row-reverse;
才出现了现在看到的情况。
现在只有四个宽度为 100px的矩形,在一行内还能放的下,宽度或者数目发生了巨大变化的时候,要怎么办才好呢?为了解决这个问题,可以在盒容器上使用flex-wrap
属性,来让多余的内容怎么展现。它有三个值,默认情况下是nowrap
,也就是一直往后堆砌;第二个值是"wrap",也就是放不下就换行接着放;第三个值是wrap-reverse
,结果就是把 wrap 的结果反转一下就行,让换行后的内容在上边。
flex-direction
和flex-wrap
一起有一个简写形式叫flex-flow
,后面有两个值,第一个是flex-direction
,第二个是flex-wrap
的值。
在布局中,对齐一直都是让人头疼的事,flex 很好的解决了这个问题。
justify-content
属性解决了主轴方向对齐的问题,有 5 个参数值,分别是flex-start
和主轴起点对齐,默认就是左对齐,flex-end
和主轴结束点对齐,默认就是右对齐, center
相对主轴居中对齐, space-between
两端对齐,中间分出均等的空间, space-around
均分空间,每个项目之间的空间相等。
align-items
属性解决了交叉轴上对齐的问题,它也有五个属性,分别是flex-start
起点对齐, flex-end
终点对齐,center
中点对齐,baseline
第一行文字的底部对齐,stretch
没有设置高度或者项目高度为 auto,自动填满。
此外,还有一个属性,align-content
,当 flex-wrap
属性为 wrap 或者 wrap-reverse 时,并且子项目换行了的话,就需要align-content
,它有flex-start
起点对齐, flex-end
终点对齐,center
中点对齐, space-between
与交叉轴两端对齐,轴线之间的间隔平均分布。 space-around
每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。stretch
没有设置高度或者项目高度为 auto,自动填满。
到了这里,容器上面的所有属性就学习完了。剩下的就是每个子项上的属性。
首先出场的是order
,字如其名,决定每个子项目的顺序,默认为 0,数字越小越靠前。比如下面代码,把绿色放到最前面只需要把它的 order 属性设置为-1 即可。
css
<div style="display: flex;">
<div style="background: black;height: 50px;width: 100px;"></div>
<div style="background: green;height: 50px;width: 100px;order: -1;"></div>
<div style="background: red; height: 50px;width: 100px;"></div>
<div style="background: blue; height: 50px;width: 100px;"></div>
</div>
第二个属性,flex-grow
字如其名,决定在有空余空间的时候,是否放大,默认情况下不变,默认值为 0,如果为非 0 的,则按数字对应的比例均分剩余空间。如下代码,将还得区域设置为 1,则其独占剩余空间
css
<div style="display: flex;">
<div style="background: black;height: 50px;width: 100px;flex-grow: 1;"></div>
<div style="background: green;height: 50px;width: 100px;order: -1;"></div>
<div style="background: red; height: 50px;width: 100px;"></div>
<div style="background: blue; height: 50px;width: 100px;"></div>
</div>
和flex-shrink
相对的则是,当空间区域不足时,是否缩小。默认值为 1,缩小,0 不缩小。不能是负数,其它的则根据数字等比例缩小。
flex-basic
用来定义不缩放的时候,子项目的大小。flex
属性是以上三个属性flex-grow
,flex-shrink
,flex-basic
的缩写形式,默认值为 0 1 auto。
除了可以控制自己的大小缩放外,flex item 还可以控制自己的对齐方式,这个值就是 align-self
。它有auto | flex-start | flex-end | center | baseline | stretch;
6个值。
到这里 flex 布局就学习完了。总结一下就是 flex container 配置对齐,换行,位置,flex item 自己决定大小和位置。
grid 网格布局
和 flex 弹性盒子布局一样, grid 网格布局也是现代代码里常见的布局之一,尤其是那些只为 chrome 写代码的人里面。
和 flex 不一样的是,flex 只能是操作一行或者一列,也就是通过flex-direction
确定主轴的方向,然后去操作行或者列,而 grid 则可以同时操作行和列。
grid 布局的用法
- 和 flex 一样,首先需要一个容易盒子,然后把需要布局的项目放在里面,称为子项目。这里把 container 的
display
属性设置为'grid'。为其它子项目设置背景颜色,就出现了下面的情况。看起来和正常流布局没啥区别,先不管。
1
2
3
4
5
6
7
8
9
xml
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
<div class="item item7">7</div>
<div class="item item8">8</div>
<div class="item item9">9</div>
</div>
<style>
.container{
display: grid;
}
.item: {
}
.item{
border:solid 1px black;
}
</style>
- 为了改变所有项目挤在一起丑陋的样子,需要使用
grid-template-rows
和grid-template-columns
来设置每一行每一列有多高,有多少个子项目。具体用法如下
css
.container{
grid-template-row: lineHeight1 lineHeight2 lineHeight3;
grid-template-column: rowWidth1 rowWidth2 rowWidth3;
}
有多少行就定义多少个行高即可,有多少个列定义多少个列高即可。这里一共有9 个子项目,所以设置成 3*3 的即可。
可以分别先只设置grid-template-rows
和 grid-template-columns
看看效果,如果只设置一个,另外一个则被默认为只有 1,对应的宽度或者高度则为元素本身的宽高。
1
2
3
4
5
6
7
8
9
xml
<div class="container">
<div class="item item1" >1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
<div class="item item7">7</div>
<div class="item item8">8</div>
<div class="item item9">9</div>
</div>
<style>
.container{
display: flex;
grid-template-rows: 100px 100px 100px;
grid-template-columns: 100px 100px 100px;
}
.item: {
border:solid 1px black;
}
</style>
repeat()函数
这样,一个 grid 的布局就出来了,记住这两个属性,一些简单的 grid 布局就能完成。但是它的强大不止于此。如果有很多的行或者列,一个个写下去就很麻烦,这个时候就要用到repeat()
函数。它接收两个值,第一个是要重复的次数,第二个是要重复的模式。
比如前面我们的行和列是这样写的
css
.container{
grid-template-rows: 100px 100px 100px;
grid-template-columns: 100px 100px 100px;
}
使用repeat()
则可以这样写,效果是一样的。
css
.container{
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
}
如果我们模式重复,但是行高或者列高有区别,比如 每三行重复一次,像这样的重复重复 5。则可以这样写
css
.container{
grid-template-rows: repeat(5, 100px 120px 200px);
grid-template-columns: repeat(5, 100px 120px 200px);
}
auto-fill 关键字
那如果是行和列不确定怎么办呢?传auto-fill
关键字给repeat即可。这样,就会根据行高和行宽自动填满容器。
arduino
.container{
grid-template-rows: repeat(auto-fill, 100px 120px 200px);
grid-template-columns: repeat(auto-fill, 100px 120px 200px);
}
fr 关键字
在定义行高行宽时,合法的单位都可以使用,比如 px,百分比等。但是远不止于此,它还提供了一个类似百分比,但是强于百分比的关键单位 fr
。它用来按比例划分空间,1fr 代表一个单位,如下代码代表占据全部空间。需要注意的是grid-template-rows
如果容器没有定义高度,则会失效。
css
.container{
grid-template-rows: 1fr;
grid-template-columns: 1fr;
}
如下代码则代表第一列宽度是 3 分之一,第二列宽度是 3 分之二
css
.container{
grid-template-columns: 1fr 2fr;
}
和其它单位一样,fr 在这里可以混合着用。
minmax()
除了按比例划分,还可以给定一个变化的区间范围。这就是minmax()函数,它接收两个参数,分别为最小和最大值,表示空间不足时至少也要这个长度,即使空间很大也不能超过这个长度。
auto 关键字
在定义长度的过程中,有些区域的大小我们并不在乎,只是想填点东西进去显得不那么突兀,就可以使用auto
关键词,可以让空间自由伸缩。
行和列之间的留白 grid-row-gap grid-column-gap
有时候子项目之间需要一个留白,这个时候我们就可以使用 grid-row-gap
和grid-column-gap
来定义。也可以用他两的简写形式grid-gap
来定义,它接受两个值,第一个是行之间的留白,第二个是列之间的留白。
开个脑洞,如果不用grid-gap
,用其它属性,这个留白怎么实现,有那些坑?
1
2
3
4
5
6
7
8
9
xml
<div class="container">
<div class="item item1" >1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
<div class="item item7">7</div>
<div class="item item8">8</div>
<div class="item item9">9</div>
</div>
<style>
.container{
display: flex;
grid-template-rows: 100px 100px 100px;
grid-template-columns: 100px 100px 100px;
grid-row-gap: 10px;
grid-column-gap: 10px;
}
.item: {
border:solid 1px black;
}
</style>
grid-auto-flow
是否记得 flex 布局里面有个flex-direction
属性来决定是主轴的方向,也就是怎么排列。在 grid 布局里面也有个类似的属性值叫 grid-auto-flow
来决定子项目的排列方向,它决定了优先排列的顺序是按行还是按列。所以它接收 row
和column
两个值,默认是row
,其实还有两个变体row dense
和column dense
,变体后面再继续学习。
- grid-auto-flow的属性是为 row
1
2
3
4
5
6
7
8
9
xml
<div class="container">
<div class="item item1" >1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
<div class="item item7">7</div>
<div class="item item8">8</div>
<div class="item item9">9</div>
</div>
<style>
.container{
display: flex;
grid-template-rows: 100px 100px 100px;
grid-template-columns: 100px 100px 100px;
grid-row-gap: 10px;
grid-column-gap: 10px;
grid-auto-flow: row;
}
.item: {
border:solid 1px black;
}
</style>
- grid-auto-flow的属性是为 column
1
2
3
4
5
6
7
8
9
xml
<div class="container">
<div class="item item1" >1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
<div class="item item7">7</div>
<div class="item item8">8</div>
<div class="item item9">9</div>
</div>
<style>
.container{
display: flex;
grid-template-rows: 100px 100px 100px;
grid-template-columns: 100px 100px 100px;
grid-row-gap: 10px;
grid-column-gap: 10px;
grid-auto-flow: column;
}
.item: {
border:solid 1px black;
}
</style>
对比发现,grid-auto-flow 的属性为 row 时,从左往右依次排列数字,也就是行优先。为 column 时,从上到下一次排列,也就是列优先。
子项目对齐方式 justify-items,align-items,place-items
justify-items
用来设置水平对齐方式,align-items
用来设置垂直对齐方式。place-items
是它们两的简写。
它们的属性值完全相同,所以一起记就可以。除了stretch,其它对齐方式都是不管子项的宽度的,因此要小心。
- start:对齐单元格的起始边缘。
- end:对齐单元格的结束边缘。
- center:单元格内部居中。
- stretch:拉伸,占满单元格的整个宽度(默认值)。
项目的对齐方式 justify-content align-content place-content
这三个属性用来定义整个内容区域的对齐方式 justify-content
表示水平,align-content
表示垂直,place-content
是二者的简写。由于两者的属性值一模一样,为了节省时间以justify-content
为例学习一下
justify-content
为start
1
2
3
4
5
6
7
8
9
xml
<div class="container">
<div class="item item1" >1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
<div class="item item7">7</div>
<div class="item item8">8</div>
<div class="item item9">9</div>
</div>
<style>
.container{
display: flex;
grid-template-rows: 100px 100px 100px;
grid-template-columns: 100px 100px 100px;
grid-row-gap: 10px;
grid-column-gap: 10px;
grid-auto-flow: column;
column;justify-content: start;border:solid red 1px
}
.item: {
border:solid 1px black;
}
</style>
justify-content
为end
1
2
3
4
5
6
7
8
9
xml
<div class="container">
<div class="item item1" >1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
<div class="item item7">7</div>
<div class="item item8">8</div>
<div class="item item9">9</div>
</div>
<style>
.container{
display: flex;
grid-template-rows: 100px 100px 100px;
grid-template-columns: 100px 100px 100px;
grid-row-gap: 10px;
grid-column-gap: 10px;
grid-auto-flow: column;
column;justify-content: end;border:solid red 1px
}
.item: {
border:solid 1px black;
}
</style>
justify-content
为center
1
2
3
4
5
6
7
8
9
xml
<div class="container">
<div class="item item1" >1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
<div class="item item7">7</div>
<div class="item item8">8</div>
<div class="item item9">9</div>
</div>
<style>
.container{
display: flex;
grid-template-rows: 100px 100px 100px;
grid-template-columns: 100px 100px 100px;
grid-row-gap: 10px;
grid-column-gap: 10px;
grid-auto-flow: column;
column;justify-content: center;border:solid red 1px
}
.item: {
border:solid 1px black;
}
</style>
justify-content
为stretch
stretch 属性值在没指定列宽时会自动填满,但是指定了就和 start 没有区别。这里我特意注释掉了列宽。
1
2
3
4
5
6
7
8
9
xml
<div class="container">
<div class="item item1" >1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
<div class="item item7">7</div>
<div class="item item8">8</div>
<div class="item item9">9</div>
</div>
<style>
.container{
display: flex;
grid-template-rows: 100px 100px 100px;
<!-- grid-template-columns: 100px 100px 100px; -->
grid-row-gap: 10px;
grid-column-gap: 10px;
grid-auto-flow: column;
column;justify-content: stretch;border:solid red 1px
}
.item: {
border:solid 1px black;
}
</style>
justify-content
为space-around
每一个项目两侧间隔相等且不合并。所以可以看到两个项目之间要宽一点。这里开一下脑洞,margin 合并的知识点还记得不?
1
2
3
4
5
6
7
8
9
xml
<div class="container">
<div class="item item1" >1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
<div class="item item7">7</div>
<div class="item item8">8</div>
<div class="item item9">9</div>
</div>
<style>
.container{
display: flex;
grid-template-rows: 100px 100px 100px;
grid-template-columns: 100px 100px 100px;
grid-row-gap: 10px;
grid-column-gap: 10px;
grid-auto-flow: column;
column;justify-content: space-around;border:solid red 1px
}
.item: {
border:solid 1px black;
}
</style>
justify-content
为space-between 项目间间隔相等,与边缘没有间隔
1
2
3
4
5
6
7
8
9
xml
<div class="container">
<div class="item item1" >1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
<div class="item item7">7</div>
<div class="item item8">8</div>
<div class="item item9">9</div>
</div>
<style>
.container{
display: flex;
grid-template-rows: 100px 100px 100px;
grid-template-columns: 100px 100px 100px;
grid-row-gap: 10px;
grid-column-gap: 10px;
grid-auto-flow: column;
column;justify-content: space-around;border:solid red 1px
}
.item: {
border:solid 1px black;
}
</style>
justify-content
为space-evenly 项目与项目的间隔相等,项目与容器边框之间也是同样长度的间隔。对比 space-around 学习
1
2
3
4
5
6
7
8
9
xml
<div class="container">
<div class="item item1" >1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
<div class="item item7">7</div>
<div class="item item8">8</div>
<div class="item item9">9</div>
</div>
<style>
.container{
display: flex;
grid-template-rows: 100px 100px 100px;
grid-template-columns: 100px 100px 100px;
grid-row-gap: 10px;
grid-column-gap: 10px;
grid-auto-flow: column;
column;justify-content: space-evenly;border:solid red 1px
}
.item: {
border:solid 1px black;
}
</style>
容器之内布局之外的行高列高 grid-auto-rows, grid-auto-columns
有时候我们虽然在精心布局,但是难免出现一些特殊的情况在布局之外,但是容器之内出现子项,这个时候就有一个难题。比如咱们 demo 里的这个9 个格子本来没事,但是要有一个 10 怎么办?
1
2
3
4
5
6
7
8
9
10
xml
<div class="container">
<div class="item item1" >1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
<div class="item item7">7</div>
<div class="item item8">8</div>
<div class="item item9">9</div>
</div>
<style>
.container{
display: flex;
grid-template-rows: 100px 100px 100px;
grid-template-columns: 100px 100px 100px;
grid-row-gap: 10px;
grid-column-gap: 10px;
}
.item: {
border:solid 1px black;
}
</style>
看上面例子,就是凉拌。这肯定不行,所以需要给他们一个默认值,所以就有grid-auto-rows
和grid-auto-columns
的用途了。给它们设置一个默认值看看。
1
2
3
4
5
6
7
8
9
10
xml
<div class="container">
<div class="item item1" >1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
<div class="item item7">7</div>
<div class="item item8">8</div>
<div class="item item9">9</div>
</div>
<style>
.container{
display: flex;
grid-template-rows: 100px 100px 100px;
grid-template-columns: 100px 100px 100px;
grid-row-gap: 10px;
grid-column-gap: 10px;
grid-auto-rows: 100px;
}
.item: {
border:solid 1px black;
}
</style>
grid-template-areas 为每一个区域命名
为每一个区域娶一个名字,这个知识点现在知道就行。后面用。 如
css
.container{
grid-template-rows: 100px 100px 100px;
grid-template-columns: 100px 100px 100px;
grid-template-areas: 'a b c'
'd e f'
'g h i';
}
关于 grid 布局 container 的知识点到这里就学习完了。没想到这么多,总结一下,首先声明 display 属性为 flex。然后设置 grid-template-rows 和 grid-template-columns决定布局。为了防止出现布局外的因素,可以使用 grid-auto-rows,grid-auto-columns来设置超出子项的默认布局。通过 grid-auto-flow 来决定渲染的顺序是按行还是按列。justify-items和 align-items 分别用来定义水平和垂直对齐方式,justify-conent和 align-content 用来决定内容区域的对齐方式。
子项目 决定自己的大小和位置
可以通过指定位置的方式,子项目决定自己占据的布局空间。
- grid-column-start属性:左边框所在的垂直网格线
- grid-column-end属性:右边框所在的垂直网格线
- grid-row-start属性:上边框所在的水平网格线
- grid-row-end属性:下边框所在的水平网格线
- grid-area 放置项目到grid-template-areas 命名的空间
1
2
3
4
5
6
7
8
9
10
xml
<div class="container">
<div class="item item1" >1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
<div class="item item7">7</div>
<div class="item item8">8</div>
<div class="item item9">9</div>
</div>
<style>
.container{
display: flex;
grid-template-rows: 100px 100px 100px;
grid-template-columns: 100px 100px 100px;
grid-row-gap: 10px;
grid-column-gap: 10px;
grid-auto-rows: 100px;
grid-column-start:2;
grid-column-end: 4;
grid-row-start:2;
grid-row-end: 3;
}
.item: {
border:solid 1px black;
}
</style>
子项内的对齐方式
justify-self决定水平对齐,align-self 决定垂直对齐,place-self 是简写。它们的属性值一样。 如下
- start:对齐单元格的起始边缘。
- end:对齐单元格的结束边缘。
- center:单元格内部居中。
- stretch:拉伸,占满单元格的整个宽度(默认值)。
这一部分完全花费的时间完全超出了我的预料,能看到的有缘人自己写demo实践吧。
浮动布局
flex 布局和 grid 布局是现代 web 开发常用的布局方式,然而在它们出现之前,浮动布局则被经常用到。
float 属性
元素设置了 float 属性后就会向某一个方向浮动过去,内联样式和文字会围绕着它,也就是说碰到文字和内联样式,它会根据自己的大小占据文档流,而遇到块级样式,则会重合。脱离文档。块级样式盒子会和它重合,但是文字依然会围绕着它。如下
浮动
这个是块级盒子
css
<div style="height: 100px;background: #e74478;">
<div style="height: 50px;background: green;width: 50px;float: left;opacity: 0.6;">浮动</div>
<div style="background: yellow;height: 50px;">这个是块级盒子<div>
</div>
- left 向左浮动
- right 向右浮动
- inline-start 向容器开始的一侧浮动向开始的一侧浮动,这个具体在左边还是右边受
direction:
属性值的影响,ltr 在左,rtl 在右。 - inline-end 向容器浮动结束的一侧浮动,具体在左边还是右边受
direction:
属性值的影响。
clear
学习了 float,clear 属性就不得不学习,不然会不完整。如果一个元素旁边有浮动元素,内联的会紧挨着它,块级这会和它贴在一起,为了打破这种局面,就需要 clear 属性值。
- left 清除元素左边的浮动,把当前元素移到下一行
- right 清除元素右边的浮动,把元素移到下一行
- both 清除元素两边的浮动
- inline-start 清除启始位置的浮动。具体看 direction 属性的值
- inline-end 清楚结束位置的浮动。具体看 direction 属性的值
这里有个容易混淆的概念,就是 clear 属性是用在换行的元素上,而不是当前浮动的元素上,当然这里这个需要换行的元素也可以是另外一个浮动元素。
比如下面的绿色盒子和蓝色盒子,如果想让蓝色盒子换到下一行,则给它添加clear:left;
,想让绿色盒子换到下一行,则得想想其他办法,因为它蓝色在它后面。
css
<div style="background: #e74478;height: 200px;">
<div style="float: left;width: 50px;height: 50px;background:green;"></div>
<divstyle="float: left;width: 50px;height: 50px;background: blue;"></div>
</div>
多列布局
多列布局之前一直被我忽略,今天复习才发现,原来还可以这么写。它很简单,就四个属性。
- column-count 一共有多少多少列。 auto 根据宽度和容器大小自定义 大于 0 的具体数字,代表有多少列。
- column-width 每一列容器的最小宽度, 两个参数值,auto,根据容器大小和列个数自定义 。最小宽度,合法的 css 值即可,小于这个值就不缩小了,其它时候会自适应。
- column-gap 列之间的宽度
- column-rule 列直接的分割线,写法类似 border
xml
<div class="container">
<div class="item item1"></div>
<div class="item item2"></div>
<div class="item item3"></div>
<div class="item item4"></div>
</div>
<style>
.container{
column-width: 100px;
column-count: 2;
}
.item1{
background: aliceblue;
}
.item2{
background: aqua;
}
.item3{
background: #d8d873;
}
.item4{
background: blue;
}
</style>