如何理解 HTML 语义化

<div>
	<div>这是一个标题</div>
	<div>这是一个段文字</div>
	<div>
		<div>列表</div>
		<div>列表</div>
	</div>
</div>

<div>
	<h1>这是一个标题</h1>
	<p>这是一个段文字</p>
	<ul>
		<li>列表</li>
		<li>列表</li>
	</ul>
</div>

语义化的优点

让人更容易读懂，增加代码的可读性；
让搜索引擎更容易读懂，SEO ；

常见的块状元素和内联元素

块状元素（独占一行）：display: block/table；比如 div、p、h、table、ul、ol；
内联元素（排列在一行，直到浏览器换行）：display: inline；比如 span、img；
行内块状元素（可以挤在一起，又可以设置宽高）：display: inline-block；input、button；（也可以归类到内联元素）。

display: table 的作用

目前，在大多数开发环境中，已经基本不用 table 元素来做网页布局了，取而代之的是 div+css，那么为什么不用 table 系表格元素呢？

用 div+css 编写出来的文件大小比用 table 写出来的要小；
table 必须在页面完全加载后才显示，没有加载完毕前，table 为一片空白，也就是说，需要页面加载完毕后才显示，而 div 是逐行显示，不需要页面完全加载完毕，可以一边加载一边显示；
非表格内容用 table 来写，不符合标签语义化要求，不利于 SEO；
table 的嵌套性太多，用 div 代码会比较简洁。

table 的作用：让块级标签实现行内效果，即浮动至同一横轴，并实现等高效果。

table 表格中的单元格最大的特点之一就是同一行列表元素都等高。所以，很多时候，我们需要等高布局的时候，就可以借助 display: table-cell 属性。

CSS 盒模型

offsetWidth = 内容宽度 width + 内边距 padding + border；

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>盒模型</title>
    <style type="text/css">
        #div1 {
            width: 100px;
            padding: 10px;
            border: 1px solid #ccc;
            margin: 10px;
        }
		
		#div2 {
            width: 100px;
            padding: 10px;
            border: 1px solid #ccc;
            margin: 10px;
            box-sizing: border-box; /* 让盒模型宽度 === 内容宽度width */
        }
    </style>
</head>
<body>
    <div id="div1">
        this is div1
    </div>
    
    <div id="div2">
        this is div2
    </div>

    <script>
        // document.getElementById('div1').offsetWidth; // 122px
        // document.getElementById('div2').offsetWidth; // 100px
    </script>
</body>
</html>

margin 纵向重叠

<head>
    <style type="text/css">
        p {
            font-size: 16px;
            line-height: 1;
            margin-top: 10px;
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
    <p>AAA</p>
    <p></p>
    <p></p>
    <p></p>
    <p>BBB</p>
</body>

AAA与BBB的间距是15px

margin-top 与 margin-bottom 会重叠；
空的 p 标签会重叠。

margin 负值

margin-left 负值，自身向左移动；
margin-top 负值，自身向上移动；
margin-right 负值，自身没有影响，右侧元素向左移动；
margin-bottom 负值，自身没有影响，下方元素向上移动；

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>margin 负值</title>
    <style type="text/css">
        body {
            margin: 20px;
        }

        .float-left {
            float: left;
        }
        .clearfix:after {
            content: '';
            display: table;
            clear: both;
        }

        .container {
            border: 1px solid #ccc;
            padding: 10px;
        }
        .container .item {
            width: 100px;
            height: 100px;
        }
        .container .border-blue {
            border: 1px solid blue;
        }
        .container .border-red {
            border: 1px solid red;
        }
    </style>
</head>
<body>
    
    <p>用于测试 margin top bottom 的负数情况</p>
    <div class="container">
        <div class="item border-blue">
            this is item 1
        </div>
        <div class="item border-red">
            this is item 2
        </div>
    </div>

    <p>用于测试 margin left right 的负数情况</p>
    <div class="container clearfix">
        <div class="item border-blue float-left">
            this is item 3
        </div>
        <div class="item border-red float-left">
            this is item 4
        </div>
    </div>

</body>
</html>

BFC 块级格式化上下文

一块独立的渲染区域，内部元素的渲染不会影响到边界以外的元素。BFC 的意思是形成一个范围，让内部元素不能脱离这个范围。

形成 BFC 的条件

float 不是 none
position 是 absolute 或 fixed
overflow 不是 visible
display 是 inline-block
flex 的子元素

BFC的常见应用

清除浮动

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        .container {
            background-color: #f1f1f1;
        }
        .left {
            float: left;
        }
        .bfc {
            overflow: hidden; /* 触发元素 BFC */
        }
    </style>
</head>
<body>
    <div class="container bfc">
        <img src="https://www.imooc.com/static/img/index/logo.png" class="left" style="magin-right: 10px;"/>
        <p class="bfc">某一段文字……</p>
    </div>
</body>
</html>

float 布局 - 实现圣杯布局和双飞翼布局

圣杯布局（三栏布局，左右两侧固定，中间自适应宽度，有一个头和尾）

float 布局
margin 负值实现
中间留白部分用 padding

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>圣杯布局</title>
    <style type="text/css">
        body {
            min-width: 550px;
        }
        #header {
            text-align: center;
            background-color: #f1f1f1;
        }

        #container {
            padding-left: 200px;
            padding-right: 150px;
        }
        #container .column {
            float: left;
        }

        #center {
            background-color: #ccc;
            width: 100%;
        }
        #left {
            position: relative;
            background-color: yellow;
            width: 200px;
            margin-left: -100%;
            right: 200px;
        }
        #right {
            background-color: red;
            width: 150px;
            margin-right: -150px;
        }

        #footer {
            text-align: center;
            background-color: #f1f1f1;
        }

        /* 手写 clearfix */
        .clearfix:after {
            content: '';
            display: table;
            clear: both;
        }
    </style>
