极简页面布局知识手册（0.8版）

1 基础概念

HTML

• 全写为HyperTextMarkupLanguage，直译为 超文本标记语言
• 言下之意明明一段字符代码，浏览器在显示（渲染）时却能形成很炫的效果，因此它是“超级文本”；
• HTML语言的基本元素是标签/元素；
• 每个标签都有其特定的语义，特定的属性，浏览器能够根据标签的语义和属性，按约定方式去绘制特定的效果；

<div class="minsu">民宿推荐</div>

• 在上面的HTML代码中 div就是标签名，我们注意到它是成对出现的，class="minsu"是它的一个属性；
• HTML语言中有狠多标签和属性，每个标签名具体是何含义（语义），每个属性具体代表什么，浏览器应该怎么理解和渲染这些标签和属性，是有一整套标准的，即 W3C标准；

CSS

• 全称CascadingStyleSheets，直译为层叠样式表；
• 是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言；
• CSS文件扩展名为 .css；
• 通过使用CSS我们可以大大提升网页开发的工作效率；
• CSS3现在已被大部分现代浏览器支持，而下一版的 CSS4 仍在开发中。

JavaScript

• 控制页面交互行为的脚本语言；
• 其语法标准由欧洲计算机制造商协会（ECMA）制定并逐年更新，因此JS的语法标准又被称为ECMAScript/ES；
• 目前被所有浏览器广泛支持语法版本为ES5，发布于2009年；
• 目前被前端使用最广泛的语法版本为ES6/ES2015，发布于2015年；
• 将ES高版本语法向ES5转换的工具名曰babel；

W3C

• W3C 指万维网联盟（World Wide Web Consortium）
• W3C 创建于1994年10月，由 Tim Berners-Lee 创建；
• W3C 的工作是对 web 进行标准化，创建并维护 WWW 标准，用于规范浏览器对HTML和CSS的渲染行为；
• W3C 是一个会员组织，其会员包括微软、苹果、谷歌...不一一列举了，凡是造浏览器的厂商都是会员；
• W3C 标准被称为 W3C 推荐（W3C 规范）
• “推荐”而非强制，但上一个不响应“推荐”的浏览器已经被其亲妈所抛弃了，即微软抛弃IE的故事；

2 常用标签与属性

常用块级元素

块级元素会独占一行

其宽度默认与父容器相等

div容器

• 语义就是分块（division），常用于页面大块划分
• 每个div标签在页面中独占一行

    <div>我是div，我是用来盛放其它元素的容器</div>
    <div>我是div，我是用来盛放其它元素的容器</div>

h1~h6 标题

顾名思义，标题就是要特别引起用户注意的文字

标题肯定是越夺人眼球越好啦

标题不单单会引起人的注意，也会特别引起搜索引擎爬虫的注意

h1~h6在语义上重要性依次降低

    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>

p段落

语义上为一段文字

作为块级元素独占一行

在搜索引擎爬虫眼里，重要性不及标题

    <!-- br为换行标签 -->
    <p>
        曾经一段真挚的爱摆在我面前，我没有好好珍惜，直到错过才追悔莫及；<br>
        如果上天能再给我一次机会的话，我会对那个女孩说三个字：<br>
        我爱你！<br>
        如果非要给这份爱加个期限的话，那么我希望是：<br>
        一万年！<br>
    </p>

ol有序列表

有序列表及其子条目都是块级元素

有序列表的子条目被认为有先后顺序之分

    <ol>
        <li>孙悟空</li>
        <li>猪八戒</li>
        <li>沙和尚</li>
    </ol>

ul无序列表

无序列表及其子条目都是块级元素

无序列表的子条目之间被认为都是平起平坐、没有先后次序的

    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>橘子</li>
    </ul>

dl列表

列表类似于有标题的无序列表

列表、标题、项目都是块级元素

    <dl>
        <dt>四大名著</dt>
        <dd>红楼梦</dd>
        <dd>三国演义</dd>
        <dd>水浒传</dd>
        <dd>西游记</dd>

        <dt>四大天王</dt>
        <dd>刘德华</dd>
        <dd>黎明</dd>
        <dd>郭富城</dd>
        <dd>张学友</dd>
    </dl>

table表格

表格常用于展示数据

相关的标签有table,caption,thead,tbody,tr,td,th等

以下是一个班级座位表实例

