HTML与CSS进阶教程

发表于 | 分类于 ， ， |

微信读书
操作笔记 05 06
2023-06-16 07:11:17（开始）
2023-06-16 10:13:22（html进阶 结束）
2023-06-25 15:36:30（css进阶 结束）

HTML CSS进阶简介

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--

1.1.1 你真的精通HTML和CSS吗？
        HTML和CSS入门容易，精通却很难，特别是CSS。
        
        对于HTML来说，确实没有多少东西可以深入的，但是CSS却不一样。
        
        如果你认为自己精通HTML和CSS了，那你可以思考一下下面这些问题。
        （1）什么是HTML语义化？对于标题、图片、表格、表单，如何更好地实现这些方面的语义化？
        （2）什么是外边距叠加？出现外边距叠加的根本原因是什么？
        （3）在CSS中，关于命名、书写以及注释都有哪些好的规范（便于团队开发和后期维护）？
        （4）说一下display这几个属性值的区别：block、inline、inline-block、table-cell。
        （5）你深入了解过text-indent、text-align、line-height以及vertical-align这几个属性么？它们都有哪些高级技巧。
        （6）为什么overflow:hidden可以清除浮动？
        （7）CSS都有哪些性能优化技巧？如何使用更高性能的选择器？
        （8）如何使用CSS实现各种图形效果，例如三角形、圆、椭圆等？
        （9）解释一下这几个概念：包含块、BFC和IFC、层叠上下文。
        ...

1.1.2 进阶教程简介
        HTML进阶的内容只针对HTML 4.01，而CSS进阶的内容只针对CSS 2.1。
        对于HTML 5和CSS 3的内容，可以关注绿叶学习网。
        
        本书是《Web前端开发精品课HTML和CSS基础教程》的姊妹篇，两者具有很强的连贯性。
        
        浓缩的都是精华。有一句话说得好：“干扰因素越少，越容易专注一件事”
-->
</body>
</html>

HTML XHTML

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
57
58
59
60
61
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
1.2.1 HTML和XHTML

        HTML，全称HyperText Mark-up Language（超文本标记语言），是构成网页文档的主要语言。
        我们常说的HTML指的是HTML 4.01。
        
        XHTML，全称EXtensible HyperText Mark-up Language（扩展的超文本标记语言），
        它是XML风格的HTML 4.01，我们可以称之为更严格、更纯净的HTML 4.01。
        
        HTML语法书写比较松散，利于开发者编写。但是对于机器，如电脑、手机等来说，语法越松散，处理起来越困难。
        因此为了让机器更好地处理HTML，我们才在HTML基础上引入了XHTML。
        
XHTML相对于HTML来说，在语法上更加严格。
XHTML和HTML主要区别如下。
        
        1．XHTML标签必须闭合。
            在XHTML中，所有标签必须闭合，
            例如“<p></p>”“<div></div>”等。
            此外，空标签也需要闭合，例如<br>要写成<br/>。
            
            错误写法：<p>欢迎来到绿叶学习网
            正确写法：<p>欢迎来到绿叶学习网</p>
        2．XHTML标签以及属性必须小写。
            在XHTML中，所有标签以及标签属性必须小写，不能大小写混合，也不能全部都是大写。
            不过标签的属性值可以大写。
            
            错误写法：<Body><DIV></DIV></Body>
            正确写法：<body><div></div></body>
        3．XHTML标签属性必须用引号。
            在XHTML中，标签属性值必须用引号括起来，单引号、双引号都可以。
            
            错误写法：<input id=txt type=text/>
            正确写法：<input id="txt" type="text"/>
        4．XHTML标签用id属性代替name属性。
            在XHTML中，除了表单元素之外的所有元素，都应该用id而不是name。
            
            错误写法：<div name="wrapper"></div>
            正确写法：<div id="wrapper"></div>
            
下面是一个完整的XHTML文档。
            <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
                <title>web前端开发精品课系列</title>
            </head>
            <body>
                <p>《web前端开发精品课· HTML和CSS基础教程》</p>
                <p>《web前端开发精品课· HTML和CSS进阶教程》</p>
            </body>
            </html>

-->
</body>
</html>

HTML5

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
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
1.2.2 HTML5
        HTML指的是HTML 4.01, XHTML是HTML的过渡版本，XHTML是XML风格的HTML 4.01。
        而HTML 5指的是下一代的HTML，也就是HTML 4.01的升级版。
        不过HTML 5已经不再是单纯意义上的标签了，它已经远远超越了标签的范畴。
        HTML 5除了新增部分标签之外，还增加了一组技术，包括canvas、SVG、WebSocket、本地存储等。
        这些新增的技术都是使用JavaScript来操作。也就是说，HTML 5使得HTML从一门“标记语言”转变为一门“编程语言”。

HTML 5有以下几个特点
        
        1．文档类型说明
            基于HTML 5设计准则中的“化繁为简”原则，页面的文档类型<!DOCTYPE>被极大地简化了。
            XHTML文档声明： <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            HTML5文档声明： <! DOCTYPE html>
        
        2．标签不再区分大小写
                    <div>绿叶学习网</DIV>
           上面这种写法也是完全符合HTML5规范的。
           但是在实际开发中，建议所有标签以及属性都采用小写方式。
       
        3．允许属性值不加引号
                    <div id=wrapper style=color:red>绿叶学习网</div>
            上面这种写法也是完全符合HTML5规范的。
            但是在实际开发中，建议标签所有属性值都加引号，单引号或双引号都可以。
        
        4．允许部分属性的属性值省略
            在HTML5中，部分具有特殊性属性的属性值是可以省略的。
            例如，下面代码是完全符合HTML 5规范的：
                    <input type="text" readonly/>
                    <input type="checkbox" checked/>
            上面两句代码等价于：
                    <input type="text" readonly="readonly"/>
                    <input type="checkbox" checked="checked"/>
            
            在HTML 5中，可以省略属性值的属性如表
                ![在这里插入图片描述](https://img-blog.csdnimg.cn/c983c61cd5e3455d952a2e198cd5cb44.png)

                checked        checked="checked"
                readonly       readonly="readonly"
                defer          defer="defer"
                ismap          ismap="ismap"
                nohref         nohref="nohref"
                noshade        noshade="noshade"
                nowarp         nowarp="nowarp"
                selected       selected="selected"
                disabled       disabled="disabled"
                multiple       multiple="multiple"
                noresize       noresize="disabled"

一句话概括HTML、XHTML和HTML 5就是：
    HTML指的是HTML 4.01,
    XHTML是HTML的过渡版，
    HTML 5是HTML的升级版。

-->
</body>
</html>

div span

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--

div和span没有任何语义，正是因为没有语义，这两个标签一般都是配合CSS来定义元素样式的。

div和span区别如下。
    （1）div是块元素，可以包含任何块元素和行内元素，不会与其他元素位于同一行；
         span是行内元素，可以与其他行内元素位于同一行。
    
    （2）div常用于页面中较大块的结构划分，然后配合CSS来操作；
         span一般用来包含文字等，它没有结构的意义，纯粹是应用样式。
         当其他行内元素都不适合的时候，可以用span来配合CSS操作。
 
其实，除了div和span外，还有一个label标签。div和span是无语义标签，但label是有语义标签。
label只适用于表单中，用于显示在输入控件旁边的说明性文字。

-->
</body>
</html>

id class

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
1.4.1 id属性
        id属性具有唯一性，也就是说在一个页面中相同的id只允许出现一次。
        W3C建议：
            对于页面关键的结构或者大结构，我们才使用id。所谓的关键结构，指的是诸如LOGO、导航、主体内容、底部信息栏等结构。
            对于一些小地方，还是建议使用class属性。
        
        我们知道搜索引擎识别一个页面结构，是根据标签的语义以及id属性来识别的。
        因此id属性不要轻易使用。此外，id的命名也十分关键，特别是对搜索引擎优化而言。

1.4.2 class属性
        class，顾名思义，就是“类”。
        我们可以为同一个页面的相同元素或者不同元素设置相同的class，然后使得相同class的元素具有相同的CSS样式。
        
        如果你要为两个或者两个以上元素定义相同的样式，建议使用class属性。因为这样可以减少大量的重复代码。


总结：
        对于页面关键结构，建议使用id；对于小地方，建议使用class。
        就算我们不需要对关键结构进行CSS操作或者JavaScript操作，也建议加上id，以便搜索引擎识别页面结构。
-->
</body>
</html>

小图标icon

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="shortcut icon" type="image/x-icon" href="img/连姆尼森 - 制作icon - 圆角.ico"/>
</head>
<body>
<!--

        <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
        
        rel和type这两个属性的取值是固定形式。
        href属性取值为小图标的地址。
        
        小图标格式是．ico，而不是．jpeg、.png、.gif等格式。
        对于．ico格式的图标制作，我们可以搜索一下“在线icon”。


图片转圆角 https://www.wetools.com/image-round/
图片转icon http://www.topdf.cn/img2icon

【日期标记】2023-06-16 09:06:52 以上同步完成
-->
</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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="shortcut icon" type="image/x-icon" href="img/连姆尼森 - 制作icon - 圆角.ico"/>
</head>
<body>
<!--
h1～h6是标题标签，h表示“header”。
h1～h6在HTML语义化中占有极其重要的地位。
h1～h6按照标题的重要性依次递减，其中h1重要性最高，h6重要性最低。

相对于其他语义化标签，h1～h6在搜索引擎优化（即SEO）中占有相当重要的地位。
在一个页面中，h1～h6这6个标签，我们不需要全部都用上，都是根据需要才用的。
对于h1～h6，一般情况下我们只会用到h1、h2、h3和h4，很少再会去用h5和h6，因为一个页面不可能用到那么多级的标题。
并且从搜索引擎优化的角度来说，h1、h2、h3和h4这4个标签会被赋予一定的权重，而h5和h6的权重跟普通标签差不多，在SEO优化上意义不大。


1．一个页面只能有一个h1标签
    h1标签表示每个页面中最高层级的标题，搜索引擎会赋予h1标签最高权重。
    虽然W3C没有明确规定一个页面不能有多个h1标签，但是我们还是推荐“一个页面一个h1标签”的做法。
    如果一个页面出现多个h1，对搜索引擎可能不好，也可能会被判以作弊。
    就像你写文章一样，一个页面就等于一篇文章，你见过一篇文章有多个主标题的么？

2．h1～h6之间不要出现断层
    搜索引擎对h1～h6标签比较敏感，尤其是h1和h2。
    一个语义良好的页面，h1～h6应该是完整有序而没有出现断层的。
    也就是说，要按照“h1、h2、h3、h4”这样的顺序依次排列下来，不要出现“h1、h3、h4”而漏掉h2的情况。

3．不要用h1～h6来定义样式
    我们都知道h1～h6是有默认样式的，从大到小。
    在实际开发中，很多时候我们需要为文本定义字体加粗或者字体大小。
    有些人喜欢用h1～h6来代替CSS，使用标签来控制样式，这是一种非常不好的做法。
    我们一定要记住，HTML关注的是结构（语义），CSS关注的是样式，结构跟样式应该分离。
    
4．不要用div来代替h1～h6
    从语义上来说，一个页面的标题应该使用h1～h6标签，不要使用div来代替，然后对div设置样式。
    div是无语义的标签，如果使用div来代替h1～h6，后期维护比较困难，而且对SEO影响也非常大。因为这种做法会让一个页面丢失大量的权重。

总结：
        h1~h6要顺序使用，不要跳过。
        h1~h4有搜索引擎权重，h1最大，其次h2；h5~h6则没有，它和普通标签一样；
        h1~h6不要设置文本样式
        h1一个页面只要有1个就可以了
-->
</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
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="shortcut icon" type="image/x-icon" href="img/连姆尼森 - 制作icon - 圆角.ico"/>
</head>
<body>
<!--
2.3.1 alt属性和title属性
    alt属性   用于图片描述，这个描述文字是给搜索引擎看的。图片不显示，显示alt。
    title属性 用于图片描述，不过这个描述文字是给用户看的。鼠标放上，显示title。

    搜索引擎跟人不一样，它看不出一张图片描绘的是什么东西，它只会查看HTML代码，通过img标签的alt属性或者页面上下文来判断图片的内容。
    因此，对于img标签，我们一定要添加alt属性，以便搜索引擎识别图片的内容。
    alt属性在搜索引擎优化中也很重要，并且会被赋予一定的权重。
    
    请一定要注意：
        alt属性是img标签必需属性，一定要添加；
        title属性是img标签可选属性，可加可不加。
        建议大家在实际开发中，对于img标签，要记得在alt属性中添加必要的描述信息。

2.3.2 figure元素和figcaption元素

“图片+图注”问题
        <div class="img-list">
            <img src="" alt=""/>
            <span>HTML入门教程</span>
        <div>
        
        但是这种实现方式的语义并不好。在HTML 5中，引入了figure和figcaption两个元素来增强图片的语义化。
        
        <figure>
            <img src="" alt=""/>
            <figcaption></figcaption>
        </figure>
        
        figure包住 img、figcaption。
        figure元素用于包含图片和图注，figcaption元素用于表示图注文字。
        在实际开发中，对于“图片+图注”效果，我们都建议使用figure和figcaption这两个元素来实现，从而使得页面的语义更加良好。
-->
</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
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="shortcut icon" type="image/x-icon" href="img/连姆尼森 - 制作icon - 圆角.ico"/>
</head>
<body>
<!--
在表格中，我们比较常用的标签是table、tr和td这3个。
不过为了加强表格的语义化，W3C还增加了5个标签：th、caption、thead、tbody和tfoot。

th表示“表头单元格”；
caption表示“表格标题”。
thead、tbody和tfoot这3个标签把表格从语义上分为三部分：表头、表身和表脚。

        <table>
            <caption>表格标题</caption>
            <thead>
                  <tr>
                      <th>表头单元格1</th>
                      <th>表头单元格2</th>
                  </tr>
            </thead>
            <tbody>
                  <tr>
                      <td>标准单元格1</td>
                      <td>标准单元格2</td>
                  </tr>
                  <tr>
                      <td>标准单元格1</td>
                      <td>标准单元格2</td>
                  </tr>
            </tbody>
            <tfoot>
                  <tr>
                      <td>标准单元格1</td>
                      <td>标准单元格2</td>
                  </tr>
            </tfoot>
        </table>

-->
</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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="shortcut icon" type="image/x-icon" href="img/连姆尼森 - 制作icon - 圆角.ico"/>
</head>
<body>
<!--
2.5.1 label标签
        W3C规范定义，label标签用于显示在输入控件旁边的说明性文字。也就是将某个表单元素和某段说明文字关联起来。
            
                <label for="">说明性文字</label>
                
        label标签for属性值为所关联的表单元素的id，
        例如<input id="name"type="text"/>，则其所关联的label标签应该为<label for="name"></label>。
        
        label标签的for属性有两个作用。
            （1）语义上绑定了label元素和表单元素。
            （2）增强了鼠标可用性。也就是说我们点击label中的文本时，其所关联的表单元素也会获得焦点。
        
        for属性使得鼠标单击的范围扩大到label元素上，极大地提高了用户单击的可操作性。
        
        下面两行代码是等价的。
                <input id="cbk" type="checkbox" /><label for="cbk">复选框</label>
                <label>复选框<input id="cbk" type="checkbox"/></label>

2.5.2 fieldset标签和legend标签
        使用fieldset和legend标签有两个作用。
            （1）增强表单的语义。
            （2）可以定义fieldset元素的disabled属性来禁用整个组中的表单元素。
        
        我们可以看到，使用了fieldset和legend这两个标签之后，表单形成了非常美观的“书签”效果。
-->


<div>
    <!-- label 无 -->
    <input id="Radio1" type="radio"/>单选框
    <input id="Checkbox1" type="checkbox"/>复选框
</div>
<hr/>
<div>
    <!-- label 在旁边 -->
    <input id="rdo" name="rdo" type="radio"/><label for="rdo">单选框</label>
    <input id="cbk" name="cbk" type="checkbox"/><label for="cbk">复选框</label>
</div>
<hr/>
<div>
    <!-- label 在外面 -->
    <label><input id="rdo2" name="rdo" type="radio"/>单选框</label>
    <label><input id="cbk2" name="cbk" type="checkbox"/>复选框</label>
</div>

<hr>

<!--我们可以看到，使用了fieldset和legend这两个标签之后，表单形成了非常美观的“书签”效果。-->
<form method="post">
    <fieldset>
        <legend>登录绿叶学习网</legend>
        <p>
            <label for="name">账号：</label><input type="text" id="name" name="name"/>
        </p>
        <p>
            <label for="pwd">密码：</label><input type="password" id="pwd" name="pwd"/>
        </p>
        <input type="checkbox" id="remember-me" name="remember-me"/><label for="remember-me">记住我</label>
        <input type="submit" value="登录"/>
    </fieldset>
</form>

</body>
</html>

语义化 换行br

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="shortcut icon" type="image/x-icon" href="img/连姆尼森 - 制作icon - 圆角.ico"/>
</head>
<body>
<!--
2.6.1 换行符<br/>
        很多新手会使用<br/>标签来换行，或者使用多个<br/>标签来实现元素之间的上下间距。

举例1（错误用法）：
        <div>
            <span>标题</span><br/><br/>
            <span>第1部分内容</span><br/>
            <span>第2部分内容</span><br/>
            <span>第3部分内容</span>
        </div>

举例2（错误用法）：
        <form method="post">
            <fieldset>
                <legend>登录绿叶学习网</legend>
                <label  for="name"> 账  号：</label><input  type="text"  id="name" name="name"/><br />
                <label  for="pwd"> 密  码：</label><input  type="password"  id="pwd" name="pwd"/><br />
                <input  type="checkbox"  id="remember-me"  name="remember-me"/><label for="remember-me">记住我</label>
                <input type="submit" value="登录" />
            </fieldset>
        </form>

举例3（正确用法）：
        <p>广东省<br />广州市<br />黄埔大道西601号</p>
        


上面两个例子使用<br/>标签的方式是错误的，这也是<br/>标签很常见的错误用法。
事实上，<br/>标签有自己特定的语义，不能随便用来实现换行效果。
W3C标准规定，<br/>标签仅仅用于段落中的换行，不能用于其他情况。
也就是说，<br/>标签只适合用于p标签内部的换行，不能用于其他标签。
-->
</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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="shortcut icon" type="image/x-icon" href="img/连姆尼森 - 制作icon - 圆角.ico"/>
</head>
<body>
<!--
2.6.3 strong标签和em标签
        
        strong用于实现加粗文本，em用于实现斜体文本。
        
        搜索引擎对这两个标签也赋予一定的权重。如果在一个页面中，为了SEO而想要突出某些关键字，可以使用strong和em这两个标签。
        
        如果去除这两个标签，而使用 css定义样式，就没有语义化了。

2.6.4 del标签和ins标签
        
        del表示“delete”，用于定义被删除的文本。 => 删除线
        ins表示“insert”，用于定义被更新的文本。 => 下划线
-->

<p>新鲜的新西兰奇异果</p>
<p>
    <del>原价：￥6.50/kg</del>
</p>
<p>
    <ins>现在仅售：￥4.00/kg</ins>
</p>

</body>
</html>

———————

css单位 px

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
px，全称pixel（像素，指的是一张图片中最小的点，或者是计算机屏幕中最小的点。

一张图片是由很多的小方点组成的。其中，每一个小方点就是一个像素（px）。

一台计算机的分辨率是800px×600px，指的就是“计算机显示屏宽是800个小方点，高是600个小方点”。

-->
</body>
</html>

css单位 %

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #father {
            width: 200px;
            height: 160px;
            font-size: 30px;
            border: 1px solid blue;
        }

        #son {
            width: 50%; /* 100px */
            height: 50%; /* 80px */
            font-size: 50%; /* 15px */
            border: 1px solid red;
            line-height: 50%;/* 7.5px */
        }
    </style>
