“display”属性

  • block：块级元素
  • inline：行内元素
  • none

block：

  • div 是一个标准的块级元素。
  • 一个块级元素会新开始一行并且尽可能撑满容器。
  • 其他常用的块级元素包括 p 、 form 和HTML5中的新元素： header 、 footer 、 section 等等。

image-20200720163730580

inline：

  • span 是一个标准的行内元素。
  • 一个行内元素可以在段落中 <span> 像这样 </span> 包裹一些文字而不会打乱段落的布局。
  • a 元素是最常用的行内元素，它可以被用作链接。

none：

  • 一些特殊元素的默认 display 值是它，例如 script 。
  • display:none 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。
  • 它和 visibility 属性不一样。把 display 设置成 none 元素不会占据它本来应该显示的空间，但是设置成 visibility: hidden; 还会占据空间。

margin: auto;

1
2
3
4
#main {
  width: 600px;
  margin: 0 auto; 
}
  • 设置块级元素的 width 可以防止它从左到右撑满整个容器。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度(浏览器宽度-width)会一分为二成为左右外边距。
  • 唯一的问题是，当浏览器窗口比元素的宽度还要窄时，浏览器会显示一个水平滚动条来容纳页面。

image-20200720164011915

当当浏览器窗口比元素的宽度还要窄时，浏览器会显示一个水平滚动条来容纳页面：

1

max-width

1
2
3
4
#main {
  max-width: 600px;
  margin: 0 auto; 
}
  • 在这种情况下使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。这点在移动设备上显得尤为重要，调整下浏览器窗口大小检查下吧！
  • 顺便提下， 所有的主流浏览器包括IE7+在内都支持 max-width ，所以放心大胆的用吧。

image-20200720164328009.png

盒模型

  • 在我们讨论宽度的时候，我们应该讲下与它相关的另外一个重点知识：盒模型。
  • 当你设置了元素的宽度，实际展现的元素却超出你的设置：这是因为元素的边框和内边距会撑开元素。
  • 看下面的例子，两个相同宽度的元素显示的实际宽度却不一样。
1
2
3
4
5
6
7
8
9
10
11
.simple {
  width: 500px;
  margin: 20px auto;
}

.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border-width: 10px;
}

image-20200720164438255

box-sizing

  • 人们慢慢的意识到传统的盒子模型不直接，所以他们新增了一个叫做 box-sizing 的CSS属性。
  • 当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。这里有一个与前一页相同的例子，唯一的区别是两个元素都设置了 box-sizing: border-box; ：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.simple {
  width: 500px;
  margin: 20px auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border: solid blue 10px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

image-20200720165031698

既然没有比这更好的方法，一些CSS开发者想要页面上所有的元素都有如此表现。所以开发者们把以下CSS代码放在他们页面上：

1
2
3
4
5
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

这样可以确保所有的元素都会用这种更直观的方式排版。

不过 box-sizing 是个很新的属性，目前你还应该像我上面例子中那样使用 -webkit- 和 -moz- 前缀。这可以启用特定浏览器实验中的特性。同时记住它是支持IE8+的。

position

static

static 是默认值。任意 position: static; 的元素不会被特殊的定位。一个 static 元素表示它不会被“positioned”，一个 position 属性被设置为其他值的元素表示它会被“positioned”。

1
2
3
.static {
  position: static;
}

image-20200720165610013

relative

  • relative 表现的和 static 一样，除非你添加了一些额外的属性。
  • 在一个相对定位（position属性的值为relative）的元素上设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。
1
2
3
4
5
6
7
8
9
10
11
.relative1 {
  position: relative;
}

.relative2 {
  position: relative;
  top: -20px;
  left: 20px;
  background-color: white;
  width: 500px;
}

image-20200720165727966

fixed

  • 一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。
  • 和 relative 一样， top 、 right 、 bottom 和 left 属性都可用。
  • 一个固定定位元素不会保留它原本在页面应有的空隙（脱离文档流）。

我相信你已经注意到页面右下角的固定定位元素。你现在可以仔细看看它，这里有它所使用的CSS：

1
2
3
4
5
6
7
.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  background-color: white;
}

image-20200720170018196

absolute

  • absolute 是最棘手的position值。
  • absolute 与 fixed 的表现类似，但是它不是相对于视窗而是相对于最近的“positioned”祖先元素。
  • 如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。记住一个“positioned”元素是指 position 值不是 static 的元素。
1
2
3
4
5
6
7
8
9
10
11
12
.relative {
  position: relative;
  width: 600px;
  height: 400px;
}
.absolute {
  position: absolute;
  top: 120px;
  right: 0;
  width: 300px;
  height: 200px;
}

image-20200720170309377

position例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.container {
  position: relative;
}
nav {
  position: absolute;
  left: 0px;
  width: 200px;
}
section {
  /* position is static by default */
  margin-left: 200px;
}
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 70px;
  background-color: white;
  width: 100%;
}
body {
  margin-bottom: 120px;
}

