HTML与css(二)

Eastboat 2020年4月26日星期日 HTML/CSS

Table of Contents generated with DocToc (opens new window)

display
文本效果
表单效果
浮动布局
定位布局
- z-index 属性
CSS 图形

# display

# 行内元素(inline)

特点:

可以与其他行内元素位于同一行,行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果。
无法定义高度（height），也无法定义宽度（width）
可以定义 margin-left 和 margin-right，无法定义 margin-top 和 margin-bottom

# 块元素(block)

独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素。
元素内部可以容纳其他块元素或行元素。
可以定义宽度（width），也可以定义高度（height）。
可以定义四个方向的 margin。

# 行内块元素(inline-block)

既具备块元素的特点，也具备行内元素的特点,常见元素:img,input

可以定义 width 和 height。
可以与其他行内元素位于同一行。

# `display:none`和`visibility:hidden`

在 CSS 中，如果想要隐藏某一个元素，我们可以使用“display:none”或者“visibility:hidden”来实现。但是这两者也有本质上的区别

-（1）“display:none”的元素被隐藏之后，不占据原来的位置。也就是说彻底地消失了，看不见也摸不着。 -（2）“visibility:hidden”的元素被隐藏之后，依然占据原来的位置。也就是说并没有彻底消失，看不见但摸得着

# `display:table0-cell`

可以让元素以表格单元格的形式呈现。也就是说，table-cell 类型的元素具备 td 元素的特点

display:table-cell”非常强大，可以实现以下三种功能。

# 图片垂直居中于元素。

在 CSS 中，我们可以使用“display:table-cell”和“vertical-align:middle”来实现大小不固定的图片的垂直居中效果。

图片的水平居中可以使用“text-align:center”来实现，而图片的垂直居中效果可以使用“display:table-cell”和“vertical"

<head>
  <title></title>
  <style type="text/css">
    div {
      　　display: table-cell;
      　　width: 150px;
      　　height: 150px;
      　　border: 1px solid gray;
      　　vertical-align: middle;
      　　text-align: center;
    }
    img {
      vertical-align: middle;
    }
    div + div {
      border-left: none;
    }
  </style>
</head>
<body>
  <div><img src="images/haizei1.jpg" alt="" /></div>
  <div><img src="images/haizei2.jpg" alt="" /></div>
  <div><img src="images/haizei3.jpg" alt="" /></div>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 等高布局。

同一行的单元格 td 元素高度是相等的。因此，table-cell 元素也具备这个特点。根据这个特点，我们可以实现等高布局效果。

<head>
  <title></title>
  <style type="text/css">
    #wrapper{display:table-row;}
    #img-box
    {
    　　display:table-cell;
    　　vertical-align:middle;　　 /*垂直居中*/
    　　text-align:center;　　　　 /*水平居中*/
    　　width:150px;
    　　border:1px solid red;
    }
    #text-box
    {
    　　display:table-cell;
    　　width:200px;
    　　border:1px solid red;
    　　border-left:none;
    　　padding:10px;
    }
  </style>
</head>
<body>
  <div id="wrapper">
    <div id="img-box">
      <img src="images/haizei1.jpg" alt="" />
    </div>
    <div id="text-box">
      <span
        >《ONE
        PIECE》（海贼王、航海王）简称"OP"，是日本漫画家尾田荣一郎作画的少年漫画作品。在《周刊少年Jump》1997年34号开始连载。描写了拥有橡皮身体戴草帽的青年路飞，以成为"海贼王"为目标和同伴在大海展开冒险的故事。</span
      >
    </div>
  </div>
</body>

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

在这个例子中，左右两个盒子我们都没有加上高度，而是由盒子内容撑开。但是我们会发现一个很有趣的现象：左右两个盒子高度相等，并且高度由两者高度最大值决定。这就是自适应的等高布局

还有如 XX 网站评论区案例: 左栏只有一个头像，右栏是内容。有些同学可能会为左右两栏定义相同的高度来实现。但是我们都知道好友动态右栏的内容多少往往都是不确定的，如果定义固定高度的话，内容超出了高度怎么办？这个时候使用上面介绍的等高的自适应布局就可以完美解决了。在自适应的等高布局中，左右两栏都不定义高度，而是由内容撑起来，左右两栏的高度都相同。这个技巧非常实用