</head>
<body>
<!--
在CSS中，支持百分比作为单位的属性很多，大致可以分为三大类。
    （1）width、height、font-size的百分比是相对于最近祖先元素“相同属性”的值来计算的。
    （2）line-height的百分比是font-size值来计算的（当前未设置font-size，会继承最近祖先元素）。
    （3）vertical-align的百分比是line-height值来计算的（当前未设置line-height，会继承最近祖先元素）。

如果父元素width为100px，子元素width为50%，则表示子元素实际width为50px。
如果父元素font-size为30px，子元素font-size为50%，则表示子元素实际font-size为15px。
-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
    $(function () {
        // dom获取css属性
        // var oSon = document.getElementById("son");
        // alert(getComputedStyle(oSon).lineHeight);// 7.5px

        // js获取css属性
        // alert($("#son").attr("line-height"));// undefined   不是属性值，是css值
        alert($("#son").css("line-height"));// 7.5px
    })
</script>
<div id="father">
    绿叶学习网
    <div id="son">绿叶学习网</div>
</div>
</body>
</html>

css单位 em

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #div1 p {
            width: 360px;
            font-size: 14px;

            /*二者等同*/
            /*text-indent: 28px;*/
            text-indent: 2em;
        }

        body {
            font-size: 62.5%;
        }

        #div2 .p1 {
            font-size: 1em;
        }

        #div2 .p2 {
            font-size: 1.5em;
        }

        #div2 .p3 {
            font-size: 2em;
        }

        #div2 .p11 {
            font-size: 10px;
        }

        #div2 .p22 {
            font-size: 15px;
        }

        #div2 .p33 {
            font-size: 20px;
        }


        #div3 p {
            padding: 0;
            margin: 0;
        }

        #div3 p {
            display: inline-block;
            border: 1px solid silver;
        }

        #div3 .p1 {
            font-size: 15px;
            width: 150px;
            height: 75px;
            text-indent: 30px;
        }

        #div3 .p2 {
            /*
                使用em作为单位时，
                    width不应该是15em吗，为什么是10em呢？
                    height不应该是7.5em吗，为什么是5em呢？
                
                在CSS中，em是相对于“当前元素”的字体大小而言的。其中，1em等于“当前元素”字体大小。
             */
            font-size: 1.5em;
            width: 10em;
            height: 5em;
            text-indent: 2em;
        }
    </style>
</head>
<body>
<!--
在CSS中，em是相对于“当前元素”的字体大小而言的。
其中，1em等于“当前元素”字体大小。这里的字体大小指的是以px为单位的font-size值。
例如：
    当前元素的font-size值为10px，则1em等于10px；
    当前元素的font-size值为20px，则1em等于20px

如果当前元素的font-size没有定义，则当前元素会继承父元素的font-size。
如果当前元素的所有祖先元素都没有定义font-size，则当前元素会继承浏览器默认的font-size。
其中，所有浏览器默认的font-size值都是16px。

-------------------------------------------------------
1
在CSS中，使用em作为单位有以下三个小技巧。
（1）首行缩进使用text-indent:2em实现
        text-indent值应该是font-size值的两倍。此时，我们使用“text-indent:2em”就可以轻松实现。

（2）使用em作为统一单位
        所有浏览器默认字体大小都是16px。
        如果在一个页面中，我们想要统一使用em作为单位，此时可以拿默认字体大小开刀。
        
        如果使用浏览器默认字体大小（16px），其中em与px对应关系如下。
            1em = 16px×1 = 16px
            0.75em = 16px×0.75 = 12px
        
        为了简化font-size的计算，我们在CSS中提前声明“body{font-size:62.5%;}”。
        通过这个声明，我们可以使得默认字体大小变为16px×62.5%=10px，此时em与px对应关系如下。
            1em = 10px
            0.75em = 7.5px
            
（3）使用em作为字体大小单位
        对于一个页面的字体大小，使用px作为单位时可扩展性不好，使用百分比作为单位时也不符合习惯，最佳选择是使用em作为单位来定义字体大小。
        使用em作为单位，当需要改变页面整体的文字大小时，我们只需要改变根元素字体大小即可，工作量变得非常少。
        
        em在跨平台网站开发中有着明显的优势。
-->

<div id="div1">
    <h3>爱莲说</h3>
    <p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出
        淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。
    </p>
    <p>予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后
        鲜有闻；莲之爱，同予者何人？牡丹之爱，宜乎众矣。
    </p>
</div>

<hr>

<div id="div2">
    <p class="p1">当前字体大小为1em，也就是10px</p>
    <p class="p11">当前字体大小为10px</p>
    <p class="p2">当前字体大小为1.5em，也就是15px</p>
    <p class="p22">当前字体大小为15px</p>
    <p class="p3">当前字体大小为2em，也就是20px</p>
    <p class="p33">当前字体大小为20px</p>
</div>

<hr>

<div id="div3">
    <p class="p1">绿叶学习网成立于2015年4月1日，是一个富有活力的技术学习网站。</p><br/>
    <p class="p2">绿叶学习网成立于2015年4月1日，是一个富有活力的技术学习网站。</p>
</div>


</body>
</html>

css单位 rem

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        html{font-size:62.5%; }
        #father
        {
            width:200px;
            height:160px;
            border:1px solid blue;
            font-size:2rem;
        }
        #son
        {
            width:150px;
            height:100px;
            border:1px solid red;
            font-size:2rem;
        }
    </style>
</head>
<body>
<!--
rem，全称font size of the root element，指的是相对于根元素（即html元素）的字体大小。
rem是CSS3新引入的单位。
rem布局是也是移动端最常用的字体大小之一。

rem跟em很相似，不过也有明显区别：
    em是相对“当前元素”的字体大小，而rem是相对“根元素”的字体大小。
    这里的font-size指的都是以px为单位的font-size值。

-----------------------------------------------------------------------------

在实际开发中，CSS单位用px好，还是用em好呢？
    在国外大部分主流网站都是使用em作为单位，而且W3C也建议我们使用em作为单位。
-->
<div id="father">
    绿叶学习网
    <div id="son">绿叶学习网</div>
</div>

</body>
</html>

css 继承性

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #father1 {
            color: Red;
            font-weight: bold
        }

        #father2 {
            color: Red;
            font-weight: bold
        }
    </style>
</head>
<body>
<!--
3.2.1 继承性

CSS的继承性，指的是子元素继承了父元素的某些样式属性。
例如在父元素定义字体颜色（color属性），子元素会继承父元素的字体颜色。
不过我们要注意，并不是所有属性都具有继承性，如padding、margin、border等就不具备继承性。
其实小伙伴们稍微想一下，要是padding、margin、border这些属性有继承性，那可是一件很恐怖的事情。

在CSS中，具有继承性的属性有三大类。
（1）文本相关属性：font-family、font-size、font-style、font-weight、font、line-height、text-align、text-indent、word-spacing。
（2）列表相关属性：list-style-image、list-style-position、list-style-type、list-style；
（3）颜色相关属性：color。

【a标签 的颜色继承问题】
为什么在父元素定义“color:Red”，子元素（a元素）却没有变成红色呢？
    其实这是因为a标签本身有默认的颜色样式，优先级比继承的要高。
    如果想要改变a标签的颜色，必须选中a标签进行操作才行。
-->

<div id="father1">
    绿叶学习网
    <div id="son">绿叶学习网</div>

</div>

<hr>

<div id="father2">
    绿叶学习网
    <a href="http://www.lvyestudy.com">绿叶学习网</a>
</div>


</body>
</html>

css 层叠性

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">
    <title>Title</title>
    <style type="text/css">
        /*div{color:Red; }*/
        /*div{color:Orange; }*/
        /*div{color:Blue; }*/

        /*单独定义第2个div颜色为purple*/
        #second{color:Purple; }
        /*定义所有div颜色为red*/
        div{color:Red; }
    </style>
</head>
<body>
<!--
3.2.2 层叠性
    CSS的层叠性，指的就是样式的覆盖。
    对于同一个元素来说，如果我们重复定义多个相同的属性，并且这些样式具有相同的权重，CSS会以最后定义的属性的值为准；
    也就是“后来者居上”原则。
    
    
    “后来者居上”原则必须符合三个条件。
        （1）元素相同。
        （2）属性相同。
        （3）权重相同。
    
    权重，指的是选择器的权重。
-->

<!--<div>绿叶学习网</div>-->
<!--<div>绿叶学习网</div>-->
<!--<div>绿叶学习网</div>-->

<hr>

<div>绿叶学习网</div>
<div id="second">绿叶学习网</div>
<div>绿叶学习网</div>

</body>
</html>

css优先级 简介

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">
    <title>Title</title>
    <style type="text/css">

    </style>
</head>
<body>
<!--
3.3 CSS优先级
        CSS，全称Cascading Style Sheet（层叠样式表）。
        很多人就只知道CSS是用来控制样式的，并没有深入理解“层叠”这两个字的含义。
        
        层叠，其实指的就是样式的覆盖。当样式的覆盖发生冲突时，以优先级高的为准。
        当“同一个元素”的“同一个样式属性”被运用上多个属性值时，我们就需要遵循一定的优先级规则来选择属性值了。
        
        样式覆盖发生冲突常见的共有以下五种情况。
            （1）引用方式冲突。
            （2）继承方式冲突。
            （3）指定样式冲突。
            （4）继承样式与指定样式冲突。
            （5）! important。
-->

</body>
</html>

css优先级 引用

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="index.css" rel="stylesheet" type="text/css"/>
    <style type="text/css">
        div {color: Orange;}
    </style>
</head>
<body>
<!--
3.3.1 引用方式冲突
        我们知道CSS有三种常用的引入方式：外部样式、内部样式和行内样式。
        
        行内样式 >（内部样式=外部样式）
        
        行内样式的优先级最高，内部样式与外部样式优先级相同。
        如果内部样式与外部样式同时存在，则以最后引入的样式为准（后来者居上）。
        
        字体最终颜色为Blue。
-->

<div style="color:Blue;">绿叶学习网</div>

</body>
</html>

css优先级 继承

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body{color:Red; }
        #grandfather{color:Green; }
        #father{color:Blue; }
    </style>
</head>
<body>
<!--
3.3.2 继承方式冲突
        如果由于继承方式引起的冲突，则“最近的祖先元素”获胜。
        
        
        由于继承方式引起的冲突，字体最终颜色为Blue。
-->
<div id="grandfather">
    <div id="father">
        <div id="son">绿叶学习网</div>
    </div>
</div>

</body>
</html>

css优先级 权重

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*===================> Red*/
        /*#lvye{color:Red; }*/
        /*.lvye{color:Green; }*/
        /*div{color:Blue; }*/
        
        /*===================> Purple*/
        /*权值=100+1=101*/
        #outer p {color:Red;}
        /*权值=100+10=110*/
        #outer .inner {color:Green;}
        /*权值=100+1+1=102*/
        #outer p strong {color:Blue;}
        /*权值=100+1+1+1=103*/
        #outer p span strong {color:Purple;}
    </style>
</head>
<body>
<!--
3.3.3 指定样式冲突
        所谓的指定样式，指的是指定“当前元素”的样式。
        当直接指定的样式发生冲突时，样式权值高者获胜。
        
        在CSS中，各种选择器的权值如表
            通配符          0
            伪元素          1
            元素选择器      1
            class选择器    10
            伪类           10
            属性选择器     10
            id选择器       100
            行内样式       1000
            
            伪元素只有四个 :before、::after、::first-letter、::first-line。
            伪类 ：hover、:first-child等。
        
        行内样式 > id选择器 > class选择器 >元素选择器
        
举例1：
        /*===================> Red*/
        #lvye{color:Red; }
        .lvye{color:Green; }
        div{color:Blue; }

        <div id="lvye" class="lvye">绿叶学习网</div>

        id选择器权重最高，因此div元素color属性最终值为Red。

举例2：
        /*===================> Purple*/
        /*权值=100+1=101*/
        #outer p {color:Red;}
        /*权值=100+10=110*/
        #outer .inner {color:Green;}
        /*权值=100+1+1=102*/
        #outer p strong {color:Blue;}
        /*权值=100+1+1+1=103*/
        #outer p span strong {color:Purple;}
        
        <div id="outer">
            <p class="inner">
                <span><strong>绿叶学习网</strong></span>
            </p>
        </div>
        
        当前元素为strong，则“#outer .inner{}”和“#outer p”都属于继承样式。
        在继承样式中，我们是不能用选择器权重这一套东西来计算的。
        
        总结：在CSS中，选择器权重的计算只针对指定样式（当前元素），并不能用于继承样式。
-->

<!--<div id="lvye" class="lvye">绿叶学习网</div>-->

<div id="outer">
    <p class="inner">
        <span><strong>绿叶学习网</strong></span>
    </p>
</div>

</body>
</html>

css优先级 继承与权重

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*===================> Black*/
        body{color:Red; }
        #outer{color:Green; }
        #outer #inner{color:Blue; }
        span{color:Purple; }
        strong{color:Black; }
    </style>
</head>
<body>
<!--
3.3.4 继承样式和指定样式冲突
        当继承样式和指定样式发生冲突时，指定样式获胜。
        
        在CSS中，选择器权重值的计算只针对指定样式（当前元素），并不能用于继承样式。
        当继承样式和指定样式发生冲突时，指定样式获胜。
        
        我们先判断指定样式，然后才考虑继承样式。

-->

<div id="outer">
    <p class="inner">
        <span><strong>绿叶学习网</strong></span>
    </p>
</div>

</body>
</html>

css优先级 !important

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*===================> Black*/
        /*权重=100+1=101*/
        #outer strong {color: Red;}
        /*权重=100+10+1=111*/
        #outer .inner strong {color: Green;}
        /*权重=10+1=11*/
        .inner strong {color: Blue;}
        /*权重=10+1+1=12*/
        .inner span strong {color: Purple;}
        strong {color: Black !important;}
    </style>
</head>
<body>
<!--
3.3.5 !important
    上面例子，按正常来说，“#outer .inner strong{}”权值最高，strong元素color属性值应该是Green。
    但是由于“strong{}”中应用了！important，因此strong元素color属性值最终为Black。



1．!important用处
    （1）情况一
            #someId p{color:Red; }
            p{color:Green; }
            
            在外层有#someId的情况下，你怎样才能让p变为Green呢？
            在这种情况下，如果不使用 !important，则第一条样式永远比第二条样式优先级更高。
    
    （2）情况二
            我们可能会碰到这种情况：你或者同事写了一些效果很差的行内样式（行内样式优先级往往是最高的），
            假如你要在内部样式表或者外部样式表中修改这个样式，你就应该想到在内部样式表或者外部样式表中使用 !important来覆盖那些行内样式。

2．如何覆盖!important
    （1）使用相同的选择器，再添加一条 !important的CSS语句。
         不过这个CSS语句得放在后面。因为在优先级相同的情况下，后面定义的会覆盖前面定义的（后来者居上）。
     
     （2）使用更高优先级的选择器，再添加一条 !important的CSS语句。
          使用“大杀器” !important可以将样式提升到最高等级，不管这个样式在哪个样式表还是在哪个选择器中。
          如果在同一样式中出现了多个 !important，则遵循后来者居上原则。
  

