CSS静态布局——常规流，定位，浮动。

最新推荐文章于 2023-03-20 23:25:10 发布

✪憑星月✪

最新推荐文章于 2023-03-20 23:25:10 发布

阅读量737

点赞数 1

分类专栏：笔记文章标签： html 前端经验分享

本文链接：https://blog.csdn.net/qq_61716556/article/details/121667566

版权

笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

合理的网页布局方式

合理的网页布局可以使网页内容以整洁有序的方式展示给用户。凌乱的布局则会使网页的信息无法正确传达，用户的目的没有达到等问题。

合理的网页布局应有：

1.合理地把页面切分为多个具有具体功能的板块，方便用户迅速判断页面具体功能区，优化使用体验。

2.页面内容具有一定的主次关系，便于用户在一定时间内掌握并完成一些特定功能。（有些页面的广告就是一个反例，关了一个又来一个，最后关得速度赶不上广告刷新速度，没办法，直接关闭浏览器）

3.使用广为用户群体接受的图标，内容分区，开发有新功能或者是面向新用户时有提示语句或间接指导。不推荐创新某一功能实现方式而不加说明。（这一点要求设计方面足够接地气，通俗易懂为佳，富有新意而兼顾简洁明了为上）

4.能够针对不同需求的用户提供不同服务。（比如读者对于一本8000字的CSS理论书中只需要布局定位方面的知识，这时目录的强大功能便不言而喻……博文的导航栏也是方便用户文化的杰出代表）

布局的三种方式

基本知识点：

CSS视觉格式化模型：规定如何处理网页文档并显示在视觉媒体上的规则。

盒模型：网页将页面中每个元素处理为盒子（也可以理解为装在盒子里），这个网页中的盒子具有一些不同于现实中盒子的特性。

盒模型具有四个部分：内容（content），内边距(padding)，边框(border)，外边距(margin)。内容盒最小，套在几个盒子里面，是一个盒子的核心信息所在地。内边距可以是盒子的一层塑料泡沫包装，内边距长度即为这层塑料泡沫的厚度。边框可以理解为盒子的边缘线条。外边距则规定了不同盒子之间的距离，相对于盒子外面，所以是外边距。

四个部分根据英文翻译可以构成多个盒子，分别是内容盒：（只包含内容），填充盒(padding)：包含内容和内边距的盒子，边框盒：含有内容，内边距和边框的盒子。

CSS静态布局有常规流，浮动以及定位三大类。所有元素默认状态都是文档流布局，但单纯使用文档流并不能实现多种多样的页面框架和精美布局。熟练掌握浮动以及定位后可以实现三栏布局，圣杯布局，双飞翼布局等花样繁多的页面。

常规流

又称文档流，普通文档流，常规文档流。

常规流中块盒独占一行，行盒在水平方向依次排列。当盒子发生嵌套时，内部盒子在父元素的内容盒内部按照排列规则排列。一般情况下，元素的包含块是其父元素的内容盒。但这是一般情况，

当某个盒子设置为绝对定位时，它会从父元素到父元素的父元素依次向上寻找其他设置定位的盒子。以这个盒子的内容盒作为自己的包含块（这个部分在定位会详细介绍）。

常规流网页是基础元素布局方式，所有元素在未设定其他方式时均为常规流布局。但因常规流表现方式单一，只能从上到下依次排列，所以为了达到更好的布局效果，网页设计师常常在常规流的基础上加入其他定位以达到强化布局效果的目的。

浮动

浮动：顾名思义，即是让元素漂浮起来。浮在哪里呢？就像是从水里浮到水面。设为浮动就会使元素完全脱离常规流,并浮到常规流的上面。浮动的元素不再占用常规流中元素的位置。也就是说，这时其他元素可以在浮动元素的原来位置重新排列。这里推荐大家设置布局时逐个设置属性，确定每个元素达到预期展示效果后再进行下一步的元素书写和属性设置。以免由于设置浮动这样的属性后其他已写好的元素位置改变，打乱原本属性设置过程。