<!-- 
border="1" 边框粗细1（后面推荐使用CSS样式定义）
cellspacing="2" 单元格之间的间距
cellpadding="5" 单元格之内的边距
-->
<table border="1" cellspacing="2" cellpadding="5">

    <!-- 表格说明 -->
    <caption>班级座位表</caption>

    <!-- 表头 -->
    <thead>

        <!-- tr 一行 -->
        <tr>
            <!-- td 一个普通单元格 -->
            <!-- colspan="7" 该单元格横跨7列 -->
            <!-- &nbsp; 代表一个空格 在HTML中再多连续换行与空格也只会被解读为一个空格 需要多个就使用&nbsp; -->
            <td colspan="7">
                3月20日&nbsp;&nbsp;
                Web-2301&nbsp;&nbsp;
                项目8
            </td>
        </tr>

        <tr>
            <!-- th 一个加粗显示的单元格 常用来显示表头内容 -->
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
            <th>5</th>
            <th>6</th>
            <th>7</th>
        </tr>
    </thead>

    <!-- 表身 -->
    <tbody>

        <tr>
            <td>赵某某</td>
            <td>钱某某</td>
            <td>孙某某</td>
            <!-- 这个单元格纵跨3行 -->
            <td rowspan="3">过道</td>
            <td>李某某</td>
            <td>周某某</td>
            <td>吴某某</td>
        </tr>

        <tr>
            <td>赵某某</td>
            <td>钱某某</td>
            <td>孙某某</td>
            <td>李某某</td>
            <td>周某某</td>
            <td>吴某某</td>
        </tr>

        <tr>
            <td>赵某某</td>
            <td>钱某某</td>
            <td>孙某某</td>
            <td>李某某</td>
            <td>周某某</td>
            <td>吴某某</td>
        </tr>

    </tbody>

</table>

form表单

内容较多，稍后更新

hr分割线

    第一段
    <hr>
    第二段

常用行内元素

行内元素不会像块级元素那样独占一行

而是从左向右依次排列

img图片

• 作为行内元素，图片不会独占一行，而是在当前行内从左往右排列；
• 图片的两个主要属性：src,alt
• src为图片来源，可以使用网络和本地图片
• alt属性的全写alternative为备选方案之意，其作用是定义一些图片说明文字将来使用工具读给盲人听，帮盲人理解网页内容；

    <!-- 使用网络图片 -->
    <img src="http://p0.meituan.net/codeman/e473bb428f070321269b23370ff02ba956209.jpg" alt="这里的文字是工具读给盲人听的">

    <!-- 使用本地图片 -->
    <img src="./imgs/maikefeng.jpg" alt="这里的文字是工具读给盲人听的">

span无特殊语义

• 仅仅只是一个行内元素盒子，无特殊语义；
• 对于无需特殊语义的内容，想要设置边距和间距时可以先将其用span标签包裹；

<head>
    ...
    <style>
        /* 通过标签选择器定位到两个span元素并设置样式 */
        span {
            color:red
        }
    </style>
</head>
<body>
    <!-- 内容没有特殊语义 使用span标签包裹 一用于横排内容 二便于CSS选择器定位内容 -->
    <span>文字1</span>
    <span>文字2</span>
</body>

a超链接

• a标签用于跳转页面，其主要属性为href与target
• href指定要跳转的目标链接
• target属性用于指定在哪里打开目标链接

    <a href="https://www.baidu.com" target="_blank">在新窗口打开百度</a>
    <a href="https://www.baidu.com" target="_self">在当前窗口打开百度</a>

i/b/em 倾斜/加粗/强调

    常规文字<br>

    <!-- 样式倾斜 -->
    <i>倾斜文字</i><br>

    <!-- 样式加粗 -->
    <b>加粗文字</b><br>

    <!-- 语义是告诉搜索引擎这里的内容有点重要 -->
    <em>强调文字</em>

通用属性

• class类名

• class属性定义了元素的类名;
• CSS可以根据类名去定义一套样式，物以类聚，所有具有相同类名的标签/元素都将天下乌鸦一般黑，获得相同的样式；
• 例如上面的案例中我们给一个div元素添加了类名名曰banner，在CSS样式(style)中，我们为其设置了元素高度、文本行高、背景色等样式，那么所有class为banner的元素都将具有这几个相同样式；

    <!-- 李四和王五都属于goodboy -->
    <div class="goodboy">好小子李四</div>
    <div class="goodboy">好小子王五</div>

    /* 通过类名定位多个元素 */
    .goodboy {
        color: green;
    }

• id身份标识

    <div id="zhangsan">我是页面上唯一的张三</div>

    /* 通过id选择器定位元素 */
    #zhangsan {
        color: red;
    }

• style行内样式

    <div style="color:blue">赵六</div>

• name名称

    <div name="hqg">洪七公</div>

    /* 通过name属性定位（多个）元素 */
    div[name="hqg"] {
        color: orange
    }

3 布局基础

31块级元素/行内元素/行内块

• 块级元素独占一行，常见的有div,h1~h6,p,ul/ol,table等；
• 行级元素在行内依次横排，常见的有span,img,a,i/b等;
• 块级元素内部可以包含行内元素；
• 行级元素中不可以包含块级元素；
• 给行级元素设置width/height/垂直padding/垂直margin，无效；
• 如果需要给行内元素设置完整的盒模型样式，需要先将其display设置为inline-block，即行内快；
• 行内块在行内水平排列，同时支持完整的盒模型属性；