总而言之，对于CSS优先级，主要就是以下两个黄金定律。
    （1）优先级高的样式覆盖优先级低的样式。
    （2）同一优先级的样式，后定义的覆盖先定义的，即后来者居上。


举个栗子：
        <div id="div1">
            <span id="span1">陶攀峰</span>
        </div>
    
    case1：无!important，比较选择元素，（无选择元素的情况下，才比较最近祖先）
        /*===================> red*/
        #div1 #span1{ color: red;}
        #span1{ color: blue;}
        
    case2: 1个!important，最屌的
        /*===================> brown*/
        #div1 #span1{ color: red;}
        #span1{ color: blue;}
        span{ color: brown !important;}

    case3：多个!important，比较同 case1
        /*===================> green*/
        #div1 #span1{ color: red;}
        #span1{ color: blue;}
        #div1 #span1{ color: green !important;}
        #span1{ color: pink !important;}
        span{ color: brown !important;}
        
总结：
    1. 无 !important，无选中元素，取最近的父元素，多个父元素选择器则比较权重
    2. 无 !important，有选择元素，则比较权重
    3. 有一个 !important，它是最屌的，多个则比较权重（若选择器相同，则父元素权重可与当前元素相加）
-->

<div id="outer">
    <p class="inner">
        <span><strong>绿叶学习网</strong></span>
    </p>
</div>

</body>
</html>

css优先级 自测案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #div1 #span1{ color: red;}
        #span1{ color: blue;}
        #div1 #span1{ color: green !important;}
        #span1{ color: pink !important;}
        span{ color: brown !important;}
    </style>
</head>
<body>


<div id="div1">
    <span id="span1">陶攀峰</span>
</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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    </style>
</head>
<body>
<!--
好的命名有很多优点，不仅方便阅读、方便维护，而且对搜索引擎优化也是相当重要的。

在CSS中，对于元素id和class的命名
（1）使用英文命名而非中文命名。例如页面头部应该命名为header，而不是toubu。
（2）尽量不缩写，除非是一看就明白的单词，例如nav。
（3）命名统一规范，尽量不要出现一个用中划线命名，而另外一个用下划线命名的情况。虽然下划线和中划线都可以，但是建议使用中划线，可参见各大型网站。
（4）为了避免class命名的重复，命名时一般取父元素的class名作为前缀
        <div class="column">
            <h3 class="column-title"></h3>
            <div class="column-content"></div>
        </div>


1．网页主体
        最外层   wrapper
        头部     header
        内容     content
        侧栏     sidebar
        栏目     column
        热点     hot
        新闻     news
        下载     download
        标志     logo
        导航条   nav
        主题     main
        左侧     main-left

2．网页导航
        主导航      main-nav
        子导航      sub-nav
        边导航      side-nav
        左导航      leftside-nav
        右导航      rightside-nav
        顶导航      top-nav
        右侧        main-right
        底部        footer
        友情链接    friendlink
        加入我们    joinus
        版权        copyright
        服务        service
        登录        login
        注册        register

3．网页菜单
        菜单    menu
        子菜单  submenu

4. 其他
        标题        title
        摘要        summary
        登录条      loginbar
        搜索        search
        标签页      tab
        广告        banner
        小技巧      tips
        图标        icon
        法律声明    siteinfolegal
        网站地图    sitemap
        工具条      tool、toolbar
        首页        homepage
        子页        subpage
        合作伙伴    parter
        帮助        help
        指南        guide
        滚动        scroll
        提示信息    msg
        投票        vote
        相关文章    related
        文章列表    list
-->
</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
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    </style>
</head>
<body>
<!--
CSS属性书写顺序
    影响文档流书写（布局属性）   display、position、float、clear等
    自身盒子模型属性             width、height、margin、padding、border、overflow等
    文本性属性                   font、line-height、text-align、text-indent、vertical-align等
    装饰性属性                   color、background-color、opacity、cursor等
    其他属性                     content、list-style、quotes等

由上到下，书写。
        #main
        {
            /*影响文档流属性*/
            display:inline-block;
            position:absolute;
            top:0;
            left:0;
            
            /*盒子模型属性*/
            width:100px;
            height:100px;
            border:1px solid gray;
            
            /*文本性属性*/
            font-size:15px;
            font-weight:bold;
            text-indent:2em;
            
            /*装饰性属性*/
            color:White;
            background-color:Red;
            
            /*其他属性*/
            cursor:pointer;
        }
-->
</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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    </style>
</head>
<body>
<!--
        *{padding:0; margin:0; }
        
        在实际开发中，并不建议使用这个方法。因为这个方法性能非常低，它把所有元素的padding和margin都去掉了，
        然而像表格元素（或者input元素）的margin和padding我们是不希望去掉的。
        
        此外，它只能消除默认的padding和margin，像ul的列表项符号、em的斜体、strong的加粗等却没有去除。
        
        
以下是Eric Meyer发布的最新版的重置样式表（2011年1月26日发布），参考于 http://meyerweb.com/eric/tools/css/reset/
Eric Meyer的CSS reset完整代码如下：

        /* http://meyerweb.com/eric/tools/css/reset/
          v2.0 | 20110126
          License: none (public domain)
        */
        html, body, div, span, applet, object, iframe，
        h1, h2, h3, h4, h5, h6, p, blockquote, pre，
        a, abbr, acronym, address, big, cite, code，
        del, dfn, em, img, ins, kbd, q, s, samp，
        small, strike, strong, sub, sup, tt, var，
        b, u, i, center，
        dl, dt, dd, ol, ul, li，
        fieldset, form, label, legend，
        table, caption, tbody, tfoot, thead, tr, th, td，
        article, aside, canvas, details, embed，
        figure, figcaption, footer, header, hgroup，
        menu, nav, output, ruby, section, summary，
        time, mark, audio, video {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font: inherit;
            vertical-align: baseline;
        }
        /* HTML5 display-role reset for older browsers */
        article, aside, details, figcaption, figure，
        footer, header, hgroup, menu, nav, section {
            display: block;
        }
        body {
            line-height: 1;
        }
        ol, ul {
            list-style: none;
        }
        blockquote, q {
            quotes: none;
        }
        blockquote:before, blockquote:after，
        q:before, q:after {
            content: ‘';
            content: none;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
        }
-->
</body>
</html>

CSS盒子模型

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
57
58
59
60
61
62
63
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #father {
            display: inline-block; /*将块元素转换为inline-块元素*/
            border: 1px solid #CCCCCC;
        }

        #son {
            display: inline-block; /*将块元素转换为inline-块元素*/
            padding: 20px;
            margin: 40px;
            border: 1px solid red;
            background-color: #FCE9B8;
        }

        span {
            border: 1px solid blue;
            background-color: #C5FCDF;
        }
    </style>
</head>
<body>
<!--
5.1 CSS盒子模型

1．内容区
    内容区是CSS盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。
    内容区是盒子模型必备的组成部分，其他的三部分都是可选的。
    
    内容区有三个属性：width、height和overflow。
    使用width和height属性可以指定盒子内容区的高度和宽度。
    在这里注意一点，width和height这两个属性是针对内容区而言，并不包括padding部分。
    当内容信息太多而超出内容区所占范围时，可以使用overflow溢出属性来指定处理方法。

2．内边距
    内边距，指的是内容区和边框之间的空间，可以看做是内容区的背景区域。
    
    指定内容区域各方向边框之间的距离。

3．边框
    border-width:1px;
    border-style:solid;
    border-color:gray;
        等价于
    border:1px solid gray;

4．外边距
    外边距，指的是两个盒子之间的距离，它可能是子元素与父元素之间的距离，也可能是兄弟元素之间的距离。
    外边距使得元素之间不必紧凑地连接在一起，是CSS布局的一个重要手段。
    
    同时，CSS允许给外边距属性指定负数值，当指定负外边距值时，整个盒子将向指定负值的相反方向移动，
    以此可以产生盒子的重叠效果。这就是传说中的“负margin技术”
-->
<div id="father">
    <div id="son"><span>绿叶学习网</span></div>
</div>

</body>
</html>

padding 背景图问题

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div {
            background-image: url("img/仓鼠.jpg");
            width: 127px;
            height: 30px;
            line-height: 30px;
            font-size: 12px;
            color: Red;

            /*旧的width-"padding-left" = 新的width*/
            /*127-55=72*/
            width: 72px;
            padding-left: 55px;
        }
    </style>
</head>
<body>
<div>商会状况</div>

</body>
</html>

margin 叠加问题

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div {
            height: 60px;
            line-height: 60px;
            text-align: center;
            font-size: 30px;
            color: White;
            background-color: Purple;
        }

        #first {margin-bottom: 20px;}
        #second {margin-top: 30px;}
    </style>
</head>
<body>
<!--
外边距叠加，又称“margin叠加”，指的是当两个垂直外边距相遇时，这两个外边距将会合并为一个外边距，即“二变一”。
其中，叠加之后的外边距高度等于发生叠加之前的两个外边距中的最大值。


对于外边距叠加，我们分为三种情况来讨论：同级元素、父子元素和空元素。
    1．同级元素
        当一个元素出现在另外一个元素上面的时候，第一个元素的下边距（margin-bottom）将会与第二个元素的上边距（margin-top）会发生合并
        上 margin-bottom 20px;
        下 margin-top 10px;
        
            合并后
        
        上 margin-bottom 20px;
        下 margin-top 0px;

    2．父子元素
        当一个元素包含在另外一个元素中时（父子关系），
        假如没有内边距padding或边框border把外边距分隔开的话，父元素和子元素的相邻上下外边距也会发生合并
        
        父 margin-top 20px;
        子 margin-top 10px;
        
            合并后
        
        父 margin-top 20px;
        子 margin-top 0px;
    
    3．空元素
        当一个空元素有上下外边距时，如果没有border或者padding，则元素的上外边距与下外边距会发生合并。
        空元素，指的是没有子元素或者没有文字内容的元素，例如<br/>、<hr/>等。
        如果空元素的外边距碰到另外一个元素的外边距，它们也会发生合并。
        
    ![外边距叠加的三种情况](https://img-blog.csdnimg.cn/7420df647c7d41f59ec0b9665f8130eb.png)

外边距叠加只有三种情况：同级元素、父子元素和空元素。
此外对于外边距叠加，我们还需要注意以下几点：
    （1）左右外边距永远不会有叠加，水平外边距指的是margin-left和margin-right。
    （2）上下外边距只会在以上三种情况下会叠加，上下外边距指的是margin-top和margin-bottom。
    （3）外边距叠加之后的外边距高度等于发生叠加之前的两个外边距中的最大值。
    （4）外边距叠加针对的是block以及inline-块元素，不包括inline元素。因为inline元素的margin-top和margin-bottom设置无效。

5.4.2 外边距叠加的意义
        <p>...</p>
        <p>...</p>
        <p>...</p>
        
        CSS定义外边距叠加的初衷就是为了更好地对文章进行排版。
        如果对 p 设置了 margin-top 20px;margin-bottom 20px;，若不叠加那么 p 和 p 之间就是 40px了。
        但是叠加了之后，margin-top 20px;，p 和 p 之间就是 20px了。
        
        当然，了解外边距叠加的原理，能给我们解决不少疑惑。
        此外在实际开发中，给大家一个建议：最好统一使用margin-top或margin-bottom，不要混合使用，从而降低出现问题的风险。
        当然这在技术上并不是必需的，但却是一个良好的习惯。
-->
<div id="first">A</div>
<div id="second">B</div>

</body>
</html>

负margin技术

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .wrapper1 div {
            width: 300px;
            height: 60px;
            line-height: 60px;
            font-size: 21px;
            font-weight: bold;
            text-align: center;
            color: White;
        }

        .wrapper1 div:nth-child(1) {
            background-color: Red;
        }

        .wrapper1 div:nth-child(2) {
            background-color: Purple;
        }

        .wrapper1 div:nth-child(3) {
            background-color: Blue;
        }


        /*去除inline-块元素之间的间距*/
        .wrapper2 {
            font-size: 0;
        }

        .wrapper2 div {
            display: inline-block;
            width: 60px;
            height: 60px;
            line-height: 60px;
            font-size: 21px;
            font-weight: bold;
            text-align: center;
            color: White;
        }

        .wrapper2 div:nth-child(1) {
            background-color: Red;
        }

        .wrapper2 div:nth-child(2) {
            background-color: Purple;
        }

        .wrapper2 div:nth-child(3) {
            background-color: Blue;
        }
    </style>
</head>
<body>
<h3>上下样例</h3>
<div class="wrapper1">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

<hr>

<h3>上下样例 div2 margin-top: -30px;</h3>
<div class="wrapper1">
    <div>1</div>
    <div style="margin-top: -30px;">2</div>
    <div>3</div>
</div>

<hr>

<h3>上下样例 div2 margin-bottom: -30px;</h3>
<div class="wrapper1">
    <div>1</div>
    <div style="margin-bottom: -30px;">2</div>
    <div>3</div>
</div>

<hr>

<h3>左右样例</h3>
<div class="wrapper2">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

<hr>

<h3>左右样例 div2 margin-left: -30px;</h3>
<div class="wrapper2">
    <div>1</div>
    <div style="margin-left: -30px;">2</div>
    <div>3</div>
</div>

<hr>

<h3>左右样例 div2 margin-right: -30px;</h3>
<div class="wrapper2">
    <div>1</div>
    <div style="margin-right: -30px;">2</div>
    <div>3</div>
</div>

</body>
</html>

负margin技巧

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #content, #sidebar {
            float: left;
            color: white;
        }

        #content {
            width: 100%;
            margin-right: -200px;
            background-color: Red;
        }

        #sidebar {
            width: 200px;
            background-color: Purple;
        }

        /* 防止浏览器可视区域宽度不足时发生文本重叠*/
        #content p {
            margin-right: 210px; /* 它是 200px + 10px, 10px是他们的间距*/
        }

        #father {
            position: relative;
            width: 200px;
            height: 160px;
            border: 1px dashed gray;
        }

        #son {
            position: absolute;
            top: 50%;
            left: 50%;
            /*margin-left: -50px;*/
            /*margin-top: -30px;*/
            /*width: 100px;*/
            /*height: 60px;*/
            
            margin-left: -15px;
            margin-top: -20px;
            width: 30px;
            height: 40px;
            /*2023-06-16 18:43:37 我是真的看不懂为什么，暂时记个疑惑在这里吧。*/
            /*2023-06-26 16:20:50 在过一遍笔记的时候，哈哈，这是两步移动 先对father中心，再对son中心*/
            background-color: Red;
        }
    </style>
</head>
<body>
<!--
负margin的使用很灵活，常用技巧有四个。
    （1）图片与文字对齐。
    （2）自适应两列布局。
    （3）元素垂直居中。
    （4）tab选项卡。

1．图片与文字对齐
    当图片与文字排在一起的时候，在底部水平方向上往往都是不对齐的，这是因为图片与文字默认是基线对齐（vertical-align:baseline）。
    如果想要实现图片与文字底部水平方向对齐，除了使用“vertical-align:text-bottom”这个方法之外，还可以使用兼容性比较好的负margin来实现。

2. 自适应两列布局
    自适应两列布局自适应两列布局，指的是在左右两列中，其中有一列的宽度为自适应，另外一列宽度是固定的。
    如果使用float，一般只能实现固定的左右两列布局，并不能实现其中一列为自适应的布局。

3．元素垂直居中
    想要实现块元素的垂直居中一般来说比较麻烦，不过有一个经典的方法，就是使用position结合负margin来实现。
    具体做法是：首先给父元素写上“position:relative”，这样做是为了给子元素添加“position:absolute”的时候不会被定位到“外太空”去。
    语法：
        父元素 {
            position:relative;
        }
        子元素 {
            position:absolute;
            top:50%;
            left:50%;
            margin-top:"height值一半的负值";
            margin-left:"width值一半的负值";
        }
    
    position这种方法是万能的，也就是不仅可以用于块元素（block），还可以用于inline元素和inline-块元素。
    /*2023-06-16 18:43:37 我是真的看不懂为什么，暂时记个疑惑在这里吧。*/

4．tab选项卡
    tab选项卡效果是一种十分节省页面空间的方式，在实际开发中经常会用到。
    关键是使用“margin-top:-1px”来解决选项卡下边框显示问题。
-->

<img src="https://www.baidu.com/favicon.ico" alt=""/>百度LOGO
<hr>
<img style="margin: 0 10px -10px 0;" src="https://www.baidu.com/favicon.ico" alt=""/>百度LOGO
<!--<img style="margin: 0 3px -3px 0;" src="https://www.baidu.com/favicon.ico" alt=""/>百度LOGO-->
<hr>

<div id="content"><p>这是主体部分，自适应宽度</p></div>
<div id="sidebar"><p>这是侧边栏部分，固定宽度 </p></div>

<hr>

<div id="father">
    <div id="son"></div>
</div>

</body>
</html>

overflow

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .case1 {width: 200px;height: 160px;border: 1px solid gray;}

       .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>
<!--
W3C标准指出，通常一个盒子的内容是被限制在盒子边框之内的。
但是有时也会产生溢出，也就是部分或者全部内容跑到盒子边框之外。

在CSS中，我们可以使用overflow属性来定义当内容溢出元素边框时发生的事情。
        overflow: 属性值;
            visible   默认值，若内容溢出，则溢出内容可见
            hidden    若内容溢出，则溢出内容隐藏
            scroll    若内容溢出，则显示滚动条
            auto      auto跟scroll很相似，不同的是auto值在盒子需要的时候给它一个滚动条
    
