CSS的常见网页布局

太阳与星辰

已于 2025-03-24 19:09:47 修改

阅读量922

点赞数 31

分类专栏： CSS 前端文章标签： css 前端布局定位

于 2025-03-23 16:07:39 首次发布

本文链接：https://blog.youkuaiyun.com/fageaaa/article/details/146456426

版权

前端同时被 2 个专栏收录

258 篇文章

订阅专栏

CSS

17 篇文章

订阅专栏

1.常用网页布局

文档流
浮动
定位
表格布局
弹性盒子
网格布局
…

2.文档流

普通文档流，也称为标准流或常规流，是HTML元素的默认布局方式。

块级元素（如<div>, <p>, <h1>等）从上到下垂直排列，每个块级元素占据其父元素（容器）的整个宽度（除非设置了明确的宽度），并在内容上下形成“流”。
内联元素（如<span>, <a>, <img>等）则在块级元素内部从左到右水平排列，直到行被填满，然后换行继续排列。

3.浮动

3.1 什么是浮动

CSS 浮动（float）是一种将元素从其正常文档流中移出，并使其向左或向右浮动的布局方式。浮动元素的周围内容会环绕其周围，常用于图文混排和简单的多列布局。

3.2 基础用法

float 属性值

left：元素向左浮动，周围内容环绕其右侧。
right：元素向右浮动，周围内容环绕其左侧。
none：默认值，元素不浮动。
inherit：继承父元素的 float 属性值。

浮动元素的行为
当一个元素被设置为浮动时，它会脱离正常的文档流，向指定方向移动，其他非浮动元素会围绕它排列。浮动元素的宽度需要明确指定，否则它将根据内容自动调整。

.float-left {
  float: left;
  width: 200px;
}
.float-right {
  float: right;
  width: 200px;
}

在这里插入图片描述

3.3 高度塌陷和BFC

3.3.1 高度塌陷

浮动元素脱离了正常的文档流，这意味着它们不会影响到后续元素的位置。然而，包含浮动元素的父容器可能会“塌陷”，因为父容器无法感知浮动子元素的高度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      body,html{
        padding: 0;
        margin: 0;
      }
      .container{
          background-color: #409eff;
      }
      .float-left-child {
        float: left;
        width: 200px;
        height: 100px;
        background-color: #e6a23c;
      }
      .child{
          height: 50px;
          width: 300px;
          background-color: #67c23a;
      }
     
    </style>
</head>
<body>
<div class="container">
    <div class="float-left-child">浮动元素</div>
    <div class="child">非浮动元素</div>

</div>
</body>
</html>

在这里插入图片描述

在上述例子中，如果不处理，.container容器的高度可能无法包含.float-left-child元素(并且child元素也会默认向左靠齐,浮动元素有200px被浮动元素遮住了)，导致布局问题。

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

大致概念：
通俗来说，如果某元素开启了BFC，那就可以把它当成一个独立的区域，在这个区域内就有自己的渲染规则，这个规则和之前的规则不一样。

了解一下BFC的布局规则：

内部的Box会在垂直方向一个接一个地放置： BFC中的元素会依次排列，每个元素的左边与包含块的左边对齐（对于从右向左的布局则相反）。
相邻的两个Box的垂直间距由margin决定： BFC中的相邻块级元素的垂直间距取决于它们之间的margin值，垂直相邻的两个块级元素的margin会重叠。
BFC区域不会与浮动元素重叠： BFC会阻止浮动元素覆盖BFC区域内的内容，确保正常的布局
BFC的区域不会被浮动元素所覆盖： BFC会计算浮动元素的高度，确保浮动元素不会溢出到BFC区域之外。
BFC区域的计算高度包括浮动元素： BFC会包含其所有子元素，包括浮动元素在内，计算出BFC的高度。

触发BFC的方式有多种，常见的触发方式包括：

根元素（html）
浮动元素（float不为none）
绝对定位元素（position为absolute或fixed）
display属性值为inline-block、table-cell、table-caption、flex、inline-flex
overflow属性值不为visible的块级元素

应用场景:

