CSS布局技巧笔记｜青训营

用户1657100955633
101 阅读7分钟

1.浮动(float)

1.1 属性值

  • none：不浮动
  • left：左浮动
  • right：右浮动
  • inherit：继承父元素浮动属性

1.2 用法

<div class="box">
    <div class="left"></div>
    <div class="right"></div>
</div>

.box {
    width: 600px;
    height: 300px;
    background-color: #eee;
}
​
.left {
    float: left;
    width: 200px;
    height: 200px;
    background-color: blue;
}
​
.right {
    float: right;
    width: 200px;
    height: 200px;
    background-color: yellow;
}

image-20230825202508184.png

1.3 特点

  1. 浮动会使元素脱离文档流，不在占据文档流中的位置
  2. 浮动的元素之间没有间隙，但是不会重叠
  3. 浮动的元素可以与文字图片等产生类似于word文档”环绕“，”嵌入“等效果

1.4 清除浮动方法

浮动虽然使用起来非常方便，但是却会带来一些问题，比如浮动使得子元素脱离文档流，父元素的高度无法被撑开，浮动元素与非浮动元素重叠等，所以在使用浮动后我们需要清除浮动造成的影响，这里列出四种：

  1. 父元素设置固定高度

    只要父元素设定了高度，子元素就不会再影响父元素了，但是基本只能适用于页面完全固定的情况，现在很多时候都需要响应式的布局即元素的属性值需要动态变化，也就是不能写死高度值。

  2. 空div法

    在浮动元素的后面加一个空的块级元素div，并设置属性clear: both，这个属性可以简单理解为将前后元素的浮动清除了，实际上是通过触发BFC(块级格式化上下文)来达到清除浮动的效果的，当然这种方法也不是非常好，空div会使得html结构非常冗余。

    <div class="box">
    <div class="left"></div>
    <div class="empty"></div>
</div>

    .box {
    width: 600px;
    border: 1px solid black;
}
​
.left {
    float: left;
    width: 200px;
    height: 200px;
    background-color: blue;
}
​
.empty {
    clear: both;
}

image-20230825204947876.png

  1. 伪元素清除(最常用)

    相当于是空div法的改进，不再通过html中添加div设置clear属性来清除浮动，而是利用伪元素after来实现，这样html就不会产生冗余，只需要对浮动的父元素设置一个属性就行了

    <div class="box clearfix">
    <div class="left"></div>
</div>

    .box {
    width: 600px;
    border: 1px solid black;
}
​
.left {
    float: left;
    width: 200px;
    height: 200px;
    background-color: blue;
}
​
.clearfix:after {
    content:'';
    display: block;
    clear: both;
    height: 0;
}

image-20230825204947876.png

  1. overflow属性清除

    通过对浮动的父元素添加overflow:hidden|auto|scroll属性来清除子元素的浮动，实际上原理还是触发BFC

    <div class="box">
    <div class="left"></div>
</div>

    .box {
    width: 600px;
    border: 1px solid black;
    overflow: hidden;
}
​
.left {
    float: left;
    width: 200px;
    height: 200px;
    background-color: blue;
}

image-20230825204947876.png

1.5 块级格式化上下文(BFC)

简单来说，BFC就是一个规则，只要满足其触发的条件，就可以使得子元素与其外部完全隔离，内外互相都无法再产生影响，所以清除浮动的方法大部分都与BFC有关，触发BFC的常见方式如下：

  1. 根元素（即 <html> 元素）会自动触发一个 BFC
  2. 使用 CSS 属性 overflow 的值为除 "visible" 以外的其他值（例如 "auto"、"hidden"、"scroll"）
  3. 使用 CSS 属性 position 的值为 "absolute" 或 "fixed"
  4. 使用 CSS 属性 display 的值为 "inline-block"、"flex"、"grid" 之类的块级盒子

2.定位(position)

2.1 属性值

  • static: 静态定位（默认值）
  • relative：相对定位，不脱离文档流，相对于当前的位置定位
  • absolute：绝对定位，脱离文档流，相对于最近的非static祖先元素定位
  • fixed：固定定位，脱离文档流，相对于浏览器视口定位，常用于网页小广告

2.2 控制属性

  • top：相对于定位的元素顶部距离
  • bottom：相对于定位的元素底部距离
  • left：相对于定位的元素左侧距离
  • right：相对于定位的元素右侧距离
  • index：显示层级，数值越大显示越在上面

2.3 用法

<div class="box">
    <div class="item-top"></div>
    <div class="item-bottom"></div>
</div>

.box {
    position: relative;
    width: 600px;
    height: 400px;
    background-color: #eee;
}
​
.item-top {
    position: absolute;
    top: 100px;
    left: 100px;
    z-index: 1;
    width: 200px;
    height: 200px;
    background-color: blue;
}
​
.item-bottom {
    position: absolute;
    top: 100px;
    left: 100px;
    z-index: 10;
    width: 100px;
    height: 400px;
    background-color: yellow;
}