</head>
<body>
    <div id="header">this is header</div>
    <div id="container" class="clearfix">
        <div id="center" class="column">this is center</div>
        <div id="left" class="column">this is left</div>
        <div id="right" class="column">this is right</div>
    </div>
    <div id="footer">this is footer</div>
</body>
</html>

双飞翼布局（三栏布局，左右两侧固定，中间自适应宽度）

float 布局
margin 负值实现
中间留白部分用 margin

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>双飞翼布局</title>
    <style type="text/css">
        body {
            min-width: 550px;
        }
        .col {
            float: left;
        }

        #main {
            width: 100%;
            height: 200px;
            background-color: #ccc;
        }
        #main-wrap {
            margin: 0 190px 0 190px;
        }

        #left {
            width: 190px;
            height: 200px;
            background-color: #0000FF;
            margin-left: -100%;
        }
        #right {
            width: 190px;
            height: 200px;
            background-color: #FF0000;
            margin-left: -190px;
        }
    </style>
</head>
<body>
    <div id="main" class="col">
        <div id="main-wrap">
            this is main
        </div>
    </div>
    <div id="left" class="col">
        this is left
    </div>
    <div id="right" class="col">
        this is right
    </div>
</body>
</html>

flex 布局 - 实现3点骰子

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex 画骰子</title>
    <style type="text/css">
        .box {
            width: 200px;
            height: 200px;
            border: 2px solid #ccc;
            border-radius: 10px;
            padding: 20px;

            display: flex;
            justify-content: space-between;
        }
        .item {
            display: block;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #666;
        }
        .item:nth-child(2) {
            align-self: center;
        }
        .item:nth-child(3) {
            align-self: flex-end;
        }

    </style>
</head>
<body>
    <div class="box">
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
    </div>
</body>
</html>

absolute 和 relative 定位问题

relative 是基于自身定位；
absolute 是基于上层最近的一个定位元素而定位；

*[定位元素]：position 不是 static

CSS - 图文样式

line-height 如何继承

line-height 如果是具体数值，比如 30px，则继承 30px；
line-height 如果是比例，比如 1.5，则继承比例 1.5;
line-height 如果是百分比，则继承父元素计算后的结果。

<style>
	body {
		font-size: 20px;
		line-height: 200%;
	}
	
	p {
		font-size: 16px;
		/* 继承后的line-height: 40px; */
	}
</style>

<body>
	<p>AAA</p>
</body>

<style>
	body {
		font-size: 20px;
		line-height: 30px;
	}
	
	p {
		font-size: 16px;
		/* 继承后的 line-height: 30px; */
	}
</style>

<body>
	<p>AAA</p>
</body>

<style>
	body {
		font-size: 20px;
		line-height: 1.5;
	}
	
	p {
		font-size: 16px;
		/* 继承后的 line-height: 1.5; === line-height: 24px; */
	}
</style>

<body>
	<p>AAA</p>
</body>

CSS - 响应式

px 绝对长度单位；
em 相对长度单位，相对于父元素；
rem 相对长度单位，相对于根元素（html），一般配合 media-jquery 使用。

*[media-jquery]：根据不同的屏幕宽度设置根元素的 font-size。相较于 vw 和 vh 的弊端，它是具有阶梯式的。

vw 和 vh ：vw 是网页视口宽度的百分之一，vh 是网页视口高度的百分之一。

*[屏幕高度/宽度]：window.screen.hieght/width

*[网页视口高度/宽度]：window.innerHieght/innerWidth

*[body 高度/宽度]：document.body.clientHieght/clientWidth

HTML、CSS 知识点总结