32文档流

• 文档流即各种元素盒子在页面中的默认排列方式，即：
• 块级元素从上向下垂直排列；
• 行内元素从左向右水平排列；
• 元素盒子之间项目没有重叠和遮挡；

什么叫某个元素 “脱离了文档流”

• 即其它元素在排列时当该元素并不存在！

33颜色的表示

• 单词表示

<h1 style="color: skyblue;" >英文单词表示颜色</h1>

• 红绿蓝颜色通道表示

<!-- 红绿蓝颜色通道 取值范围[0,255] -->
<h1 style="color:rgb(255,0,0)">红绿蓝颜色通道</h1>

• 使用透明度通道

<!-- 不建议使用透明度 要经过GPU的复杂运算换算为具体的实色 渲染性能垃圾 -->
<h1 style="color:rgba(0,0,255,0.1)">红绿蓝颜色通道</h1>

• 十六进制表示

<h1 style="color:#ff0000" >十六进制数表示</h1>

<!-- 最后两位为颜色通道 范围[00,ff] -->
<h1 style="color:#0000ff33" >十六进制数表示</h1>

• 十六进制简写

<h1 style="color:#00f" >十六进制数表示</h1>
<h1 style="color:#00f3" >十六进制数表示</h1>

• 完整demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 英文单词表示颜色 -->
    <h1 style="color: skyblue;" >英文单词表示颜色</h1>

    <!-- 红绿蓝颜色通道 取值范围[0,255] -->
    <h1 style="color:rgb(255,0,0)">红绿蓝颜色通道</h1>
    <h1 style="color:rgb(0,255,0)">红绿蓝颜色通道</h1>
    <h1 style="color:rgb(0,0,255)">红绿蓝颜色通道</h1>

    <!-- 叠加透明度通道alpha 取值范围[0,1]  -->
    <!-- 不建议使用透明度 要经过GPU的复杂运算换算为具体的实色 渲染性能垃圾 -->
    <h1 style="color:rgba(0,0,255,0.1)">红绿蓝颜色通道</h1>

    <!-- 十六进制数表示 -->
    <h1 style="color:#ff0000" >十六进制数表示</h1>
    <h1 style="color:#00ff00" >十六进制数表示</h1>
    <h1 style="color:#0000ff" >十六进制数表示</h1>

    <!-- 最后两位为颜色通道 -->
    <h1 style="color:#0000ff33" >十六进制数表示</h1>

    <!-- 十六进制简写 -->
    <h1 style="color:#f00" >十六进制数表示</h1>
    <h1 style="color:#0f0" >十六进制数表示</h1>
    <h1 style="color:#00f" >十六进制数表示</h1>
    <h1 style="color:#00f3" >十六进制数表示</h1>

    <!-- 手动调颜色 -->
    <h1 style="color:rgba(204, 19, 195, 0.76)" >手动调颜色</h1>
    <h1 style="color:rgb(0, 93, 180)" >手动调颜色</h1>

</body>
</html>

34样式继承

• 祖代的样式会被后代继承；
• 如果后代想要覆盖祖代样式，需要重新以更大权重的选择器来重写样式；

35CSS选择器

标签选择器

• 选中所有特定的标签并同意添加样式

/* 标签选择器 选中所有div */
div {
    ...
}

• 标签选择器的权重为1；

id选择器

• HTML元素上有id="xxx"属性，此时CSS可以根据id定位该元素并设置样式；

#xxx {具体样式}

• id选择器的权重值为100;

---

类选择器

• HTML标签上有属性class="xxx"时，CSS可以通过.xxx{具体样式}的方式来定位到所有具有该类名的元素，统一给它们添加相同的样式；
• 例如上面的.banner;
• 类选择器的权重为10；

伪类选择器

属性选择器

组合选择器

• 由标签/伪元素选择器、类/伪类/属性选择器、id选择器中的多种组合而成的选择器；
• 其权重为各选择器之和；

/* 标签选择器+类选择器的组合 权重为1+10=11 */
div.box {...}

子代/后代选择器

• 子代选择器

/* 子代选择器 */
#header-box>.top-bar {
    height: 42px;
    background-color: #f8f8f8;
}

• 后代选择器

/* 后代选择器  */
#header-box .menu-box {
    height: 48px;
    background-color: red;
}

---

伪元素选择器

---

群组选择器

• 通过逗号隔开的方式，一次性选中一堆选择器（可以是标签选择器、类选择器、通配符选择器以及我们后续会学的各种复杂选择器），并给命中的元素统一添加样式；

.banner,
.movie,
.minsu,
.likes,
.navi,
.links,
.footer {
    ...
}

通配选择器

• 选中所有元素并统一添加样式！

* {
    ...
}

---

36选择器权重

