Web前端入门第 34 问：CSS 常见布局

Web 网页中，所有元素都是盒模型构成的，一个大盒子套一个或者多个小盒子，再用更大的盒子把大盒子给圈起来，这就构成了基本的 HTML 结构，再利用 CSS 把盒子装修得好看一些，最后把它放在正确位置，就是我们所看到的网页。
布局的作用就是要把元素摆放在合适的位置，让网页看起来不显得空闹闹的，也不要显得拥挤。
要摆放元素到合适的位置不是设置某一个元素能达到效果的，而是经常需要父元素和子元素配合，才能达到目标。
元素堆叠

看这么一段的代码，没有任何控制布局情况下，元素会按照出现顺序进行堆叠显示

1.   1
2.   2
3.   3
4.   4
5.   5

复制代码

效果：

需求一

现要求元素控制在一行显示。
flex 弹性盒子

给外层盒子添加 display: flex; 即可将元素改为弹性盒子。

1. .box {
2.   display: flex;
3. }

复制代码

效果：

grid 网格

让外层盒子变为网格，可让元素在一行中显示。

1. .box {
2.   display: grid;
3.   grid-template-columns: repeat(auto-fit, 30px);
4. }

复制代码

效果：

inline-block 内联块

除了 flex，还可以控制子元素显示为内联块 inline-block，让元素在一行中显示。

1. .box .item {
2.   display: inline-block;
3. }

复制代码

效果：

注意：inline-block 让元素变为了内联块，会像文字、图片一样排版，所以元素之间会存在空隙，其空隙其实是元素之间的换行符造成的，可设置 font-size 为 0，让元素之间没有空隙。
float 元素浮动

还可以给元素添加浮动，让元素在一行中显示。

1. .box .item {
2.   float: left;
3. }

复制代码

效果：

需求二

现要求元素在盒子中居中显示。
flex 弹性盒子

1. .box {
2.   display: flex;
3.   justify-content: center;
4. }

复制代码

grid 网格

1. .box {
2.   display: grid;
3.   grid-template-columns: repeat(auto-fit, 30px);
4.   justify-content: center;
5. }

复制代码

inline-block 内联块

1. .box {  text-align: center;}.box .item {
2.   display: inline-block;
3. }

复制代码

效果

为什么没有 float ？float 没办法做到元素居中显示，嗯...也不是做不到，只是需要通过计算获得元素 margin 或 padding，用边距做出出居中效果。
需求三

元素两端对齐显示。
flex 弹性盒子

1. .box {
2.   display: flex;
3.   justify-content: space-between;
4. }

复制代码

grid 网格

1. .box {
2.   display: grid;
3.   grid-template-columns: repeat(auto-fit, 30px);
4.   justify-content: space-between;
5. }

复制代码

效果

可以明显看到，随着需求越来越复杂，能用的方法就越少了。
其实 float 和 inline-block 也不是做不到这种效果，还是像上面说的一样，必须要通过计算获得边距，才能做出我们想要的样子。
需求四

元素等宽间距显示。
flex 弹性盒子

1. .box {
2.   display: flex;
3.   justify-content: space-around;
4. }

复制代码

grid 网格

1. .box {
2.   display: grid;
3.   grid-template-columns: repeat(auto-fit, 30px);
4.   justify-content: space-around;
5. }

复制代码

效果

需求五

如果元素大小不统一，默认显示效果是这样：

怎么让元素垂直居中显示？
flex 弹性盒子

1. .box {
2.   display: flex;
3.   justify-content: space-around;
4.   align-items: center;
5. }

复制代码

grid 网格

1. .box {
2.   display: grid;
3.   grid-template-columns: repeat(auto-fit, 30px);
4.   justify-content: space-around;
5.   align-items: center;
6. }

复制代码

效果

需求六

第二个元素定位在盒子右上角。
这时候 flex、grid 都不能实现，只能通过 position 来实现了。
position 元素定位

position 属性对应的值有：

• static 默认值，元素在正常文档流中显示。
  
• relative 相对定位，元素在正常文档流中显示，但可以通过 top、right、bottom、left 属性来定位。
  
• absolute 绝对定位，元素脱离正常文档流，且不再占用文档流空间，可以通过 top、right、bottom、left 属性来设置位置，其位置相对于最近的非 static 祖先元素，如果找不到，则相对于浏览器窗口。
  
• sticky 粘性定位，如果元素正常显示，则跟 static 一样，如果元素跑到视口之外，则跟 absolute 一样，但其位置相对 可滚动 的祖先元素。
  
• fixed 固定定位，元素脱离正常文档流，切不再占用文档流空间，可以通过 top、right、bottom、left 属性来设置位置，其位置相对于浏览器窗口。
  

实现需求：

1. .box {
2.   position: relative;
3. }
4. .box .item:nth-child(2) {
5.   position: absolute;
6.   right: 0;
7.   top: 0;
8. }

复制代码

效果

总结

本文仅介绍了常见的布局场景，开发中的需求千奇百怪，本文介绍的方法可能无法满足需求，这时候就需要发挥想象，在这些基础的布局方法上进行组合了。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！