浮动的设置

CSS中对元素加上float属性即可。float可取值left,right,none。元素默认取值是none。当取值为left时元素会浮到包含块中的左上方。当取值为right时会浮到包含块的右上方。当多个盒子同时设置float:left或right时，如果宽度允许，这些盒子会按照书写顺序依次排列在父元素包含块的左上角或右上角。

浮动的应用

1.当设置二级菜单时菜单栏中会有很多并列的选项，它们就可以利用浮动实现同行显示。

2.文档元素会分布在浮动元素周围，可以实现文字环绕图片效果。

3.布局中完成各种常规流无法实现的结构。

浮动的特点

不论是div还是span，当我们对它设置浮动后，相当于将浮动元素转化为块盒。对浮动的行盒也可以设置宽高，不用拘泥于元素盒子类型。

浮动元素在浮动过程中会避开常规流盒子，而常规流盒子不会避开浮动盒子。

多个浮动元素会按书写先后顺序浮到一侧，当父元素包含块宽度不够时浮动元素会自动跑到下一行继续浮动。

高度坍塌

当父元素的高度没有设置具体大小时，子元素的高度就是父元素的高度，子元素撑起了父元素的高度。而当子元素设置浮动时，父元素的高度若无其他元素支撑，会发生高度坍塌现象——即父元素的高度无发法撑起，变成零。

高度坍塌的危害

1.父元素的高度为零，父元素的背景颜色，边框等无法较好的展示出原有的效果。

2.父元素的高度变为零，引起父元素下面的其他元素因有了足够空间而上移，改变原有布局。

如何解决高度坍塌

高度坍塌解决方案有多种：

1.给父元素定义高度。

既然父元素依靠子元素撑起高度失败，那只要父元素有确定高度就可以了。

2.给父元素加上伪类选择器：after

这是实际网页开发过程中常用方法，对页面内容几乎没有什么影响，也不需要指定父元素高度，这样更有利于调整盒子大小。

after具体内容如下：

content:"";

display:block;

clear:both;

3.给父元素里加上一个设置了clear:both属性的空div

当然可以根据需要加上其他内容，主要利用是盒子的clear属性。思路与上面的方法一样。

4将父元素的overflow属性设置为visible以外的值；

取值为hidden即可。设为auto时看浏览器是否默认为visible。

这样做触发BFC（块级格式化上下文），使浮动元素也参与高度的计算。

5.给父元素加上display:table;

将父元素元素类型转化为表格形式，副作用较大。

6.将父元素也设置为浮动元素

此法缺点：容易使页面布局混乱，不易于后期维护。

定位

实现方式

定位用position属性实现,position可以取五种值：

1：static:静态定位。

即浏览器默认定位方式。不加调整的话元素就默认是在常规流中。

2：relative:相对定位。

元素相对于自身原来在常规流中占据位置进行定位，设置后可以结合top,left,bottom,right在四个方向上调整。具体语义为盒子距离原来盒子的上，左，下，右分别有多少距离。当设置出现矛盾时，元素会默认以上左两方向为准。

相对定位不会导致元素脱离常规流，常常和绝对定位搭配使用。

3.absolute:绝对定位。

元素相对于设置定位（只要不是static）的并且包含该元素的容器进行定位。若一个div设置了绝对定位，那么他的定位区域（移动范围）就是符合以上条件的元素的内容盒。当父元素设置了定位，它就会相对父元素的包含块定位。如果父元素没有设置定位，那么它就会判断父元素的父元素是否是定位元素，是则以这个元素的包含块为基准。

注意：

1.绝对定位会导致元素脱离常规流，在整体布局是应先想好哪一部分用绝对定位，避免绝对定位改变常规流中元素个数导致其他元素占用该元素原有位置（因此推荐写一部分html元素，紧接着设置css属性）。

