百度前端技术学院 第五天学习笔记（CSS盒模型）

CSS学习, 百度前端技术学院 本文总阅读量次

块和内联布局

  • 水平书写模式时块垂直放置，但在垂直书写模式下块将水平放置：
    垂直书写模式下

display属性值

block

  • 从下方例子中可以看到，display属性block使span元素像一个块元素，独占一行被包含在p元素内。

flex

  • display属性定义框及其内部任何框的行为。
  • flex的行为就像一个块元素（自己占一行），它显示在新行上并占据其在行内方向上可以使用的所有空间。
  • 如果应用在<ul>上则会让<li>都显示在一行上，并占据其在行内方向上可以使用的所有空间。

block与flex的例子

display属性block与flex例子效果图
没有设置display:block的span元素效果图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
p, 
ul {
  border: 2px solid rebeccapurple;
  padding: .5em;
}

.block,
li {
  border: 2px solid blue;
  padding: .5em;
}

ul {
  display: flex;
  list-style: none;
}

.block {
  display: block;
}   
1
2
3
4
5
6
7
<p>I am a paragraph. A short one.</p>
<ul>
  <li>Item One</li>
  <li>Item Two</li>
  <li>Item Three</li>
</ul>
<p>I am another paragraph. Some of the <span class="block">words</span> have been wrapped in a <span>span element</span>.</p>

inline

display属性inline可以让块元素像行内（内联）元素
display属性inline可以让p这种块元素像行内元素

inline-flex

inline-flex与flex比起来更像一个行内元素，它后面如果有一个段落的话，inline-flex容器和段落都在一行上一起运行，而不是像flex显示为块级元素那样将它们换成新行。

inline-block

直接从属性名也可以看出他可以让内联的盒子像一个块元素。
这个属性可以让内联盒子不与包含他的盒子内容重叠，也就是说他会让内联盒子的width与height属性生效。
对比效果图

1
2
3
4
5
6
7
8
9
span {
  margin: 20px;
  padding: 20px;
  width: 80px;
  height: 50px;
  background-color: lightblue;
  border: 2px solid blue;
  display: inline-block;
}
1
2
3
<p>
    I am a paragraph and this is a <span>span</span> inside that paragraph. A span is an inline element and so does not respect width and height.
</p>

display各属性值直观对比图

对比图
没有对ul使用display属性时li不会在一行内显示
ul{display:flex;}时像块元素
ul{display:inline-flex;}时像行内元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
p, 
ul {
  border: 2px solid rebeccapurple;
}

span,
li {
  border: 2px solid blue;
}

ul {
  display: inline-flex;
  list-style: none;
  padding: 0;
} 

.inline {
  display: inline;
}

1
2
3
4
5
6
7
8
9
10
11
12
<p>
    I am a paragraph. Some of the
    <span>words</span> have been wrapped in a
    <span>span element</span>.
</p>     
<ul>
  <li>Item One</li>
  <li>Item Two</li>
  <li>Item Three</li>
</ul>
<p class="inline">I am a paragraph. A short one.</p>
<p class="inline">I am another paragraph. Also a short one.</p>

盒模型

盒子的组成

  • 内容框：显示内容的区域，可以使用width和属性来调整大小height。
  • 填充框：填充物围绕内容位于空白处；可以使用padding和相关属性控制其大小。
  • 边框：边框用于包装内容和任何填充。可以使用border及其相关属性来控制其大小和样式。
  • 边距框：边距是最外层，将内容，填充和边框包装为此框与其他元素之间的空白。可以使用margin及其相关属性来控制其大小。
    盒子的组成图
  • 注意：边距（margin）影响框外的空间以及框在页面上所占的总空间，但它不计入框的实际大小。框的区域在边界处（border）停止，不会延伸到边缘。

标准盒模型

  • 在标准盒模型中，盒子占用的总大小由框的宽度（width）和高度（height）以及任何填充（padding）和边框（border）相加得到。
    标准盒模型中盒子的宽高计算
  • 例子中盒子占用的空间宽度实际上将为410px（350 + 25 + 25 + 5 + 5），高度为210px（150 + 25 + 25 + 5 + 5），因为填充和边框为添加到用于内容框的宽度。

替代盒模型

注意：
标准盒模型 的宽度只是内容的宽度，不包括padding与border，所以我们一旦设置padding与border就应该设置替代盒模型，以确保我们设置的width就是我们看到的宽度

  • 使用此模型，任何宽度都是页面上可见框的宽度（不用加上padding与border），因此内容区域的宽度是该宽度减去填充和边框的宽度。
    替代盒模型
  • 默认情况下，浏览器使用标准盒模型。如果要为元素打开替代盒模型，可以通过对其进行设置box-sizing: border-box;来实现。box-sizing是个很新的属性，目前应该像下面例子中那样使用 -webkit- 和 -moz-前缀。这可以启用特定浏览器实验中的特性。同时记住它是支持IE8+的：
    1
    2
    3
    4
    5
    .box {
      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
              box-sizing: border-box;
    }
  • 如果希望所有元素都使用替代盒模型，请在元素上设置box-sizing属性，然后将所有其他元素设置为继承该值，如：
    1
    2
    3
    4
    5
    6
    7
    8
    html {
      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
              box-sizing: border-box;
    }
    *, *::before, *::after {
      box-sizing: inherit;
    }
    或者：
    1
    2
    3
    4
    5
    * {
      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
              box-sizing: border-box;
    }

(块之间的)外边距margin折叠

  • 补充：margin可以是负值。
  • 首先，两个兄弟块之间的垂直距离由margin属性 （外边距）确定。
  • 通过两个例子我们可以发现折叠的是两个块之间较小的边距。
  • 也就是说如果有两个具有边距的元素撞在一起，作用于同一个位置的边距将合并为一个边距，即最大单个边距的大小。两个边距撞在一起会合并（折叠），而不是等于两个边距的总和。
属性值数量 含义
4 上 右 下 左
3 上 左右 下
2 上下 左右
1 4个方向
  • 例子1：
    1
    2
    3
    4
    p {
        border: 2px solid green;
        margin: 20px 0 40px 0;
    }
    1
    2
    3
    4
    <div class="box">
        <p>文段1</p>
        <p>文段2</p>
    </div>
    例子1效果
  • 例子2：
    1
    2
    3
    4
    <div class="box">
        <p>文段1</p>
        <p>文段2</p>
    </div>
    1
    2
    3
    4
    <div class="box">
        <p>文段1</p>
        <p>文段2</p>
    </div>
    例子2效果

边框border

  • 简写包括border-width、border-style、border-color
  • 也可以只设置单边的这三个属性
  • 例子：
1
2
3
4
5
6
7
8
9
10
11
12
.container {
  border-top: 5px dotted green;
  border-right: 1px solid black;
  border-bottom: 20px double rgb(23,45,145);
}

.box {
  border: 1px solid #333333;
  border-top-style: dotted;
  border-right-width: 20px;
  border-bottom-color: hotpink;
}
1
2
3
<div class="container">
  <div class="box">Change my borders.</div>
</div>

效果图

内边距（填充）padding

属性值数量 含义
4 上 右 下 左
3 上 左右 下
2 上下 左右
1 4个方向

image.png

1
2
3
4
5
6
7
8
9
10
.box {
  padding-top: 0;
  padding-right: 30px;
  padding-bottom: 40px;
  padding-left: 4em;
}

.container {
  padding: 20px;
}
1
2
3
<div class="container">
  <div class="box">Change my padding.</div>
</div>
CSS学习, 百度前端技术学院