# 自动平均划分元素

如果我们想要使用 ul 来实现下面这种布局，一般都会用 float 来实现，并且还得精准计算每一个 li 的宽度。但是如果给每个 li 元素都定义“display:table-cell”，我们就不用显得如此麻烦。而且会自动平均划分元素，并在一行显示

当父元素定义display:table而子元素定义display:table-cell时，如果给父元素一定的宽度，父元素宽度就会根据子元素的个数进行自动平均划分。

DOCTYPE html>
<head>
  <title></title>
  <style type="text/css">
    * {
      padding: 0;
      margin: 0;
    }
    ul {
      　　list-style-type: none;
      　　display: table;
      　　width: 300px;
    }
    li {
      　　display: table-cell;
      　　height: 60px;
      　　line-height: 60px;
      　　text-align: center;
      　　color: White;
    }
    ul li:nth-child(1) {
      background-color: Red;
    }
    ul li:nth-child(2) {
      background-color: Orange;
    }
    ul li:nth-child(3) {
      background-color: Blue;
    }
    ul li:nth-child(4) {
      background-color: silver;
    }
    ul li:nth-child(5) {
      background-color: Purple;
    }
  </style>
</head>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</body>

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

# 去除 inline-block 元素间距

inline-block 元素之间是有间距的。在实际开发中，这种间距有时会对我们的布局产生影响。我们可以使用font-size:0来去除 inline-block 元素的间距。

父元素{font-size:0}

# 文本效果

# 深入 text-indent

text-indent:-9999px 一般用于 LOGO 部分。在搜索引擎优化中，h1 是非常重要的标签。一般情况下，我们都是把网站的 LOGO 图片放到 h1 标签中。不过我们都知道，搜索引擎无法识别图片，只能识别文字。为了更好地优化 SEO，那该怎么做呢?
指定 h1 元素的长宽与 LOGO 图片的长宽一样，然后定义 h1 的背景图片（background-image）为 LOGO 图片。也就是说，我们使用 LOGO 图片作为 h1 标签的背景图片，然后使用“text-indent:-9999px;”来隐藏 h1 的文字内容,一般电脑屏幕宽度有为 1024px、1366px 等，之所以定义为-9999px，那是为了让文字的缩进足够大，就算是大分辨率电脑下也看不到文字

# 深入 text-align

text-align 对文字、inline 元素（行内元素）以及 inline-block 元素（行内块元素）起作用，但对块元素不起作用。其中，img 元素属于 inline-block 元素。

"text-align:center;”与“margin:0 auto;”的区别:

（1）“text-align:center;”实现的是文字、inline元素以及inline-block元素的水平居中。
（2）“margin:0 auto;”实现的是块元素的水平居中。
（3）“text-align:center;”在父元素中定义，“margin:0 auto;”在当前元素中定义

1
2
3

# 深入 line-height

# 定义

在 CSS 中，line-height 还有一个更加准确的定义：两行文字基线之间的距离。我们都用过英文簿，英文簿每一行都有 4 条线，这 4 条线分别是：顶线、中线、基线和底线 >

在 CSS 中，每一行文字可以看成一个“行盒子”，而每一个行盒子都有 4 条线：顶线、中线、基线和底线。没错，这四条线跟英文簿中的四条线是一样的道理

vertical-align属性中的 top、middle、baseline、bottom 这四个属性值分别对应的就是：顶线、中线、基线、底线。

# 行高、行距与半行距

行高（即 line-height），指的是“两行基线之间的垂直距离
行距，指的是上一行的底线到下一行的顶线的垂直距离。也就是两行文字之间的空隙。
半行距,很好理解，指的是行距的一半。

# 行框 inline box

为什么要搞一个半行距出来呢？其实这就是为了引出在下面所提到的“行框（inline box）”。

内容区，指的是行盒子顶线到底线之间的垂直距离。
行框，指的是两行文字“行半距分割线”之间的垂直距离

# line-height

当 line-height 值为百分比值或者 em 值时，当前元素的行高是相对于父元素的 font-size 值来计算的。计算公式如下：