对于overflow属性，最常见的三个用途如下。
    （1）使用“overflow:scroll”显示滚动条。
    （2）使用“overflow:hidden”来隐藏内容，以免影响布局。
    （3）使用“overflow:hidden”来清除浮动。
    
    “overflow:hidden”会使得超出元素的部分自动隐藏，这样处理不好的一点就是这部分的内容显示不完全，比如图片只显示了一部分。
    不过“overflow:hidden”使得内容超出时不会影响页面整体布局，这是它的好处。
    
    使用clear属性来清除浮动的缺点是增加一个多余的标签，而使用“overflow:hidden”清除浮动则不需要。
    不过“overflow:hidden”是一个小炸弹，它会将超出父元素部分的内容隐藏，有时候这并不是我们预期想要的效果。
-->

<div class="case1">
    水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱
    牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而
    不可亵玩焉。予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有
    闻；莲之爱，同予者何人？牡丹之爱，宜乎众矣。
</div>

<br><br><br><br><br><br><br>
<hr>

<div style="overflow: hidden;" class="case1">
    水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱
    牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而
    不可亵玩焉。予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有
    闻；莲之爱，同予者何人？牡丹之爱，宜乎众矣。
</div>

<hr>

<div style="overflow: scroll;" class="case1">
    水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱
    牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而
    不可亵玩焉。予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有
    闻；莲之爱，同予者何人？牡丹之爱，宜乎众矣。
</div>

<hr>

<div class="wrapper">
    <div class="first"></div>
    <div class="second"></div>
</div>

<br><br><br><br>
<hr>

<div style="overflow: hidden;" class="wrapper">
    <div class="first"></div>
    <div class="second"></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
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    </style>
</head>
<body>
<!--
6.1 块元素和行内元素

HTML元素根据表现形式，常见的可以分为两类。
    （1）块元素（block）。
    （2）行内元素（inline）。
    block和inline是最常见的两种形式，当然HTML元素类型除了这两种，还有inline-block、table-cell等。

------------------------------------------------------------------------------------
6.1.1 块元素
    块元素在浏览器默认显示状态下将占据整行，排斥其他元素与其位于同一行。
    块元素一般为矩形，可以容纳行元素和其他的块元素。
    
    div,  h1~h6,  p,  hr,  ol,  ul
    表中只是列出了HTML入门常见的块元素，并不是全部。
    
    块元素具有如下特点。
        （1）独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素。
        （2）块元素内部可以容纳其他块元素或行元素。
        （3）可以定义高度（height），也可以定义宽度（width）。
        （4）可以定义四个方向的margin属性。
------------------------------------------------------------------------------------
6.1.2 行内元素
    行内元素与块元素恰恰相反。行内元素默认显示状态可以与其他行内元素共存在同一行。
    
    行内元素具有如下特点。
        （1）可以与其他行内元素位于同一行。
        （2）行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果。
        （3）无法定义高度（height），也无法定义宽度（width）。
        （4）可以定义margin-left和margin-right，无法定义margin-top和margin-bottom。
-->
</body>
</html>

display 简介

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /* 父元素 font-size 0 可以使 inline-block 子元素紧挨着 */
        /* 当元素的display为inline或者inline-block的时候，这些缩进、换行就会产生空白，导致前端页面展示变形。 */
        /*body {font-size: 0;}*/

        span {
            display: inline-block;
            width: 60px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
<!--
除了block和inline, HTML元素还有inline-block、table、table-cell等类型。

如果我们想要将元素从一个类型转换为另外一个类型，怎么办呢？
在CSS中，我们可以使用display属性来改变元素的类型。
        display: 属性值;
            inline          行内元素
            block           块元素
            inline-block    行内块元素
            none            隐藏元素
            table           以表格形式显示，类似于 table 元素
            table-row       以表格行形式显示，类似于 tr 元素
            table-cell      以表格单元格形式显示，类似于 td 元素

--------------------------------------------------------------------------------
6.2.1 块元素
    块元素，指的是块元素。块元素一般具有以下几个特点。
        （1）独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素。
        （2）块元素内部可以容纳其他块元素或行元素。
        （3）可以定义宽度（width），也可以定义高度（height）。
        （4）可以定义四个方向的margin。

--------------------------------------------------------------------------------
6.2.2 inline元素
    inline元素，指的是行内元素。行内元素一般具有以下几个特点。
        （1）可以与其他行内元素位于同一行。
        （2）行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果。
        （3）无法定义高度（height），也无法定义宽度（width）。
        （4）可以定义margin-left和margin-right，无法定义margin-top和margin-bottom。

--------------------------------------------------------------------------------
6.2.3 inline-block元素
    在CSS中，我们可以使用“display:inline-block”来将元素转换为行内块元素。行内块元素具有以下两个特点。
    （1）可以定义width和height。
    （2）可以与其他行内元素位于同一行。
    
    也就是说inline-block元素既具备块元素的特点，也具备行内元素的特点。
    在HTML中，常见的inline-block元素有两个：img元素和input元素。
    对于这两个inline-block元素，我们一定要记住。
    
    在实际开发中，我们可能经常需要为span等行内元素定义一定的width和height，此时应该考虑到“display:inline-block;”。
    此外，细心的小伙伴会发现，怎么inline-block元素之间还有间距呢？
    对于这个问题，我们在后面“去除inline-block元素间距”一节会给大家详细介绍。



-->

<h3>6.2.3 inline-block元素</h3>
<span></span>
<span></span>
<span></span>

</body>
</html>

display none

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .case1 {
            display: inline-block;
            width: 60px;
            height: 60px;
            line-height: 60px;
            border: 1px solid red;
            font-size: 36px;
            text-align: center;
        }

        .father {
            display: inline-block;
            border: 1px solid silver;
            padding: 10px;
        }

        .father .first, .father .second {
            display: inline-block;
            width: 60px;
            height: 60px;
            line-height: 60px;
            font-size: 36px;
            text-align: center;
            color: White;
            background-color: Red;
        }
    </style>
</head>
<body>
<!--
6.3.1 display:none简介
    对于“display:none”，我们需要注意以下两点。
    （1）“display:none”一般用于JavaScript动态隐藏元素，被隐藏的元素不占据原来的位置空间。
    （2）“display:none”不推荐用来隐藏一些对SEO关键的部分。
         因为对于搜索引擎来说，它会直接忽略“display:none”隐藏的内容，不把“display:none”隐藏的内容加入权重考虑。

------------------------------------------------------------------------------------------
6.3.2 “display:none”和“visibility:hidden”的区别
    （1）“display:none”的元素被隐藏之后，不占据原来的位置。也就是说彻底地消失了，看不见也摸不着。
    （2）“visibility:hidden”的元素被隐藏之后，依然占据原来的位置。也就是说并没有彻底消失，看不见但摸得着。
-->
<h3>未设置</h3>
<div class="case1">A</div>
<div class="case1">B</div>
<div class="case1">C</div>

<hr>

<h3>设置B "display: none;"</h3>
<div class="case1">A</div>
<div style="display: none;" class="case1">B</div>
<div class="case1">C</div>

<hr>

<h3>未设置</h3>
<div class="father">
    <div class="first">A</div>
    <div class="second">B</div>
</div>

<hr>

<h3>设置A "display: none;"</h3>
<div class="father">
    <div style="display: none;" class="first">A</div>
    <div class="second">B</div>
</div>

<hr>

<h3>设置A "visibility: hidden;"</h3>
<div class="father">
    <div style="visibility: hidden;" class="first">A</div>
    <div class="second">B</div>
</div>

</body>
</html>

display table-cell 图片垂直

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>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>
<!--
“display:table-cell”非常强大，可以实现以下三种功能。
    （1）图片垂直居中于元素。
    （2）等高布局。
    （3）自动平均划分元素，并且在一行显示。


6.4.1 图片垂直居中于元素
    在CSS中，我们可以使用“display:table-cell”和“vertical-align:center”来实现大小不固定的图片的垂直居中效果。
    
          父元素 {
              display:table-cell;
              vertical-align:center;
          }
          子元素{vertical-align:center; }
          
    图片的水平居中可以使用“text-align:center”来实现，而图片的垂直居中效果可以使用“display:table-cell”和“vertical-align:center”配合来实现。
-->

<div><img src="img/仓鼠.jpg" alt=""/></div>
<div><img src="img/小叶子.png" alt=""/></div>
<div><img src="img/聊天结束.png" alt=""/></div>
</body>
</html>

display table-cell 等高布局

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>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>
<!--
“display:table-cell”非常强大，可以实现以下三种功能。
    （1）图片垂直居中于元素。
    （2）等高布局。
    （3）自动平均划分元素，并且在一行显示。


6.4.2 等高布局
    我们知道，同一行的单元格td元素高度是相等的。因此，table-cell元素也具备这个特点。根据这个特点，我们可以实现等高布局效果。
          
    左右两个盒子高度相等，并且高度由两者高度最大值决定。这就是自适应的等高布局。
-->

<div id="wrapper">
    <div id="img-box">
        <img src="img/小叶子.png" alt=""/>
    </div>
    <div id="text-box">
      <span>
          《ONE PIECE》（海贼王、航海王）简称"OP"，是日本漫画家尾田荣一郎
        作画的少年漫画作品。在《周刊少年Jump》1997年34号开始连载。描写了拥有橡皮身体戴草帽的青年
        路飞，以成为"海贼王"为目标和同伴在大海展开冒险的故事。
      </span>
    </div>
</div>
</body>
</html>

display table-cell 平均划分

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>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>
<!--
“display:table-cell”非常强大，可以实现以下三种功能。
    （1）图片垂直居中于元素。
    （2）等高布局。
    （3）自动平均划分元素，并且在一行显示。


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

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

</body>
</html>

去除inline-block元素间距 ul

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
57
58
59
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        #ul1 {
            list-style-type: none;
        }

        #ul2 {
            list-style-type: none;
            font-size: 0; /* 去除元素间距 */
        }

        li {
            display: inline-block;
            width: 60px;
            height: 60px;
            line-height: 60px;
            font-size: 30px;/* 父元素字体0，子元素也要设置大小 */
            text-align: center;
            color: White;
            background-color: Purple;
        }
    </style>
</head>
<body>
<!--
6.5 去除inline-block元素间距

在图中我们可以看到inline-block元素之间是有间距的。在实际开发中，这种间距有时会对我们的布局产生影响。
大多数时候为了不影响布局，我们需要去除inline-block元素的间距。

在CSS中，我们可以使用“font-size:0”来去除inline-block元素的间距。
            父元素{font-size:0; }
-->

<ul id="ul1">
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>

<hr>

<ul id="ul2">
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>

</body>
</html>

去除inline-block元素间距 img

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #div2 {
            font-size: 0;/* 去除元素间距 */
            /*由于img元素也是inline-block元素，因此我们也能使用“font-size:0”来去除图片之间的间距。*/
        }
        img{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<!--
6.5 去除inline-block元素间距

在图中我们可以看到inline-block元素之间是有间距的。在实际开发中，这种间距有时会对我们的布局产生影响。
大多数时候为了不影响布局，我们需要去除inline-block元素的间距。

在CSS中，我们可以使用“font-size:0”来去除inline-block元素的间距。
            父元素{font-size:0; }

由于img元素也是inline-block元素，因此我们也能使用“font-size:0”来去除图片之间的间距。
-->

<div id="div1">
    <img src="img/仓鼠.jpg" alt=""/>
    <img src="img/仓鼠.jpg" alt=""/>
    <img src="img/仓鼠.jpg" alt=""/>
</div>

<hr>

<div id="div2">
    <img src="img/仓鼠.jpg" alt=""/>
    <img src="img/仓鼠.jpg" alt=""/>
    <img src="img/仓鼠.jpg" alt=""/>
</div>

</body>
</html>

text-indent -9999px h1 logo问题

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
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #case1 {
            width: 300px;
            height: 100px;
            background-image: url("img/仓鼠.jpg");
        }

        #case2 {
            width: 300px;
            height: 100px;
            background-image: url("img/仓鼠.jpg");

            text-indent: -9999px;
        }

        #case3 {
            width: 300px;
            height: 100px;
            background-image: url("img/仓鼠.jpg");
        }

        #case3 span {
            display: none;
        }
    </style>
</head>
<body>
<!--
7.2 深入text-indent
        有过开发经验的小伙伴们，或多或少会见过“text-indent:-9999px；”这种写法。“text-indent:-9999px；”一般用于LOGO部分。
        在搜索引擎优化中，h1是非常重要的标签。一般情况下，我们都是把网站的LOGO图片放到h1标签中。
        不过我们都知道，搜索引擎无法识别图片，只能识别文字。为了更好地优化SEO，那该怎么做呢？
        
        有一个很好的解决方法就是：指定h1元素的长宽与LOGO图片的长宽一样，然后定义h1的背景图片（background-image）为LOGO图片。
        也就是说，我们使用LOGO图片作为h1标签的背景图片，然后使用“text-indent:-9999px；”来隐藏h1的文字内容。
        
        除了“text-indent:-9999px；”，我们还可以使用“display:none；”来隐藏文字，以便达到预期效果
        其实页面效果是达到了，但是搜索引擎却不吃这一套！为什么呢？对于使用“display:none；”来隐藏的文字，搜索引擎一般都把这些文字当做垃圾信息而忽略，此时h1的权重会丢失。所以我们不建议使用这种方式。
        当然大家想要更好地理解这个技巧，也需要一定搜索引擎优化的知识。搜索引擎优化（即SEO）也是前端工程师必备知识之一。
        
为什么定义text-indent为-9999px，而不是-999px、-99px呢？
    一般电脑屏幕宽度有为1024px、1366px等，之所以定义为-9999px，那是为了让文字的缩进足够大，就算是大分辨率电脑下也看不到文字，因为没有哪台电脑的屏幕宽度大于9999px。
    如果你定义text-indent为-999px或者-99px，那么缩进的文字还是有可能会出现在浏览器窗口内。
-->

<h2>原版</h2>
<h1 id="case1">绿叶学习网</h1>

<hr>

<h2>text-indent: -9999px;</h2>
<h1 id="case2">绿叶学习网</h1>

<hr>

<h2>display: none;</h2>
<h1 id="case3"><span>绿叶学习网</span></h1>

</body>
</html>

text-align 水平居中

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .case1 {
            width: 100px;
            height: 100px;
            border: 1px solid gray;
            text-align: center; /*-------- 文字、inline元素以及inline-block元素的水平居中 ----------*/
        }

        .outer-box {
            width: 120px;
            height: 80px;
            border: 1px solid gray;
            text-align: center; /*-------- 文字、inline元素以及inline-block元素的水平居中 ----------*/
        }

        .inner-box {
            width: 50px;
            height: 50px;
            background-color: Orange;
        }

        .inner-box2 {
            width: 50px;
            height: 50px;
            background-color: Orange;

            display: inline-block; /*-------- div 块元素 变为 行内块元素 ----------*/
        }

        .outer-box3 {
            width: 120px;
            height: 80px;
            border: 1px solid gray;
            /*text-align: center;*//*--------- 非块元素的儿子，左右居中 ---------*/
            /*margin: 0 auto;*//* 当前块元素相对父亲左右居中 */
        }

        .inner-box3 {
            width: 50px;
            height: 50px;
            background-color: Orange;

            margin: 0 auto; /* 当前块元素相对父亲左右居中 */
        }
    </style>
</head>
<body>
<!--
7.3 深入text-align
        在CSS中，我们可以使用text-align属性来控制文本以及图片的对齐方式
            left     左对齐
            right    右对齐
            center   居中

-----------------------------------------------------------------------------

7.3.1 text-align起作用的元素
        有人问，text-align属性是不是就只对文字和图片起作用呢？答案是否定的。
        一个比较准确的说法是：text-align对文字、inline元素（行内元素）以及inline-block元素（行内块元素）起作用，但对块元素不起作用。
        其中，img元素属于inline-block元素。
        
        我们都知道div是块元素，如果想要使用水平居中div元素，可以先使用“display:inline-block”来将div转化为inline-block元素，然后再使用“text-align:center”。

-----------------------------------------------------------------------------

7.3.2 “text-align:center；”与“margin:0 auto；”的区别
        在页面水平居中实现中，“text-align:center；”与“margin:0 auto；”是最常见的两种水平居中方式。
        不过这两者也有着本质的区别。
            （1）“text-align:center；”实现的是文字、inline元素以及inline-block元素的水平居中。
            （2）“margin:0 auto；”实现的是块元素的水平居中。
            （3）“text-align:center；”在父元素中定义，“margin:0 auto；”在当前元素中定义。
-->
<h4>图片 文字 水平居中   父元素text-align: center;</h4>
<div class="case1">
    <img src="img/小叶子.png" alt=""/>
</div>
<div class="case1">仓鼠</div>

<hr>

<h4>块元素 不能水平居中    父元素text-align: center; 当前元素div不变</h4>
<div class="outer-box">
    <div class="inner-box"></div>
</div>

<hr>

<h4>块元素 不能水平居中   父元素text-align: center; 当前元素display: inline-block;</h4>
<div class="outer-box">
    <div class="inner-box2"></div>
</div>

<hr>

<h4>块元素 水平居中   当前元素margin: 0 auto;</h4>
<div class="outer-box3">
    <div class="inner-box3"></div>
</div>

</body>
</html>

