CSS布局基础(待补充完整)

努力的Greatiga

发布于 2022-09-26 07:39:05

39000

代码可运行

文章被收录于专栏：前端开发与网站建设前端开发与网站建设

运行总次数：0

代码可运行

1 文档流

要了解css的布局，就要先了解什么是文档流。文档流就是HTML元素的一种排列规则。
而正常文档流就是在不用样式控制之下，html元素的默认排版方式。它的规则如下：

自上而下排列，每个块元素独占一行，行内元素自左向右排列，不会独占一行

<div>独占一行</div>
从左向右<span></span><img />

这是在不使用样式的请况之下正常排列方式。倘若使用样式改变了某些元素的位置，那么就称为脱离文档流。也正是因为如此，才能有丰富的页面布局方式。否则大家都只是遵循上述两种方式，那就太枯燥单一了。

2 浮动布局

float属性，一般情况下元素默认是不浮动的，一旦添加该属性，元素就会向右或者向左浮动。看例子

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  header {
    border: 2px rebeccapurple solid;
  }
  p {
    border: 3px greenyellow solid;
  }
  .float {
    border: 1px red solid;
    /* height: 100px; */
  }
  .float div:nth-child(1) {
    border: 1px blue solid;
    float: left;
  }
  .float div:nth-child(2) {
    border: 1px black solid;
    float: left;
  }
  .float div:nth-child(3) {
    border: 1px green solid;
    float: left;
  }

</style>
<body>
  <header>
    <span>行内元素</span><span>不会导致高度塌陷</span>
    <p>这是正常流文字文字</p>
  </header>
  <div class="float">
    <div>box1</div>
    <div>box2</div>
    <div>box3</div>
    <p>这是浮动文字</p>
  </div>
</body>
</html>

经过对比可以发现，在不使用浮动之前，三个盒子都按照块元素的正常文档流排列方式，并且父元素的高也随着他们的内容大小变化。而一旦使用了浮动元素。会发现几点变化：

三个盒子的块元素变为了行内元素的排列方式，按照浮动属性值自左向右
父元素的高度不在随他们变化，直接没有了高度，当然他们依然相对于父元素排列，只是没有将其撑开

这里也引入一个问题

2-1 父元素高度坍塌

出现于上述的那种情况，因为那三个盒子脱离了文档流。自己排布，他们虽然相对于父元素排布，但却不是父元素的正常文档流的内容，所以无法将其撑开，从而导致父元素的高度回缩，也就是坍塌。

2-2 文字环绕浮动

虽然浮动元素脱离了文档流，但并不是不对正常流文档元素产生影响。上述例子中，虽然没有把父元素撑开，但是与它同级的兄弟元素并不会直接跑到它上面去，而是在它之下按照一下两个规则排列

2-2-1 若是浮动元素后紧跟 -> h1 ~ h6、p

这一类段落标签会自动换行，并且自带内边距

这一类标签在页面中会紧贴在浮动元素下面 ( 这个紧贴不是边框紧贴！而是段落标签中的文字紧贴浮动元素 )，依然独占一行，并且里面的文字内容不会自动排到最左边，而是相对于最右边的浮动元素的后面

2-2-2若是浮动元素后紧跟 -> 其他块元素

这一类无论是否有内容，都不会排到浮动元素后面，而是直接相对于父元素按照正常文档流排列，好像是直接无视了之前的浮动元素一样，认为自己就是父元素之下的第一个子元素

同样若是这里面的文字与浮动元素有交集，那么也是按照之前的方式排列

当然内边距，外边距，边框这些属性在浮动元素之间，仅仅是在它们之间是生效的。与其他正常文档流不产生效果

2-3 清除浮动

嗯？为什么还要清除浮动？直接不浮动就行了啊？
其实这是给浮动元素之后的元素用的，并不是给浮动元素本身用的；之所以要这样，是因为紧跟在浮动元素后面的普通元素都会受到影响。就比如上述说的两种紧跟浮动元素之后排列的方式。我能不能让它不要忽视浮动元素，而是排在浮动元素之后呢？能不能让段落标签不这么紧贴着，而是以边框为基准排在浮动元素后面呢？答案是肯定的。

**使用 claer: both; clear: left; clear: right;**就可以
使用之后紧跟在浮动元素之后的就不会乱排布，而是按正常文档流排布，不过是排在了浮动元素后面，就好似把浮动元素看成了普通的行内元素一样，不会无视它，也不会覆盖它了。

3 定位布局

这也是脱离文档流的一种方式，它通过显式的设置定位坐标及大小来实现

3-1 position:fixed

这个比较简单，是相对于浏览器而言，导航栏通常就这么用；直接脱离文档流，别的元素将会无视它并且挤上来

3-2 position:relative

相对于原来的位置定位，原来位置就是正常文档流的位置。而且周边元素不会挤上来，看似好像是它已经走了，但是原来的位置还完好无损的留着。

3-3 position:absolute

绝对定位，也是直接脱离文档流，别的元素将会无视它并且挤上来

3-4 position:static

默认定位，也是每一个元素的初始定位，也就是正常文档流

4 BFC

这个东西其实不是一个规范的知识点，它是一个规则概念。为了解决普通元素与普通元素之间，普通元素与浮动元素之间产生的属性混乱问题
它的定义就是，Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。