防止margin重叠(开启BFC)
清除内部浮动(给父元素开BFC,如overflow:hidden)
自适应多栏布局

3.4 清除浮动

本质:
清除浮动的本质是清除浮动元素脱离标准流造成的影响。

策略
闭合浮动。只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子。

3.4.1 额外标记法(隔墙法)

隔墙法，就是在最后一个浮动的子元素后面添加一个额外空标签（块级标签），添加清除浮动样式。

<style>
    .root1{
        border: 10px solid red;
    }
    .box1{
        width: 100px;
        height: 100px;
        background-color: #409eff;
        float: left;
    }
    .extra-box{
        clear: both;
    }
</style>


<!--   额外标记法(隔墙法)-->
   <div class="root1">
       <div class="box1"></div>
       <div class="extra-box"></div>
   </div>

在这里插入图片描述

3.4.2 父元素添加overflow(开启BFC)

.root2 {
    border: 10px solid red;
    overflow: hidden;
}
.box2 {
    width: 100px;
    height: 100px;
    background-color: #409eff;
    float: left;
}

<!--   父元素添加overflow(开启BFC)-->
<div class="root2">
    <div class="box2"></div>
</div>

在这里插入图片描述

3.4.3 ::after伪元素法

原理：自动在父盒子里的末尾添加一个行内盒子，我们将它转换为块级盒子，就间接实现了额外标签法。

.root3 {
    border: 10px solid red;
}
.root3::after{
    content: "";
    clear: both;
    display: block;
}
.box3 {
    width: 100px;
    height: 100px;
    background-color: #409eff;
    float: left;
}

<!--   ::after伪元素法-->
<div class="root3">
    <div class="box3"></div>
</div>

3.4.4 双伪元素法

额外标签法的升级版，也是给给父元素添加代码。

原理：自动在父盒子里的两端添加两个行内盒子，并把它们转换为表格，间接实现了额外标签法。

.clearfix::before,
.clearfix::after{
  content: '';
  display: table;
  clear: both;
}

上述代码中，其中.clearfix::before是为了解决外边距重叠问题

.clearfix::before{
   content: '';
   display: table;
}

.clearfix::after是为了解决高度塌陷问题

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

记得给父元素加上clearfix。clearfix 这个样式就可以同时解决高度塌陷和外边距重叠的问题。当你在遇到这些问题时，直接使用clearfix这个类即可，他就可以帮你轻松搞定css中的两大难题。

总结:

高度塌陷问题，一般用::after
外边距重叠问题，一般用::before

4.定位

4.1 static默认值

未脱离文档流

4.2 relative相对定位

未脱离文档流，不改变元素性质(块还是块，行内还是行内)。

4.3 absolute绝对定位

脱离文档流,改变元素性质(行内变成块，块的宽高被内容撑开)

注意:在绝对定位时候，过渡约束变成了九个值；

水平布局等式：left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 其父元素的宽度
垂直布局等式：top + margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom + top = 其父元素的高度
在没有auto时，会自动调整top/bottom/left/right

思考:为什么要子绝父相?

子绝是因为要让子元素脱离文档流，不占用位置，这样子可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子；
父相有两个原因，第一个是父元素需要用定位来限制子元素的位置;第二是因为父元素需要占用位置。

4.4 fixed固定定位

脱离文档流。可以看成是一种特殊的绝对定位。

absolute和fixed的区别:

absolute:会随滚动而滚动；
fixed:不会随滚动而滚动；

常用场合：

fixed固定定位，只针对浏览器窗口定位，上下左右，不会随着窗口大小改变，固定不变，例如固定位置的小广告，常用于网站边缘的公司联系方式和快速回到顶部
absolute绝对定位，脱离文档流，没有父元素，上下左右设置是针对于浏览器窗口，不占据位置，会随着窗口大小与页面一起改变

4.5 sticky粘滞定位

脱离文档流。 粘性定位可以被认为是相对定位和固定定位的混合。

特点:

是相对于最近的滚动祖先 包含滚动视口的（固定定位特点）
粘性定位占有原先的位置（相对定位特点）
必须添加 top 、left、right、bottom 其中一个才有效
粘滞定位可以在元素到达某个位置时将其固定