line-height 顶中基底 行高 行距 内容区

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #div1, #div2, #div3 {
            width: 240px;
            height: 40px;
            border: 1px solid gray;
            font-size: 12px;
            text-align: center;
        }

        #div1 {
            line-height: 20px;
        }

        #div2 {
            line-height: 40px;
        }

        #div3 {
            line-height: 60px;
        }

        /*------------------------------------------*/

        .case2 {
            font-size: 30px;
        }

        .case2 .outer-box {
            line-height: 150%; /*父元素行高：30px × 150% = 45px*/
            background-color: Red;
            color: White;
        }

        .case2 .inner-box {
            font-size: 20px; /*子元素行高：30px × 150% = 45px（继承父元素的line-height）*/
            background-color: Purple;
            color: White;
        }

        /*------------------------------------------*/

        .case3 {
            font-size: 30px;
        }

        .case3 .outer-box {
            line-height: 1.5; /*父元素行高：30px × 1.5 = 45px*/
            background-color: Red;
            color: White;
        }

        .case3 .inner-box {
            font-size: 20px; /*子元素行高：20px × 1.5 = 30px（继承父元素的line-height）*/
            background-color: Purple;
            color: White;
        }
    </style>
</head>
<body>
<!--
7.4 深入line-height
        在CSS中，我们可以使用line-height属性来控制文本的行高。
        很多书称line-height为行间距，其实这是非常不严谨的叫法。
        行高，顾名思义就是“一行的高度”，而行间距指的是“两行文本之间的距离”，两者是完全不一样的概念。
        下面，我们来深入学习一下line-height属性。

------------------------------------------------------------------------------------------

7.4.1 line-height的定义
        在CSS中，line-height还有一个更加准确的定义：两行文字基线之间的距离。

------------------------------------------------------------------------------------------

1．顶线、中线、基线、底线
        ![顶线 中线 基线 底线](https://img-blog.csdnimg.cn/0c8b512b86fa464dbef6159d98ab98df.png)

        我们都用过英文簿，英文簿每一行都有4条线，这4条线分别是：顶线、中线、基线和底线。
        
        在CSS中，每一行文字可以看成一个“行盒子”，而每一个行盒子都有4条线：顶线、中线、基线和底线。没错，这四条线跟英文簿中的四条线是一样的道理。
        
        此外，vertical-align属性中的top、middle、baseline、bottom这四个属性值分别对应的就是：顶线、中线、基线、底线。
        注意一下，基线并不是行盒子中最下面的线，而是倒数第二条线。
        由此我们很清楚地知道line-height究竟指的是什么。

------------------------------------------------------------------------------------------

2．行高、行距与半行距
    ![line-height分析图](https://img-blog.csdnimg.cn/34147ea4cd064e848cab75a3e37bcd89.png)
    
    （1）行高。
        行高（即line-height），指的是“两行基线之间的垂直距离”
        
        有些小伙伴就会问了：为什么W3C要这样去定义line-height呢？直接定义line-height为两条底线之间的距离岂不是更好理解么？
        规则这东西嘛，都是官方定义的，我们只需要去遵循就行了。这就跟我们过马路一样，没必要纠结为什么是“绿灯走红灯停”，而不是“红灯走绿灯停”。
    
    （2）行距。
        行距，指的是上一行的底线到下一行的顶线的垂直距离。也就是两行文字之间的空隙。

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

------------------------------------------------------------------------------------------

3．内容区与行框
    （1）内容区。
        内容区，指的是行盒子顶线到底线之间的垂直距离。
    
    （2）行框。
        行框，指的是两行文字“行半距分割线”之间的垂直距离。
        
------------------------------------------------------------------------------------------

7.4.2 line-height取值

1．height和line-height
    line-height有默认值，当没有定义line-height属性时，浏览器就会采用默认的line-height值。
    
    一行文字的高度是由line-height决定，而不是由height决定的。
    例如在p标签中，一个p标签的文字可以有很多行，其中line-height定义的是一行文字的高度，而height定义的是整个段落的高度（p标签的高度）。
    
    在CSS中，我们可以定义height和line-height这两个属性值相等，从而来实现单行文字的垂直居中。
    这是经常使用到的一个技巧，希望大家记住。
    
    
2．line-height取值为百分比值、em值
    当line-height值为百分比值或者em值时，当前元素的行高是相对于父元素的font-size值来计算的。
            line-height =（父元素font-size）×（百分比）
            line-height =（父元素font-size）×（em值）
    
    由于line-height具有继承性，当line-height取值为百分比时，会直接继承父元素的line-height（除非自己指定line-height）。

3．line-height取值为无单位数字
    line-height还支持无单位数字的属性取值，在CSS中也只有line-height属性具有这个特点。
    当line-height值为无单位数字时，实际的行高是相对于当前元素的font-size值来计算的。
            line-height =（当前元素的font-size）×（无单位数字）
    
    也就是说当line-height取值为无单位数字时，该无单位数字可以理解为一个系数。
    子元素继承的是父元素的系数，不会直接继承父元素的line-height。
-->
<div id="div1">height为40px, line-height为20px</div>
<div id="div2">height为40px, line-height为40px</div>
<div id="div3">height为40px, line-height为60px</div>

<hr>

<div class="case2">
    <div class="outer-box">这是父元素
        <div class="inner-box">这是子元素</div>
    </div>
</div>

<hr>

<div class="case3">
    <div class="outer-box">这是父元素
        <div class="inner-box">这是子元素</div>
    </div>
</div>


</body>
</html>

vertical-align

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .case1 img{width:60px;height:60px;border: 1px solid black;}
        .case1 .img1{vertical-align:top;}
        .case1 .img2{vertical-align:middle;}
        .case1 .img3{vertical-align:baseline;}
        .case1 .img4{vertical-align:bottom;}
    </style>
</head>
<body>
<!--
7.5 深入vertical-align
        vertical-align，很多人对这个属性感到很陌生，也不知道怎么去使用，其实这都是由于没有深入属性的本质所导致的。
        vertical-align属性非常复杂，但是也相当强大。
        下面给大家介绍vertical-align属性最实用的技巧，而对于不常用的东西则不进行深入研究。
        
        W3C官方对vertical-align属性的定义有四个方面。
            （1）vertical-align属性用于定义“周围的文字、inline元素以及inline-block元素”相对于该元素基线的垂直对齐方式。
                 这里的“该元素”指的是被定义了vertical-align属性的元素。
            （2）在表格单元格中，vertical-align属性可以定义单元格td元素中内容的对齐方式。
                 td元素是table-cell元素，也就是说vertical-align属性对table-cell类型元素有效。
            （3）vertical-align属性对inline元素、inline-block元素和table-cell元素有效，对块元素无效。
            （4）vertical-align属性允许指定负长度值（如-2px）和百分比值（如50%）。
    
        vertical-align属性中的基线跟line-height属性中的基线是一样的道理。
        在CSS中，vertical-align属性最见的属性值有四个：
            top（顶部对齐）、
            middle（中部对齐）、
            baseline（基线对齐）、
            bottom（底部对齐）。

------------------------------------------------------------------------------------------

7.5.1 vertical-align属性取值

1．负值
    vertical-align属性取值可以为负值，例如“vertical-align:-2px”表示元素相对于基线向下偏移2px。
    此方法常常用于解决单选框或复选框与文字垂直对齐的问题。

2．百分比
    vertical-align属性取值可以为百分比，这个百分比是相对于当前元素所继承的line-height属性值决定的。
    举个例子，对于“vertical-align:50%”，假如当前元素所继承的line-height为20px，则“vertical-align:50%”实际上等价于“vertical-align:10px”。
    其中，vertical-align:10px”表示元素相对于基线向上偏移10px。

3．关键字
    top（顶部对齐）、middle（中部对齐）、baseline（基线对齐）、bottom（底部对齐）。
    
    根据W3C的定义，vertical-align属性用于定义周围文字、inline元素或inline-block元素的基线相对于该元素的基线的垂直对齐方式。
    下面例子中，vertical-align属性定义了周围的文字相对于img元素基线的垂直对齐方式。（图片不动，文字动）
-->
<div class="case1">
    <hr/>
    绿叶学习网<img class="img1" src="img/聊天结束.png" alt=""/>绿叶学习网（top）
    <hr/>
    绿叶学习网<img class="img2" src="img/聊天结束.png" alt=""/>绿叶学习网（middle）
    <hr/>
    绿叶学习网<img class="img3" src="img/聊天结束.png" alt=""/>绿叶学习网（baseline）
    <hr/>
    绿叶学习网<img class="img4" src="img/聊天结束.png" alt=""/>绿叶学习网（bottom）
    <hr/>
</div>



</body>
</html>

vertical-align 行内元素 行内块元素

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
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        span {
            font-size: 12px;
        }

        .case1 strong {
            font-size: 40px;
            border: 1px solid red;
        }

        .case2 strong {
            font-size: 40px;
            border: 1px solid red;

            vertical-align: middle;/* 自己不变，设置周围文字，相对于自己居中 */
        }

        .case3 img {
            width: 80px;
            height: 80px;
        }

        .case4 img {
            width: 80px;
            height: 80px;
            vertical-align: middle;/* 自己不变，设置周围文字，相对于自己居中 */
        }
    </style>
</head>
<body>
<!--
1．inline元素和inline-块元素
    在HTML中，常见的inline-block元素有两个：img元素和input元素。
    对于这两个inline-block元素，我们一定要记住。
-->

<hr>

<div class="case1">
    <span>绿叶学习网</span><strong>绿叶学习网</strong><span>绿叶学习网</span>
</div>

<hr>

<div class="case2">
    <span>绿叶学习网</span><strong>绿叶学习网</strong><span>绿叶学习网</span>
</div>

<hr>

<div class="case3">
    绿叶学习网<img src="img/仓鼠.jpg" alt=""/>绿叶学习网（<strong>middle</strong>）
</div>

<hr>

<div class="case4">
    绿叶学习网<img src="img/仓鼠.jpg" alt=""/>绿叶学习网（<strong>middle</strong>）
</div>

<hr>

</body>
</html>

vertical-align 块元素

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        img {
            width: 80px;
            height: 80px;
        }

        .case1 {
            vertical-align: middle; /* 对块元素无效 */
            width: 120px;
            height: 120px;
            border: 1px solid gray;
        }

        .case2 {
            display: table-cell; /* 块元素转 table-cell，垂直居中有效了 */
            vertical-align: middle;
            
            width: 120px;
            height: 120px;
            border: 1px solid gray;
        }
    </style>
</head>
<body>
<!--
2．块元素
    vertical-align属性对inline元素、inline-block元素和table-cell元素有效，对块元素无效。
    
    div是块元素，vertical-align对 div元素 无作用。
    如果想让div中的图片实现上下居中，我们可以先为div定义display:table-cell，也就是将块元素转化为table-cell元素（表格单元格），然后再使用vertical-align:middle就可以实现了。
        div {
            display: table-cell;/* 块元素转 table-cell */
            vertical-align: middle;
        }
    
    在div中实现图片垂直居中是很常见的技巧！！！
-->

<hr>

<div class="case1"><img src="img/仓鼠.jpg" alt=""/></div>

<hr>

<div class="case2"><img src="img/仓鼠.jpg" alt=""/></div>

<hr>


</body>
</html>

vertical-align table-cell元素

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        img {
            width: 60px;
            height: 60px;
        }

        td {
            width: 120px;
            height: 120px;
            border: 1px solid gray;
            vertical-align: middle;
        }
    </style>
</head>
<body>
<!--
3．table-cell元素
    W3C定义，在表格单元格中，vertical-align属性可以定义单元格中内容的对齐方式。
    => 也就是说vertical-align属性对table-cell类型元素有效。
    
    这里要注意一下，table-cell元素跟inline、inline-block元素使用vertical-align是有很大区别的。
    （1）inline元素和inline-block元素的vertical-align是针对周围的元素来说的，vertical定义的是周围元素相对于当前元素的对齐方式。
         => inline、inline-block    => vertical-align定义的元素不动，周围相对于自己上下居中。
    （2）table-cell元素的vertical-align属性是针对自身而言。vertical-align定义的是内部子元素相对于自身的对齐方式。
         => table-cell    => vertical-align定义在元素不动，内部的元素相对于自己上下居中。
-->

<hr>

<table>
    <tr>
        <td><img src="img/仓鼠.jpg" alt=""/></td>
        <td><img src="img/仓鼠.jpg" alt=""/></td>
        <td><img src="img/仓鼠.jpg" alt=""/></td>
    </tr>
</table>

<hr>


</body>
</html>

radio checkbox

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*文字大小为12px*/
        #p1{font-size:12px; }
        #p1 input{vertical-align:-2px; }
        
        /*文字大小为14px*/
        #p2{font-size:14px; }
        #p2 input{vertical-align:-2px; }
    </style>
</head>
<body>
<!--
8.2 深入radio和checkbox
    radio(单选框)、checkbox(复选框)与文字垂直居中对齐。
    
    （1）当文字大小为12px时，我们给单选框或复选框定义“vertical-align:-3px”即可解决对齐问题。
    （2）当文字大小为14px时，我们给单选框或复选框定义“vertical-align:-2px”即可解决对齐问题。
    
    其中，“vertical-align:-3px”表示元素相对于基线向下偏移3px。
-->


<p id="p1">
    <input id="rdo1" type="radio"/><label for="rdo1">单选框</label>
    <input id="cbk1" type="checkbox"/><label for="cbk1">复选框</label>
</p>
<p id="p2">
    <input id="rdo2" type="radio"/><label for="rdo2">单选框</label>
    <input id="cbk2" type="checkbox"/><label for="cbk2">复选框</label>
</p>


</body>
</html>

textarea 大小固定 禁用拖动

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .case1 {
            width: 100px;
            height: 80px;
            max-width: 200px;
            max-height: 160px;
        }

        .case2 {
            width: 100px;
            height: 80px;
            resize: none;
            overflow: auto;
        }
    </style>
</head>
<body>
<!--
8.3 深入textarea
    textarea指的是文本域。对于textarea，有两个方面需要我们深入学习。
        （1）固定大小，禁用拖动。
        （2）在chrome、Firefox和IE实现相同的外观。

------------------------------------------------------------------------

1．固定大小
    宽度 min-width/max-width
    高度 min-height/max-height

2．禁止拖动
      禁用textarea元素的拖动功能   resize:none;
-->


<textarea class="case1"></textarea>

<hr>

<textarea class="case2"></textarea>


</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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        form {
            width: 320px;
            font-family: Arial;
            font-size: 14px;
            font-weight: bold;
        }

        /*清除每一个p中的浮动*/
        p {
            overflow: hidden;
        }

        label {
            float: left;
            width: 60px;
            height: 40px;
            line-height: 40px;
            text-align: right;
            margin-right: 10px;
        }

        input:not(#submit) {
            float: left;
            height: 16px;
            padding: 10px;
            border: 1px solid silver;
        }

        #tel, #pwd {
            width: 228px;
        }

        #verifyCode {
            width: 118px;
            margin-right: 10px;
        }

        #submit {
            width: 100px;
            height: 40px;
            border: 1px solid gray;
            padding: 0;
            background-color: #F1F1F1;
        }
    </style>
</head>
<body>
<!--
8.4 表单对齐
        很多大型网站包括百度、京东、腾讯等都是采用如下方法来实现。
        （1）每一行表单分为左栏加若干右栏。所有行的左栏长度相等，所有行的右栏所有盒子长度之和相等。
             左栏一般是一个label，右栏是若干个文本框。
        （2）所有左栏盒子和右栏盒子都设置为左浮动。
        （3）左栏text-align属性定义为right，使得文字右对齐。
        （4）最重要一点，每一行中左栏长度和右栏所有盒子的总长度之和等于行宽。
             这里的盒子是包括width、padding、border和margin的。
-->

<form>
    <p>
        <label for="tel">手机号</label>
        <input id="tel" type="text"/>
    </p>
    <p>
        <label for="pwd">密码</label>
        <input id="pwd" type="password"/>
    </p>
    <p>
        <label for="verifyCode">验证码</label>
        <input id="verifyCode" type="text"/>
        <input id="submit" type="submit"/>
    </p>
</form>


</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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .case1 {
            width: 300px;
            background-color: #0C6A9D;
            border: 1px solid silver;
        }

        .case1 div {
            padding: 10px;
            margin: 15px;
            border: 2px dashed red;
            background-color: #FCD568;
        }
    </style>
</head>
<body>
<!--
9.1.1 正常文档流
        正常文档流，又称为“普通文档流”或“普通流”，也就是W3C标准所说的“normal flow”。
        
        正常文档流的简单定义：“正常文档流，将一个页面从上到下分为一行一行，其中块元素独占一行，相邻行内元素在每一行中按照从左到右排列直到该行排满。”
        也就是说，正常文档流指的就是默认情况下页面元素的布局情况。
    
            <div></div>
            <span></span><span></span>
            <p></p>
            <span></span><i></i>
            <img/>
            <hr/>
        div、p、hr都是块元素，因此独占一行。
        而span、i、img都是行内元素，因此如果两个行内元素相邻，就会位于同一行，并且从左到右排列。

------------------------------------------------------------------------------------------------------------

9.1.2 脱离文档流
        脱离文档流，指的是脱离正常文档流。
        正常文档流就是我们没有使用浮动或者定位去改变的默认情况下的HTML文档结构。
        换一句话说，如果我们想要改变正常文档流，可以使用有两种方法：浮动和定位。

        【日期标记】2023-06-21 18:31:20 以上同步完成
-->

<hr>