line-height = （父元素font-size）×（百分比）
line-height = （父元素font-size）×（em值）

1
2

line-height 还支持无单位数字的属性取值，在 CSS 中也只有 line-height 属性具有这个特点。当 line-height 值为无单位数字时，实际的行高是相对于当前元素的 font-size 值来计算的

line-height = （父元素font-size）×无单位数字

1
2

# 深入 vertical-align

vertical-align 属性中的基线跟 line-height 属性中的基线是一样的道理。在 CSS 中，vertical-align 属性最见的属性值有四个：top（顶部对齐）、middle（中部对齐）、baseline（基线对齐）、bottom（底部对齐）。

W3C 官方对 vertical-align 属性的定义有四个方面:

vertical-align属性用于定义“周围的文字、inline元素以及inline-block元素”相对于该元素基线的垂直对齐方式。这里的“该元素”指的是被定义了vertical-align属性的元素。
在表格单元格中，vertical-align属性可以定义单元格 td 元素中内容的对齐方式。td 元素是table-cell元素，也就是说`vertical-align``属性对 table-cell 类型元素有效。
vertical-align属性对inline元素、inline-block元素和table-cell元素有效，对块元素无效。
vertical-align属性允许指定负长度值（如-2px）和百分比值（如 50%）。

在表格单元格中，vertical-align 属性可以定义单元格中内容的对齐方式。这里要注意一下，table-cell 元素跟 inline、inline-block 元素使用 vertical-align 是有很大区别的。

inline 元素和 inline-block 元素的 vertical-align 是针对周围的元素来说的，vertical 定义的是周围元素相对于当前元素的对齐方式。
table-cell 元素的 vertical-align 属性是针对自身而言。vertical-align 定义的是内部子元素相对于自身的对齐方式。

# 表单效果

# 深入 radio 和 checkbox

在表单开发中，无论是 12px，还是 14px，文字与单选框或复选框都是不对齐的，感觉特别难看，用户体验比较差。

之前我们接触过 vertical-align 属性，单选框或复选框与文字默认情况下是以 vertical-align:baseline 的方式对齐的，这也是导致单选框或复选框与文字在垂直方向不居中对齐的原因。因此，我们可以使用 vertical-align 属性来解决

我们分两种情况考虑:

当文字大小为 12px 时，我们给单选框或复选框定义“vertical-align:-3px”即可解决对齐问题。
当文字大小为 14px 时，我们给单选框或复选框定义“vertical-align:-2px”即可解决对齐问题。

其中，“vertical-align:-3px”表示元素相对于基线向下偏移 3px。对于基线的概念，我们在深入 line-height 属性中详细给大家介绍了。

# 深入 textarea

textarea 指的是文本域。对于 textarea，有两个方面需要我们深入学习:

固定大小 CSS 中，我们可以使用 min-width 和 min-height 来定义 textarea 的最小宽度和最大高度，也可以使用 max-width 和 max-height 来定义 textarea 的最大宽度和最大高度。一般情况下对于 textarea 元素来说，min-width 和 min-height 用得较少，max-width 和 max-height 用得较多。max-width 和 max-height 可以控制 textarea 的最大宽度和最大高度，使得用户在拖动小三角的同时，不会破坏原来的布局
禁用拖动resize:none;

Chrome（或 Firefox）和 IE 下，每行字数和文字的列数是不相同的,IE 下会出现滚动条,那么如何在 chrome、Firefox 和 IE 实现相同的外观

（1）使用CSS的width和height来定义textarea的大小。
（2）使用“overflow:auto”来定义textarea的滚动条自适应

1
2

# 表单对齐

案例:登录框:左边是文字，右边是表单元素。表单元素排列很整齐，非常美观

为了实现对齐，不少初学者都是直接对 input 或 label 元素进行逐个设置 padding 或者 margin 来慢慢调，这样使得 CSS 代码非常多，也难以维护。很多大型网站包括百度、京东、腾讯等都是采用如下方法来实现。

（1）每一行表单分为左栏加若干右栏。所有行的左栏长度相等，所有行的右栏所有盒子长度之和相等。左栏一般是一个 label，右栏是若干个文本框。（2）所有左栏盒子和右栏盒子都设置为左浮动。（3）左栏 text-align 属性定义为 right，使得文字右对齐。（4）最重要一点，每一行中左栏长度和右栏所有盒子的总长度之和等于行宽。这里的盒子是包括 width、padding、border 和 margin 的。

# 浮动布局

深入了解正常文档流，对后面学习浮动布局和定位布局是非常重要的一个前提

# 正常文档流

正常文档流，将窗体自上而下分成一行一行，块元素独占一行，相邻行内元素在每行中按从左到右依次排列元素。

# 脱离文档流

脱离文档流是相对正常文档流而言的。正常文档流就是我们没有用 CSS 样式去控制的 HTML 文档结构，你写的界面的顺序就是网页展示的顺序,所谓的脱离文档流就是指它所显示的位置和文档代码顺序不一致，比如我们可以用 CSS 控制，把最后一个 div 元素显示在第一个 div 元素的位置

在 CSS 布局中，我们便可以使用浮动或者定位这两种技术来实现“脱离正常文档流”，从而随心所欲地控制页面的布局。

# 浮动 Float

在传统的印刷布局中，文本可以按照实际需要来围绕图片。一般把这种方式称为“文本环绕”。在前端开发中，应用了 CSS 的 float 属性的页面元素就像在印刷布局里被文字包围的图片一样。

如果 box1 为浮动元素，而相邻的 box2 不是浮动元素，则 box2 就会紧贴着 box1；

但是如果 box1 和 box2 同时为浮动元素，外边距就会生效。

浮动特点:

当一个元素定义了“float:left”或“float:right”时，不管这个元素之前是 inline、inline-block 或者其他类型，都会变成 block 类型。也就是说，浮动元素表现为块元素效果 ,如:span 设置了浮动之后，就变成了块元素，并且可以设置 width、height 和 margin
一个元素定义了“float:left”或“float:right”时，这个元素会脱离文档流，后面的元素会紧跟着填上空缺的位置。

# 深入浮动

# 对自身的影响。

如果一个元素设置了浮动，则不管这个元素是什么类型，都会转化为块元素，也就是 display 属性值为 block。

# 对父元素的影响

如果一个元素设置了浮动，它会脱离正常文档流。如果浮动元素的高度 height 大于父元素的高度 height，或者父元素没有定义高度 height，此时浮动元素会脱离父元素。这就是我们常见的“父元素高度塌陷”。

造成父元素高度塌陷的原因在于，父元素的高度小于子元素的高度，或者父元素没有定义高度，父元素不能把子元素包裹起来。说白了，就是老爸管不住儿子，因此儿子离家出走了。

# 对兄弟元素的影响。

# 兄弟元素是浮动元素

同一方向的兄弟元素 : 当一个浮动元素碰到同一个方向的兄弟元素时，这些元素会从左到右、从上到下，一个接着一个紧挨着排列
相反方向的兄弟元素(左右浮动): 当一个浮动元素碰到同一个方向的兄弟元素时，这两个元素会移向两边（如果父元素宽度足够的话）

# 兄弟元素不是浮动元素

如:有一个元素中包含三个 div,第一个 div 设置了浮动，第二、三个 div 没有设置浮动。此时可以看出，第一个 div 脱离了文档流，并且覆盖了第二、三这两个 div; 当我们也为第二、三个 div 设置浮动（float:left）之后,第一个 div 不再覆盖第二、三个 div。

# 对子元素的影响

从“浮动元素对其父元素的影响”我们知道，如果父元素没有定义高度 height，此时浮动元素会脱离父元素，造成父元素高度塌陷。但是当父元素同时也是一个浮动元素的时候，这个父元素会自适应地包含该子元素

也就是说，如果一个元素是浮动元素（没有定义 height），并且它的子元素也是浮动元素，则这个浮动元素会自适应地包含该子元素

# 浮动的副作用

父元素高度塌陷，从而导致边框不能撑开，背景色无法显示。
页面布局错乱。

# 清楚浮动

所谓的清除浮动，就是强制去除元素浮动之后带来的影响，然后使得其他元素都回归到正常文档流。

# clear:both

clear 属性不是应用于浮动元素本身，而是应用于浮动元素后面的元素

为了清除元素的浮动，往往会添加一个 div 标签。很多时候这个 div 标签仅仅是为了清除浮动而添加的，没有任何其他意义。这种是很多新手清除浮动的做法，但是这个方法破坏了 HTML 代码的语义，如果页面要清除多次浮动，这样就无缘无故添加了很多多余的 div 标签

<style>
   #first{float:left;}
  #second{float:right;}
  .clear{clear:both;　　 /*关键代码，清除浮动*/}
</style>
<div id="main">
  <div id="wrapper">
    <div id="first"></div>
    <div id="second"></div>
    <div class="clear"></div>
  </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12

# overflow:hidden

overflow:hidden应用于浮动元素的父元素，而不是当前的浮动元素。

使用“overflow:hidden”清除浮动相对“clear:both”清除浮动来说，避免添加了多余的标签，并且不会破坏 HTML 的语义结构。不过“overflow:hidden”是个小炸弹，它会隐藏超出父元素的内容部分，有时候这并不是我们预期的效果。

# ::after 伪元素

在实际开发中，比较好的解决方案是使用“::after 伪元素”结合“clear:both”来实现。

来定义成公共类（如类名为 clearfix），然后进行全局引用，以便减少 CSS 代码

.clearfix {
  *zoom: 1; /* 解决IE6,7浮动问题 */
}
.clearfix::after {
  　　clear: both;
  　　content: "";
  　　display: block;
  　　height: 0;
}

1
2
3
4
5
6
7
8
9

<head>
  <title></title>
  <style type="text/css">
    .clearfix {
      *zoom: 1;
    }
    .clearfix::after {
      　　clear: both;
      　　content: "";
      　　display: block;
      　　height: 0;
      　　visibility: hidden;
    }
    #wrapper {
      　　width: 200px;
      　　border: 1px solid black;
    }
    #first,
    #second {
      　　width: 80px;
      　　height: 40px;
      　　border: 1px solid red;
    }
    #first {
      float: left;
    }
    #second {
      float: right;
    }
  </style>
</head>
<body>
  <div id="wrapper" class="clearfix">
    <div id="first"></div>
    <div id="second"></div>
  </div>
</body>

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

浮动涉及的理论知识非常多，其中包括：块元素和行内元素、CSS 盒子模型、脱离文档流、BFC、层叠上下文。建议大家一定要结合一下后面介绍的“BFC”和“层叠上下文”这两个，会对浮动有更深刻的理解。

# 定位布局

绝对定位元素是相对于外层第一个设置了“position:relative;”“position:absolute;”或“position:fixed”的祖先元素来进行定位的。这个规律极其重要，大家请好好琢磨这句话。

# z-index 属性

虽然网页是平面的，但实际上网页是三维结构，除了 x 轴、y 轴，它还有 z 轴。z 轴往往都是用来设定层的先后顺序的。

默认情况下，元素的 z-index 属性处于不激活状态。也就是说默认情况下，设置元素的 z-index 属性无效。z-index 属性只有在元素定义“position:relative”“position:absolute 或者“position:fixed”时才会被激活。

# CSS 图形

CSS 实现的图形一般适合于展示，并不适合用于 JavaScript 动态操作。如果想要实现便于 JavaScript 操作的图形，大家可以去了解 canvas 或 SVG。这两个可以实现各种酷炫的动态图形效果，例如粒子碰撞、动感圆圈

# 三角形

border-color 属性包含四个值，分别对应“上、右、下、左”四条边颜色，呈顺时针排列,如果将“右、下、左”这三条边颜色改为 transparent.就会呈现一个指向下方的三角形

<style type="text/css">
  #box {
    　　border-width: 20px;
    　　border-style: solid;
    　　border-color: red transparent transparent transparent;
  }
</style>

1
2
3
4
5
6
7

# 带边框的三角形(☆)

实际开发中,由于三角形本身就是 border，我们不可能通过给 border 添加 border 属性来实现

对于这种带边框的三角形，我们一般使用两个三角形来实现。一个作为背景色（内层三角形），一个作为边框色（外层三角形），然后通过定位布局重叠在一起。注意，两个三角形定位要相差 1 像素。一般情况下，都是将内层三角形相对于外层三角形进行定位，偏移 1 像素。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title></title>
    <style type="text/css">
      /*外层三角形*/
      #triangle {
        　　position: relative; /*设置position:relative，使子元素可以相对父元素进行定位*/
        　　width: 0;
        　　height: 0;
        　　border-width: 30px; /*注意外层三角形高为30px*/
        　　border-style: solid;
        　　border-color: transparent transparent black transparent;
      }
      /*内层三角形*/
      #triangle div {
        　　position: absolute;
        　　top: -28px;
        　　left: -29px;
        　　width: 0;
        　　height: 0;
        　　border-width: 29px; /*注意内层三角形边高为29px*/
        　　border-style: solid;
        　　border-color: transparent transparent #bbffee transparent;
      }
    </style>
  </head>
  <body>
    <div id="triangle">
      <div></div>
    </div>
  </body>
</html>

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

其实在 CSS 中，子元素的绝对定位是根据父元素的“内容边界（content）”进行定位的。也就是说，“内层三角形对应的盒子”的绝对定位是根据“外层三角形对应的盒子”的内容边界 content 来进行定位的，而不是根据我们肉眼所看到的三角形的边界来进行定位的，如图所示。**由于盒子 width 和 height 都是 0，因此 content 是在盒子的中心（也就是中心点）。

# 圆

# 圆角

<head>
  <title>CSS3 border-radius属性</title>
  <style type="text/css">
    div {
      width: 50px;
      line-height: 50px;
      border-radius: 80% 90% 100% 20%;
      background-color: #e61588;
      font-size: 30px;
      text-align: center;
      color: White;
    }
  </style>
</head>

<body>
  <div>6</div>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 半圆

div{
　　　　　　width:100px;
　　　　　　height:50px;
　　　　　　border:1px solid red;
　　　　　　border-radius:100px 100px 0 0;
　　　　　　background-color:#FCE9B8;
　　　　}

1
2
3
4
5
6
7

# 椭圆

x 表示圆角的水平半径，y 表示圆角的垂直半径。从之前的学习中我们知道，border-radius 属性取值可以是一个值，也可以是两个值。

例如“border-radius:30px”，表示圆角水平半径和垂直半径为 30px，也就是说“border-radius:30px”等价于“border-radius:30px/30px”，前者是后者的缩写

如果想要实现椭圆，原理如下：元素的宽度和高度不相等，其中四个角的圆角水平半径定义为宽度的一半，垂直半径定义为高度的一半。

div{
　　　　　　width:160px;
　　　　　　height:100px;
　　　　　　border:1px solid gray;
　　　　　　border-radius:80px/50px;
　　　　}

1
2
3
4
5
6

前端技术 HTML与css(三)

前端不太冷

HTML与css(二)

HTML与css(二)

# display

# 行内元素(inline)

# 块元素(block)

# 行内块元素(inline-block)

# display:none和visibility:hidden

# display:table0-cell

# 图片垂直居中于元素。

# 等高布局。

# 自动平均划分元素

# 去除 inline-block 元素间距

# 文本效果

# 深入 text-indent

# 深入 text-align

# 深入 line-height

# 定义

# 行高、行距与半行距

# 行框 inline box

# line-height

# 深入 vertical-align

# 表单效果

# 深入 radio 和 checkbox

# 深入 textarea

# 表单对齐

# 浮动布局

# 正常文档流

# 脱离文档流

# 浮动 Float

# 深入浮动

# 对自身的影响。

# 对父元素的影响

# 对兄弟元素的影响。

# 兄弟元素是浮动元素

# 兄弟元素不是浮动元素

# 对子元素的影响

# 浮动的副作用

# 清楚浮动

# clear:both

# overflow:hidden

# ::after 伪元素

# 定位布局

# z-index 属性

# CSS 图形

# 三角形

# 带边框的三角形(☆)

# 圆

# 圆角

# 半圆

# 椭圆

# `display:none`和`visibility:hidden`

# `display:table0-cell`