CSS布局技巧｜青训营

0.前言

CSS布局技术可以让我们更优雅地去实现页面的各种布局效果,主要包括浮动、定位、弹性盒子等技巧。合理运用这些技巧可以让页面布局更加灵活、美观。

1.浮动

浮动可以使一个元素浮动到其父容器的左侧或右侧。
浮动的典型应用场景是让多个块级元素横向排列,形成横向的布局结构。但是浮动也会产生问题,浮动元素会卡住下方的普通流内容,解决办法是给下方元素加上清除浮动的样式。
浮动简单代码示例:

css
.left {
  float: left; 
  width: 50%;
}

.right {
  float: right;
  width: 50%;  
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

html
<div class="clearfix">

  <div class="left">
    左侧浮动元素 
  </div>

  <div class="right">
   右侧浮动元素
  </div>

</div>

这个例子中:

左右两个div通过float浮动排列在一行。
clearfix类通过clear清除浮动,防止浮动塌陷浮动的典型应用就是实现多列/多栏布局,利用float可以使元素横向排列。
同时要注意清除浮动,防止影响下方普通流元素的排列。

2.定位

定位允许我们通过弹性地指定元素在页面上的位置。常用的有相对定位、绝对定位和固定定位。定位可以做一些特殊布局效果,如使内容不随滚动条移动等。但定位也要注意层叠规则,控制好元素的层级关系。
定位的简单代码示例:

css
.relative {
  position: relative;
  top: 10px;
  left: 10px;
}

.absolute {
  position: absolute;
  top: 50px;
  left: 50px; 
}

.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
}

html
<div class="relative">相对定位</div>

<div class="absolute">绝对定位</div>

<div class="fixed">固定定位</div>

这个例子展示了三种定位:

相对定位:相对自身静态位置移动。
绝对定位:相对第一个非静态定位父元素定位。
固定定位:相对视窗定位,当滚动时保持固定定位可以实现一些特殊的布局效果,但要注意元素层级问题。固定定位常用于制作界面固定的导航或按钮。

3.弹性盒子

Flex弹性盒子是比较新的布局方式。它可以方便地调整子元素的对齐方式、顺序等,适合一些复杂布局的场景。我们需要掌握flex-direction、flex-wrap等属性的用法。
但是兼容性需要注意,Flex并不被低版本浏览器支持。
Flexbox弹性盒子布局的简单代码示例:

css
.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.flex-item {
  flex: 1; 
  text-align: center;
}

html
<div class="flex-container">
  <div class="flex-item">Item 1</div>  
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>  
</div>

这个例子中:

设置了display: flex使其成为flex容器。
使用flex-direction和flex-wrap控制子元素排列。
每个子元素通过flex: 1平分容器空间Flexbox可以方便地做一些复杂的布局,但要注意兼容性问题。IE10以下不支持。

4.Grid网格布局

Grid网格布局也越来越流行,它通过网格设置来调整内容位置和间距非常方便,设计响应式页面时使用Grid可以大大减少工作量。这些技术可以互相组合使用来实现不同的布局需求。

5.总结

这些技术可以组合使用来实现不同的布局需求。掌握浮动、定位、Flexbox等CSS布局技巧,结合场景需求合理运用是编写页面的重要技能。
同时也要注意不同技术的优缺点,根据浏览器支持情况选用合适的方案。持续学习新的布局技术如Grid、多列等也很重要,这可以大大提高我们实现布局效果的能力。

6.后记

通过这节课的学习,我对CSS的布局技术有了更深入的理解。以前我对CSS的印象只停留在定义文字颜色、调整间距这些比较基础的用法上。但是这次系统地学习浮动、定位、Flexbox、Grid等布局技术之后,让我对CSS有了全新的认识。
原来CSS是可以做这么多复杂布局的,我终于理解了为什么它这么重要。浮动和清除浮动的原理让我受益匪浅,这在实现多列布局时非常有用。定位的层叠关系也是需要注意的,绝对定位和相对定位的区别我现在已经很清楚了。
另外Flexbox和Grid这些新兴的布局方式的确很强大，我对它们都做了大量的练习,发现很多场景下使用Flexbox和Grid会大大简化布局的难度。
以前用浮动和定位实现的布局,用这些新技术就可以快速地实现。当然不同的布局技术也有自己的特点,我需要根据实际情况选择合适的方案。同时兼容性也要注意,毕竟不是所有浏览器都完全支持。
通过这段时间的学习,我对CSS布局的理解进入到一个新的高度。以后在做页面的时候我可以更灵活地运用这些技术了。我会继续深入学习更多CSS新特性,让自己的技术能力达到一个新的台阶。