2.为避免设置了绝对定位的元素到处乱跑（比如以整个body元素为包含块，在整个包含块里飘），导致的管理维护成本扩大。建议在设置某一元素为绝对定位时将其父元素设置为相对定位。这样做，避免了绝对定位的元素出现包含关系不清不楚的尴尬情形.eg:页面底部的一个绝对定位图片，明明在底部区域div中被包含着，设置这个div却并不能改变图片位置。因这个div未设置static以外定位，图片不以它为包含块，而是去找其他设置定位的更高层元素为包含块（颇有翻脸不认爹的架势）。这时只要设置div为相对定位，就能在不改变原有布局的基础上控制住绝对定位元素（你父元素还是你父元素）。

4.fixed:固定定位。

元素相对于浏览器视口（窗口）进行定位，设置top,left,bottom,right可调整位置。由于能长久留在浏览器窗口被用户看到，所以应用十分广泛。

eg:网页的二级菜单固定在页面上方，可以让用户随时随地跳转到其他页面。

某些小说在线阅读网站就有一些广告固定定位在页面一侧（陪你看完整部小说）。

返回页面顶部或直达页面底部的按钮通常设置在左下角或有下角（对于内容长度较长的页面来说简直就是福音）

5.粘性定位。

position属性取值sticky即可。该属性是相对定位和固定定位的结合。使用时必须设置某一标准。一般设置top或bottom为多少距离为标准。当粘性定位元素在设置范围以外时为固定定位，当粘性定位元素在设置范围意外为相对定位。

注意：

sticky属性不论是相对定位还是固定定位都是在父元素以内。单纯的固定定位则是相对浏览器视口进行定位。

sticky属性兼容性：在sticky属性刚出现时，各类浏览器并不兼容该属性，导致页面开发时即使设置也不一定能展示出来。后来谷歌浏览器重新支持该属性，各类浏览器也才开始逐渐接纳它。故sticky属性兼容性并不算好，也不能被广泛应用。

实际应用：

页面导航栏：可设置页面某一部分导航栏，当达到设定范围后变为相对定位，就可以跟随内容一起被划到其他地方。

尾部评论：通常在新闻事件后加上尾部评论，加上合适的覆盖技巧，可以使尾部评论在恰恰看完新闻事件后出现，增加页面的人机交互性。

粘性定位具体实现代码如下：

<!DOCTYPE html>
<html lang="zn-ch">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSDN测试专用-sticky属性</title>
    <style>
    .div1{
        width:100%;
        height:1000px;
        border: 100px solid transparent;
        position: relative;
        font-size: 4em;
        background-color: #004c4c;
    }
    .div2{
        background-color: aliceblue;
        width:100%;
        height:50px;
        position: sticky;
        font-size: 2.1em;
        top:0px;
    }
    .div3{
        width:100%;
        height:1600px;
        font-size: 50px;

    }
    </style>