image-20200720170501458

float

Float 可用于实现文字环绕图片

1
2
3
4
img {
  float: right;
  margin: 0 0 1em 1em;
}

image-20200720170724171

clear

clear 属性被用于控制浮动。

1
2
<div class="box">...</div>
<section>...</section>
1
2
3
4
5
6
.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}

image-20200720171005335

1
2
3
4
5
6
7
8
9
.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}
.after-box {
  clear: left;
}

image-20200720171030390

清除浮动（clearfix hack）

在使用浮动的时候经常会遇到一个古怪的事情：

1
2
3
img {
  float: right;
}

image-20200720171200614

见证奇迹的时刻到了！有一种比较丑陋的方法可以解决这个问题，它叫做清除浮动（clearfix hack）.

让我们加入一些新的CSS样式：

1
2
3
.clearfix {
  overflow: auto;
}

image-20200720171248443

浮动布局例子

完全使用 float 来实现页面的布局是很常见的。这里有一个我之前用 position 实现的布局例子，这次我使用 float 实现了它。

1
2
3
4
5
6
7
nav {
  float: left;
  width: 200px;
}
section {
  margin-left: 200px;
}

image-20200720171412779

百分比宽度

百分比是一种相对于包含块的计量单位。它对图片很有用：如下我们实现了图片宽度始终是容器宽度的50%。把页面缩小看下效果！

1
2
3
4
article img {
  float: right;
  width: 50%;
}

image-20200720171506581

百分比宽度布局

你可以用百分比做布局，但是这需要更多的工作。在下面的例子中，当窗口宽度很窄时 nav 的内容会以一种不太友好的方式被包裹起来。总而言之，选一种最合适你的内容的方式。

1
2
3
4
5
6
7
nav {
  float: left;
  width: 25%;
}
section {
  margin-left: 25%;
}

image-20200720171555274

媒体查询

  • “响应式设计（Responsive Design” 是一种让网站针对不同的浏览器和设备“呈现”不同显示效果的策略，这样可以让网站在任何情况下显示的很棒！
  • 媒体查询是做此事所需的最强大的工具。让我们使用百分比宽度来布局，然后在浏览器变窄到无法容纳侧边栏中的菜单时，把布局显示成一列：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
@media screen and (min-width:600px) {
  nav {
    float: left;
    width: 25%;
  }
  section {
    margin-left: 25%;
  }
}
@media screen and (max-width:599px) {
  nav li {
    display: inline;
  }
}

image-20200720171701270

inline-block

你可以创建很多网格来铺满浏览器。在过去很长的一段时间内使用 float 是一种选择，但是使用 inline-block 会更简单。让我们看下使用这两种方法的例子：

困难的方式（使用浮动）

1
2
3
4
5
6
7
8
9
.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}
.after-box {
  clear: left;
}

image-20200720171806733

容易的方式（使用 inline-block）

你可以用 display 属性的值 inline-block 来实现相同效果。

1
2
3
4
5
6
.box2 {
  display: inline-block;
  width: 200px;
  height: 100px;
  margin: 1em;
}

image-20200720171847448

inline-block 布局

你可以使用 inline-block 来布局。有一些事情需要你牢记：

  • vertical-align 属性会影响到 inline-block 元素，你可能会把它的值设置为 top 。
  • 你需要设置每一列的宽度
  • 如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙
1
2
3
4
5
6
7
8
9
10
nav {
  display: inline-block;
  vertical-align: top;
  width: 25%;
}
.column {
  display: inline-block;
  vertical-align: top;
  width: 75%;
}

image-20200720171932600

column

这里有一系列新的CSS属性，可以帮助你很轻松的实现文字的多列布局。让我们瞧瞧：

1
2
3
4
5
6
7
8
9
.three-column {
  padding: 1em;
  -moz-column-count: 3;
  -moz-column-gap: 1em;
  -webkit-column-count: 3;
  -webkit-column-gap: 1em;
  column-count: 3;
  column-gap: 1em;
}

image-20200720172025434

flexbox

使用 Flexbox 的简单布局

1
2
3
4
5
6
7
8
9
10
11
.container {
  display: -webkit-flex;
  display: flex;
}
nav {
  width: 200px;
}
.flex-column {
  -webkit-flex: 1;
          flex: 1;
}

image-20200720172127838

使用 Flexbox 的牛逼布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.container {
  display: -webkit-flex;
  display: flex;
}
.initial {
  -webkit-flex: initial;
          flex: initial;
  width: 200px;
  min-width: 100px;
}
.none {
  -webkit-flex: none;
          flex: none;
  width: 200px;
}
.flex1 {
  -webkit-flex: 1;
          flex: 1;
}
.flex2 {
  -webkit-flex: 2;
          flex: 2;
}

image-20200720172204389

使用 Flexbox 的居中布局

1
2
3
4
5
6
7
8
9
.vertical-container {
  height: 300px;
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}

image-20200720172239792