image-20230825212858102.png

2.4 简单记法

“子绝父相”，父元素设置position: relative，子元素设置position: absolute，非常常用

3.弹性布局(flex)

3.1 属性

  • display: flex 块级元素设置flex
  • display: inline-flex 杭集元素设置flex

3.2 控制属性

  • flex-direction 决定主轴方向
  • flex-wrap 定义如果一条轴线排不下，如何换行
  • flex-flow 前两个的简写
  • justify-content 定义项目在主轴上的对齐方式
  • align-items 定义项目在交叉轴上如何对齐
  • align-content 定义多根轴线的对齐方式，如果只有一根轴线，不起作用

详细属性值如下：

// 主轴排列方向
@flex-direction: row | row-reverse | column | column-reverse;
// 容器内项目是否可换行
@flex-wrap: nowrap | wrap | wrap-reverse;
// 上面两种属性的简写
@flex-flow: <flex-direction> || <flex-wrap>;
// 主轴对齐方式
@justify-content: flex-start | flex-end | center | space-between | space-around;
// 副轴对齐方式
@align-items: stretch | flex-start | flex-end | center | baseline;
// 副轴多根轴线的对齐方式
align-content: stretch | flex-start | flex-end | center | space-between | space-around;
// 单个元素对齐方式
align-self: stretch | start | end | center;
// 项目在容器中的排列顺序，数值越小，排列越靠前,默认值为0
order: <integer>;
// 项目占据的主轴空间，主轴为row时，相当于优先级更高的width
flex-basis: auto | <length>;
// 项目的放大比例
flex-grow: <number>;
// 项目的缩小比例
flex-shrink: <number>;
// 上面三种属性的简写
@flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

3.3 理解

flex的容器有两条轴线，一条主轴，一条副轴，两条轴互相交叉，所以副轴又成为交叉轴，主轴不一定是横向的，这取决于flex-direction属性，如果属性值为column，那么主轴就是纵向的，副轴就是横向的，然后是对齐方式，总共有四个对齐，justify-content设置子元素在主轴的对齐方式，align-items设置子元素在副轴的对齐方式，align-content设置多条副轴时副轴的对齐方式，align-self对单个子元素设置各自的对齐方式，注意，前三种属性是设置在父元素上的，最后一种设置在子元素上，并且flex布局中不存在justify-items，因为flex永远只有一条主轴，当设置换行属性flex-wrap后就有可能有多条副轴。

3.4 用法

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

// 三点
ul {
    width: 400px;
    height: 400px;
    background-color: yellowgreen;
    display: flex;
    justify-content: space-around;
}
​
li {
    width: 100px;
    height: 100px;
    background-color: pink;
}
​
ul>li:nth-child(1) {
    align-self: flex-start;
}
ul>li:nth-child(2) {
    align-self: center;
}
ul>li:nth-child(3) {
    align-self: flex-end;
}

image-20230825215059382.png

4.网格布局(grid)

4.1 属性

  • display: grid 块级元素设置grid
  • display: inline-grid 杭集元素设置grid

4.2 控制属性

  • grid-template-columns: 200px 100px 200px 声明了三列，宽度分别为 200px 100px 200px
  • grid-template-rows: 50px 50px 声明了两行，行高分别为 50px 50px
  • grid-row-gap: 5px 网格行间距
  • grid-column-gap: 5px 网格列间距
  • grid-gap: 5px 网格间距
  • grid-template-areas：". one one" "two two three" 定义区域
  • grid-area: one 标识区域
  • justify-items：center 单元格内容水平居中
  • align-items：center 单元格内容垂直居中
  • justify-content：center 整个内容区域在容器里水平居中
  • align-content：center 整个内容区域在容器里垂直居中

4.3 用法

<div class="box">
    <div class="one item">one</div>
    <div class="two item">two</div>
    <div class="three item">three</div>
</div>

.box {
    width: 350px;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 100px  100px  100px;
    grid-template-areas:
      ". one  one"
      "two two three";
    background-color: #eee;
    justify-content: center;
    color: #fff;
}
​
.item {
    height: 80px;
    text-align: center;
}
​
.one {
    grid-area: one;
    background-color: pink;  
}
​
.two {
    grid-area: two;
    background-color: blue;
}
​
.three {
    grid-area: three;
    background-color: yellowgreen;
}

image-20230825230324806.png

5.总结

现在最常用的还是flex布局，能够支持响应式，浏览器兼容性较好，float布局在能正确避开浮动问题的情况下也是非常好用的，position布局语法非常简单，对于存在指定的偏移量时非常好用，grid布局在面对非常复杂的布局时相较于一维的flex布局好用的多，但是其浏览器兼容性与flex相比还不是很好，总的来说，这些布局方式各有各的特点，都有最适合使用的场合，还是都需要掌握的。

avatar
文章
阅读
粉丝