• 大家应该已经注意到了，标签选择器、类名选择器、通配符选择器常常会同时命中同一目标！
• 下面的例子中，类名为header的div元素会同时被三个选择器命中，如果这三个选择器的样式发生冲突的话，这个元素到底该听谁指挥呢？

* {...}

div {...}

.header {...}

• 为解决这个问题，W3C就提出了选择器权重这一概念！

• 选择器的权重优先级：行内1000 > id100 > 类属10 > 元素1
• 后代选择器的权重为各代权重的总和；
• 优先级相同时，后写的会覆盖先写的；
• 另外还有一种写法：样式名:样式值 !important; 这种写法拥有最高优先级；

• 以下demo展示了选择器权重的计算方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 0 0 0 1 */
        li {
            color: red;
        }

        /* 0 0 1 0 */
        .item2 {
            color: green;
        }

        /* 0 1 0 0 */
        #geg {
            color: yellow;
        }

        /* 0 1 1 0 */
        #container .item2 {
            color: skyblue;
        }

        /* 0 1 1 1 */
        #container li.item2 {
            color: orange;
        }

        /* 1 0 0 0 行内样式 */

    </style>

</head>

<body>
    <main>
        <div id="container">
            <ul class="menu">
                <li class="item1">大耳儿</li>

                <!-- 1 0 0 0 -->
                <!-- <li id="geg" class="item2" style="color: aqua;">关二哥</li> -->

                <li id="geg" class="item2">关二哥</li>
                <li class="item3">环眼贼</li>
            </ul>
        </div>
    </main>
</body>

</html>

4 布局/摆放盒子

布局就是在页面上摆放盒子！

41盒模型（布局）

理论基础

• 如图，我们把任何一个元素都看成是摆在页面上的一个盒子；
• content部分是盒子中内容的宽高；
• border部分是盒子的边框；
• padding部分是内容距离边框的距离，我们称为内边距；
• margin部分是盒子边框距离相邻元素或页面边界的距离，我们称为外边距；
• 所以一个元素盒子真正在页面中占据的尺寸为：内容宽高 + 内边距 + 边框粗细 + 外边距；

垂直margin合并

• 上下两个盒子的垂直margin会自动合并为【二者之间的大者】；

demo