<h2>未设置</h2>
<div class="case1">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
</div>

<hr>

<h2>浮动</h2>
<div class="case1">
    <div class="box1">box1</div>
    <div style="float: left;" class="box2">box2</div>
    <div style="float: left;" class="box3">box3</div>
</div>

<hr>

<h2>定位</h2>
<div class="case1">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div style="position: absolute; right: 100px;" class="box3">box3</div>
</div>

<hr>

</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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*.case1 span {*/
        /*    float: left;*/
        /*    width: 50px;*/
        /*    height: 80px;*/
        /*    border: 1px solid gray;*/
        /*    margin-left: 10px;*/
        /*}*/

        .case2 {
            width: 400px;
            height: 200px;
            border: 1px solid gray;
            padding: 10px;
        }

        .case2 img {
            float: left;
            width: 60px;
            height: 60px;
        }
    </style>
</head>
<body>
<!--
浮动一般用于实现水平方向的布局，而不是垂直方向上的布局。

（1）当一个元素定义了“float:left”或“float:right”时，不管这个元素之前是inline、inline-block或者其他类型，都会变成block类型。
     也就是说，浮动元素表现为块元素效果，可以定义width、height、padding和margin。
     这里特别要注意一下，我们可以使用margin-left或margin-right来定义浮动元素与其他元素之间的间距。
     
     span本身是inline元素，但是设置了浮动之后，就变成了块元素，并且可以设置width、height和margin等。

（2）当一个元素定义了“float:left”或“float:right”时，这个元素会脱离文档流，后面的元素会紧跟着填上空缺的位置。

     img元素设置了浮动，后面的p元素的内容会紧跟着填上父元素的空缺位置。
-->
<!--<div class="case1">-->
<!--    <span></span>-->
<!--    <span></span>-->
<!--    <span></span>-->
<!--</div>-->

<div class="case2">
    <img src="img/仓鼠.jpg" alt=""/>
    <div id="content">
        水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人
        甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远
        观而不可亵玩焉。予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后
        鲜有闻；莲之爱，同予者何人？牡丹之爱，宜乎众矣。
    </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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        strong {
            float: left;/* inline元素   =>   块元素 */
            width: 120px;
            height: 60px;
            line-height: 60px;
            border: 1px solid gray;
            text-align: center;
        }
    </style>
</head>
<body>
<!--
9.3.1 对自身的影响
    
    strong元素是inline元素，但是在设置了浮动之后变成了块元素，并且可以设置width、height、padding和margin。
-->


<strong>绿叶学习网</strong>

</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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .grandfather {
            height: 100px;
        }

        .father1, .father2, .father3 {
            width: 200px;
            border: 1px solid black;
        }

        .father1 {
            /*父元素没有定义高度，因此父元素无法把子元素包裹起来，就会造成父元素高度塌陷。*/
            /*height: 0;*/
        }

        .father2 {
            /*父元素无法把子元素包裹起来，仍然有父元素高度塌陷问题。*/
            height: 20px;
        }

        .father3 {
            /*父元素把子元素包裹起来，因此不会有父元素高度塌陷问题。*/
            height: 60px;
        }

        .son1, .son2 {
            width: 80px;
            height: 40px;
            border: 1px solid red;
        }

        .son1 {
            float: left;
        }

        .son2 {
            float: right;
        }
    </style>
</head>
<body>
<!--
9.3.2 对父元素影响
    如果一个元素设置了浮动，它会脱离正常文档流。
    如果浮动元素的高度height大于父元素的高度height，或者父元素没有定义高度height，此时浮动元素会脱离父元素。这就是我们常见的“父元素高度塌陷”。
    造成父元素高度塌陷的原因在于，父元素的高度小于子元素的高度，或者父元素没有定义高度，父元素不能把子元素包裹起来。
    说白了，就是老爸管不住儿子，因此儿子离家出走了。
-->

<hr>

<h4>父没定义高度 height: 0;   无法包裹</h4>
<div class="grandfather">
    <div class="father1">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
</div>

<hr>

<h4>父定义高度 height: 20px;   无法包裹</h4>
<div class="grandfather">
    <div class="father2">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
</div>


<hr>

<h4>父定义高度 height: 60px;   可以包裹</h4>
<div class="grandfather">
    <div class="father3">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
</div>

<hr>

</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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

        .grandfather {
            text-align: left;
            display: inline-block;
            padding: 12px;
            border: 1px dashed gray;
        }

        .case1 {
            width: 240px;
            /*width: 100px;*//* 不到一排，会变为两排 */
            height: 20px;
            border: 1px solid black;
        }

        .case1 .son1, .case1 .son2 {
            width: 60px;
            height: 60px;
            border: 1px solid gray;
            margin-top: 10px;
            margin-left: 10px;
            margin-right: 10px;
            background-color: #F4F6F4;
        }

        .father1 .son1, .father1 .son2 {
            float: left;
        }

        .father2 .son1, .father2 .son2 {
            float: right;
        }

        .father3 .son1 {
            float: left;
        }

        .father3 .son2 {
            float: right;
        }


        /*-------------------------------------------*/


        .case2 {
            width: 200px;
            height: 150px;
            border: 1px solid red;
        }

        /*第一个div设置浮动*/
        .case2 .son1 {
            width: 80px;
            height: 80px;
            border: 1px solid gray;
            float: left;
            background-color: #F4F6F4;
        }

        /*第二、三个div没有设置浮动*/
        .case2 .son2, .case2 .son3 {
            width: 100px;
            height: 30px;
            border: 1px solid gray;
        }

        .father4 .son2, .father4 .son3 {
            float: none;/* 1会覆盖 2、3 */
        }

        .father5 .son2, .father5 .son3 {
            float: left;/* 1不会覆盖 2、3 */
        }
    </style>
</head>
<body>
<!--
9.3.3 对兄弟元素的影响

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

2．兄弟元素不是浮动元素
     第一个div设置了浮动，第二、三个div没有设置浮动。此时可以看出，第一个div脱离了文档流，并且覆盖了第二、三这两个div。
-->

<hr>

<h4>1、2 都 float: left;</h4>
<div class="grandfather">
    <div class="case1 father1">
        <div class="son1">1</div>
        <div class="son2">2</div>
    </div>
</div>

<hr>

<h4>1、2 都 float: right;</h4>
<div class="grandfather">
    <div class="case1 father2">
        <div class="son1">1</div>
        <div class="son2">2</div>
    </div>
</div>

<hr>

<h4>1 left、2 right</h4>
<div class="grandfather">
    <div class="case1 father3">
        <div class="son1">1</div>
        <div class="son2">2</div>
    </div>
</div>

<hr>

<h4>1 left， 2、3 float:none; （1覆盖了2、3）</h4>
<div class="case2 father4">
    <div class="son1">1</div>
    <div class="son2">2</div>
    <div class="son3">3</div>
</div>

<hr>

<h4>1、2、3 都 float:left;（1没有覆盖2、3）</h4>
<div class="case2 father5">
    <div class="son1">1</div>
    <div class="son2">2</div>
    <div class="son3">3</div>
</div>

<hr>
<br><br><br><br><br>

</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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .grandfather {
            height: 100px;
        }

        .father {
            width: 200px;
            border: 1px solid black;
        }

        .father1 {
            /* 又不设置浮动，又是 height 0，撑不起来子元素。 */
            /*float: left;*/
        }

        .father2 {
            /* 设置了浮动，高度由子元素自适应。*/
            float: left;
        }

        .son1, .son2 {
            width: 80px;
            height: 40px;
            border: 1px solid red;
        }

        .son1 {
            float: left;
        }

        .son2 {
            float: right;
        }
    </style>
</head>
<body>
<!--
9.3.4 对子元素的影响
    如果一个元素是浮动元素（没有定义height），并且它的子元素也是浮动元素，则这个浮动元素会自适应地包含该子元素。
-->
<hr>

<h4>又不设置浮动，又是 height 0，撑不起来子元素</h4>
<div class="grandfather">
    <div class="father father1">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
</div>

<hr>

<h4>设置了浮动，高度由子元素自适应</h4>
<div class="grandfather">
    <div class="father father2">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
</div>

<hr>

</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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .grandfather {
            height: 100px;
        }

        .father1,.father2{
            width: 200px;
            border: 1px solid black;
            background-color: #51DCFF;
        }
        
        .father1 {
            /*由于父元素没有定义高度，因此父元素无法把子元素包裹起来，就会造成父元素高度塌陷，从而导致父元素边框不能撑开并且背景色无法显示*/
            /*overflow: hidden;*/
        }

        .father2 {
            /*当我们为父元素添加“overflow:hidden”来清除浮动之后，边框能够撑开了并且背景色也能显示出来*/
            overflow: hidden;
        }

        .son1, .son2 {
            width: 80px;
            height: 40px;
            border: 1px solid red;
        }

        .son1 {
            float: left;
        }

        .son2 {
            float: right;
        }
    </style>
</head>
<body>
<!--
9.4 浮动的负作用
    （1）父元素高度塌陷，从而导致边框不能撑开，背景色无法显示。
    （2）页面布局错乱。
    
    
    由于父元素没有定义高度，因此父元素无法把子元素包裹起来，就会造成父元素高度塌陷，从而导致父元素边框不能撑开并且背景色无法显示
    当我们为父元素添加“overflow:hidden”来清除浮动之后，边框能够撑开了并且背景色也能显示出来
    
    
    看了BFC后，补充：父元素设置了 overflow:hidden，表示父元素是一个新BFC，它的高度会把内部浮动的元素高度计算上。
-->

<hr>

<div class="grandfather">
    <div class="father1">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
</div>

<hr>

<div class="grandfather">
    <div class="father2">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
</div>

<hr>

</body>
</html>

清除浮动 clear both

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .main {
            height: 100px;
        }

        .wrapper {
            width: 200px;
            border: 1px solid black;
        }

        .first, .second {
            width: 80px;
            height: 40px;
            border: 1px solid red;
        }

        .first {
            float: left;
        }

        .second {
            float: right;
        }

        .clear {
            clear: both; /*关键代码，清除浮动*/
        }
    </style>
</head>
<body>
<!--
9.5 清除浮动
    清除浮动，其实就是清除元素被定义浮动之后带来的脱离文档流的影响。
    我们知道，浮动可以使得元素移到左边或者右边，然后后面的文字或元素会环绕着这个浮动元素。
    如果我们不想浮动元素后面的元素环绕着它，而是希望后面的元素回归到正常文档流时候的布局，这个时候我们可以使用清除浮动来实现。

9.5.1 clear:both
    clear属性不是应用于浮动元素本身，而是应用于浮动元素后面的元素。
    
    “
        当属性设置float (浮动)时, 其所在的物理位置已经脱离文档流了, 
        但是大多时候我们希望文档流能识别float (浮动) ,或是希望float (浮动)后面的元素不被float (浮动)所影响,
        这个时候我们就需要用clear:both;来清除。
    ”

9.5.2 overflow:hidden
    “overflow:hidden”应用于浮动元素的父元素，而不是当前的浮动元素。
    
    不过“overflow:hidden”是个小炸弹，它会隐藏超出父元素的内容部分，有时候这并不是我们预期的效果。
    
    看了BFC后，补充：父元素设置了 overflow:hidden，表示父元素是一个新BFC，它的高度会把内部浮动的元素高度计算上。
    
9.5.3 ::after伪元素
    使用“clear:both”和“overflow:hidden”来清除浮动都有明显的弊端。
    在实际开发中，比较好的解决方案是使用“::after伪元素”结合“clear:both”来实现。
    
    “clear:both”清除浮动会增加多余标签，“overflow:hidden”清除浮动会使得超出父元素部分隐藏。
    但是使用：:after伪元素来清除浮动，都不会有这些缺点。在实际开发中，我们也更倾向于使用这种方法。
-->
<hr>

<h4>末尾没加元素</h4>
<div class="main">
    <div class="wrapper">
        <div class="first"></div>
        <div class="second"></div>
    </div>
</div>

<hr>

<h4>末尾加了元素，并且该元素设置 clear:both;（清除浮动）</h4>
<div class="main">
    <div class="wrapper">
        <div class="first"></div>
        <div class="second"></div>
        <div class="clear"></div>
    </div>
</div>

<hr>

</body>
</html>

清除浮动 overflow hidden

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
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #wrapper {
            overflow: hidden; /*关键代码，清除浮动*/
            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>
<!--
9.5 清除浮动
    清除浮动，其实就是清除元素被定义浮动之后带来的脱离文档流的影响。
    我们知道，浮动可以使得元素移到左边或者右边，然后后面的文字或元素会环绕着这个浮动元素。
    如果我们不想浮动元素后面的元素环绕着它，而是希望后面的元素回归到正常文档流时候的布局，这个时候我们可以使用清除浮动来实现。

9.5.1 clear:both
    clear属性不是应用于浮动元素本身，而是应用于浮动元素后面的元素。
    
    “
        当属性设置float (浮动)时, 其所在的物理位置已经脱离文档流了, 
        但是大多时候我们希望文档流能识别float (浮动) ,或是希望float (浮动)后面的元素不被float (浮动)所影响,
        这个时候我们就需要用clear:both;来清除。
    ”

9.5.2 overflow:hidden
    “overflow:hidden”应用于浮动元素的父元素，而不是当前的浮动元素。
    
    不过“overflow:hidden”是个小炸弹，它会隐藏超出父元素的内容部分，有时候这并不是我们预期的效果。
    
    看了BFC后，补充：父元素设置了 overflow:hidden，表示父元素是一个新BFC，它的高度会把内部浮动的元素高度计算上。
    
9.5.3 ::after伪元素
    使用“clear:both”和“overflow:hidden”来清除浮动都有明显的弊端。
    在实际开发中，比较好的解决方案是使用“::after伪元素”结合“clear:both”来实现。
    
    “clear:both”清除浮动会增加多余标签，“overflow:hidden”清除浮动会使得超出父元素部分隐藏。
    但是使用：:after伪元素来清除浮动，都不会有这些缺点。在实际开发中，我们也更倾向于使用这种方法。
-->
<div id="main">
    <div id="wrapper">
        <div id="first"></div>
        <div id="second"></div>
    </div>
</div>

</body>
</html>

清除浮动 after伪元素

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*
            在 .clearfix 元素的后面，添加一段内容，content内容是空文本，
            并且高0，不可见，块元素，
            并且给这个元素设置 clear:both; 清除两边浮动（来达到清除浮动目的）
            
            参考： [css中clearfix清除浮动的用法及其原理示例介绍](https://www.jb51.net/css/115007.html)
        */
        .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>
<!--
9.5 清除浮动
    清除浮动，其实就是清除元素被定义浮动之后带来的脱离文档流的影响。
    我们知道，浮动可以使得元素移到左边或者右边，然后后面的文字或元素会环绕着这个浮动元素。
    如果我们不想浮动元素后面的元素环绕着它，而是希望后面的元素回归到正常文档流时候的布局，这个时候我们可以使用清除浮动来实现。

9.5.1 clear:both
    clear属性不是应用于浮动元素本身，而是应用于浮动元素后面的元素。
    
    “
        当属性设置float (浮动)时, 其所在的物理位置已经脱离文档流了, 
        但是大多时候我们希望文档流能识别float (浮动) ,或是希望float (浮动)后面的元素不被float (浮动)所影响,
        这个时候我们就需要用clear:both;来清除。
    ”

9.5.2 overflow:hidden
    “overflow:hidden”应用于浮动元素的父元素，而不是当前的浮动元素。
    
    不过“overflow:hidden”是个小炸弹，它会隐藏超出父元素的内容部分，有时候这并不是我们预期的效果。
    
    看了BFC后，补充：父元素设置了 overflow:hidden，表示父元素是一个新BFC，它的高度会把内部浮动的元素高度计算上。
    
9.5.3 ::after伪元素
    使用“clear:both”和“overflow:hidden”来清除浮动都有明显的弊端。
    在实际开发中，比较好的解决方案是使用“::after伪元素”结合“clear:both”来实现。
    
    “clear:both”清除浮动会增加多余标签，“overflow:hidden”清除浮动会使得超出父元素部分隐藏。
    但是使用::after伪元素来清除浮动，都不会有这些缺点。在实际开发中，我们也更倾向于使用这种方法。
-->
<div id="wrapper" class="clearfix">
    <div id="first"></div>
    <div id="second"></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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        
    </style>
</head>
<body>
<!--
10.1 深入定位
    （1）默认情况下，固定定位元素和绝对定位元素的位置是相对于浏览器而言，而相对定位元素的位置是相对原始位置而言。这里注意一个前提——默认情况下。
    （2）position属性一般配合top、bottom、left和right来使用。只有元素定义position属性（除了static）之后，top、bottom、left和right才生效。
    （3）top、bottom、left和right这四个属性不一定全部都用到。
    （4）“position:absolute”会将元素转换为inline-block元素。
         => 只要设置了position：absolute、 float中任意一个，都会让元素以display:inline-block的方式显示：可以设置长宽，默认宽度并不占满父元素。

-->
</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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .case1 {
            height: 100px;
        }

        .case1 .father {
            position: relative;
            width: 160px;
            height: 30px;
            background-color: #00FFFF;
        }

        .case1 .son {
            position: absolute; /* “position:absolute”会将元素转换为inline-block元素。*/
            bottom: -30px;
            right: 65px;
            width: 30px;
            height: 30px;
            background-color: red;
        }

        /*-------------------------------------------------*/

        .case2 {
            height: 100px;
        }

        .case2 .father {
            float: left;
            margin-right: 10px;

            position: relative;
            width: 120px;
            height: 30px;
            background-color: #00FFFF;
        }

        .case2 .son {
            position: absolute;
            bottom: -20px;
            right: 50px;
            width: 20px;
            height: 20px;
            background-color: red;
        }
    </style>
</head>
<body>
<!--
10.1.1 子元素相对父元素定位
            父元素{position:relative; }
            子元素 {
                position:absolute;
                /*定义top、bottom、left和right*/
            }
        
        想要实现子元素相对父元素定位，我们都是给父元素定义“position:relative；”，
        然后给子元素定义“position:absolute；”，之后配合top、bottom、left和right来定位。
        这个技巧在实际开发中大量使用，它也是定位布局的精髓之一，大家一定要重点掌握。
-->
<hr>

<div class="case1">
    <div class="father">
        <span class="son"></span>
    </div>
</div>

<hr>

<div class="case2">
    <div class="father">
        <div class="son"></div>
    </div>
    <div class="father">
        <div class="son"></div>
    </div>
    <div class="father">
        <div class="son"></div>
    </div>
</div>

<hr>

</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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .grandfather {
            position: relative; /*设置相对定位*/
            width: 200px;
            height: 160px;
            background-color: blue;
        }

        .father {
            /*position: relative;*/ /*设置相对定位后， .son就是相对父亲定位，而不是爷爷*/
            width: 120px;
            height: 30px;
            background-color: #00FFFF;
        }

        .son {
            position: absolute; /*设置绝对定位*/
            bottom: -20px;
            right: 50px;
            width: 20px;
            height: 20px;
            background-color: red;
        }
    </style>
</head>
<body>
<!--
10.1.2 子元素相对祖先元素定位

            祖先元素{position:relative; }
            子元素 {
                position:absolute;
                /*定义top、bottom、left和right*/
            }
        
        绝对定位元素是相对于外层第一个设置了“position:relative/absolute/fixed；”的祖先元素来进行定位的。
        这个规律极其重要，大家请好好琢磨这句话。
-->
<div class="grandfather">
    <div class="father">
        <div class="son"></div>
    </div>
</div>

</body>
</html>

z-index

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            font-size: 50px;
            position: absolute;
        }

        #A {
            background-color: red;
            top: 10px;
            left: 10px;
        }

        #B {
            background-color: orange;
            top: 40px;
            left: 40px;
        }

        #C {
            background-color: blue;
            top: 70px;
            left: 70px;
        }
    </style>
