CSS 合集 1 (布局)

1. 盒子模型的宽度如何计算

box-sizing: content-box （默认值）

元素内容区宽度（width）不包含边框（border）和内边距（padding）的值

offsetWidth = 内容宽度（width） + 内边距（padding）+ 边框（border）

例如：

offsetWidth = 200（width）+ 20 * 2（padding）+ 2 * 2（border）= 244

所以，盒子的实际宽度为 244px

box-sizing: border-box

元素内容区宽度（width）包含边框（border）和内边距（padding）的值

offsetWidth = 内容宽度（width）

例如：

offsetWidth = 200（width）

所以，盒子实际的宽度为 200px（width）

2. margin 纵向重叠（margin collaspe）问题

相邻元素的 margin-top 和 margin-bottom 会发生重叠

例如：

.div1 {
  background-color: aqua;
  margin-bottom: 10px;
}

.div2 {
  background-color: yellow;
  margin-top: 10px;
}

拓展：空白内容的 <p> 也会重叠

例如：

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis similique quibusdam recusandae, suscipit quia nam assumenda sint, impedit beatae illum, delectus placeat corrupti voluptatem dignissimos libero dolore eveniet minima eum.</p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officia accusantium eaque optio nihil corrupti porro voluptatibus id molestias? Soluta saepe quia libero fuga quidem? Modi, esse! Dolor voluptatibus magni dicta?</p>

3. margin 负值问题

• margin-top 负值

元素向上移动

例如：

html：

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

css：

.div1 {
  background-color: aqua;
}

.div2 {
  background-color: bisque;
  margin-top: -10px;
}

.div3 {
  background-color: aquamarine;
}

div2 向上移动了 10px，导致与 div1 重合了一部分

• margin-left 负值

元素向左移动

例如：

html：

<div>
  <div class="div3">div3</div>
  <div class="div4">div4</div>
</div>

css：

.div3 {
  background-color: aquamarine;
}

.div4 {
  background-color: yellowgreen;
  margin-left: -10px;
}

div4 向左移动了 10px，导致与 div3 重合了一部分

• margin-right 负值

右侧元素左移

例如：

html：

<div>
  <div class="div3">div3</div>
  <div class="div4">div4</div>
</div>

.div3 {
  background-color: aquamarine;
  margin-right: -10px;
}

.div4 {
  background-color: yellowgreen;
}

会将 div3 右侧元素 div4 向左移动了 10px，导致与 div3 重合了一部分

• margin-bottom 负值

下方元素上移

例如：

html：

<div class="div1">div1</div>
<div class="div2">div2</div>

css：

.div1 {
  background-color: aqua;
  margin-bottom: -10px;
}

.div2 {
  background-color: bisque;
}

会将 div1 下方元素 div2 向上移动了 10px，导致与 div1 重合了一部分

4. clearfix 清除浮动的方法

清除浮动的背景

解决父元素高度坍塌的问题：一个块级元素如果没有设置高度 height 的话，其高度是由子元素撑开的。而如果子元素使用了浮动之后，子元素会脱离标准文档流，也就是说，父元素中没有其他元素撑开高度的话，父元素的高度就失效了，就是所谓的高度坍塌。

清除浮动的三种方法

• 在浮动元素后添加一个空元素，在 CSS 中将该空元素的 clear 属性设置为 both

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

.clearfix {
  clear: both;
}

缺点：无语义的 HTML 标签，代码不够优雅。

优化：通过父元素设置 ::after 伪类选择器方式改写

.container::after {
  content: '',
  display: block;
  clear: both;
}

• 将父元素的 overflow 属性设置为除 visible 以外的其他属性值，如 auto / hidden

• 将父元素的 display 属性设置为 flow-root

  注：flow-root 存在兼容性问题。

后两种方法，会将容器 变成一个 BFC（Block Format Context）块级格式化上下文。

5. 什么是 BFC ？如何应用？

BFC：Block Format Context，块级格式化上下文

一块独立渲染区域，内部元素的渲染不会影响边界外的元素。

形成 BFC 的条件

• float 不是 none
• position 是 absolute 或 fixed
• overflow 不是 visible
• display 是 flex 或 inline-block 等

BFC 的应用

清除浮动 clearfix

6. float 布局问题

圣杯布局和双飞翼布局的目的

• 三栏布局，中间一栏最先加载和渲染（内容最重要）
• 两侧内容固定，中间内容随着宽度自适应
• 一般用于PC网页

如何实现圣杯布局和双飞翼布局

• 使用 float 布局
• 两侧使用 margin 负值，以便和中间内容横向重叠
• 防止中间内容被两侧覆盖，圣杯布局用 padding，双飞翼布局用 margin

圣杯布局

body {
  min-width: 550px;
}

#header {
  text-align: center;
  background-color: #f1f1f1;
}

#center {
  background-color: #ccc;
  width: 100%;
}

#left {
  position: relative;
  background-color: yellow;
  width: 200px;
  margin-left: -100%;
  right: 200px;
}

#right {
  background-color: red;
  width: 150px;
  margin-right: -150px;
}

#footer {
  text-align: center;
  background-color: #f1f1f1;
}

#container {
  padding-left: 200px;
  padding-right: 150px;
}

/* clearfix */
#container::after {
  content: '';
  display: block;
  clear: both;
}

#container .column {
  float: left;
}

<div id="header">header</div>
<div id="container">
    <div id="center" class="column">center</div>
    <div id="left" class="column">left</div>
    <div id="right" class="column">right</div>
</div>
<div id="footer">footer</div>

双飞翼布局

body {
  min-width: 550px;
}

#main {
  width: 100%;
  height: 200px;
  background-color: #ccc;
}

#left {
  width: 190px;
  height: 200px;
  background-color: #0000FF;
  margin-left: -100%;
}

#right {
  width: 190px;
  height: 200px;
  background-color: #FF0000;
  margin-left: -190px;
}

.col {
  float: left;
}

#main-wrap {
  margin: 0 190px;
}

<div id="main" class="col">
    <div id="main-wrap">
        main
    </div>
</div>
<div id="left" class="col">
    left
</div>
<div id="right" class="col">
    right
</div>

7. flex 布局问题

• flex-direction 主轴方向
• justify-content 主轴对齐方式
• align-items 交叉轴对齐方式
• flex-wrap 换行方式
• align-self 子元素在交叉轴的对齐方式，脱离 align-items 的约束

详情参考 Flex 布局教程：语法篇

8. flex 实现一个三点的骰子

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

.box {
	display: flex;
	justify-content: space-between;	
}

.item:nth-child(2) {
	align-self: center;
}

.item:nth-child(3) {
	align-self: flex-end;
}