demos/002/盒模型.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
        该元素盒子实际占用宽度
        =内容宽 + 左右内边距 + 边框 + 左右外边距
        =200 + 20 + 10 + 5 = 235px

        该元素盒子实际占用高度
        =内容高 + 上下内边距 + 边框 + 上下外边距
        =100 + 20 + 10 + 5 = 135px
        */
        .box {
            /* 内容宽高 */
            width: 200px;
            height: 100px;

            /* 内边距 */
            padding: 20px;

            /* 边框 */
            border: 10px solid black;

            /* 外边距 */
            margin: 5px;

            /* 背景色 */
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        哥是一个盒子
    </div>
</body>
</html>

设置背景

.xxx {
    width: 550px;

    // 背景图片
    // background-image: url(../imgs/1.jpg);

    // 背景图不重复
    // background-repeat: no-repeat;

    // 起始位置：从盒子的左上角开始铺设背景图
    // background-position: 0 0;

    // 合成写法：url + 不重复 + 起始位置
    background: url(../imgs/1.jpg) no-repeat 0 0;

    // 背景图尺寸：
    // cover=刚刚好铺满容器（图片可能显示不完全） 最常用！
    // contain=刚刚好显示完整的图片（盒子可能没完全盖住）
    background-size: cover;
}

怪异盒模型

常规盒模型的实际尺寸为：内容宽高width/height + 内边距padding + 边框border，即这三者任何一个变大或减小，都会导致盒子的实际尺寸发生变化；

而在开发中，我们常常需要根据美术设计效果图所展示的尺寸来严格定义每一个盒子的实际尺寸，且不希望该尺寸因为内容、内边距、边框的改变而改变；

我们希望锁死盒子的实际尺寸，如果内容宽高变大了就自动压缩内边距或边框，反之如果内边距或边框变大了，就自动压缩内容的宽高，以保证三者的加和始终相等；

我们的实现手段，就是使用怪异盒模型：box-sizing:border-box；

box-sizing翻译过来就是盒子尺寸的计算方式，常规盒模型的box-sizing默认值为content-box；

div {
    box-sizing:border-box;
    
    /* 当前元素盒子的实际尺寸锁死为100×100 */
    /* 通常在边框粗细既定的情况下 内容尺寸与内边距是此消彼长的关系 */
    width:100px;
    height:100px;
}

42浮动（布局）与清除

概述

• 块级元素默认每人独占一行，想让他们水平排列时如之奈何呢？答案是使用浮动！
• 给这堆块级元素加上样式float:left它们就会水平向左浮动，float:right则水平向右浮动；
• 浮动元素脱离了正常文档流，会导致其身后的元素在布局时无视浮动元素的存在，产生不符合预期的奇怪效果；
• 文字会自动避开浮动元素的遮挡形成环绕效果；
• 如果既要使用浮动令元素横排，又要两侧的相邻元素不受浮动的影响，我们就需要清除浮动；
• 清楚浮动有以下几招：

• 在浮动元素的末尾放置一个零尺寸的兄弟元素，并且clear:both;
• 给最后一个浮动的元素的下一个元素添加 clear:both;
• 给浮动元素的父盒子添加overflow:hidden;使其成为一个独立的不影响外界的BFC盒子；

浮动与清除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .item {
            width: 100px;
            height: 100px;
            /* background-color: red; */
            /* margin: 5px; */
        }

        .big {
            width: 200px;
            height: 200px;
        }

        .red {
            background-color: red;
        }
        .green {
            background-color: green;
        }
        .blue {
            background-color: blue;
        }
        .yellow {
            background-color: yellow;
        }

        .left {
            float: left;
        }
        .right {
            float: right;
        }

        .clearfix {
            width: 0;
            height: 0;
            clear: both;
        }
    </style>
</head>
<body>

    <!-- 正常文档流 -->
    <!-- <div class="box1">
        <div class="item red">1</div>
        <div class="item green">2</div>
        <div class="item blue">3</div>
    </div> -->

    <!-- 左浮动 -->
    <!-- <div class="box1">
        <div class="item left red">1</div>
        <div class="item left green">2</div>
        <div class="item left blue">3</div>
    </div>
    <div class="item big yellow">跟屁虫</div> -->

    <!-- 右浮动 -->
    <!--     
    <div class="box1">
        <div class="item right red">1</div>
        <div class="item right green">2</div>
        <div class="item right blue">3</div>
    </div>
    <div class="item big yellow">跟屁虫</div>
    -->

    <!-- 清除浮动1：内部加特定的清除元素 -->   
    <!-- <div class="box1">
        <div class="item left red">1</div>
        <div class="item left green">2</div>
        <div class="item left blue">3</div>
        <div class="clearfix"></div>
    </div>
    <div class="item big yellow">跟屁虫</div>

    <div class="box1">
        <div class="item right red">1</div>
        <div class="item right green">2</div>
        <div class="item right blue">3</div>
        <div class="clearfix"></div>
    </div>
    <div class="item big yellow">跟屁虫</div> -->
   

    <!-- 清除浮动2：后续元素自己清除前面浮动的影响 -->  
    <!-- <div class="box1">
        <div class="item left red">1</div>
        <div class="item left green">2</div>
        <div class="item left blue">3</div>
    </div>
    <div class="item big yellow" style="clear: left;">跟屁虫</div> -->
    

     <!-- 清除浮动3：父元素把自己变成一个BFC盒子 -->
     <!-- <div class="box1" style="overflow: hidden;">
        <div class="item left red">1</div>
        <div class="item left green">2</div>
        <div class="item left blue">3</div>
    </div>
    <div class="item big yellow">跟屁虫</div> -->

    <!-- 图文混排效果 -->
    <div class="box" style="width:300px;border: 1px solid black;padding: 2px;" >
        <img 
        src="../../../../files/c75c10385343fbf2b211d073b737dd8065380cd72100.png" 
        class="left"
        style="width: 150px; margin: 0 5px 5px 0;"
        >
        <p>
            1、我一看！嗷！原来是昨天，有两个年轻人。
            2、多岁，一个体重，九十多公斤，一个体重八十多公斤。
            3、我说可以。我说你在健身房练死劲儿，不好用，他不服气。
            4、诶，我说小朋友，你两个手来折我一个手指头，他折不动。
            5、诶，朋友们好啊，我是混元形意太极门掌门人——马保国。
            6、他非要和我试试，我说可以。我一说完他啪就站起来了，很快啊。
            7、刚才有个朋友问我马老师发生什么事了，我说怎么回事，给我发了几张截图。
            8、这两个年轻人不讲武德，来骗！来偷袭，我六十九岁的老同志。这好吗？这不好！
            9、然后上来就是一个左正蹬，吭，一个右鞭腿一个左刺拳，我全部防区（口误）防出去了啊！
            10、他们说，诶，有一个说是我在健身房练功颈椎练坏了，马老师你能不能教教我浑元功法，诶，帮助治疗一下，我的颈椎病。
            11、我说我这个有用，这是化劲儿，传统功夫是讲化劲儿的，四两拨千金。二百多斤的英国大力士，都握不动我这一个手指头啊。
            12、我劝！这位年轻人好自为之，好好反思，以后不要再犯这样的聪明，小聪明，啊，呃，武林要以和为贵，要讲武德，不要搞窝里斗。
        </p>
    </div>

</body>
</html>

43定位（布局）

静态定位

• HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
• 静态定位的元素不会受到 top, bottom, left, right影响。

固定定位

• 元素的位置相对于浏览器窗口是固定位置。
• 即使窗口是滚动的它也不会移动：

在下面的例子中，侧边栏在页面上是锁定不动的！

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>固定定位</title>
    <style>
        body {
            height: 2000px;
        }

        p.pos_fixed {
            position: fixed;
            top: 30px;
            right: 5px;
        }
    </style>
</head>

<body>
    <p class="pos_fixed">侧边栏</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
</body>

</html>

相对定位

相对定位元素的定位是相对其正常位置。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>相对定位</title>
    <style>
        h2.pos_top {
            position: relative;
            top: -50px;
        }
    </style>
</head>

<body>
    <h2>
        这是一个没有定位的标题
    </h2>

    <h2 class="pos_top">
        这个标题相对于自身正常文档流位置向上移动
    </h2>

</body>

绝对定位

• 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于html
• absolute 定位使元素的位置与文档流无关，因此不占据空间。
• absolute 定位的元素和其他元素重叠。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位</title>
    <style>
        .box {
            width: 800px;
            height: 200px;
            border: 1px solid black;
            margin: 50px auto;

            /* 在绝对定位中标记 我是父盒子 */
            /* 我就是爹 */
            position: relative;

        }

        /* 图片盒子 左侧紧贴容器 垂直居中 */
        .img-box {
            width: 125px;
            height: 45px;
            background-color: #ff0000;

            /* 相对于父盒子做绝对定位 */
            /* 我要相对于爹做定位 */
            position: absolute;

            /* 左偏移100px 顶偏移50px */
            left: 100px;
            top: 50px;

            /* 定位到父盒子右下角 */
            /* right:100px;
            bottom: 50px; */

            /* 子盒子左上角对齐父盒子几何中点 */
            /* left: 50%;
            top: 50%; */
        }

        .search-box {
            width: 550px;
            height: 150px;
            background-color: #00ff00;
        }
    </style>
</head>

<body>

    <!-- 1200 * 200 水平居中 -->
    <div class="box">

        <!-- 图片盒子 -->
        <div class="img-box"></div>

        <!-- 搜索框盒子 -->
        <div class="search-box"></div>

    </div>

</body>

</html>

粘性定位

• sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。
• position: sticky; 基于用户的滚动位置来定位。
• 粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
• 正常情况下它的行为就像 position:relative;  
• 而当页面滚动超出目标区域时，它的表现就像 position:fixed; ，它会固定在目标位置。
• 元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
• 这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>粘性定位</title> 
<style>
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}
</style>
</head>
<body>