</head>
<body>
<!--
10.2 z-index属性
    虽然网页是平面的，但实际上网页是三维结构，除了x轴、y轴，它还有z轴。z轴往往都是用来设定层的先后顺序的。
    
    z-index属性只有在元素定义“position:relative” “position:absolute 或 “position:fixed”时才会被激活。
    反之，如果元素没有指定position属性值（除了static），则z-index属性无效。
    
    z-index值较大的元素会叠加在z-index值较小的元素之上。
-->
<div id="A">A</div>
<div id="B">B</div>
<div id="C">C</div>

</body>
</html>

css图形简介

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">
    <title>Title</title>
    <style type="text/css">
        
    </style>
</head>
<body>
<!--
11.1 CSS图形简介
    在前端开发中，为了网站的性能速度，我们都是秉着“少用图片”的原则。
    因为图片实现有两个很明显的缺点：
        一是图片大小比较大，数据传输量大；
        二是一张图片会引发一次HTTP请求。
    这两个方面都会影响页面加载速度，并且增加服务器负担。
    
    试想一下，作为用户，如果打开一个网页延迟时间过长，你是怎样的心情？
    
    
    
    CSS实现的图形一般适合于展示，并不适合用于JavaScript动态操作。
    如果想要实现便于JavaScript操作的图形，大家可以去了解canvas或SVG。
    这两个可以实现各种酷炫的动态图形效果，例如粒子碰撞、动感圆圈...
-->
</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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box {
            border-width: 20px;
            border-style: solid;
            border-color: red green blue orange;
        }

        .box1 {
            width: 30px;
            height: 30px;
        }

        .box2 {
            width: 0;
            height: 0;
        }

        .box3 {
            width: 0;
            height: 0;
            border-color: red transparent transparent transparent;
        }
    </style>
</head>
<body>
<!--
11.2 三角形


11.2.1 CSS实现三角形的原理
    在CSS盒子模型中，当一个盒子的两条边在边角处相交时，浏览器就会在交点处按照某个角度（如果盒子为正方形，则为顺时针45°、135°、225°、315°）绘制一条接合线。
    
    CSS来实现三角形的原理：将一个元素的width和height定义为0，然后为它设置较粗的边框，并且将其中任意三条边框或者两条边的颜色定义为transparent。
-->
<hr>

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

<hr>

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

<hr>

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

<hr>

</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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*外层三角形*/
        .out1, .out2 {
            position: relative; /*设置position:relative，使子元素可以相对父元素进行定位*/
            width: 0;
            height: 0;
            border-width: 30px; /*注意外层三角形高为30px*/
            border-style: solid;
            border-color: transparent transparent black transparent;
        }

        /*内层三角形*/
        .inner {
            position: absolute;
            width: 0;
            height: 0;
            border-width: 29px; /*注意内层三角形边高为29px*/
            border-style: solid;
            border-color: transparent transparent #BBFFEE transparent;
        }

        .out1 .inner {
            top: 1px;
            left: 0;
        }

        .out2 .inner {
            /* top left 带边框三角形*/
            top: -28px;
            left: -29px;
        }
    </style>
</head>
<body>
<!--
11.2 三角形


11.2.1 CSS实现三角形的原理
    在CSS盒子模型中，当一个盒子的两条边在边角处相交时，浏览器就会在交点处按照某个角度（如果盒子为正方形，则为顺时针45°、135°、225°、315°）绘制一条接合线。
    
    CSS来实现三角形的原理：将一个元素的width和height定义为0，然后为它设置较粗的边框，并且将其中任意三条边框或者两条边的颜色定义为transparent。
    
    其实在CSS中，子元素的绝对定位是根据父元素的“内容边界（content）”进行定位的。
-->
<hr>

<div class="out1">
    <div class="inner"></div>
</div>

<br><br><br><br><br><br>
<hr>

<h3>边框三角形</h3>
<div class="out2">
    <div class="inner"></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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #wrapper {
            display: inline-block;
            position: relative;
            padding: 20px 30px;
            margin-top: 100px;
            border: 1px solid gray;
            border-radius: 10px; /*添加圆角效果*/
            font-size: 14px;
            font-weight: bold;
            text-align: center;
            background-color: #BBFFEE;
        }

        /*外层三角形*/
        #triangle {
            position: absolute;
            top: -30px;
            /*left:50%和margin-left:-15px是为了实现三角形的水平居中*/
            left: 50%;
            margin-left: -15px;
            width: 0;
            height: 0;
            border-width: 15px;
            border-style: solid;
            border-color: transparent transparent black transparent;
        }

        /*内层三角形*/
        #triangle div {
            position: absolute;
            top: -13px;
            left: -14px;
            width: 0;
            height: 0;
            border-width: 14px;
            border-style: solid;
            border-color: transparent transparent #BBFFEE transparent
        }
    </style>
</head>
<body>
<!--
11.2 三角形


11.2.1 CSS实现三角形的原理
    在CSS盒子模型中，当一个盒子的两条边在边角处相交时，浏览器就会在交点处按照某个角度（如果盒子为正方形，则为顺时针45°、135°、225°、315°）绘制一条接合线。
    
    CSS来实现三角形的原理：将一个元素的width和height定义为0，然后为它设置较粗的边框，并且将其中任意三条边框或者两条边的颜色定义为transparent。
-->

<div id="wrapper">
    <div id="triangle">
        <div></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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .case1 {
            width: 100px;
            height: 50px;
            border: 1px solid gray;
            border-radius: 10px;
        }

        .case2 {
            width: 50px;
            line-height: 50px;
            border-radius: 80% 90% 100% 20%; /*四个圆角都搞得不一样*/
            background-color: #E61588;
            font-size: 30px;
            text-align: center;
            color: White;
        }

        .case3 {
            width: 100px;
            height: 50px;
            border: 1px solid red;
            border-radius: 100px 100px 0 0; /*半圆*/
            background-color: #FCE9B8;
        }

        .case4 {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            border-radius: 50px; /*圆*/
            background-color: #FCE9B8;
        }
    </style>
</head>
<body>
<!--
        border-radius：长度值；
        
        长度值可以是px、百分比、em等。

border-radius属性值的四种写法
    （1）border-radius设置一个值。
         例如“border-radius:10px；”表示四个角的圆角半径都是10px
     （2）border-radius设置两个值。
         例如“border-radius:10px 20px；”表示左上角和右下角的圆角半径是10px，右上角和左下角的圆角半径都是20px
     （3）border-radius设置三个值。
         例如“border-radius:10px 20px 30px；”表示左上角圆角半径是10px，左下角和右上角的圆角半径都是20px，右下角圆角半径是30px
     （4）border-radius设置四个值。
         例如“border-radius:10px 20px 30px 40px；”表示左上角、右上角、右下角和左下角的圆角半径依次是10px、20px、30px、40px

1．半圆
    假如我们要制作上半圆，实现原理：把高度height设为宽度width的一半，并且左上角和右上角的圆角半径定义与元素的高度一致，而右下角和左下角的圆角半径定义为0。

2．圆
    在CSS3中，圆的实现原理如下：元素的宽度和高度定义为相同值，然后四个角的圆角半径定义为宽度（或高度）的一半。

11.3.3 border-radius派生子属性
    （1）border-top-right-radius：右上角。
    （2）border-bottom-right-radius：右下角。
    （3）border-bottom-left-radius：左下角。
    （4）border-top-left-radius：左上角。
-->
<div class="case1"></div>

<hr>

<div class="case2">6</div>

<hr>

<div class="case3"></div>

<hr>

<div class="case4"></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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div {
            width: 160px;
            height: 100px;
            border: 1px solid gray;
            border-radius: 80px/50px;
        }
    </style>
</head>
<body>
<!--
11.4 椭圆
    在CSS中，我们也是使用border-radius属性来实现椭圆的。
    
            border-radius:x/y;
            
            x表示圆角的水平半径，y表示圆角的垂直半径。
            从之前的学习中我们知道，border-radius属性取值可以是一个值，也可以是两个值。
    
    当border-radius属性取值为一个值时，例如“border-radius:30px”，表示圆角水平半径和垂直半径为30px，也就是说“border-radius:30px”等价于“border-radius:30px/30px”，前者是后者的缩写
    
    当border-radius属性取值为两个值时，例如“border-radius:20px/40px”，表示圆角的水平半径为20px，垂直半径为40px
-->
<div></div>

</body>
</html>

css性能优化

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    </style>
</head>
<body>
<!--
编写高质量的CSS代码主要体现在2个方面：可读性和可维护性和高性能。
（1）属性缩写。（2）语法压缩。（3）图片压缩。（4）选择器优化。
（5）CSS模块化。（6）压缩工具。（7）CSS Sprite技术。（8）性能评估。

CSS文件比较小，性能提高也是微乎其微。因此可能会有人说：“我们如此细致地去优化CSS性能，意义并不大啊。”大多数情况下的确如此。
但是当我们大规模地使用CSS，文件变得非常大，并且页面每天都会有几百万甚至上千万次的访问时，这种小小的性能提升就大不同了。
对于一个流量比较少的小网站来说，CSS再怎么优化也提高不了多少性能。但是对于一个高流量的网站，如淘宝、百度等来说，CSS性能速度哪怕有一丁点提高也是非常有用的。

有研究表明，
    Amazon.com每增加10毫秒的页面加载时间会导致销售额下降1%，
    而谷歌搜索结果显示，加载时间每增加500毫秒将导致收入减少20%。
我们可以看到性能的提高对于大型网站是多么重要了。哪怕所做的优化能够提高1毫秒的速度，也是相当有价值的。
事实上，互联网大公司在性能考虑方面是非常细致而全面的。

12.2 属性缩写
    （1）盒模型缩写。
            1．边框border
                border-width:1px;
                border-style:solid;
                border-color:Red;
                
                border:1px solid red;
                
                /* 三条边，简写 */
                border:1px solid red;
                border-bottom:0;
            2．内边距padding
                padding：上下左右;
                padding：上下 左右;
                padding：上 右 下 左;
            3．外边距margin
                margin：上下左右;
                margin：上下 左右;
                margin：上 右 下 左;
    （2）背景缩写。
            background-image:url("images/flower.jpg");
            background-repeat:no-repeat;
            background-position:80px 40px;
            
            background:url("images/flower.jpg") no-repeat 80px 40px;
    （3）字体缩写。
            font-family:"微软雅黑";
            font-size:12px;
            font-weight:bold
            line-height:1.5em;
            
            font:"微软雅黑" 12px/1.5em bold;
            （1）如果使用字体简写形式，我们至少要指定font-family和font-size属性，其他属性如果没有指定则将自动使用默认值。
            （2）在简写形式中，font-size值和line-height值之间是需要加入斜杠“/”的。
    （4）颜色值缩写。
            在CSS中，十六进制的颜色值是可以缩写的。
            如果每两位的值相同，可以缩写一半。例如“color:#000000”可以缩写为“color:#000”，“color:#336699”可以缩写为“color:#369”。

12.3 语法压缩
    在CSS中，很多语法格式其实只是为了方便我们阅读，这些语法格式并不一定必须要使用。
    如果我们对于一些语法进行精简压缩，则可以减少CSS文件大小，从而减少页面数据传输量。
    
    （1）空白符。（删除空格换行，并不会影响）
    （2）最后一个属性分号可以省略
    （3）url()的引号可以省略
    （4）属性值为“0”不用加单位
    （5）属性值为“以0开头的小数”。例如：0.5 => .5
    （6）合并相同的定义。（使用 class 或 群组选择器合并）
    （7）利用继承进行合并。（自己使用不同的进行覆盖）
    
12.4 压缩工具

12.5 图片压缩
    （1）JPEG可以很好地处理大面积色调的图像，适合存储颜色丰富的复杂图像，如照片、高清图片等。此外，JPEG不支持透明。
    （2）PNG是一种无损格式，可以无损压缩以保证页面打开速度。此外，PNG支持透明。
    （3）GIF格式图像效果较差，但是可以制作动画。

    （1）JPEG：推荐JPEGmini，网址：http://www.jpegmini.com
    （2）PNG：推荐TinyPNG，网址：https://tinypng.org。这一款在线工具甚至比Photoshop的压缩率还要高，强烈推荐

12.6 高性能的选择器
    12.6.1 选择器在浏览器的解析原理
            #column .content div{color:Red; }
        
            浏览器对选择器规则是从右到左进行解析的：
                首先查找所有的div元素，
                然后再查找该div元素是否存在具有content类的父元素，
                最后在已经匹配的父元素中继续向上查找祖先元素是否含有id为column的元素。
            
            如果浏览器是从左到右解析选择器规则的话，上面这个选择器效率很高。但事实上浏览器是从右到左进行解析的，这种看似十分高效的选择器匹配开销是很高的，因为浏览器必须首先遍历页面所有的div元素，然后才确定其父元素的class是否为content。看到这里，小伙伴们都会大吃一惊
    
    谷歌资深Web开发工程师Steve Souders对CSS选择器的匹配效率从高到低做了一个排序。
    （1）id选择器。（2）class选择器。（3）元素选择器。（4）相邻选择器。
    （5）子选择器。（6）后代选择器。（7）通配符选择器。（8）属性选择器。（9）伪类选择器。
    
    1．不要使用通配符
    2．不要在id选择器以及class选择器前添加元素名
    3．选择器最好不要超过三层，位置靠右的选择条件尽可能精确
    4．避免使用后代选择器，尽量少用子选择器
-->
</body>
</html>

css技巧 水平居中

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
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .case1 {
            display: inline-block;
            width: 500px;
            height: 50px;
            line-height: 50px;
            text-align: center; /*实现div元素内文字水平居中*/
            border: 1px dashed gray;
        }

        .case2 {
            margin: 0 auto;
            width: 50%;
            height: 100px;
            border: 1px solid gray;
        }

        .case3 {
            text-align: center;
        }
    </style>
</head>
<body>
<!--
13.1 水平居中

1 文字 的水平居中
    如果想要实现单行文字的水平居中，我们使用text-align属性就能轻松实现。
            text-align:center;

2 块元素(block) 的水平居中
    在CSS中，对于块元素，如果给定了宽度，直接定义margin-left和margin-right都为auto就能实现水平居中。
            margin:0 auto;
    
    如果没有给块元素指定宽度，则块元素默认会占满允许的最大宽度，此时这个方法是没有效的。
    想要使用“margin:0 auto”来实现块元素的水平居中，就一定要指定块元素的宽度。
    div元素是块元素。

3 行内元素(inline)/复合行内元素(inline-*) 的水平居中
    对于行内元素（inline）以及复合行内元素（inline-*），我们可以使用“text-align:center”来实现水平居中。
    也就是说，“text-align:center”不仅可以用于文字，也可以用于行内元素以及复合行内元素。
    复合行内元素包括inline-block、inline-table以及inline-flex之类的元素。
            text-align:center;
    
    图片img也是inline-block元素。
-->

<div class="case1">CSS实现单行文字水平居中：text-align:center;</div>

<hr>

<h4>水平居中的元素为div, div元素的父元素为body</h4>
<div class="case2"></div>

<hr>