思考:sticky怎么导航吸顶功能?

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      body,*{
        margin: 0;
        padding: 0;
      }
      nav{
        width: 100%;
        background-color: #d9534f;
        position: sticky;
        top: 10px;
      }
    </style>
</head>
<body>
  <h1>标题</h1>
  <nav>
    <span>电脑</span>
    <span>手机</span>
    <span>鞋子</span>
    <span>衣服</span>
  </nav>
  <ul>
    <li>电脑选项1</li>
    <li>电脑选项2</li>
    <li>电脑选项3</li>
    <li>电脑选项4</li>
    <li>电脑选项5</li>
    <li>电脑选项6</li>
    <li>电脑选项7</li>
    <li>电脑选项8</li>
    <li>电脑选项9</li>
    <li>电脑选项10</li>
    <li>电脑选项11</li>
    <li>电脑选项12</li>
    <li>电脑选项13</li>
    <li>电脑选项14</li>
    <li>电脑选项15</li>
    <li>电脑选项16</li>
    <li>电脑选项17</li>
    <li>电脑选项18</li>
    <li>电脑选项19</li>
    <li>电脑选项20</li>
    <li>电脑选项21</li>
    <li>电脑选项22</li>
    <li>电脑选项23</li>
    <li>电脑选项24</li>
    <li>电脑选项25</li>
    <li>电脑选项26</li>
    <li>电脑选项27</li>
    <li>电脑选项28</li>
    <li>电脑选项29</li>
    <li>电脑选项30</li>
    <li>电脑选项31</li>
    <li>电脑选项32</li>
    <li>电脑选项33</li>
    <li>电脑选项34</li>
    <li>电脑选项35</li>
    <li>电脑选项36</li>
    <li>电脑选项37</li>
    <li>电脑选项38</li>
    <li>电脑选项39</li>
    <li>电脑选项40</li>
    <li>电脑选项41</li>
    <li>电脑选项42</li>
    <li>电脑选项43</li>
    <li>电脑选项44</li>
    <li>电脑选项45</li>
    <li>电脑选项46</li>
    <li>电脑选项47</li>
    <li>电脑选项48</li>
    <li>电脑选项49</li>
    <li>电脑选项50</li>
    <li>电脑选项51</li>
    <li>电脑选项52</li>
    <li>电脑选项53</li>
    <li>电脑选项54</li>
    <li>电脑选项55</li>
    <li>电脑选项56</li>
    <li>电脑选项57</li>
    <li>电脑选项58</li>
    <li>电脑选项59</li>
    <li>电脑选项60</li>
    <li>电脑选项61</li>
    <li>电脑选项62</li>
    <li>电脑选项63</li>
    <li>电脑选项64</li>
    <li>电脑选项65</li>
    <li>电脑选项66</li>
    <li>电脑选项67</li>
    <li>电脑选项68</li>
    <li>电脑选项69</li>
    <li>电脑选项70</li>
    <li>电脑选项71</li>
    <li>电脑选项72</li>
    <li>电脑选项73</li>
    <li>电脑选项74</li>
    <li>电脑选项75</li>
    <li>电脑选项76</li>
    <li>电脑选项77</li>
    <li>电脑选项78</li>
    <li>电脑选项79</li>
    <li>电脑选项80</li>
    <li>电脑选项81</li>
    <li>电脑选项82</li>
    <li>电脑选项83</li>
    <li>电脑选项84</li>
    <li>电脑选项85</li>
    <li>电脑选项86</li>
    <li>电脑选项87</li>
    <li>电脑选项88</li>
    <li>电脑选项89</li>
    <li>电脑选项90</li>
    <li>电脑选项91</li>
    <li>电脑选项92</li>
    <li>电脑选项93</li>
    <li>电脑选项94</li>
    <li>电脑选项95</li>
    <li>电脑选项96</li>
    <li>电脑选项97</li>
    <li>电脑选项98</li>
    <li>电脑选项99</li>
    <li>电脑选项100</li>
  </ul>
</body>
</html>