<p>尝试滚动页面。</p>
<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>

<div class="sticky">我是粘性定位!</div>

<div style="padding-bottom:2000px">
  <p>滚动我</p>
  <p>来回滚动我</p>
  <p>滚动我</p>
  <p>来回滚动我</p>
  <p>滚动我</p>
  <p>来回滚动我</p>
</div>

</body>
</html>

滚动未达到阈值之前，形同相对定位（正常文档流）

top达到阈值0以后，形同固定定位，顶栏在页面被固定住了

44弹性盒布局

弹性盒简介

弹性盒布局可以：

• 自由地对其内部子元素进行横排或直排（无需浮动，没有脱离文档流）；
• 自由地对子元素在纵横两个方向上的分布做贴边、居中、均匀分布等操作；
• 将内部众多盒子 按比例分配空间，在不同尺寸的设备上得到一样的显示效果；
• 广泛支持IE11以后的所有浏览器；

布局策略选择

盒浮定 OR 弹性盒 OR 网格布局？

• 弹性盒布局在自适应布局方面的巨大的优势，值得一再、反复、高度、热情地追捧；
• 相比于 “笨拙而全面兼容的 盒浮定布局（盒模型+浮动+定位）” 以及 “理念先进但兼容性较差的 网格布局”，弹性盒布局是很多前端猿的首选（如果不考虑老旧政府项目的话）；
• 笔者本人做项目时，基本秉承弹性盒万岁理念；