<div class="case3"><strong>strong元素</strong></div>
<div class="case3"><span>span元素</span></div>
<div class="case3"><a href="http://www.lvyestudy.com">a元素</a></div>



</body>
</html>

css技巧 垂直居中

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .case1 {
            /* 定义height和line-height这两个属性值相等，就可以实现单行文字的垂直居中 */
            height: 100px;
            line-height: 100px;
            border: 1px solid gray;
        }

        /*-----------------------------------*/

        .case2 {
            display: table-cell;
            vertical-align: middle;
            width: 400px;
            height: 120px;
            border: 1px dashed gray;
        }

        .case2 span {
            display: inline-block;
        }

        /*-----------------------------------*/

        .case3 {
            position: relative;
            width: 200px;
            height: 160px;
            border: 1px solid gray;
        }

        .case3 div {
            position: absolute;
            /* 把自己的左上角 移到父元素的中心 */
            top: 50%;
            left: 50%;
            /* 再把自己的左上角 移到自己的中心 */
            margin-top: -30px;
            margin-left: -50px;

            width: 100px;
            height: 60px;
            background-color: Red;
        }

        /*-----------------------------------*/

        .case4 {
            display: table-cell;
            vertical-align: middle;
            width: 240px;
            height: 160px;
            border: 1px solid gray;
        }

        .case4 img {
            width: 60px;
            height: 60px;
            vertical-align: middle;
        }
    </style>
</head>
<body>
<!--
13.2 垂直居中

1．单行文字
        对于单行文字来说，我们定义line-height和height这两个属性的值相等就可以实现垂直居中。
        
2．多行文字
            父元素 {
                display:table-cell;
                vertical-align:middle;
            }
            span{display:inline-block; }
        
        实现的关键是，用一个span标签把所有文字包含起来，然后定义span为inline-block元素，之后使用inline-块元素垂直居中的方式来处理即可。

3．块元素（block）
        块元素的垂直居中一直很麻烦，对于高度已知的块元素，我们可以使用万能的position方法来实现。
        使用position方法，父元素和子元素都必须定义宽度和高度，然后给父元素写上“position:relative”，这样做是为了给子元素添加“position:absolute”的时候不会被定位到外太空去。
        
            父元素 { position:relative; }
            子元素 {
                position:absolute;
                top:50%;
                left:50%;
                margin-top:"height值一半的负值";
                margin-left:"width值一半的负值";
            }
        
        position这种方法是万能的，也就是不仅可以用于块元素，还可以用于inline、inline-block元素。
        
        （1）position方法可以用于所有元素，包括inline、inline-block、block元素。
        （2）position方法可以实现水平和垂直两个方向同时居中。
             如果单独想要水平居中，把top和margin-top这两个属性去掉即可。
             如果想要单独实现垂直居中，把left和margin-left这两个属性去掉即可。

4．行内块元素（inline-block）
        对于行内块元素的垂直居中，我们可以使用“display:table-cell”结合“vertical-middle”来实现。
        
            父元素 {
                display:table-cell;
                vertical-align:middle;
            }
            子元素{vertical-align:middle; }
-->

<hr>
<h4>1．单行文字</h4>
<div class="case1">《Web前端开发精品课》</div>
<hr>

<h4>2．多行文字</h4>
<p class="case2">
    <span>
      《web前端开发精品课· HTML和CSS基础教程》<br/>
      《web前端开发精品课· HTML和CSS进阶教程》<br/>
      《web前端开发精品课· CSS3教程》
    </span>
</p>
<hr>

<h4>3．块元素（block）</h4>
<div class="case3">
    <div></div>
</div>
<hr>

<h4>4．行内块元素（inline-block）</h4>
<div class="case4">
    <img src="img/仓鼠.jpg" alt=""/>
</div>

</body>
</html>

css重要概念 包含块

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        
    </style>
</head>
<body>
<!--
14.2 包含块
    
1 什么是包含块
        我们都知道，如果有两个div，一个是父元素，另外一个是子元素，父元素会决定子元素的大小和定位。
        包含块是什么呢？简单来说，就是可以决定一个元素大小和定位的元素。
        
        通常情况下，一个元素的包含块是由离它最近的 “块级祖先元素” 的 “内容边界” 决定的。
        但当元素被设置为绝对定位时，此时该元素的包含块是由离它最近的“position:relative” 或 “position:absolute”的祖先元素决定。
        

------------------------------------------------------------------------------------------------

2 包含块的判定以及包含块的范围
        1．根元素
            根元素（HTML元素），是一个页面中最顶端的元素，它没有父元素。根元素存在的包含块，被称为“初始包含块（initial containing block）。
        2．固定定位元素
            如果元素的position属性为fixed，那么它的包含块是当前可视窗口，也就是当前浏览器窗口。
        3．静态定位元素和相对定位元素
            如果元素的position属性为static或relative，那么它的包含块是它最近的块级祖先元素创建的。祖先元素必须是block、inline-block或者table-cell类型。
        4．绝对定位元素
            如果元素的position属性为absolute，那么它的包含块是由最近的position属性不为static的祖先元素。这里的祖先元素可以是块元素，也可以是行内元素。


------------------------------------------------------------------------------------------------

-->
</body>
</html>

css重要概念 层叠上下文

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
57
58
59
60
61
62
63
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #wrapper {
            width: 400px;
            height: 200px;
            border: 1px solid gray;
            padding: 10px;
        }

        img {
            float: left;
            width: 60px;
            height: 60px;
        }

        #content {
            background-color: #FFACAC;
        }
    </style>
</head>
<body>
<!--
14.3 层叠上下文
        
        同一个层叠上下文的背景色以及内部元素，谁在上谁在下，这些都是由层叠级别”来决定的。
        
        在同一个层叠上下文中，层叠级别从低到高排列：
        （1）背景和边框（父级）：也就是当前层叠上下文的背景和边框。
        （2）负z-index:z-index为负值的“内部元素”。
        （3）块盒子：普通文档流下的块盒子（block-level box）。
        （4）浮动盒子：非定位的浮动元素（也就是排除了position:relative的浮动盒子）。
        （5）行内盒子：普通文档流下的行内盒子（inline-level box）。
             注意，inline-block元素不是块盒子，而是行内盒子。
        （5）z-index:0:z-index为0的“内部元素”。
        （6）正z-index:z-index为正值的“内部元素”。
        
        背景和边框一般为装饰属性，所以层叠级别最低。浮动元素和块元素一般用作布局，而行内元素都是内容。
        对于一个页面来说，最重要的当然是内容。因此，一定要让内容的层叠级别相当高。
        
        ![css层叠级别](https://img-blog.csdnimg.cn/3d94c4c165de43ae8578e50b10afaf99.png)
        
        一个元素浮动之后，它的层叠级别比普通文档流的块级盒子的层叠级别要高。
        此时浮动元素会“浮”到上面去，脱离文档流。
------------------------------------------------------------------------------------------------

-->

<div id="wrapper">
    <img src="img/仓鼠.jpg" alt=""/>
    <div id="content">
        水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人
        甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远
        观而不可亵玩焉。予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后
        鲜有闻；莲之爱，同予者何人？牡丹之爱，宜乎众矣。
    </div>
</div>

</body>
</html>

css重要概念 BFC

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
57
58
59
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        
    </style>
</head>
<body>
<!--
14.4 BFC和IFC
        
        一个盒子只能是块盒子或者是行内盒子，不能同时是块盒子又是行内盒子。
        其中块盒子参与BFC（块级格式上下文），行内盒子参与IFC（行级格式上下文）。
        
14.4.2 什么是BFC
        BFC，全称Block Formatting Context（块级格式上下文）。它是一个独立的渲染区域，只有块盒子（block-level box）参与。
        块级格式上下文规定了内部的块盒子是如何布局的，并且这个渲染区域与外部区域毫不相关。
        
1．如何创建BFC
    如果一个元素具备以下任何一个条件，则该元素都会创建一个新的BFC。
    （1）根元素。
    （2）float属性除了none以外的值，也就是“float:left”和“float:right”。
    （3）position属性除了static和relative以外的值，也就是“position:absolute”和“position:fixed”。
    （4）overflow属性除了visible以外的值，也就是“overflow:auto”“overflow:hidden”和“overflow:scroll”。
    （5）元素类型（即display属性）为inline-block、table-caption、table-cell。
    
    block、table、list-item等类型的元素的是参与BFC，而不是创建BFC。
------------------------------------------------------------------------------------------------
2．BFC的特点
    （非常重要，请字斟句酌地理解记忆）。
    （1）在一个BFC内部，盒子会在垂直方向上一个接着一个地排列。
    （2）在一个BFC内部，相邻的margin-top和margin-bottom会叠加。
    （3）在一个BFC内部，每一个元素的左外边界会紧贴着包含盒子的左边，即使存在浮动也是如此。
    （4）在一个BFC内部，如果存在内部元素是一个新的BFC，并且存在内部元素是浮动元素。则该BFC的区域不会与float元素的区域重叠。
    （5）BFC就是页面上的一个隔离的盒子，该盒子内部的子元素不会影响到外面的元素。
    （6）计算一个BFC的高度时，其内部浮动元素的高度也会参与计算。
    
    能够参与BFC中的盒子是块盒子（block-level box）。就算在这个BFC中存在一个行内元素，这个行内元素参与的是IFC而不是BFC，别搞混了。
------------------------------------------------------------------------------------------------
3. BFC的用途
    （1）创建BFC来避免垂直外边距叠加。
    （2）创建BFC来清除浮动。
    （3）创建BFC来实现自适应布局。
-->

<div id="wrapper">
    <img src="img/仓鼠.jpg" alt=""/>
    <div id="content">
        水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人
        甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远
        观而不可亵玩焉。予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后
        鲜有闻；莲之爱，同予者何人？牡丹之爱，宜乎众矣。
    </div>
</div>

</body>
</html>

BFC 避免外边距叠加

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .case1, .case2 {
            width: 200px;
            border: 1px solid gray;
            overflow: hidden; /*创建一个新的BFC*/
        }

        .a, .b {
            height: 60px;
            line-height: 60px;
            text-align: center;
            font-size: 30px;
            color: White;
            background-color: Purple;
        }

        .a {
            margin-bottom: 20px;
        }

        .b {
            margin-top: 30px;
        }

        .bfc-box {
            /*overflow: hidden;*//* a b 依旧会外边距叠加，因为处于相同的BFC */
            overflow: hidden;/* a b 不会外边距叠加，因为处于不同的 BFC */
        }
    </style>
</head>
<body>
<!--
1．创建BFC来避免垂直外边距叠加
    外边距叠加，准确地说，是在同一个BFC中，两个相邻的margin-top和margin-bottom相遇时，这两个外边距将会合并为一个外边距，即“二变一”。
    其中，叠加之后的外边距高度等于发生叠加之前的两个外边距中最大值。之所以垂直外边距会发生叠加，其实这都是BFC的特点。
    
case1
    在case1中，我们使用“overflow:hidden”为父元素创建一个BFC，也就是说父元素是一个BFC了。因此A和B位于同一个BFC中。
    A的margin-bottom为20px, B的margin-top为30px。由于在同一个BFC中，相邻两个盒子的垂直外边距会叠加，因此A和B的垂直距离为30px。
    
    细心的小伙伴们就有疑问了：我不给父元素添加“overflow:hidden”来创建新的BFC，垂直外边距也会发生叠加，这是什么情况？
    大家别忘了根元素本身就是一个BFC，如果我们没有为父元素创建BFC，则默认情况下A和B就是处于根元素的BFC中。
    
case2
    在实际开发中，如果我们想要避免垂直外边距叠加，怎么办呢？
    根据第二个结论“同一个BFC中，相邻的margin-top和margin-bottom会叠加”，
    既然相邻的margin-top和margin-bottom必须处于同一个BFC才会发生叠加，那么我们把这两个元素放在不同的BFC中，就可以解决了。
    
    这里注意一下，假如我们不给#bfc-box元素添加“overflow:hidden”，A和B也会发生垂直外边距叠加。此时A和B都不属于相邻的元素，它们为什么还会发生外边距叠加呢？
    “同一个BFC中，相邻的margin-top和margin-bottom会叠加”，这里的相邻不是指“相邻的兄弟元素”，而是指相邻的margin-top和margin-bottom。
-->

<div class="case1">
    <div class="a">A</div>
    <div class="b">B</div>
</div>

<hr>

<div class="case2">
    <div class="a">A</div>
    <div class="bfc-box">
        <div class="b">B</div>
    </div>
</div>

</body>
</html>

BFC 清除浮动

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
57
58
59
60
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .case1, .case2 {
            width: 200px;
            border: 1px solid black;
        }

        .case2 {
            overflow: hidden;/* case2 变为新的BFC，它的高度由内部浮动子元素撑开 */
        }

        .son1, .son2 {
            width: 80px;
            height: 40px;
            border: 1px solid red;
        }

        .son1 {
            float: left;
        }

        .son2 {
            float: right;
        }
    </style>
</head>
<body>
<!--
2．创建BFC来清除浮动
    我们都知道可以使用“overflow:hidden”来清除浮动，但很少知道为什么。
    根据第六个结论“计算BFC的高度时，其内部浮动子元素的高度也会参与计算”，
    可以知道，如果一个元素是一个BFC，则计算该元素高度的时候，内部浮动子元素的高度也得算进去。

case1
    在这个例子中，由于父元素没有定义高度，因此父元素无法把浮动子元素包裹起来，这就会造成父元素高度塌陷。

case2
    这是因为“overflow:hidden”使得父元素变成了一个BFC，由于BFC在计算它自身高度的时候，会把浮动子元素的高度算进去，
    因此最终父元素的高度等于浮动子元素的高度。此时就相当于清除了浮动。
    当然我们也可以通过给父元素添加“display:inline-block” “float:left”等来创建新的BFC来实现浮动的清除。
-->
<div class="case1">
    <div class="son1"></div>
    <div class="son2"></div>
</div>

<br><br><br><br><br><br>
<hr>

<div class="case2">
    <div class="son1"></div>
    <div class="son2"></div>
</div>

</body>
</html>

BFC 避免文字环绕

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
57
58
59
60
61
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .wrapper {
            width: 400px;
            height: 200px;
            border: 1px solid gray;
            padding: 10px;
        }

        img {
            width: 60px;
            height: 60px;
            float: left;
        }

        .case1 {
            background-color: #FFACAC;
        }

        .case2 {
            background-color: #FFACAC;
            overflow: hidden;
        }
    </style>
</head>
<body>
<!--
（2）BFC避免文字环绕。
    
    在这个例子中，我们为 .case2元素添加“overflow:hidden”，此时.case2元素变成了一个新的BFC。
    
    根据第四点结论：在一个BFC内部，如果存在内部元素是一个新的BFC，并且存在内部元素是浮动元素，则该BFC的区域不会与float元素的区域重叠。
-->
<div class="wrapper">
    <img src="img/仓鼠.jpg" alt=""/>
    <div class="case1">
        食粮器内草籽香，众多者皆喜欢。金丝仓鼠中独爱轮盘。
        自宠起源，众人皆爱萝卜。我独爱仓鼠，毛发柔顺不脏，动态活泼不凡，身形圆润，不躁不急，可观且不可捉摸。
        我认为轮盘，仓鼠中的精灵；萝卜，仓鼠中的珍宝；仓鼠，动物中的君子。
        唉！轮盘之爱，世人罕闻；仓鼠之爱，与我同道；萝卜之爱，应得到众人的喜爱。
    </div>
</div>

<hr>

<div class="wrapper">
    <img src="img/仓鼠.jpg" alt=""/>
    <div class="case2">
        食粮器内草籽香，众多者皆喜欢。金丝仓鼠中独爱轮盘。
        自宠起源，众人皆爱萝卜。我独爱仓鼠，毛发柔顺不脏，动态活泼不凡，身形圆润，不躁不急，可观且不可捉摸。
        我认为轮盘，仓鼠中的精灵；萝卜，仓鼠中的珍宝；仓鼠，动物中的君子。
        唉！轮盘之爱，世人罕闻；仓鼠之爱，与我同道；萝卜之爱，应得到众人的喜爱。
    </div>
</div>

</body>
</html>

BFC 两列布局

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
57
58
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        
        .sidebar {
            float: left;/* 脱离正常文档流，会浮在 .content上面，我们看起来把它覆盖了一部分 */
            width: 100px;/* 宽度固定 */
            height: 150px;
            background: #FF6666;
        }

        .content {
            /* 未设置宽度，则 div块元素会填充整行 */
            height: 200px;
            background-color: #FFCCCC;
        }

        .content2 {
            /* 使 .content2变为新的 BFC，此时不会覆盖，而是并排对齐 */
            overflow: hidden;
        }
    </style>
</head>
<body>
<!--
3．使用BFC创建自适应两列布局
        自适应两列布局，指的是在左右两列中，其中有一列的宽度为自适应，另外一列宽度是固定的。
        
        在之前，我们介绍过使用负margin技术来实现自适应左右两列布局。
        这里我们介绍另外一种实现方式，那就是使用BFC创建自适应两列布局。
        
        
        
        在这个例子中，我们为.case2元素添加“overflow:hidden”，此时.case2元素变成了一个新的BFC。
        
        【日期标记】2023-06-25 15:36:30 以上同步完成
-->
<hr>

<div>
    <div class="sidebar">sidebar</div>
    <div class="content content1">content</div>
</div>

<hr>

<div>
    <div class="sidebar">sidebar</div>
    <div class="content content2">content</div>
</div>

<hr>

</body>
</html>