CSS布局方式

前端方
243 阅读7分钟

文档流布局（默认）

文档流布局是指元素按照其在文档中的顺序从上到下、从左到右依次排列的布局方式。

示例

<p>I love my cat.</p>

<ul>
  <li>Buy cat food</li>
  <li>Exercise</li>
  <li>Cheer up friend</li>
</ul>

<p>The end!</p>

image.png

特点

  • 元素完全按照源码中出现的先后次序显示
  • 块状元素都会在包含元素内自上而下按顺序堆叠分布。
  • 行内元素都会在包含元素内从左到右水平分布显示，类似于文本流，超出一行后会自动换行

覆盖默认的布局行为

在Web开发中，有时需要覆盖默认的布局行为以实现自定义的布局效果。以下是一些常见的方式：

  1. display属性：常见的取值包括block、inline、inline-block、flex、grid等。
  2. float属性：float属性用于将元素向左或向右浮动，从而实现文字环绕图片等效果。
  3. position属性：常见的取值包括static、relative、absolute和fixed等。
  4. 表格布局：表格布局可以实现多列等宽布局和单元格合并等效果
  5. 多列布局：使用多列布局可以将内容分为多列排列

脱离文档流

在Web开发中，当一个元素脱离文档流时，它将不再按照文档流的规则进行排列，而是可以自由地放置在页面上的任何位置。这样可以实现一些特殊的布局效果。

  1. float: left/right; ：将元素浮动在文本周围，使得文本环绕在元素周围。
  2. position: absolute; ：将元素从文档流中脱离，相对于父级元素或最近的已定位祖先元素进行定位。
  3. position: fixed; ：将元素固定在浏览器窗口的某个位置，不会随页面滚动而移动。

浮动布局（float）

示例

<section>
  <div class="left">1</div>
  <div class="left">2</div>
  <div class="right">3</div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
     Morbi tristique sapien ac erat tincidunt, sit amet dignissim
     lectus vulputate. Donec id iaculis velit. Aliquam vel
     malesuada erat. Praesent non magna ac massa aliquet tincidunt
     vel in massa. Phasellus feugiat est vel leo finibus congue.</p>
</section>


section {
  box-sizing: border-box;
  border: 1px solid blue;
  width: 100%;
  float: left;
}

div {
  margin: 5px;
  width: 50px;
  height: 150px;
}

.left {
  float: left;
  background: pink;
}

.right {
  float: right;
  background: cyan;
}

浮动前:
image.png
浮动后:
image.png

语法

float: left;
float: right;
float: none;
float: inherit;

float 属性有四个可能的值：

  • left — 将元素浮动到左侧。
  • right — 将元素浮动到右侧。
  • none — 默认值，不浮动。
  • inherit — 继承父元素的浮动属性。

特点

脱标：脱离文档流
贴边：吸附到其父容器的左边
字围：正常布局中位于该浮动元素之下的内容，此时会围绕着浮动元素，填满其右侧的空间
收缩：div设置为左浮后，其宽度不再是占满一行，而是收紧为内部元素的宽度

清除浮动

一个浮动元素会被移出正常文档流，且其他元素会显示在它的下方。如果我们不想让剩余元素也受到浮动元素的影响，可以通过添加 clear 属性实现。
clear 属性接受下列值：

  • left：停止任何活动的左浮动
  • right：停止任何活动的右浮动
  • both：停止任何活动的左右浮动
<h1>Simple float example</h1>

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

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. </p>

<p class="cleared">Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>

body {
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
    font: .9em/1.2 Arial, Helvetica, sans-serif;
}

.box {
    width: 150px;
    height: 100px;
    border-radius: 5px;
    background-color: rgb(207,232,220);
    padding: 1em;
}

盒子浮动前
image.png
盒子浮动后

.box {
    float: left; /*盒子浮动*/
    margin-right: 15px;
    width: 150px;
    height: 100px;
    border-radius: 5px;
    background-color: rgb(207,232,220);
    padding: 1em;
}

image.png
清除浮动后

.cleared {
  clear: left;
}

image.png

高度塌陷问题