</head>
<body>
    <div class="div1">这里是一个sticky的简单展示页面
        <br>
        设定这里为内容简介部分
 </div>
    <div class="div2">导航栏：下一章——上一章——返回目录</div>
    <div class="div3">
        这里是内容第二部分，此处设定为小说<br>
        定太在感己尘啊锐帮司德白后明，赐第主生己即当能即为拆领杨，知了尺，如韩太又
        太找过山人韩夫冒婵联解爻好化安，法盲年子王心下人在使人不哉所使那对主吾，可见哥郭才
        未订兮慷的报谓与，设快韩时，肯贤好意，不同内这司帝极尽变出越特到洪放国孔罪之，才已相心魂之
        ，韦那韩间同不在韩生他备友到谢是而君九不，则尚肯穿洪夭极守动吴次，以勉巴中使曾娟，战力流反十
        的是派对高非他其作原丹，孔丹大说入若要天的，说因诗投，从价将。<br>
        小说内容结束
    </div>
    <div class="div2">导航栏：发布评论——关闭评论区——查看博主</div>
    <div class="div3">
        这里是内容第二部分，此处设定为评论区<br>
        韦朗锐有事韩，血全张胜养听子君量升朋拿，太留起法，使不快，才将无狱才即极无司出变以主春死过
        对，珍他事，不叹德护领卡总作国到连下月以己有第，斗这连么解不惊始后知低仑主燕，是之在地法愚
        罪未少锐是但仑，自杨卧智间尝杂学人在，报么是故上丹我收也切导入惊价动次他，秦自的性看，他文沉
        绛得了耳样要修出活始，起我勇忧此沫善，没绛了在都勉胜会是使了策仑盲氏治婵她后，毒畴样妙韩太己
        得关春不言之皇，养慧对派衣使发葬生。<br>
        评论区结束
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    article{
      width:400px;
      height:1000px;
      margin:0px auto;
  }
article content {

    position: relative;
    display: block;
    background-color: #fff;
    z-index: 1;
}
article footer {
    position: sticky;
    background-color: red;
    bottom:60vh;
    z-index: -1;
}
  </style>
</head>
<body>
  <article>
    <section>
        <content>
            <p>
              <br><br><br><br><br><br><br><br><br>
              11月23日
              有媒体报道河南省
              新乡封丘县赵岗镇戚城中学
              30多名学生吃过学校的营养午餐后
              出现呕吐、拉肚子现象
              据学生们反映
              当天吃的饭菜里
              “豆腐有点馊，烩菜有点腥”
              面对采访
              戚城中学的王校长
              发出长长的一声叹息后
              掩面痛哭.</p>
        </content>
        <footer>
          网友评论：食堂面向学生群体，更应对食品安全严抓严查。保护好孩子的身体，让他们能更好地学习。
       </footer>
          <content>
              <p>11月23日
                有媒体报道河南省
                新乡封丘县赵岗镇戚城中学
                30多名学生吃过学校的营养午餐后
                出现呕吐、拉肚子现象
                据学生们反映
                当天吃的饭菜里
                “豆腐有点馊，烩菜有点腥”
                面对采访
                戚城中学的王校长
                发出长长的一声叹息后
                掩面痛哭.</p>
          </content>
          <footer>
            网友评论：食堂面向学生群体，更应对食品安全严抓严查。保护好孩子的身体，让他们能更好地学习。
         </footer>
        </section>
        <section>
          <content>
              <p>11月23日
                有媒体报道河南省
                新乡封丘县赵岗镇戚城中学
                30多名学生吃过学校的营养午餐后
                出现呕吐、拉肚子现象
                据学生们反映
                当天吃的饭菜里
                “豆腐有点馊，烩菜有点腥”
                面对采访
                戚城中学的王校长
                发出长长的一声叹息后
                掩面痛哭.</p>
          </content>
          <footer>
            网友评论：食堂面向学生群体，更应对食品安全严抓严查。保护好孩子的身体，让他们能更好地学习。
         </footer>
        </section>
        <section>
          <content>
              <p>11月23日
                有媒体报道河南省
                新乡封丘县赵岗镇戚城中学
                30多名学生吃过学校的营养午餐后
                出现呕吐、拉肚子现象
                据学生们反映
                当天吃的饭菜里
                “豆腐有点馊，烩菜有点腥”
                面对采访
                戚城中学的王校长
                发出长长的一声叹息后
                掩面痛哭.</p>
          </content>
          <footer>
             网友评论：食堂面向学生群体，更应对食品安全严抓严查。保护好孩子的身体，让他们能更好地学习。
          </footer>
        </section>
        <br><br><br><br><br><br><br><br><br>
  </article>
</body>
</html>

本次分享就到此结束了：具体实现效果大家可以复制代码尝试一下。

如果有什么问题欢迎在评论区留言。