横排弹性盒

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平弹性盒</title>
    <style>
        .box,.item {
            border: 1px solid black;
        }

        .box {
            width: 500px;
            height: 250px;
            margin: 0 auto;

            /* 弹性盒布局 */
            display: flex;

            /* 默认横向排列子元素 */
            /* 主轴方向：横向！ */
            flex-direction: row;

            /* 在横向（主轴方向）上贴边、居中、均匀分布 */

            /* 贴左边 */
            /* justify-content: start; */

            /* 贴右边 */
            /* justify-content: end; */

            /* 横向居中 */
            justify-content: center;


            /* 不同款式的均匀分布 */

            /* 所有缝隙均相同 1 # 1 # 1 # 1 */
            /* justify-content: space-evenly; */

            /* 周边无缝隙，两两之间间距相同 0 # 1 # 1 # 0 */
            /* justify-content: space-between; */

            /* 每个子元素的周边间距相同 1 # 2 # 2 # 1 */
            /* justify-content: space-around; */



            /* 在纵向（交叉方向）上贴边、居中 */

            /* 贴顶边 */
            /* align-items: start; */

            /* 贴底边 */
            /* align-items: end; */

            /* 垂直居中 */
            align-items: center;
        }

        .item {
            width: 100px;
            height: 50px;
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
    
</body>
</html>

直排弹性盒

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>直排弹性盒案例</title>
    <style>
        .box,.item {
            border: 1px solid black;
        }

        .box {
            width: 500px;
            height: 250px;
            margin: 0 auto;

            /* 直排弹性盒 */
            display: flex;
            flex-direction: column;

            /* 纵向（主轴方向）贴边 + 居中 + 均匀分布 */

            /* 主轴贴边 */
            /* justify-content: start; */
            /* justify-content: end; */

            /* 主轴居中 */
            /* justify-content: center; */

            /* 主轴均匀分布 */
            /* 1 # 1 # 1 # 1 */
            justify-content: space-evenly;

            /* 0 # 1 # 1 # 0 */
            /* justify-content: space-between */

            /* 1 # 2 # 2 # 1 */
            /* justify-content: space-around; */


            /* 横向（交叉方向）贴边 + 居中 */

            /* 贴左边 */
            /* align-items: start; */

            /* 贴右边 */
            /* align-items: end; */

            /* 水平居中 */
            align-items: center;
        }

        .item {
            width: 100px;
            height: 50px;
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
    
</body>
</html>

子元素的交叉轴逃逸

 .item1 {
    /* 当前孩子自己跑到交叉轴起始端 */
    align-self: flex-start;
 }

 .item3 {
    /* 当前孩子自己跑到交叉轴末端 */
    align-self: flex-end;
 }

按比例分配空间

下面的案例中input与button按4:1分配主轴空间

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: beige;
        }

        .box1 {
            margin: 10px;
            height: 30px;
            /* border: 1px solid black; */

            display: flex;
            flex-direction: row;
        }

        /* 输入框与按钮4:1分配 */
        .ip1 {
            flex: 4;
        }

        .btn1 {
            flex: 1;
        }
    </style>
</head>

<body>
    <div class="box1">
        <!-- 输入框与按钮4:1分配 -->
        <input class="ip1" type="text">
        <button class="btn1">搜索</button>
    </div>

</body>

</html>

下面的案例中button固定宽度50，input占据剩余空间

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: beige;
        }

        /* 按钮固定宽度 input占据剩余 */
        .box2 {
            display: flex;
        }

        /* 按钮固定50宽 */
        .btn2 {
            width: 50px;
        }

        /* input框占据剩余空间 */
        .ip2 {
            flex: 1;
        }
    </style>
</head>

<body>
    <div class="box2">
        <!-- 按钮固定宽度 input占据剩余 -->
        <input class="ip2" type="text">
        <button class="btn2">搜索</button>
    </div>

</body>

</html>

核心属性小结