如果一个父元素浮动元素，而没有设置明确的高度，那么该父元素的高度将会塌陷，从而导致布局混乱。
高度塌陷是由于浮动元素或内联元素从文档流中脱离，导致父元素计算高度时无法正确地将它们纳入考虑。

<div class="wrapper">
  <div class="box">Float</div>
  <p class="special">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.</p>
</div>

.wrapper {
  background-color: rgb(79, 185, 227);
  color: #fff;
}

.box {
  width: 150px;
  height: 100px;
  border-radius: 10px;
  background-color: rgb(207, 232, 220);
  padding: 1em;
}

盒子浮动前
image.png
盒子浮动后

.box {
    float: left;
    width: 150px;
    height: 100px;
    border-radius: 10px;
    background-color: rgb(207, 232, 220);
    padding: 1em;
}

image.png
继续把段落删除

<div class="wrapper">
  <div class="box">Float</div>
</div>

image.png
有三种方法可以处理这个问题

clearfix 小技巧

先向包含浮动内容及其本身的盒子后方插入一些生成的内容，并将生成的内容清除浮动。

.wrapper::after {
  content: "";
  clear: both;
  display: block;
}

这个方法以能够生效，是因为创建了所谓的 块格式化上下文（BFC）。BFC可以包含浮动元素。

使用 overflow

一个替代的方案是将包裹元素的 overflow 属性设置为除 visible 外的其他值。

.wrapper {
  background-color: rgb(79,185,227);
  padding: 10px;
  color: #fff;
  overflow: auto;
}

这个方法之所以能够生效，也是因为创建了块格式化上下文（BFC）。

display: flow-root

一个较为现代的方案是使用 display 属性的 flow-root 值。它可以无需小技巧来创建块格式化上下文（BFC），在使用上没有副作用。

.wrapper {
  background-color: rgb(79,185,227);
  padding: 10px;
  color: #fff;
  display: flow-root;
}

现在重载页面，高度塌陷问题就解决了。
image.png

定位布局（position）

CSS定位布局是一种基于CSS定位属性的布局方式，它通过设置元素的位置属性（position）和偏移属性（top、bottom、left、right）来实现对元素的布局定位。

语法

在CSS中，position属性可以取以下值：

  • static（默认值）：元素在文档流中正常布局
  • relative：相对于元素自身的位置进行定位
  • absolute：元素脱离文档流，相对于最近的非static定位祖先元素进行定位
  • fixed：元素脱离文档流，相对于浏览器窗口进行定位

static定位

元素的默认值，即没有定位，遵循正常的文档流对象。
image.png

relative定位

在 中添加一个positioned 的 class 到第二个段落，然后为其设置CSS。

.positioned {
  position: relative;
  top: 30px;
  left: 30px;
}

image.png
结果这可能不是你期待的——为什么它移动到底部和右边，而不是我们指定的顶部和左边？听起来不合逻辑，但这只是相对定位工作的方式——你需要考虑一个看不见的力，推动定位的盒子的一侧，移动它的相反方向。所以例如，如果你指定 top: 30px;一个力推动框的顶部，使它向下移动 30px。

absolute定位

现在尝试改变代码中的位置声明如下：

.positioned {
  position: absolute;
  top: 30px;
  left: 30px;
}

image.png
绝对定位的元素脱离了正常文档布局流，第一和第三元素已经靠在一起，就像第二个元素不再存在！
top，bottom，left和right指定元素应距离每个包含元素的边的距离，而不是指定元素应该移入的方向。所以在这种情况下，我们说的绝对定位元素应该位于从“包含元素”的顶部 30px，从左边 30px。

fixed定位

固定定位的方式和绝对定位的工作方式完全相同，只有一个主要区别：绝对定位将元素固定在相对于其位置最近的祖先。（如果没有，则为初始包含它的块）而固定定位固定元素则是相对于浏览器视口本身。
标题固定定位前：
image.png
标题固定定位后

h1 {
  position: fixed;
  top: 0;
  width: 500px;
  margin: 0 auto;
  background: white;
  padding: 10px;
}

image.png
可以看到，标题固定前，标题和内容一起滚动，标题固定定位后，标题保持固定，内容显示向上滚动并消失在其下。

avatar
文章
阅读
粉丝