CSS3 盒模型

CSS CSS 评论

CSS盒模型

所有HTML元素可以看作盒子，在CSS中，”box model”这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，它包括：边距，边框，填充，和实际内容。

盒子模型(Box Model)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div class="box">

    <!-- Margin(外边距) - 清除边框外的区域，外边距是透明的。（margin的长度是允许出现负值的）注意：当以百分比来设置长度时，不管是宽度还是高度，都是按照父元素的宽度百分比计算的（即便是计算上下外边距也是按照父元素的宽度百分比计算的） -->
    <div class="margin">
      <!-- Border(边框) - 围绕在内边距和内容外的边框。 -->
      <div class="border">
          <!-- Padding(内边距) - 清除内容周围的区域，内边距是透明的。（padding的长度是不允许出现负值的）和margin一样，当以百分比来设置长度时，不管是宽度还是高度，都是按照父元素的宽度百分比计算的。 -->
        <div class="padding">
          <!-- Content(内容) - 盒子的内容，显示文本和图像。 -->
          <div class="content">

          </div>
        </div>
      </div>
    </div>

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

双飞翼布局

圣杯布局和双飞翼布局达到的效果基本相同，都是侧边两栏宽度固定，中间栏宽度自适应。 主要的不同之处就是在解决中间部分被挡住的问题时，采取的解决办法不一样，圣杯布局是在父元素上设置了padding-left和padding-right，在给左右两边的内容设置position为relative，通过左移和右移来使得左右两边的内容得以很好的展现，而双飞翼则是在center这个div中再加了一个div来放置内容，在给这个新的div设置margin-left和margin-right 。

  • 双飞翼布局要求
  1. header和footer各自占领屏幕所有宽度，高度固定。
  2. 中间的container是一个三栏布局。
  3. 三栏布局两侧宽度固定不变，中间部分自动填充整个区域。
  4. 中间部分的高度是三栏中最高的区域的高度。
  • 布局实现
  1. left、center、right三种都设置左浮动
  2. 设置center宽度为100%
  3. 设置负边距，left设置负边距为100%，right设置负边距为自身宽度
  4. 设置content的margin值为左右两个侧栏留出空间，margin值大小为left和right宽度
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<style>
  body {
    min-width: 550px;
    font-weight: bold;
    font-size: 20px;
  }
  #header,
  #footer {
    background: rgba(29, 27, 27, 0.726);
    text-align: center;
    height: 60px;
    line-height: 60px;
  }
  #container {
    overflow: hidden;
  }
  .column {
    text-align: center;
    height: 300px;
    line-height: 300px;
  }
  #left, #right, #center {
    float: left;
  }
  #center {
    width: 100%;
    background: rgb(206, 201, 201);
  }
  #left {
    width: 200px;
    margin-left: -100%;
    background: rgba(95, 179, 235, 0.972);
  }
  #right {
    width: 150px;
    margin-left: -150px;
    background: rgb(231, 105, 2);
  }
  .content {
    margin: 0 150px 0 200px;
  }
</style>
 
<body>
  <div id="header">#header</div>
 
  <div id="container">
    <div id="center" class="column">
      <div class="content">#center</div>
    </div>
    <div id="left" class="column">#left</div>
    <div id="right" class="column">#right</div>
  </div>
 
  <div id="footer">#footer</div>
</body>

CSS3 弹性盒子模型(Flex Box Model)

弹性盒子是 CSS3 的一种新的布局模式。

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

属性描述
flex-direction指定弹性容器中子元素排列方式
flex-wrap设置弹性盒子的子元素超出父容器时是否换行
flex-flowflex-direction 和 flex-wrap 的简写
align-items设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式
align-content修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐
justify-content设置弹性盒子元素在主轴（横轴）方向上的对齐方式
  • flex-direction 属性：

决定项目的方向。注意：如果元素不是弹性盒对象的元素，则 flex-direction 属性不起作用。

  1. row 默认值。元素将水平显示，正如一个行一样。
  2. row-reverse 与 row 相同，但是以相反的顺序。
  3. column 元素将垂直显示，正如一个列一样。
  4. column-reverse 与 column 相同，但是以相反的顺序。
  • flex-wrap 属性：

flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。

  1. nowrap 默认值。规定元素不拆行或不拆列。
  2. wrap 规定元素在必要的时候拆行或拆列。
  3. wrap-reverse 规定元素在必要的时候拆行或拆列，但是以相反的顺序。
  • flex-flow 属性：

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .box {
      display: flex;
      height: 100px;
      background-color: black;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
    }

    .item {
      background-color: blanchedalmond;
      color: blueviolet;
      font-size: 14px;
      width: 40px;
      height: 40px;
      text-align: center;
      line-height: 40px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="item" style="order: 10">1</div>
    <div class="item" style="flex-grow: 0.3">2</div>
    <div class="item" style="flex-shrink: 8">3</div>
    <div class="item" style="flex-basis: 20px">4</div>
    <div class="item" style="flex:0.3 1 10px">5</div>
    <div class="item" style="align-self:flex-start">6</div>
    <div class="item">7</div>
  </div>
</body>

</html>
  • align-items属性：

align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

  1. stretch 默认值。项目被拉伸以适应容器。
  2. center 项目位于容器的中心。
  3. flex-start 项目位于容器的开头。
  4. flex-end 项目位于容器的结尾。
  5. baseline 项目位于容器的基线上。
  • justify-content属性

justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

  1. flex-start 默认值。项目位于容器的开头。
  2. flex-end 项目位于容器的结尾。
  3. center 项目位于容器的中心。
  4. space-between 项目位于各行之间留有空白的容器内。
  5. space-around 项目位于各行之前、之间、之后都留有空白的容器内。
  • 弹性子元素属性
  1. order 设置弹性盒子的子元素排列顺序。
  2. flex-grow 设置或检索弹性盒子元素的扩展比率。
  3. flex-shrink 指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
  4. flex-basis 用于设置或检索弹性盒伸缩基准值。
  5. flex 设置弹性盒子的子元素如何分配空间。
  6. align-self 在弹性子元素上使用。覆盖容器的 align-items 属性。

FC

FC的全称是：Formatting Contexts，是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

BFC(Block Formatting Contexts)

意为“块级格式化上下文”。就是页面上的一个渲染区域，容器内的子元素不会对外面的元素布局产生影响，反之亦然。

BFC的布局规则:

  • 内部的盒子会在垂直方向，一个个地放置
  • 盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠
  • 每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此
  • BFC的区域不会与float重叠
  • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此
  • 计算BFC的高度时，浮动元素也参与计算

如何生成BFC：

  • 根元素或其它包含它的元素
  • float的值不为none
  • overflow的值不为visible
  • position的值不为relative和static
  • display的值为table-cell,table-caption和inline-block中的任何一个

一个块格式化上下文包括创建它的元素内部所有内容，除了被包含于创建新的块级格式化上下文的后代元素内的元素。

块格式化上下文对于定位与清除浮动很重要。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。浮动不会影响其它块格式化上下文中元素的布局，并且清除浮动只能清除同一块格式化上下文中在它前面的元素的浮动。

IFC(Inline Formatting Contexts)

意为“内联格式化上下文”,IFC中，盒子依次水平放置，从包含块的顶部开始

FFC(Flex Formatting Contexts)

意为“自适应格式化上下文”,display值为flex或者inline-flex的元素将会生成自适应容器。flex box由伸缩容器和伸缩子元素组成。通过设置元素display:flex/inline-flex可以得到伸缩容器，前者为块级元素，后者为行内元素。伸缩容器外元素不受影响。

GFC(GridLayout Formatting Contexts)

意为“网格布局格式化上下文”当一个元素设置为display:grid的时候，此元素将获得一个独立的渲染区域，可以在网格容器上定义网格行和列，为每一个网格定义位置和空间。GFC和table的区别在于GridLayout会有更加丰富的属性来控制行列，控制对齐以及更为精细的渲染。

Anily前端 & Web Developer

任何值得做的事就值得把它做好。- Whatever is worth doing is worth doing well.