案例：5个点的骰子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 150px;
            height: 150px;
            display: flex;
            border: 1px solid black;
            border-radius: 25px;
            padding: 50px;
            justify-content: space-between;
        }

        .item {
            background-color: red;
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }

        .col {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .col2 {
            justify-content: center;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="col col1">
            <div class="item"></div>
            <div class="item"></div>
        </div>

        <div class="col col2">
            <div class="item"></div>
        </div>

        <div class="col col3">
            <div class="item"></div>
            <div class="item"></div>
        </div>

    </div>
</body>

</html>

45网格布局

5 常用样式

盒子样式

浮动样式

文字样式

常用样式

// 字体颜色
color: red;

// 字体大小
font-size: 20px;

// 行高（行高与盒子高度一致时 单行文本垂直居中）
line-height: 100px;

// 文字样式为斜体
font-style: italic;

// 文字加粗（取值可是100~900、bold加粗、bolder更粗）
font-weight: bold;

// 文字装饰 常用的有underline下划线、line-through中划线、none无装饰
text-decoration: none;

// 首字符缩进
text-indent: 10px;

定义字体

• 定义字体

@font-face {
    // 美术提前准备好的字体文件
    src: url("../fonts/MFShangHei-Regular.woff");

    // 给该字体文件命名
    font-family: yourDaddy;
}

• 使用字体

.xxx {
    // 使用预定义的字体
    font-family: yourDaddy;
}

定位样式

特殊效果

弹性盒样式

6 响应式布局

61尺寸单位

62媒体查询

63弹性盒

7 工具链

71图标字体

注册iconfont账号

阿里巴巴矢量图标库，注册账号；

创建项目

导航栏选择资源管理-我的项目，点击加号图标新建项目，填写项目名称，搞定；

添加图标到项目

• 搜索图标并加入购物车

• 将购物车中的图标加入到指定项目

下载项目图标库

• 来到资源管理-我的项目，点击下载到本地

• 压缩包下载并解压后，内容如下：

• 使用图标

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 引入资源包中的css文件 -->
    <link rel="stylesheet" href="../fonts/iconfont.css">

    <!-- 使用在线链接 -->
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3944330_grdwn103ere.css">

    <!-- 自定义图标字体的文本样式 -->
    <style>
        span#micon {
            font-size: 100px;
            color: aquamarine;
        }
    </style>
</head>

<body>

    <!-- 按图标名称使用图标 -->
    <span class="iconfont icon-jiudian" id="micon"></span>
</body>

</html>

使用在线图标库

• 点击生成在线链接

• 确认后生成在线链接如下

• 拷贝到工程中使用即可

<!-- 引入资源包中的css文件 -->
<!-- <link rel="stylesheet" href="../fonts/iconfont.css"> -->

<!-- 使用在线链接 -->
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_3944330_grdwn103ere.css">

• 像使用普通字体一样设置图标字体的样式，完成效果如下：

72CSS预处理/Sass

什么是CSS预处理

• 浏览器的样式文件只认CSS
• CSS的语法太蛋疼，选择器写法太长太复杂，导致阅读维护狠困难
• 我们希望CSS的结构恰如HTML的结构，一一对应，好阅读+好维护；
• 因此就有技术公司推出了CSS的预处理技术，使得样式可以写的像HTML一样有层次，并且经过特殊编译处理后，依然还原为浏览器能直接识别的CSS；
• CSS预处理技术的佼佼者有Sass/Less/Stylus等，其中尤以Sass为最强大；
• 层次性地写样式只是Sass的冰山之一角而已，但已经让我们很爽了，接下来Sass的安装和使用；

安装Sass

• 去到NodeJS官网 下载NodeJS的最新LTS版本并一路傻瓜式安装（路径不要有中文）；
• 安装完成后，打开终端输入node -v 以及 npm -v, 如果正确输出版本号即为安装成功；

安装Sass

• win+x，选择打开管理员终端：

npm i -g sass

给与NodeJS执行权限

• 依然在管理员终端中执行(如果跳出一堆选项让你选，就按Y)：

Set-ExecutionPolicy RemoteSigned

PS: 终端命令没有爆红就是成功！

创建页面和样式

demo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <!-- 注意这里引入的是CSS文件 而非SCSS文件 -->
    <link rel="stylesheet" href="./demo.css">
</head>
<body>
    <div class="yeye">
        我是爷爷
        <div class="baba">
            我是爸爸
            <ul class="son">
                我是儿子
                <li class="sunzi">强哥</li>
                <li class="sunzi">大嫂</li>
                <li class="sunzi">泰叔</li>
                <li class="sunzi">老墨</li>
            </ul>
        </div>
    </div>
</body>
</html>

编译SCSS为CSS

• 打开终端定位到SCSS文件所在的文件夹
• 执行SCSS到CSS的实时编译（一边书写SCSS一边实时地编译为CSS）

# sass编译 当前目录下的demo.scss文件 为当前目录下的demo.css文件 开启实时监听和编译
sass ./demo.scss ./demo.css --watch

demo.scss

li {
    list-style: none;
}

/* 可以完全按照CSS的语法写SCSS */
// .yeye {
//     font-size: 100px;
// }

// .yeye>.baba {
//     font-size: 80px;
// }

// .yeye>.baba>.son {
//     font-size: 60px;
// }

// .yeye>.baba>.son>.sunzi {
//     font-size: 40px;
// }

/* 当然我们更期望层次性地编辑样式 */
.yeye {
    font-size: 100px;
    color: red;

    /* 子代选择器 .yeye>.baba */
    // &>.baba {
    >.baba {
        font-size: 80px;

        /* 后代选择器 等同 .baba .son */
        .son {
            font-size: 60px;

            // &>.sunzi {
            >.sunzi {
                font-size: 40px;
                color: blue;
            }
        }
    }
}

8 H5/C3新特性

81H5新标签

82CSS3新特性

盒子阴影

<div></div>

{
    width:300px;
    height:100px;
    background-color:yellow;
    
    /* 
    box-shadow: 
    h-shadow 必选，阴影的水平偏移
    v-shadow 必选，阴影的垂直偏移
    blur 边缘模糊的范围
    spread 阴影尺寸
    color 阴影颜色
    inset 是否为内嵌阴影
    */
    box-shadow: 10px 10px 10px 0px rgba(0,0,0,0.5);
}

浏览器兼容性

9 在线资源

HTML速查

• W3CSchool-HTML

CSS速查

• W3CSchool-CSS

新手教程

• 菜鸟手册
• 极简布局手册

10 坑与面试题

布局常见的坑

高频面试题

宽高居中你造几种方式？

CSS画三角形

怎么做响应式布局

撸个三列布局

撸个圣杯布局

---