HTML+CSS文档

大卡拉米

已于 2023-11-24 11:45:29 修改

阅读量1.1k

点赞数 19

文章标签： html css 前端

于 2023-11-24 11:34:09 首次发布

本文链接：https://blog.csdn.net/zsy1833579605/article/details/134592456

版权

HTML

环境搭建

编辑器

vsCode

webStorm

Hbuilder

Sublime

浏览器

Chrome

Firefox

图像处理

网页及浏览器

01. 网站和网页

网页是构成网站的基本元素，是承载各种网站应用的平台。
通俗地说，网站就是由网页组成的，如果只有域名和虚拟主机而没有制作任何网页的话，客户仍旧无法访问网站。
网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一“页”，是超文本标记语言格式（标准通用标记语言的一个应用，文件扩展名为.html或.htm）。网页通常用图像档来提供图画。网页要通过网页浏览器来阅读。

02. 常见浏览器

浏览器是网页运行的平台，常见的浏览器有 IE 、Edge、火狐（Firefox）,谷歌（Chrome）,Safari和Opera等

IE IE是Trident内核,之前国内很多双核浏览器其中之一便是Trident,美其名曰“兼容模式”,IE浏览器于2022年6月16日正式退役，此后其功能将由Edge浏览器接棒
Firefox(火狐) Gecko内核，Gecko的特点是代码完全公开，因此开发程度很高，全世界的程序员都可以为其编写代码，增加功能，这几年使用率降低，原因是打开速度慢，升级频繁等
Safari 采用的是大名鼎鼎的WebKit。现在很多人错误的把webkit叫做chrome（即使chrome内核已经是blink，之前采用的是webkit内核）
chrome(谷歌) Blink内核,内置于Chrome浏览器之中，Blink其实是Webkit的分支，大部分国产浏览器最新版用Blink内核
Opera Presto内核(已经废弃)是挪威产浏览器opera的“前任”内核，因为最新的opera浏览器早已抛弃投入到谷歌的怀抱了，采用Blink。
移动端
- 移动端的浏览器内核主要说的是系统内置的浏览器内核。
- Android手机而言，使用率最高的就是Blink内核，大部分国产浏览器宣称的自己的内核，基本上也是属于Blink二次开发。
- IOS手机，由于系统原因，系统大部分自带浏览器内核，一般也是Safari内核webkit。

03.pc端浏览器市场占有率

Google的Chrome浏览器排名第一，市场占比份额：66.49%
微软的Edge浏览器排名第二，市场占比份额：10.55%
safari浏览器排名第三，市场占比份额：9.27%
火狐浏览器排名第四，市场占比份额：7.61%
欧朋浏览器排名第五，市场占比份额：3.04%
其他浏览器(360安全浏览器,QQ浏览器,360极速浏览器,2345加速浏览器 ,世界之窗浏览器,猎豹浏览器,星愿浏览器,傲游浏览器)的,市场占比份额：3.05%

web基础概念

01. 万维网

www其实是World Wide Web 的缩写，它是一个由许多互相链接的超文本组成的系统，通过互联网访问。在汉语中，www 被翻译成“万维网” 。他是互联网的一部分
www由两部分构成：www客户端和www服务端。www客户端指的是个人设备（电脑、手机等）装的浏览器。www服务端指的是服务器（一台可以放许多文档的电脑）的程序。www经常被简称作web,所以www客户端、www服务端又叫web客户端、web服务端
让WEB客户端访问web服务端，从而获得网页。
使用http协议传送数据，通过互联网通信。

02. HTTP协议简要工作流程

HTTP，又被称为超文本传输协议（http，hypertext transfer protocol)是互联网上应用最为广泛的一种网络协议。所有的WWW文件都必须遵守这个标准。设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法。
浏览网页时在浏览器地址栏中输入的URL前面都是以"http://"开始的。HTTP定义了信息如何被格式化、如何被传输，以及在各种命令下服务器和浏览器所采取的响应。
工作流程：（1）建立连接：web客户端发送建立连接的请求，web服务端作出响应。（2）发送请求：web客户端发送请求内容。（3）作出应答：web服务端回复html文件。（4）关闭连接：web客户端收到文件就关闭连接。

03. 域名

域名（英语：Domain Name），简称域名、网域，是由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位（有时也指地理位置）。
网域名称系统（DNS，Domain Name System，将域名和IP地址相互映射的一个分布式数据库）是因特网的一项核心服务，它作为可以将域名和IP地址相互映射的一个分布式数据库，能够使人更方便地访问互联网，而不用去记住能够被机器直接读取的IP地址数串。
有一个域名www.wikipedia.org，和IP地址208.80.152.2相对应。DNS就像是一个自动的电话号码簿，我们可以直接拨打wikipedia的名字来代替电话号码（IP地址）。我们直接调用网站的名字以后，DNS就会将便于人类使用的名字（如www.wikipedia.org）转化成便于机器识别的IP地址（如208.80.152.2）。

04.W3C

W3C一般指万维网联盟
万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止，W3C已发布了200多项影响深远的Web技术标准及实施指南，如广为业界采用的超文本标记语言HTML（标准通用标记语言下的一个应用）、可扩展标记语言XML（标准通用标记语言下的一个子集）以及帮助残障人士有效获得Web信息的无障碍指南（WCAG）等，有效促进了Web技术的互相兼容，对互联网技术的发展和应用起到了基础性和根本性的支撑作用

05.网页的组成

Web标准是由W3C和其他标准化组织制定的一系列标准的集合。主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。

结构标准：结构用于对网页元素进行整理和分类，主要是HTML。(决定你是否有个好天然身体)
样式标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。(决定你是否打扮的美丽外观)
行为标准：行为是指网页模型的定义及交互的编写，主要包括DOM和ECMAScript两个部分(决定你是否有吸引人的行为)
理想状态我们的源码： .html .css .js

HTML 入门

01.html的历史

1982年，Tim Berners-Lee 建立 HTML

1993年6月，HTML 由 IETF 工作小組发布草案

1994年10月，W3C 成立，网络应用发展的标准规范交由 W3C 协会制定及推广

1995年11月，HTML 2.0，2000年6月被宣布已经过时

1996年1月，HTML 3.2 由 W3C 推荐为标准规范

1997年11月，HTML 4.0

1999年12月，HTML 4.01 以 XML 语法重新构建，较为严格，W3C推荐标准

2000年1月，XHTML 1.0，W3C推荐标准

2001年5月，XHTML 1.1，W3C推荐标准

2004年，WHATWG小组成立，由各大浏览器开发商组成，重拾HTML 4规格，开发 HTML 5规格

2006年，W3C认输，承认 XHTML 2.0不会成功

2007年，W3C重新成立 HTML工作小组，参考 WHATWG 的规格发展期HTML规格

2009年，XHTML 2.0被放弃，全面投入 HTML 5 规格的发展

2011年6月，Google宣布全面采用 HTML 5 技术

2012年， HTML 5被选为候选标准

2014年10月28日，HTML 5.0，W3C正式发布HTML 5.0推荐标准

02.html概念

HTML是超文本标记语言（Hypertext Markup Language）
超文本指用超链接的方法，将各种不同空间的文字信息组织在一起的文本，也指页面内可以包含图片、链接，甚至音乐、程序等非文字元素
标记语言是一种将文本以及文本相关的其他信息结合起来，展现出关于文档结构的电脑文字编码
超文本标记语言就是描述文本、图形和包含其他信息的文件组织和链接在一起的方式的一种语言。

03.我的第一个html

在桌面新建一个txt文件

输入内容

<html>
    <head>
        <title>01.我的第一个网页</title>
    </head>
    <body>
        今天天气真的好！！！！
    </body>
</html>

更改后缀名为 html
用浏览器打开
书写第一个网页成功

04.什么是标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <body> 和 </body>，标签中的第一个标签是开始标签，第二个标签是结束标签（闭合标签）
也有单标签，比如<br>、<input type=’text’ value=’’>等
浏览器不会显示HTML标签，而是使用标签来解释页面的内容

05.注释

<!DOCTYPE html>
<!--
    html注释就是html中 对某一块内容的解释，但是不会被浏览器编译
    注释的快捷键  ctrl+/  或者 ctrl+shift+/
    如果多行注释，可以全部选中然后按快捷键ctrl+shift+/
-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

06.html结构及具体作用

<!DOcTyPE html>
<!--
    DOCTYPE（document type）： 文档类型
    1.版本声明。
    2.给浏览器声明，告诉浏览器应该按照html5的规范来解析当前的文档。
    3.如果不书写，那么按照什么规范解析，就看浏览器心情
    4.必须定义在 HTML 文档的第一行，在 HTML 标签之前
    5.<!DOCTYPE html> 不是html标签，他只是一条浏览器的指令，在所有版本中，这条指令对大小写都不敏感
-->
<html lang="en">
<!--
    1.HTML 标记标签通常被称为 HTML 标签 (HTML tag)
    2.这个标签告诉浏览器这个是HTML 文档的开始，最后一个标签是</html>，这个标签告诉浏览器这个是终止。
    3.html标签是网页结构的最外层 里边包含两个标签  body 和 head 
    4.lang是语言  en是英语  告诉浏览器本网页是英文网页  ch是中文
    5.lang是html的属性   en是lang属性的值
-->
<head>
    <!--
        1.head代表网页的头部，不会显示网页中
        2.只要包含网页的元信息，标题，引入外部文件等等
    -->
    <meta charset="UTF-8">
    <!--
        meta标签是控制网页的元信息
        元信息就是信息的信息（关于当前网页的信息）
        charset代表字符编码，utf-8是万国码
        补充：
            gb2312 简单中文  包括6763个汉字
            BIG5   繁体中文 港澳台等用
            GBK包含全部中文字符，是GB2312的扩展，加入对繁体字的支持，兼容GB2312

        UTF-8则包含全世界所有国家需要用到的字符，以后我们统统使用UTF-8 字符集, 这样就避免出现字符集不统一而引起乱码的情况了
    -->
    <meta name=“keywords” content=“”>
    <!--设置网页关键字，为搜索引擎提供的关键字列表，各关键词间用英文逗号“,”隔开-->
    <meta name=“description” content=“”>
    <!--设置网页描述,用来告诉搜索引擎你的网站主要内容-->
    <title>html的编码结构</title>
    <!--title是网页的标题,显示在浏览器标签页的标题中-->
</head>
<body>
    <!--在html中，所有我们能够看到的内容全部书写在body中-->
</body>
</html>

07.其他版本声明(已经弃用)

XHTML 1.0 Strict DTD 严格版 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML4.1 Transitional DTD 过渡版本 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

08.HTML标签及标签的分类

html标签又叫做html元素，它分为块级元素和内联元素（也可以叫做行内元素），都是html规范中的概念。
html标签还被分为不可替换元素和替换元素
html还被分为空元素（void）和非空元素

09.html标签的关系

标签的相互关系就分为两种：

嵌套关系

<!--
    div元素是p元素的父元素
    p元素是div元素的子元素
    div元素是span元素的祖宗元素
    span是div的后代与元素
-->
<div>
    <p> 
        <span></span >
    </p>  
</div>

并列关系(兄弟关系)

<!--
    head是body的上一个兄弟元素
    body是head的下一个兄弟元素
-->
<head></head>
<body></body>

如果两个标签之间的关系是嵌套关系，子元素最好缩进一个tab键的身位（为了多个代码统一管理，我们可以设置一个tab代表多少空格元素）。如果是并列关系，最好上下对齐。

HTML块元素

div元素

整体页面布局当中最重要的 HTML 元素
没有任何具体的含义，主要用于网页的布局，通过一个一个的div将页面划分为不同的部分，之后在针对部分进行开发

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--div标签：没有任何具体的含义，主要用于网页的布局，
    通过一个一个的div将页面划分为不同的部分，之后在针对部分进行开发-->
    <!--网页分块要求：先分行 在分列-->

    <!--网页的最外层-->
    <div>
        <!--头部区域-->
        <div>
            我是头部
        </div>

        <!--导航区域-->
        <div>
            我是导航
        </div>

        <!--主要内容区域-->
        <div>
            <!--主要内容上部分-->
            <div>
                上部分
            </div>
            <!--主要内容下部分-->
            <div>
                <!--内容左-->
                <div>内容左</div>
                <!--内容右-->
                <div>内容右</div>
            </div>
        </div>

        <!--底部区域-->
        <div>
            底部区域
        </div>
    </div>
</body>
</html>

h1~h6元素

h1～h6 标签分别表示不同级别的标题，<h1>定义最大的标题，<h6>定义最小的标题。
在浏览器默认状态下，每种标题均为加粗效果，各自对应不同的文字大小

1、不要因为标题的字号大小很小，而使用低级别的标题,字号大小可以通过css的font-size来控制

2、尽量避免跳过某一级标题，依次使用

3、需要避免在同一个网页中多次使用h1元素，h1经常用在网页的标题或者是logo上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题标签</title>
</head>
<body>
<div>
   <!-- ctrl+d 复制整个一行-->
    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>
    <!--标题样式 字号大小：由大到小  默认加粗状态
    默认上下有一定的间隙-->
</div>
</body>
</html>

段落元素和换行元素

内容讲解：

p 标签用于定义一个段落 <p>XXXX</p>
<br>标签表示换行，为单标签，通常出现在 p 标签中
每个 p标签表示一个段落，而使用 br 标签换行，通常被称为软换行，段落的文本从一个新行开始，但是这些文本依旧是一个段落
br不要来增加文本之间的间隙我们可以使用css的margin来代替
br标签是一个单标签也是一个空元素,早期版本 <br /> ,但是在h5中，已经把 / 给省略了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--meta标签是一个空标签  单标签-->
    <title>p标签</title>
</head>
<body>
    <div>
        <h2>html5XXXXXXXXXX</h2>
        <p>
            html5是html语言的第五次重大修改。。。。 html5 <br>是html语言的第五次重大修改。。。。 html5是html语言的第五次重大修改。。。。 html5是html语言的第五次重大修改。。。。 html5是html语言的第五次重大修改。。。。 html5是html语言的第五次
            <br>重大修改。。。。 html5是html语言的第五次重大修改。。。。 html5是html语言的第五次重大修改。。。。 html5是html语言的第五次重大修改。。。。 html5是html语言的第五次重大修改。。。。 html5是html语言的第五次重大修改。。。。 html5
            <br>是html语言的第五次重大修改。。。。 html5是html语言的第五次重大修改。。。。 html5是html语言的第五次重大修改。。。。 html5是html语 <br>言的第五次重大修改。。。。 html5是html语言的第五次重大修改。。。。 html5是html语言的第五次重大修改。。。。 html5是html语言的第五次重大修改。。。。 html5是html语言的第五次重大修改。。。。 html5是html语言的第五次重大修改。。。。 html5是html语言的第五次重大修改。。。。 html5是html语言的第五次重大修改。。。。
        </p>

        <p>html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀</p>

    </div>
</body>
</html>

小练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>气象新闻练习</title>
</head>
<body>
    <div>
        <h1>40.6摄氏度： 上海创出140年气象史上高温新纪录</h1>
        <p>2013年07月27日</p>

        <!--hr标签代表一个横线-->
        <hr>

        <div>
            style属性是给某个标签添加样式，本案例为添加一个背景颜色（后期课程学习）
            <p style="background-color: #fffbb5;">新华网上海７月２６日电（记者李荣）２６日１３时３６分至４７分这一时间段，上海徐家汇气象观测站测得当日最高温达４０．６摄氏度。这是上海有气象记录以来１４０年的高温新纪录，打破了此前１９３４年创下的４０．２摄氏度的历史极值。</p>
            <p style="background-color: #655280;">上海已经连续２天发出了最高等级的红色高温警报。上海中心气象台首席服务官满莉萍说，今年副热带高压强度特别强，对上海及江南地区的控制“实在太稳定了”，整个７月份基本上都处在它的势力范围之内。２５日上海已出现了气象史上７月份“第四高”的高温值，这使得２６日的“基础”气温就很高，超过了３０摄氏度，然后不断地升温。此外，２６日白天风小，又吹的是西南风，特别是在中午之后这一个最易出现高温的时段，光照又比较强，所以气温“直线飙升”，一举冲破历史极值，出现了“创纪录”的极端酷暑天。</p>
            <p style="background-color: #ff6da2;">在上海历史上，出现４０摄氏度以上极端高温的几率并不大。根据相关资料，中心城区徐家汇观测站１４０年来仅出现了５次记录，除了这一次的新纪录，还有就是１９３４年７月１２日的４０．２摄氏度；１９３４年８月２５日、２００９年７月２０日、２０１０年８月１３日的４０摄氏度。</p>
            <p style="background-color: #5df2ff;">由于气温实在太高，上 海２ ６日下午不少地区出现了热对流天气。气象台说，首先是浦东地区，下起了热雷雨。到１５时０５分，全市大部分地区出现了分散性的雷电活动和热雷雨，中心城区徐家汇等地都响起了隆隆的雷声。</p>
        </div>
    </div>
</body>
</html>

有序列表和无序列表

无序列表
- ul 表示无序列表，表示出是带有项目符号列表
- ul元素前边的符号可以是任何的形式 ,我们可以通过css的list-style-type属性控制
- 没有规定ul和li嵌套的深度
有序列表
- ol 表示有序列表，显示出是带有编号的列表
- ol元素前边的编号可以是任何的形式我们可以通过css的list-style-type属性控制
- 没有规定ul和li嵌套的深度
无论是 ul 还是 ol ，列表中每个具体的列表项都使用的是 li 标签
使用规范：
- ul li 、 ol li 是组合标签
- ol或ul的子元素必须只能是li，li的父元素只能是ol或ul。根据规范，不建议在ul和li嵌套的中间书写其他元素
- li中可以嵌套任何元素

案例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ol标签和ul标签</title>
</head>
<body>
<div>
    <div style="background-color: red;font-size: 30px;">
        <h2>尚硅谷校区时间排名</h2>
        <ol>
            <li>北京校区</li>
            <li>深圳校区</li>
            <li>上海校区</li>
            <li>武汉校区</li>
            <li>郑州校区</li>
        </ol>
    </div>


    <div>
        <h2>你喜欢吃的东西有哪些</h2>
        <ul>
            <li>上海红烧肉</li>
            <li>北京卤煮</li>
            <li>北京豆汁</li>
            <li>柳州螺蛳粉</li>
        </ul>
    </div>
</div>
</body>
</html>

ul和ol的其他用法

ul和ol也可以用于重复结构的大块内容布局。

练习及代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ul和ol的用法</title>
</head>
<body>
    <!--
        ul、ol和li的使用规范：
        1、ul li   ol li  是组合标签
        2、ol或ul的子元素 必须只能是li
        3、li的父元素只能是ol或ul
        4、根据规范，不建议在ul和li嵌套的中间 书写其他元素
        5、li中可以嵌套任何元素
    -->
    <div>
        <h1>前端工程师招聘列表</h1>
        <ul>
            <li>
                <h2>UI前端工程师</h2>
                <p>
                    <span>20K-30K</span>
                    <span>深圳-南山区</span>
                </p>
                <p>求贤若渴</p>
            </li>
            <li>
                <h2>UI前端工程师</h2>
                <p>
                    <span>20K-30K</span>
                    <span>深圳-南山区</span>
                </p>
                <p>求贤若渴</p>
            </li>
            <li>
                <h2>UI前端工程师</h2>
                <p>
                    <span>20K-30K</span>
                    <span>深圳-南山区</span>
                </p>
                <p>求贤若渴</p>
            </li>
            <li>
                <h2>UI前端工程师</h2>
                <p>
                    <span>20K-30K</span>
                    <span>深圳-南山区</span>
                </p>
                <p>求贤若渴</p>
            </li>
            <li>
                <h2>UI前端工程师</h2>
                <p>
                    <span>20K-30K</span>
                    <span>深圳-南山区</span>
                </p>
                <p>求贤若渴</p>
            </li>
        </ul>
    </div>
</body>
</html>

自定义列表

定义列表包括 dl 、dt 、dd 三种标签
自定义列表是包含术语和对术语描述的列表，通常用来展示词汇表或者是对内容的解释
其中 dl 标签表示定义列表，dt标签表示定义列表的标题，dd 标签定义了列表的内容
dl dt dd是组合标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定义列表dl</title>
</head>
<body>
    <div>
        <dl>
            <dt>html5</dt>
            <dd>html5是在2014年10月29日宣布完成</dd>
        </dl>
    </div>
</body>
</html>

自定义列表的用法

单条解析和描述

<dl>
    <dt>html5</dt>
    <dd>html5是在2014年10月29日宣布完成</dd>
</dl>

多条术语的描述

<dl>
    <dt>html5</dt>
    <dt>css3</dt>
    <dt>js</dt>
    <dd>
        他们仨结合起来就是传说中的网页三剑客
    </dd>
</dl>

对一个术语进行多次描述

<dl>
    <dt>html5</dt>
    <dd>html是真的好啊</dd>
    <dd>学了html5  每天天气真的好</dd>
</dl>

在一个dl中可以有多个术语-解析这样的格式（类似键值对）

<dl>
    <dt>html5</dt>
    <dd>html5 好啊</dd>

    <dt>css3</dt>
    <dd>css3 真好啊</dd>

    <dt>js</dt>
    <dd>js 真的很简单</dd>
</dl>

hr元素

基本使用

h5规范：语义表示段落之间的主题转换，并不仅仅用在表现层上
旧版本中：他仅仅就是一个横线只是表现层没有什么语义
横线默认和父级一样宽
其实hr标签的表现是一个高度为0 宽度和父级一样宽的元素拥有上下左右各1像素的边框，所以默认hr的线高度是2px
我们可以通过css来控制hr的样式

一条线的其他做法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一条线</title>
</head>
<body>
    <!--第一种：空标签-->
    <div style="height: 1px;background-color: red;"></div>

    <!--第二种：边框-->
    <div style="border-bottom: 1px solid pink;margin-top: 100px;"></div>
</body>
</html>

块标签的特性

独占一行，换行显示
可以设置宽高
可以容纳行内元素和其他块元素(p标签、h标签都只能嵌套行元素或行内块元素)

HTML行元素

span元素

没有任何特殊的含义
主要是为了增加额外的结构，方便我们控制样式或者是数据
并且使用要求：在其他语义化标签不适用的情况下再使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>span</title>
</head>
<body>
    <div>
        <h1>夏威夷三日游</h1>
        <!-- 增加了额外的结构 -->
        <p>价格<span style="color:red;">382</span>元</p>
    </div>
</body>
</html>

b、i、u元素

b标签呈现加粗状态
i标签呈现倾斜状态
u标签呈现下划线状态

这三个标签是吸引读者到需要注意的内容上
这些仅仅是添加了一些样式而已，只是表现层
尽管如此，我们也不必为了加粗倾斜等元素而去使用b i u等标签，替代的方法是使用css
在目前使用最多的是i标签-通常在开发过程中，小图标之类的元素我们习惯用i标签来表示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>b i u</title>
</head>
<body>
    
    <div>
        <b>我是小b</b>
        <i>我是小i</i>
        <u>我是小u</u>
    </div>
</body>
</html>

em、strong、var元素

em标签-强调作用：标出用户着重需要阅读的内容，但是主要也给SEO（搜索引擎优化）强调，呈现的是倾斜的状态
strong-强调（更强的强调）作用：表示文本十分重要，主要也给SEO（搜索引擎优化）强调，呈现的是一个加粗
em对某一个关键词强调
strong代表更强:比如对某一句话直接强调
var标签并没有起到强调或提示用户注意的作用。默认倾斜。var的语义是包含变量的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>em strong var</title>
</head>
<body>
<div>
    <!--em对某一个关键词强调-->
    <span>我<em>喜欢</em>男的！！！</span>
    <span>我喜欢<em>男的</em>！！！</span>

    <!--strong代表更强:比如 对某一句话直接强调-->
    <strong>警告:你们老师喜欢男的!!!</strong>

    <!--var标签 -->
    <p>小明有<var>x</var>个苹果，一天吃一个，一天吃完，请问<var>x</var>等于几</p>
    <p><var>x</var>+<var>y</var>=12</p>
</div>
</body>
</html>

a标签

01)路径

绝对路径

完整的描述文件位置的路径就是绝对路径，以web站点根目录为参考基础的目录路径。
绝对路径名的指定是从树型目录结构顶部的根目录开始到某个目录或文件的路径，由一系列连续的目录组成，中间用斜线分隔，直到要指定的目录或文件，路径中的最后一个名称即为要指向的目录或文件。
之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的
比如file:///C:/Users/lipeihua/Desktop/code/01.html 就是一个绝对路径
在前端开发中大多数使用相对路径。个别在服务器环境下会使用绝对路径

相对路径

相对路径就是指由这个文件所在的路径引起的跟其它文件（或文件夹）的路径关系。使用相对路径可以为我们带来非常多的便利。

./ ：代表文件所在的目录（可以省略不写）
../ ：代表文件所在的父级目录
../../ ：代表文件所在的父级目录的父级目录
/ ：代表文件所在的根目录,可以理解成项目内部的绝对路径。

相对路径练习：

01.html和outer是同级兄弟关系，02.html和inner是同级兄弟关系，03.html和content是同级兄弟关系

<!-- 01.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>01.html</h1>
    <a href="./outer/02.html">02</a>
    <a href="./outer/inner/03.html">03</a>
</body>
</html>

<!-- 02.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>02</h1>
    <a href="../01.html">01</a>
    <a href="./inner/03.html">03</a>
</body>
</html>

<!-- 03.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>03</h1>
    <a href="../../01.html">01</a>
    <a href="../02.html">02</a>
</body>
</html>

网络路径

如果需要链接网络上的资源的时候，可以使用网络路径 http://www.baidu.com

02).a标签的基础用法

a标签用来做跳转
a标签就是超链接：可以创建通向其他网页文件同一个页面的位置邮件地址或者其他url链接链接电话链接短信
a标签的href属性，用来写地址:如果是网络地址需要写全http://或者https://协议。如果写本地地址，使用相对路径即可
title属性：是鼠标悬浮在a链接上的时候，对当前链接的提示信息，弹窗显示
target属性：_self:在当前标签页跳转; _blank:在新的标签页打开跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a标签</title>
</head>
<body>
    <div>

        <a href="http://www.baidu.com" title="" >百度一百下你也不知道</a>

        <a href="###" title="尚硅谷前端就业连续9期百分百就业 666666">尚硅谷大数据就业连续9期...</a>

        <a href="http://www.baidu.com" target="_blank">百度一百下你也不知道</a>
    </div>
</body>
</html>

03).a标签的锚链接

锚链接的两种效果：

在当前页面中跳转.：通过元素的ID进行跳转 <a href="#name"></a>
在a标签的href中书写 #+名字(自由命名，注意规范)
在相对应的跳转点标签书写id属性值为锚链接中的名字,这样点击锚链接就能跳转到相对应的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a标签的锚链接</title>
</head>
<body>
<div>
    <!--position: fixed;相对浏览器窗口定位 无论滚动条是否滚动，此元素位置不改变
    right是距离浏览器窗口右边为0
    top是距离浏览器窗口顶部为100px-->
    <div style="position: fixed;right: 0;top: 100px;">
        <p><a href="#news">新闻</a></p>
        <p><a href="#yule">娱乐</a></p>
        <p><a href="#smile">搞笑</a></p>
        <p><a href="#tiyu">体育</a></p>
        <p><a href="#my">我的</a></p>
    </div>
    <ul>
        <li style="height: 600px;background-color: red;" id="news">新闻</li>
        <li style="height: 600px;background-color: #ffca71;" id="yule">娱乐</li>
        <li style="height: 600px;background-color: #6559ff;" id="smile">搞笑</li>
        <li style="height: 600px;background-color: #beffbd;" id="tiyu">体育</li>
        <li style="height: 600px;background-color: #d0ffb9;" id="my">我的</li>
    </ul>
</div>
</body>
</html>

04).网页中的返回顶部效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>回到顶部</title>
</head>
<body>
<div>
    <div class="con" style='height: 1000px;background-color: red;'>我很高，生成滚动条了</div>
    <a href="#">点击我回到顶部</a>
</div>
</body>
</html>

04).a标签的其他功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a标签的其他功能</title>
</head>
<body>
<!--a标签下载：
    1.当连接的文件能够使用浏览器打开，那么可以进行打开，否则将直接下载
    2.也可以给a标签一个download属性 书写下载文件的路径，那么可以直接下载
    3.a标签必须书写href属性，哪怕为空都可以执行download下载，否则a标签不具有任何功能
 -->
<a href="" download="../images/01.png">点击下载图片</a>
<a href="../note/9.10_html02.pptx">点击下载图片</a>

<!--a标签对电话短信email的支持 主要针对移动端
    1.a标签的打电话是在href属性中书写   tel:电话号码  这样的格式
    2.a标签的发短信是在href属性中书写   sms:电话号码  这样的格式
    3.a标签的发送邮件是在href属性中书写 mailto:邮箱地址 这样的格式
-->
<a href="tel:15701665563">给李沛华打电话</a>
<a href="sms:15701665563">给李沛华发短信</a>
<a href="mailto:lipeihua@atguigu.com">给李沛华发邮件</a>
</body>
</html>

img标签

向网页中嵌入一张图像
src 属性用于设置图像路径（本地相对路径或网络路径）
alt 属性是用于设置图像的替代文本，当网速慢等因素造成图片加载失败替代原图片显示的文字
title 属性是用于鼠标放在图片上显示出来的对图片的解释
width属性和height属性可以设置图片的宽和高
img是可替换元素所有的可替换标签都是可以设置宽高的（我们可以称之为行内块标签）

行内元素的属性

在一行中如有剩余空间，允许同其他行内/行内块标签公用一行（行内显示）
不可以直接设置宽高（宽高无效）,默认的宽高由内容决定
行标签只能嵌套行标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行标签属性</title>
</head>
<body>
    <div>
        <!-- 宽度无效 -->
        <span style="width: 20000000px;height: 100px;background-color: red;">span111</span>
        <b>b111</b>
        <i> i1111</i>
        <var>var111</var>
    </div>
</body>
</html>

表单元素

form元素

为用户创建html表单
表单可以向服务器发送数据
form标签中可以包含很多表单元素

<form action="http://www.baidu.com" method="get">

action属性：
- 表单提交的地址
method属性：
表单提交的方式数据传输的方式
- 常见的两种方式是 get和post
  
  get是从服务器上获取数据，post是向服务器传送数据。
  
  在做数据查询时，建议用Get方式；而在做数据添加、修改或删除时，建议用Post方式

表单的提交

表单提交需要在表单中书写提交按钮。
提交按钮可以是 <button type=submit></button> 或 <input type=submit value='' >
提交按钮只会提交当前按钮所在的form表单中的内容如果没有form标签，表单提交失效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form标签</title>
</head>
<body>
    <form action="http://www.baidu.com" method="get">
        <!--表单元素-->

        <!--input标签的type类型是submit代表提交  value是按钮显示的内容-->
        <!-- 本次提交为空 -->
        <input type="submit" value="提交">
    </form>
</body>
</html>

html表单的类型

input：type类型的值不一样，呈现的状态也是不一样的

text：单行文本输入框（文本域）没有长度和内容限制，只能输入一行，明文显示表单提交都是以键值对的形式提交的比如 user = lipeihua

name属性就是给表单起一个名字（自己命名，一般是后台提供） value属性就是表单的值，可以预定义也可以等待用户输入 name和value就构成了一个键值对如果构不成一个键值对，就不会进行提交
password：密码输入框默认把输入的内容呈现出小黑点
radio：单选框书写name属性后，可以在同name属性的单选框中进行单选应该书写value值，是向后台提供的数据在单选框前后写的内容，和input没有任何关系，只不过让用户视觉上觉得有关联
checkbox：多选框其他同单选框
file: 上传文件按钮
hidden：提交隐藏内容在表单提交过程中有的数据需要提交，但是不需要用户输入或者是修改，那么直接使用隐藏域提交

button: 单纯的按钮，没有任何作用和功能，只是长了按钮的样子如果需要添加功能，可以使用js value值是按钮中的文字

reset: 重置按钮当重置按钮被点击，就会重置当前reset所在的表单，变成默认的状态
submit：提交按钮 input标签的type类型是submit代表提交 value是按钮显示的内容提交按钮只会提交当前按钮所在的form表单中的内容如果没有form标签，表单提交失效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form标签</title>
</head>
<body>
    <form action="http://www.baidu.com" method="get">
        请输入用户名：
        <input type="text" name="user" value="lipeihua">
        <br>
        
        请输入密码：
        <input type="password" name="pass" value="">
        <br>

        请选择性别：
        男：<input type="radio" name="sex" value="男">
        女：<input type="radio" name="sex" value="女">
        未知：<input type="radio" name="sex" value="未知">
        <br>
        
        选择你最喜欢的语言：
        PHP：<input type="checkbox" name="lang" value="PHP">
        JAVA：<input type="checkbox" name="lang" value="JAVA">
        JS：<input type="checkbox" name="lang" value="JS">
        HTML：<input type="checkbox" name="lang" value="HTML">
        <br>

        请上传你的照片：
        <input type="file" name="photo">
        <br>

        <input type="hidden" name="id" value="00000000001">

        <input type="button" value="点我啊" id="btn">

        <br>

        <input type="reset" value="重置啊">

        
        <input type="submit" value="提交">
    </form>
    <script>
        var oBtn = document.getElementById("btn");
        oBtn.onclick = function () {
            alert("hello world");
        }
    </script>
</body>
</html>

其他表单元素

select&option
- 下拉列表
- option代表列表的每一项
  
  显示出来的值应该放在option标签中
  
  提交的内容是放在option的value属性中
  
  select是列表的外层
  
  表单的name是在select中书写
textarea：
- 多行文本输入框
- 右下角可以放大缩小
- cols和rows用来控制宽和高
  
  cols代表一行有几个字符（一个汉字算两个字符）
  
  rows代表总共几行，超出是要生成滚动条的
  
  但是：我们很少这样控制，主要通过css的width和height控制
  
  textarea没有value属性，输入的值直接就是textarea标签中的内容
button：
- HTML <button> 元素表示一个可点击的按钮，可以用在表单或文档其它需要使用简单标准按钮的地方。默认情况下，HTML按钮的显示样式接近于 user agent 所在的宿主系统平台（用户操作系统）的按钮，但你可以使用 CSS 来改变按钮的样貌。
- type：button的类型。可选值：
  
  submit: 此按钮将表单数据提交给服务器。如果未指定属性，或者属性动态更改为空值或无效值，则此值为默认值。
  
  reset: 此按钮重置所有组件为初始值。
  
  button: 此按钮没有默认行为。它可以有与元素事件相关的客户端脚本，当事件出现时可触发。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>其他表单元素</title>
</head>
<body>
<form action="###" method="get">
    请选择你喜欢的城市
    <select name="city" >
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="深圳">深圳</option>
        <option value="草围">草围</option>
    </select>

    <br>
    
    请说出你对我们的留言：
    <textarea name="message" cols="30" rows="10" ></textarea>

    <button></button>
    <input type="submit" value="提交">
</form>
</body>
</html>

button和input的区别

在 button 元素内部，可以放置文本或图像。这是<button>与使用 input 元素创建的按钮的不同之处。
二者相比较， <button> 控件提供了更为强大的功能和更丰富的内容。
<button>与</button>标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。
例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>button</title>
</head>
<body>
<form action="###" method="get">
    <input type="text" name="user" value="">

    <button type="button">点击我呀</button>
    <button type="button">
        <img src="../images/06.png" alt="">
    </button>
</form>
</body>
</html>

获取焦点和失去焦点

获取焦点

当表单元素变成一个可以输入的状态的时候，被称作为获取焦点
失去焦点

当表单元素失去可以输入状态的时候，被称作为失去焦点

label标签

label元素:为表单元素定义标注（点击标注的信息，可以让表单元素获取焦点）
两种使用方法：
1. label标签包含住标注元素，让label标签的for属性和被标注的表单元素的id属性值相等
2. label标签包住整个标注元素和相对应的表单元素
  
  label不能出现for属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>button</title>
</head>
<body>
<form action="###" method="get">

    <label for="user">请输入用户名：</label>
    <input type="text" name="user" value="" id="user">

    <label>
        男 <input type="radio">
    </label>

    <button type="submit">点击我呀</button>

</form>
</body>
</html>

label标签包含其他表单元素

对select来说只能获取焦点，但是不能把列表下拉出来
可以使textarea获取焦点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>button</title>
</head>
<body>
<form action="###" method="get">

    <label for="city">选择城市</label>
    <select name="city" id="city">
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
    </select>

    <label for="mes">留言</label>
    <textarea name="mes" id="mes" cols="30" rows="10"></textarea>
    

    <button type="submit">点击我呀</button>

</form>
</body>
</html>

表格元素

table元素的基础元素组成

HTML的 table 元素表示表格数据 — 即通过二维数据表表示的信息

一个可选的 <caption> 元素
一个可选的 <thead> 元素
下列任意一个:

零个或多个 <tbody>

零个或多个 <tr>

零个或多个 <th>

零个或多个 <td>

一个可选的 <tfoot> 元素

table的基础使用

table是表格的最外层
caption：HTML <caption> 元素 (or HTML 表格标题元素) 展示一个表格的标题，它常常作为 <table> 的第一个子元素出现，同时显示在表格内容的最前面
tr就是表格的每一行
th表示表头单元格默认居中和加粗
td表示普通单元格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table</title>
</head>
<body>
    <table>
        <caption>1108班就业表</caption>
        <tr>
            <th>姓名</th>
            <th>就业薪资</th>
            <th>备注</th>
        </tr>
        <tr>
            <td>小王</td>
            <td>12</td>
            <td></td>
        </tr>
        <tr>
            <td>老王</td>
            <td>13</td>
            <td></td>
        </tr>
        <tr>
            <td>王中王</td>
            <td>14</td>
            <td></td>
        </tr>
        <tr>
            <td>大王</td>
            <td>15</td>
            <td></td>
        </tr>
    </table>
</body>
</html>

table的常用属性

border：（废弃）

这个整型元素使用像素，定义了表格边框的大小

如果设置为1，表示表格具有1px大小的边框。
cellpadding ：（废弃）

这个属性定义了表格单元的内容和边框之间的空间。如果它是一个像素长度单位，这个像素将被应用到所有的四个侧边
cellspacing ：（废弃）

这个属性（使用百分比或像素）定义了两个单元格之间空间的大小（从水平和垂直方向上）
width ：（废弃）

该属性定义了表格的宽度。宽度可能是一个像素或者是一个百分比值，宽度的百分比值将被定义为表格容器的宽度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table</title>
</head>
<body>
    <table width="400" border="1" style="" cellpadding="10" cellspacing="10">
        <caption>0225班就业表</caption>
        <tr>
            <th>姓名</th>
            <th>就业薪资</th>
            <th>备注</th>
        </tr>
        <tr>
            <td>小王</td>
            <td>12</td>
            <td></td>
        </tr>
        <tr>
            <td>老王</td>
            <td>13</td>
            <td></td>
        </tr>
        <tr>
            <td>王中王</td>
            <td>14</td>
            <td></td>
        </tr>
        <tr>
            <td>大王</td>
            <td>15</td>
            <td></td>
        </tr>
    </table>
</body>
</html>

合并单元格

合并单元格：

colspan:设置跨列，谁合并，给谁设置
rowspan：设置跨行,谁合并，给谁设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table</title>
</head>
<body>
    <table width="400" border="1" style="border-collapse:collapse;" cellpadding="10" cellspacing="0">
        <caption>0225班就业表</caption>
        <tr>
            <th colspan="2">学生就业就业薪资</th>
            <th>备注</th>
        </tr>
        <tr>
            <td>小王</td>
            <td>12</td>
            <td></td>
        </tr>
        <tr>
            <td>老王</td>
            <td rowspan="2">13</td>
            <td></td>
        </tr>
        <tr>
            <td>王中王</td>
            <td></td>
        </tr>
        <tr>
            <td>大王</td>
            <td>15</td>
            <td></td>
        </tr>
    </table>
</body>
</html>

表格的优化

thead　表格的头用来放标题之类的东西
tbody　表格的身体放数据本体
tfoot　表格的脚放表格的脚注之类

为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时， table是作为一个整体解释的，使用tbody可以优化显示。如果表格很长，用tbody分段，可以一部分一部分地显示，不用等整个表格都下载完成

tbody包含行的内容下载完优先显示，不必等待表格结束.另外，还需要注意一个地方。表格行本来是从上向下显示的。但是，应用了thead/tbody/tfoot以后，就“从头到脚”显示，不管你的行代码顺序如何。也就是说如果thead写在了tbody的后面，html显示时，还是以先thead后tbody显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格的优化</title>
</head>
<body>
    <!--
        表格的优化
            thead
            tbody
            tfoot
    -->
    <table>
        <thead>
            <tr>
                <td>
                    1
                </td>
            </tr>
            <tr></tr>
            <tr></tr>
        </thead>
        <tbody>
            <tr>
                <td>2</td>
            </tr>
            <tr></tr>
            <tr></tr>
            <tr></tr>
        </tbody>
        <tbody>
            <tr></tr>
            <tr></tr>
            <tr></tr>
            <tr></tr>
            <tr></tr>
        </tbody>

        <tfoot>
            <tr></tr>
            <tr></tr>
            <tr></tr>
        </tfoot>

    </table>
</body>
</html>

iframe元素

iframe元素概念

HTML内联框架元素 (<iframe>)它能够将另一个HTML页面嵌入到当前页面中。
早期的时候， iframe 在开发中用得很多。使用 iframe 可以很方便的制作一个页面的公共部分，或者广告位等等
现在因为iframe相对来说有很多不方便的地方,已经逐渐很少使用(比如SEO优化,样式的控制等等)

iframe元素使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset=UTF-8>
    <tItle>Title</tItle>
</head>
<body>
    <!--
        iframe标签：
            1、src是嵌入html的地址  可以是网络  也可以是本地服务器
            2、width和height属性来设置内联框架的宽高
     -->
    <div>
        <h1>学习iframe标签</h1>
        <div>
            哈哈哈哈
            <iframe src="http://www.baidu.com" width="300"></iframe>
            <iframe src="./01.html" width="300"></iframe>
        </div>
    </div>

</body>
</html>

html书写规范

标签换行写法

<div>
    <p>
        今天的天
        <span>真的好啊</span>
    </p>
</div>

标签需要关闭

<p>
    <span>哈哈哈哈哈</span>
    <em>呵呵呵呵</em>
</p>

代码缩进使用tab键

tab每次缩进空格数量一样，我们可以设置。也为了方便代码合并 shift+tab是向前缩进

标签的正确嵌套

<ul>
    <li></li>
    <li></li>
</ul>
<dl>
    <dt></dt>
    <dd>

    </dd>
</dl>

合理加注释

a标签不能嵌套a标签

<a href="">
    <a href=""></a>
</a>

特殊符号的实体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>特殊符号的实体</title>
</head>
<body>
    <!--
        使用实体
        在html中，会把一个或多个空格或回车解析成一个空格显示
        在html中 特殊符号，一般不会直接书写，而是使用代表这个符号的实体（编码）

        空格： &nbsp;
        大于：&gt;
        小于：&lt;
        版权：&copy;
        双引号：&quot;
    -->
    <p>今天天&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;气好晴朗</p>
    &gt;&lt;&copy;&quot;

</body>
</html>

基本概念

搜索引擎优化（SearchEngine Optimization，简称SEO），指在了解搜索引擎自然搜索机制的基础之上，对网站进行内部及外部的调整优化，改进网站在搜索引擎中关键字的自然排名，获得更多的展现量，吸引更多目标客户点击访问网站，从而达到互联网营销及品牌建设的目标
SEO可以帮助将网站中的高质量内容更好的呈现给搜索引擎，SEO和搜索引擎，是良性的共生关系

喂养爬虫

让爬虫抓取自己网站更多的网页，往往能够提高网站整体的质量和排名。让爬虫抓的更多，有两个方法：

爬虫通常通过链接来发现更多的网页。通过建立更多链接到自己网站的链接，来留住爬虫，提高网站排名。
提高网站加载速度，让爬虫在一定时间内能够访问更多网页

内链与外链：

内链指的是链接到网站内部的链接，内链能有效的提高排名
外链指的是连接到网站外部的链接，外链能比内链更好的提高排名
外链不可控制，但是内链可以自己建立许多，保证网站内部的页面能够互相连接。
内链的锚文本一定要真实,锚文本填写不真实，最严重会导致搜索引擎视为欺骗，删除所有排名

SEO与SEM：

SEO：搜索引擎优化，通过优化网站质量提高网站在搜索引擎中的排名，是SEM的一种常用方式
SEM：搜索引擎营销，除了免费的SEO，还有PPC等付费模式
关键词指的是在搜索引擎中搜索的词，通常在搜索结果中会被标成红色
排名越靠前，网站被点击量越高，越容易产生收益。第一名的点击量远远比第二名大得多

HTML代码SEO优化：

标签语义化：根据标签的语义合理使用
图片alt一定要合理书写
a标签内部的文本（锚文本）对关键词排名影响非常大
合理利用搜索引擎重视的标签(title，strong，h1-h3，a，em，img&alt）

CSS

CSS 概念

什么是CSS

层叠样式表或级联样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言。
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页样式编辑的能力。
将页面的内容与表现形式相分离。
层叠就是浏览器对多个样式来源进行叠加，最终确定结果的过程。CSS 之所以有“层叠”的概念，是因为有多个样式来源

css历史

从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。
随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。
1994年哈坤·利提出了CSS的最初建议。而当时伯特·波斯（Bert Bos）正在设计一个名为Argo的浏览器，于是他们决定一起设计CSS。
其实当时在互联网界已经有过一些统一样式表语言的建议了，但CSS是第一个含有“层叠”丰意的样式表语言。在CSS中，一个文件的样式可以从其他的样式表中继承。读者在有些地方可以使用他自己更喜欢的样式，在其他地方则继承或“层叠”作者的样式。这种层叠的方式使作者和读者都可以灵活地加入自己的设计，混合每个人的爱好
1995年初，W3C内组织了专门管CSS的工作组
1996年12月，CSS1.0 发布
1998年5月，CSS2.0 发布
2001年5月，CSS3.0 发布

DIV+CSS布局

DIV+CSS是WEB设计标准，它是一种网页的布局方法。
与传统中通过表格（table）布局定位的方式不同，它可以实现网页页面内容与表现相分离。提起DIV+CSS组合，还要从XHTML说起。XHTML是一种在HTML（标准通用标记语言的子集）基础上优化和改进的新语言，目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。
“DIV+CSS”其实是错误的叫法，而标准的叫法应是XHTML+CSS。因为DIV与Table都是XHTML或HTML语言中的一个标记，而CSS只是一种表现形式。也许其提出者本意并没有错，但是跟风者从表现曲解了其意思，认为整个页面就应当是DIV+CSS文件的组合。

浏览器渲染流程

浏览器开始解析目标HTML文件，执行流的顺序为自上而下。
HTML解析器将HTML结构转换为基础的DOM(文档对象模型)，构建DOM树完成后，触发DomContendLoaded事件。
CSS解析器将CSS解析为CSSOM(层叠样式表对象模型)，一棵仅含有样式信息的树。
CSSOM和DOM开始合并构成渲染树（render Tree），每个节点开始包含具体的样式信息。浏览器就是根据render tree来绘制页面的
计算渲染树中个各个节点的位置信息，即布局阶段。
将布局后的渲染树显示到界面上。

css阻塞渲染

根据浏览器的流程，当CSSOM还没构建完成时，页面是不会渲染到浏览器界面的，这也是为什么当CSS下载过慢时，会出现白屏的现象
CSS 被视为阻塞渲染的资源，这意味着浏览器将不会渲染任何已处理的内容，直至 CSSOM 构建完毕。

CSS引入方式

内联式、行内引入：

引入方法

直接在html的标签中书写css。这是一种最为原始也是最容易理解的
样式内容书写在html标签的style属性中，多个css样式可以写在一起，使用分号隔开。<标签名 style="具体样式属性: 属性值;">内容</标签名>
样式书写是样式名:样式值; (注意全部是英文半角符号)

内联式特点：

冗余代码多，代码量大
不利于维护和修改
优先级相对来说较高，个别特殊的效果可以使用，但是不要滥用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联式引入css</title>
</head>
<body>
    <ul>
        <li style="background-color: green;width: 100px;height: 100px;float: left;margin: 10px;color: #fff;text-align: center;line-height: 100px;"></li>
        <li style="background-color: green;width: 100px;height: 100px;float: left;margin: 10px;color: #fff;text-align: center;line-height: 100px;"></li>
        <li style="background-color: green;width: 100px;height: 100px;float: left;margin: 10px;color: #fff;text-align: center;line-height: 100px;"></li>
        <li style="background-color: green;width: 100px;height: 100px;float: left;margin: 10px;color: #fff;text-align: center;line-height: 100px;"></li>
        <li style="background-color: green;width: 100px;height: 100px;float: left;margin: 10px;color: #fff;text-align: center;line-height: 100px;"></li>
        <li style="background-color: green;width: 100px;height: 100px;float: left;margin: 10px;color: #fff;text-align: center;line-height: 100px;"></li>
        <li style="background-color: green;width: 100px;height: 100px;float: left;margin: 10px;color: #fff;text-align: center;line-height: 100px;"></li>
        <li style="background-color: green;width: 100px;height: 100px;float: left;margin: 10px;color: #fff;text-align: center;line-height: 100px;"></li>
        <li style="background-color: green;width: 100px;height: 100px;float: left;margin: 10px;color: #fff;text-align: center;line-height: 100px;"></li>
        <li style="background-color: green;width: 100px;height: 100px;float: left;margin: 10px;color: #fff;text-align: center;line-height: 100px;"></li>
        <li style="background-color: green;width: 100px;height: 100px;float: left;margin: 10px;color: #fff;text-align: center;line-height: 100px;"></li>
        <li style="background-color: green;width: 100px;height: 100px;float: left;margin: 10px;color: #fff;text-align: center;line-height: 100px;"></li>
        <li style="background-color: green;width: 100px;height: 100px;float: left;margin: 10px;color: #fff;text-align: center;line-height: 100px;"></li>
        <li style="background-color: green;width: 100px;height: 100px;float: left;margin: 10px;color: #fff;text-align: center;line-height: 100px;"></li>
    </ul>
</body>
</html>

嵌入式引入头部引入

引入方法

可以把样式书写在style标签中
然后把style标签放在head标签中

使用css选择器选择你要控制的元素，然后书写样式

/*样式书写格式：*/
选择器{
    样式名1:样式值1;
    样式名2:样式值2;
}

引入特点：

统一放置在 style 标签当中，然后通过选择器，将规定样式和对应的标签建立联系，便于维护和修改
CSS 样式修改时并不需要翻阅 HTML 代码，也不需要去针对每个 HTML 标签处理样式，只需要调整style 标签中的样式，就可以针对性修改，页面达到了样式与结构相分离
代码量少
相对整站来说，存在冗余代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>嵌入式引入css</title>

    <style>
        li{
            color:red;
            background-color: yellow;
        }
    </style>
</head>
<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

</body>
</html>

css外部式引入

引入方式

在外部新建一个css文件（后缀是.css），把样式写在外部的css文件中。
当一个页面需要外部css的时候，可以使用link标签把css引入进来,把link标签书写在head标签中 <link rel="stylesheet" type="text/css" href="./index.css">
link标签书写的位置应该和style是一样的
- href:相关联css的路径
- rel：stylesheet link引入的css和当前的文档html进行关联
- type：text/css 引入的格式是text文本，是css文本

外部式引入特点：

将html和css完全分离成两个文件
一个css文件可以控制多个html文件
相对单页有冗余代码
相对来说有服务器压力

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="./index.css">
</head>
<body>
    <div>

    </div>
</body>
</html>

重绘重排

重排和重绘是DOM编程中耗能的主要原因之一：

重排（回流）：当render tree中的一部分或者是全部，因为元素的尺寸、布局、隐藏等等改变引起页面的重新渲染，这个过程称作为重排，完成重排以后，浏览器会重新绘制受影响的部分到屏幕，该过程称为重绘。
重排的情况:
- 添加或者删除可见的DOM元素
- 元素位置改变
- 元素尺寸改变
- 元素内容改变（例如：一个文本被另一个不同尺寸的图片替代）
- 页面渲染初始化（无法避免）
- 浏览器窗口尺寸改变
重绘：当render tree（渲染树）中更新的属性只会影响元素的外观、风格，不会影响元素的布局的时候，浏览器需要重新绘制当前元素的样式，被称作为重绘。
重绘不会引起重排，但重排一定会引起重绘，一个元素的重排通常会带来一系列的反应，甚至触发整个文档的重排和重绘，性能代价是高昂的。

style标签和link标签的书写位置

如果书写到非head标签的位置可能会引起一些问题

不便于维护:后期维护的时候需要花费时间去寻找代码书写位置
会引起页面的回流（重排）和重绘
- 页面从上至下去解析，假设style标签写在body后边，读取这个style之前，整个网页的文档已经渲染的差不多了，发现还有style标签,页面就会重新计算页面的样式然后重新渲染，所以会引起重绘和重排，网页可能出现闪烁，并且加载变慢
- 所以style标签应该书写在head标签中

@import引入

@import是CSS提供引入css文件的一种方式

使用@import方法，在style标签中引入

@import "index.css";
@import url(index.css);
@import url("index.css");

link引入和@import引入的对比

功能范围不同 link属于html标签 @import只是css提供的引入css的功能
加载顺序不同 页面在加载的时候，link引入的css会同时被加载 @import引入的css只有等页面全部下载完成以后才进行加载，所以可能会出现闪烁
兼容性 link所有浏览器都支持 @import低版本ie不支持
使用JS控制样式 JS只能控制link标签 @import是不能够被JS控制的

CSS选择器

什么是选择器

要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。
HTML页面中的元素就是通过CSS选择器进行控制的

id选择器

我们可以给元素设置id属性，然后通过 #+id属性值 的方式来选择这个元素

选择器命名：

id就像我们的身份证号，是不允许重复的
并且一个元素只能有一个id属性
id命名规范建议（类名命名方式也适用）
id或者class必须以字母开头，不能以数字或者下划线开头
名字不出现汉字
不允许带有广告的英文单词出现：如：ad adv adver advertising (防止浏览器当成垃圾广告处理掉过滤掉 )
除第一位后边小写字母、数字、连字符（ _ -）
见名知意
不要出现空格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <style>
        #three{
            background-color: green;
        }
    </style>
</head>
<body>
    <ul>
        <li id="three"></li>
        <li></li>
    </ul>
</body>
</html>

类选择器：

可以给不同的元素，进行分组。

所有类名相等的元素，是一组的，可以进行控制样式
给要被分组的元素设置class属性

选择器中使用 .+ class属性值 来选择元素
类不一定多个元素，也可以是一个元素
一个class可以设置多个类名，但是只能有一个class属性

一个元素的多个class属性的值可以用空格隔开，就代表书写多个类名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <style>
        li{
            background-color: red;
        }
        .show{
            background-color: green;
        }

        .active{
            background-color: yellow;
        }
        .con{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <ul>
        <li class="show"></li>
        <li></li>
        <li class="show"></li>
    </ul>
    <div class="active con"></div>
</body>
</html>

标签名选择器：

通过标签名来选择元素
会选择页面中所有的这个标签的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签名选择器</title>
    <style>
        li{
            background-color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li id="three"></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ol>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
</body>
</html>

通配符（*）

通配符使用星号*表示，意思是“所有的”。
在CSS中，同样使用*代表所有的标签或元素，它叫做通配符选择器。
不过，由于*会匹配所有的元素，这样会影响网页渲染的时间，因此很多人开始停止使用*通配符选择器
```
/*这里就把所有元素的字体设置为红色*/
*{ color : red; }
```

!important 规则

!important，作用是提高指定样式规则的应用优先权（优先级）。
语法格式**{ cssRule !important }**，即写在定义的最后面，例如：box{color:red !important;}。
使该条样式属性声明具有最高优先级
```
div { color: #f00 !important; }
```

基础选择器的优先级

样式来源：

默认样式
继承的
通配符 * 匹配所有元素
标签名选择器
类名选择器
id名选择器
行内书写
!important

多个样式来源的优先级确定

!important > 行内书写 > id > 类 > 标签名 > 通配符 > 继承
!important > 行内书写 > id > 类 > 标签名 > 通配符 > 默认
样式继承不是一个默认行为，实际上而是看某一个属性的默认值是否是inherit。所以不比较继承和默认的优先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>优先级</title>
    <style>
        *{
            margin: 0;
            /*  *>默认样式  */
            color: pink;
        }
        p{
            margin: 10px;
            /*标签名选择器 >  通配符**/

            /*!important书写在某个样式的后边
            这条样式无论写在哪一个选择器中，这条样式永远优先级最大*/
            margin: 100px !important;

            /*color: green;*/
        }

        .con{
            margin: 20px;
            /*类名选择器>标签名选择器*/
        }
        #box{
            margin: 30px;
            /*id选择器>类名选择器*/

            /*行内书写>id选择器*/
        }

        div{
            color: red;
            font-style: normal;
        }
    </style>
</head>
<body>
    <div>
        我是div
        <p id="box" class="con" style="margin: 50px;">我是p标签</p>
        <i>hellow</i>
    </div>
</body>
</html>

css的复杂选择器

后代选择器

后代选择器使用空格间隔开（A B：在A元素中寻找后代（不一定是儿子）是B的元素）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <style>
       /* .box li{
            background-color: red;
        }*/
        div li{
            background-color: pink;
        }
        .show{}
        .box .show{}
        .outer .show{}
        html body div .show{}
    </style>
</head>
<body>
    <div class="outer">
        <p>p1</p>
        <p>p2</p>
        <span>span1</span>
        <ul class="box">
            <li>111</li>
            <li class="show">222</li>
        </ul>
        <ol>
            <li>333</li>
            <li>444</li>
        </ol>
    </div>

</body>
</html>

子代选择器

子代选择器使用 > 间隔开（A>B：在A元素中寻找儿子辈元素是B的元素）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子代选择器</title>
    <style>
        .box>.show{
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="outer">
        <p>p1</p>
        <p>p2</p>
        <span>span1</span>
        <ul class="box">
            <li>111</li>
            <li class="show">222</li>
            <li>
                <span class="show"></span>
            </li>
        </ul>
        <ol>
            <li>333</li>
            <li class="show">444</li>
        </ol>
    </div>

</body>
</html>

相邻兄弟选择器：

相邻兄弟选择器使用 + 间隔开（A+B：在A元素的下边紧贴着A的元素并且是B 才能被选中）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相邻兄弟选择器</title>
    <style>
        .outer>.show+span{
            background-color: yellow;
        }
        .outer>.show+p{
            /*选不中状态*/
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="outer">
        <p>p1</p>
        <p class="show">p2</p>
        <span>span1</span>
        <p>p3</p>
        <span>span2</span>
    </div>
</body>
</html>

通用兄弟选择器：

相邻兄弟选择器使用 ~ 间隔开（A~B：在A元素的下边兄弟元素并且是B 就能被选中）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通用兄弟选择器</title>
    <style>
        .outer>.show~span{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="outer">
        <span>span0</span>
        <p>p1</p>
        <p class="show">p2</p>
        <span>span1</span>
        <p>p3</p>
        <span>span2</span>
    </div>
</body>
</html>

群组选择器：

将多个选择器使用 ， 隔开可以同时对多个选择器设置样式
如果多个元素有相同的样式，方法有两种
- 使用一个共同的类名
- 使用群组选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>群组选择器</title>
    <style>
        /*.con{
            width: 100px;
            height: 100px;
        }*/
        .con1,.con2,.con3,.con4{
            width: 100px;
            height: 100px;
        }
        .con1{

            background-color: red;
        }
        .con2{

            background-color: #c0ff8b;
        }
        .con3{

            background-color: #5e8fff;
        }
        .con4{

            background-color: #ff2a91;
        }

    </style>
</head>
<body>
<ul>
    <li class="con1 con"></li>
    <li class="con2 con"></li>
    <li class="con3 con"></li>
    <li class="con4 con"></li>
</ul>
</body>
</html>

交集选择器

“交集”选择器：由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集
其中第一必须是标签名选择器，第二个必须是类别选择器或者ID选择器，两个选择器之间不能有空格，必须连续书写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>交集选择器</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        /*
            当我们想要选择： 某一个元素 并且这个元素拥有某个类名的时候

        */
        .list li{
            width: 30px;
            height: 30px;
            border: 1px solid #000;
            margin: 30px;
            border-radius: 50%;
            background-color: pink;
        }
        .list li.active{
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="outer">
        <ul class="list">
            <li></li>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>

选择器的优先级

相同优先级的选择器生效方式

当优先级相同的时候，在后边书写的样式优先级高
link元素其实也是把样式关联上，选择器优先级相同的情况写，后写的生效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器的优先级</title>

    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .con{
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
    <link rel="stylesheet" href="./01.css">
</head>
<body>
    <div class="box con show">
        box
    </div>
</body>
</html>

选择器优先级的权重计算：

行内样式： 1000
id：100
类：10
标签名：1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器优先级2</title>
    <style>
        #box p{
            /*1 --101*/
            background-color: red;
        }
        #box .con p{
            /*2 -- 111*/
            background-color: pink;
        }
        .box #con p{
            /*3--111*/
            background-color: green;
        }
        .box .show p{
            /*4--21*/
            background-color: yellow;
        }
        .box .con .show p{
            /*5 -- 31*/
            background-color: grey;
        }
        #box .show p {
            /*6 --111*/
            background-color: purple;
        }
        #box #con .show p{
            /*7 -- 211*/
            background-color: #5ab3f4;
        }
        #box #con #show p{
            /*8  -- 301*/
            background-color: #5df2ff;
        }
    </style>
</head>
<body>
<div id="box" class="box">
    <div id="con" class="con">
        <div class="show" id="show">
            <p>我是一个p标签</p>
        </div>
    </div>
</div>
</body>
</html>

选择器优先级覆盖案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>优先级覆盖案例</title>
    <style>
        .outer li{
            width: 100px;
            height: 100px;
            margin: 10px;
            background-color: grey;
            float: left;
        }

        .outer .active{
            background-color: red;
        }
    </style>
</head>
<body>
    <ul class="outer">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <!-- 将来使用js，哪一个li拥有样式，就给它active的类名 -->
        <li class="active"></li>
        <li></li>
    </ul>
</body>
</html>

CSS基础样式设置

文本颜色的设置（color）

color属性: 设置文字颜色（可以继承的）

可以直接设置颜色的名字（开发中很少使用，因为不精确）

red green yellow pink blue grey purple orange lightblue lightgreen greenyellow yellowgreen

设置为三原色 红r 绿g 蓝b
- 所有颜色都是由这三种颜色调制出来的
- 每一个颜色的值都是 0-255之间
- rgb(30,120,200)
- 颜色还可以设置不透明度 ,可以使用 rgba(20,111,111,.7)
颜色还可以设置为十六进制（不能设置透明度）
- #加上16进制的颜色值 6位
- #112233--> 11代表red的十六进制值 22代表green颜色的十六进制值 33代表blue颜色十六进制值
- 十六进制颜色提供简写：当1,2位一样并且3,4位一样并且5,6一样的时候可以每一位简写一个
  
  #112233-->#123 #aabb11-->#ab1 #000000-->#000 #111222-->#111222
HSL设置颜色
- H代表Hue 色调 0和360代表红色，选择范围是[0,360] 120代表绿色 240代表蓝色
- S代表Saturation 饱和度 0-100%
- L代表Lightness 亮度 0-100%
- HSLA() 中 hsl代表的意思不变 a代表透明度 [1,0]
继承 inherit
透明颜色：transparent

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer{
            color: red;
            color: rgb(30,120,200);
            color: rgba(20,111,111,.7);
            color: #ae43ea;
            color: hsl(0,100%,50%);
            color: hsla(0,100%,50%,.3);
        }
    </style>
</head>
<body>
    <div class="outer">
        今天天气真好
        <span>对，真的好</span>
    </div>
</body>
</html>

关于a标签颜色的继承

a标签比较特殊，如果a标签没有href属性，a标签没有默认样式，那么继承颜色生效
但是如果a标签拥有href属性，a标签链接的自带样色会盖过继承
a的4个状态（有链接、被点击后、点击中、鼠标悬浮）是有自己的样式的，只能通过伪类来控制这4中样式
所以在开发中给a标签设置颜色，需要直接对a标签进行设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关于a标签颜色的继承</title>
    <style>
        .box{
            color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        哈哈哈哈
        <a>笑个鸡哦</a>
    </div>
</body>
</html>

font-famliy：设置字体(可以继承)

常见中文字体："Microsoft YaHei"、"SimHei"、"SimSun"
但是我们设置的字体用户可能没有，我们需要设置备用字体

在font-famliy后书写多个字体，使用逗号隔开，浏览器会依次检测支持为止，否则将执行默认字体
目前常用的字体可以分为5大类
- serif：衬线字体族衬线指的是字母结构笔画之外的装饰性笔画（serif 典型的字体有：Times New Roman、MS Georgia、宋体……）
- sans-serif：无衬线字体族（sans-serif 典型的字体有：MS Trebuchet、MS Arial、MS Verdana、幼圆、隶书、楷体……）
- cursive:手写体族楷体（cursive 典型的字体有：Caflisch Script、Adobe Poetica、迷你简黄草、华文行草……）
- monospace：等宽字体族（monospace 典型的字体有：Courier、MS Courier New、Prestige……）
- fantasy：梦幻字体族（fantasy 典型的字体有：WingDings、WingDings 2、WingDings 3、Symbol……）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>font-famliy</title>
    <style>
        .box{
            font-family: "Microsoft YaHei";
            font-family: "SimSun";
            font-family: "SimHei";
            font-family: "SimHei","SimSun","Microsoft YaHei";


            /*字体的五大类*/
            font-family: Serif;
            font-family: sans-serif;
            font-family: cursive;
            font-family: Monospace;
            font-family: fantasy;
        }
    </style>
</head>
<body>
    <div class="box">
        哈哈哈哈
        <span>笑个鬼</span>
    </div>
</body>
</html>

外部引入字体包

外部引入的字体包和某一个元素没有任何关系，而是本页面都可以使用这个字体
在css中使用@font-face来引入外部字体包
原来我们页面自带的字体包都有自己的名字，我们首先给引进来的字体包起一个名字,font-face中有一个font-famliy属性是给字体包起名字的
还要使用src：url（）来引入字体包
根据你起得名字，来使用字体包

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部引入字体包</title>
    <style>
        @font-face {
            font-family: "jier";
            src:url("../images/abc.ttf");
        }
        .outer{
            font-family: "jier";
        }
    </style>
</head>
<body>
    <div class="outer">
        看我的表演 我是非主流子
    </div>
</body>
</html>

font-size

常用的单位是px、em、rem 当然也有不用的 cm in等等
可以设置小数（低版本ie不支持）
字号最好不要设置为奇数
一般来说汉字是正方形的，宽高就等于字号大小
但是实际文字占用的高度要大于字号大小，根据字体的不同，文字上下有一定的不能控制的间隙,因为文字的大小是基于4线格的（顶线中线基线底线）汉字并不能完整的填充满四线格
浏览器都有自己的默认字号大小和最小字号

谷歌浏览器默认字号大小是16px

谷歌浏览器支持的最小字号多数是12px

如果设置12以下，字体不支持

但是如果设置字号为0 那么文字高度为0 消失

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字号设置</title>
    <style>
        .box{
            font-size: 30px;

            font-family: "Microsoft YaHei";

            font-family: "SimSun";

            font-family: "SimHei";
        }
    </style>
</head>
<body>
    <div class="box">
        哈哈哈哈哈
        <span>我也哈哈gj哈</span>
    </div>
</body>
</html>

字体风格：font-style（可以继承）

normal：正常

多数元素的默认值

对于默认倾斜或斜体的元素 i var em 可以调整成正常非倾斜样式
italic 让元素呈现斜体一般指的是一个字体

在字体设计的过程中，会对一个文字设计正常体斜体粗体等状态

而italic只是选择让使用斜体显示
oblique 让常规字体进行倾斜（强行让当前文字变倾斜）

oblique 后可以跟一个旋转角度以deg为单位

谷歌只支持0deg

火狐只支持汉字和-90 -90度的设置
对于上边两种倾斜版本，使用上没有什么区别（italic会占用高度较小）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体风格</title>
    <style>
        em,i,var{
            font-style: normal;
        }
        .outer{
            font-style: italic;
            font-style: oblique 0deg;
        }
    </style>
</head>
<body>
    <div>
        <em>em啊</em>
        <i>i啊</i>
        <var>哈哈哈啊</var>
    </div>
    <div class="outer">
        outer中
        <span>span里</span>
    </div>
</body>
</html>

font-weight:(继承)

用来定义字体的粗细其实目前浏览器只支持3个级别细正常粗

normal：正常粗细可以将默认加粗的字体进行改变为正常比如 b strong
bold：加粗
bolder:相对父级来说的，比父级要粗一个级别
lighter：相对父级来说，比父级细一个级别
100-900 整除100的整数：

因为浏览器只支持细粗正常3个所以

100-300 是细

400-500 正常

600-900 加粗

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>font-weight 字体粗细</title>
    <style>
        .outer b,.outer strong{
            font-weight: normal;
        }
        .box{
            font-weight: bold;
        }
        .box span{
            font-weight: lighter;
        }
        .box span em{
            /*font-weight: lighter;*/
            font-weight: bolder;
        }

        .con{
            font-weight: 100;
        }

    </style>
</head>
<body>
    <div class="outer">
        <b>我是小b</b>
        <strong>我是小s</strong>
    </div>
    <div class="box">
        我是一个box
        <span>我是一个span <em>我是em</em></span>
    </div>
    <div class="con">
        我是con
    </div>
</body>
</html>

font合写：

font-style font-weight font-size/line-height font-famliy

font合写必须要书写 font-size 和font-famliy 否则合写不生效
font合写其实在实际项目中使用的很少，一般我们要分开设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>font合写</title>
    <style>
        .font{
            line-height: 1.8;
            font:italic bold 40px "Microsoft YaHei";
        }
    </style>
</head>
<body>
<div class="font">
    看我的合写 你记不记得住
</div>
</body>
</html>

line-height：(继承)

用来控制行高，一行文的高度。规范来说就是两行文字基线之间的距离
line-height和内联元素连接非常紧密，行高直接决定了内联元素占用的高度（不包括替换元素）
值：(不支持负值)
- normal：执行浏览器默认值，在各个浏览器中不同，并且还受字体的影响
- 数字：没有单位，比如1.5 就是当前元素文字大小的1.5倍
- 百分比：也是相对于当前元素的文字大小计算的，很少使用
- 长度：带单位，直接设置行高
行距与半行距

行距是上边一行文字的底线和下边一行文字的顶线之间的距离

半行距就是行距的一半; 让行高减去一行文字的高度，得到的值除以2，就是半行距

一行文字的上边和下边分别是两个半行距

半行距高度*2 + 文字的字号 = 行高
使用line-height对单行文字（也可以是内联元素）做垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>line-height</title>
    <style>
        .con1{
            width: 200px;
            background-color: red;
            color: #fff;

            /*line-height: 1.8;*/
            /*line-height: 100%;*/
            /*line-height: 16px;*/
        }

        .con2{
            background-color: red;
            line-height: normal;
        }

        .con3_outer{
            background-color: red;
            line-height: 16px;
        }
    </style>
</head>
<body>

    <p class="con1">
        用来控制行高，一行文的高度。规范来说就是两行文字基线之间的距离用来控制行高，一行文的高度。规范来说就是两行文字基线之间的距离用来控制行高，一行文的高度。规范来说就是两行文字基线之间的距离用来控制行高，一行文的高度。规范来说就是两行文字基线之间的距离用来控制行高，一行文的高度。规范来说就是两行文字基线之间的距离用来控制行高，一行文的高度。规范来说就是两行文字基线之间的距离用来控制行高，一行文的高度。规范来说就是两行文字基线之间的距离
    </p>
    <div>
        <span class="con2">我是一个spanpan</span>
    </div>
    <br>
    <div class="con3_outer">
        <span class="con3">看我居中</span>
    </div>

</body>
</html>

单行文字做垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单行文字做垂直居中</title>
    <style>
        .box{
            /*line-height的设置 可以让元素在line-height的值里边垂直居中，不一定非要设置高度*/
            background-color: red;
            /*height: 100px;*/
            line-height: 100px;
        }

        .con{
            background-color: pink;
            line-height: 100px;
            /*span在con中垂直居中，主要是看父元素的line-height*/
        }
        .con span{
            line-height: normal;
        }
    </style>
</head>
<body>
    <div class="box">
        今天天气知道你好
    </div>


    <div class="con">
        <span>你好</span>
    </div>
</body>
</html>

line-height的继承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>line-height的继承</title>
    <style>
        .nav>li{
            width: 200px;
            height: 60px;
            line-height: 60px;
            background-color: red;
            position: relative;
        }
        .con{
            position: absolute;
            top: 60px;
            left: 0;
            background-color: pink;
            line-height: 20px;
            display: none;
        }
        .nav>li:hover .con{
            display: block;
        }
    </style>
</head>
<body>
    <ul class="nav">
       <li>
           今日头条
           <ul class="con">
                <li>头条1</li>
                <li>头条2</li>
                <li>头条3</li>
                <li>头条4</li>
                <li>头条5</li>
                <li>头条6</li>
           </ul>
       </li>
    </ul>
</body>
</html>

vertical-align

一种简单的 CSS 属性，用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。
1. 默认情况下，在一个行框中，所有内容都是基线对齐
2. 但是图片没有基线，所以就把图片的底部当成了基线对了
3. vertical-align 可以设置让一个元素以自身的哪一个位置对齐
4. 值：
  - baseline 基线对齐
  - top 让元素顶部与整行的顶部对齐
  - bottom 让元素底部与整行的底部对齐
  - middle 让元素的中间在行框的x-height中间对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06.vertical-align</title>
    <style>
        .box{
            background-color: red;
            font-size: 100px;
            height: 400px;

        }
        .box img{
            height: 50px;
            vertical-align: baseline;
            vertical-align: top;
            vertical-align: bottom;
            vertical-align: middle;
            vertical-align: text-top;

        }
    </style>
</head>
<body>
    <div class="box">
        <img src="../images/05.jpg" alt="">
        <span>hehehe</span>
        哈
    </div>
</body>
</html>

使用 vertical-align 你能在不同场景下去进行灵活细微的元素对齐工作
- float：只能对齐它们的顶部，而且可能导致布局塌陷，需要手动清除
- position:absolute：会使元素脱离文档流，以致于它们不能影响周围的元素
- 手动添加内外边距的方法：需要父元素高度固定
- transform:translateY：属于 CSS3 新特性，对 IE8、IE9 有一些兼容性的问题

让图片在父级垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>让图片在父级垂直居中</title>
    <style>
        .box{
            height: 500px;
            background-color: red;
            line-height: 500px;
        }
        .box img{
            height: 200px;
            vertical-align: middle;

        }
    </style>
</head>
<body>
<div class="box">
    <img src="../images/05.jpg" alt="">
</div>
</body>
</html>

去除图片默认间隙

因为图片底部默认和行框的文字基线对齐，所以图片和行框底部有一定的间隙
就算行框只有一个图片，间隙也存在。是因为在当前行框内，如果存在一个行内块元素的时候，就会渲染一个看不见摸不着的节点
这个节点拥有当前元素的字号大小，行高等信息。这个节点被称作为“幽灵空白节点”
去除间隙：
- display:block;
  
  图片底部能够和文字的基线对齐，是因为图片默认的vertical-align为baseline
  
  但是verticle-align这个属性只有行内元素和行内块元素支持，块级元素是失效的
  
  所以将img设置为块元素属性就可以不用基线对齐了
  
  也可以理解为：因为改成块，解决了幽灵空白节点的问题,并且没有元素和他在个行框
- 设置verticle-align不为baseline 比如 top bottom middle都可以
- 空白是文字有字号大小，撑开了当前的em方框
  
  直接让字号大小变成0 文字就没有大小了也就是幽灵空白节点文字大小变成0了也不会撑开间隙了,主要针对于没有文字的行框
- 改变文字的高度文字的高度可以由line-height来控制
  
  让line-height：0 也可以解决问题
- 浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06.vertical-align</title>
    <style>
        .box{
            background-color: red;
            /*font-size: 0px;*/
            /*line-height: 0;*/

        }
        .box span{
            font-size: 50px;
        }
        .box img{
            height: 150px;

            /*display: block;*/

            /*vertical-align: middle;
            vertical-align: top;
            vertical-align: bottom;*/

            float: left;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="../images/05.jpg" alt="">
        <span>hahahagh</span>

    </div>

<div>
    <span></span>
</div>
</body>
</html>

text-decoration：文本修饰（不继承）

虽然不继承，但是延伸到后代元素，因为后代元素属于这个元素的下划线范围

none：取消下划线
underline:下划线
overline:上划线
line-through：删除线

text-decoration其实是一个简写的属性。

text-decoration-line：上划线下划线删除线
text-decoration-color：颜色
text-decoration-style：实线solid 虚线dashed 点线dotted 波浪线wavy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text-decoration</title>
    <style>
        a,u{
            text-decoration: none;
        }
        .outer{
            text-decoration: underline;
            /*text-decoration: overline;*/
            /*text-decoration: line-through;*/
        }
        .outer span{
            text-decoration: overline red wavy;

        }
    </style>
</head>
<body>
    <div>
        <a href="###">a</a>
        <u>u</u>
    </div>
    <div class="outer">
        <span>你好</span>
        世界
    </div>
</body>
</html>

text-indent首行文本缩进

单位是px 缩进的像素固定的单位，字号大小改变还需要重新书写px
em单位 em是一个相对单位，1em=当前文字的字号大小如果缩进两个文字那么2em
只针对块级元素生效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10.text-indent首行文本缩进</title>
    <style>
        p{
            width: 200px;
            background-color: yellow;
            font-size:16px;
            /*text-indent: 32px;*/
            text-indent: 2em;
        }
        span{
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <p>
        今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好
        <br>
        <span>
            真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊真的好呀啊
        </span>
    </p>
</body>
</html>

text-align:(继承)

规定行内的内容如何相对于它的块级父元素水平方向对齐
并不是控制元素自己的对齐，只是控制它里边的行内容水平方向对齐
- left：默认左对齐
- center：居中
- right：右对齐
- justify 两端对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本对齐</title>
    <style>
        .outer{
            width: 600px;
            height: 200px;
            background-color: red;
            text-align: center;
        }
        .con{
            width: 300px;
            height: 100px;
            background-color: yellow;

            text-align: center;
            text-align: right;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="con">
            hello world <span>span</span>
        </div>
    </div>
</body>
</html>

字符和词间距：

在html中，英文数字的组合只要没有空格都会被当做是一个单词

在汉字中，虽然不会把多个汉字连在一起当做是一个单词

但是仍然词间距的时候，只改变空格隔开的间距
letter-spacing:控制字符间距
word-spacing:控制词间距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字符和词间距</title>
    <style>
        .show{
            /*width: 100px;*/
            background-color: red;
            letter-spacing: 0px;
            word-spacing: 0px;

        }
    </style>
</head>
<body>
    <div class="show">
        how are you i'm fine thank you
        <br>
        今天天气 真的好
    </div>
</body>
</html>

背景类的设置：

背景颜色设置：

background-color:颜色值（和color的颜色一致十六进制 rgba hsl 颜色单词）
背景图的设置：

background-image:url(路径) 背景图引入后默认原点在元素的左上角

在html中，由左至右是x轴方向由上至下是y轴方向 x和y的交叉是原点
背景图定位：

background-position：x轴方向位置 y轴方向位置

值的写法：
- px
- 百分比百分比是参照于容器的总宽度-图片的总宽度
- 其他写法
  - x：center left right
  - y: center top bottom
background-repeat:控制背景图片是否平铺
- no-repeat：不平铺
- repeat：x和y都平铺（默认）
- repeat-x：只有x轴平铺
- repeat-y：只有y轴平铺
背景图提供了合写（一般我们都使用合写）

background：color image position repeat；

都可以进行省略

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景类的设置</title>
    <style>
        .box{
            width: 1000px;
            height: 600px;
            /*background-color: #5df2ff;
            background-image: url(../images/05.jpg);

            background-position: 50px 50px;
            background-position: 50% 50%;
            background-position: right 50%;


            background-repeat: no-repeat;
            background-repeat: repeat-x;
            background-repeat: repeat-y;*/

            /*background: #5df2ff url("../images/05.jpg") center center no-repeat;*/

            /*background-color: red;
            background: url("../images/05.jpg") center center no-repeat;*/
        }
    </style>
</head>
<body>
    <div class="box">
        我是一个box元素
    </div>
</body>
</html>

overflow属性

元素超出父级，不会影响父级的兄弟元素位置
overflow属性定义一个内容太大无法适应容器的时候应该怎么做
设置给被超出的元素
- visible：默认，内容不会被修剪，而是显示在元素的框外
- hidden:超出内容被修剪，修剪掉的内容不可见，并且没有滚动条
- scroll：超出内容被修剪，浏览器显示滚动条方便查看被修剪的内容
- auto：浏览器定夺，如果内容超出就生成滚动掉，否则不生成
overflow：auto和scroll的区别：
- auto:是自动生成滚动条，不超出不生成超出才生成
- scroll：无论是否超出都会生成滚动条
overflow-x：

overflow-y：

只控制x和y的超出情况

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>overflow属性</title>
    <style>
        .outer{
            width: 200px;
            height: 100px;
            background-color: red;

            /*overflow: visible;
            overflow: hidden;
            overflow: scroll;
            overflow: auto;*/
            overflow-x: hidden;
            overflow-y: hidden;
        }
        .con{
            width: 400px;
            height: 200px;
            background-color: pink;
        }
        .bottom{
            height: 400px;
            background-color: green;
        }
    </style>
</head>
<body>

    <div class="outer">
        <div class="con">
            今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好
        </div>
    </div>
    <div class="bottom">

    </div>
</body>
</html>

display属性：

指定了元素的显示类型，包含两种基础特征，用于规定元素生成什么样子的盒模型
- 外部显示类型：定义元素怎么样参加流体布局
- 内部显示类型：定义了元素内子元素的布局方式
值
- block：
  
  让元素以块标签属性显示（block-block）
- inline
  
  让元素以行元素属性显示（inline-inline）
- inline-block
  
  让元素以行内块的属性显示
  
  inline控制行内显示
  
  block控制可以设置宽高
- none:
  
  让元素隐藏，包含子孙元素全部隐藏，并且不会占用任何位置，在DOM也访问不到可视化宽高（就算设置了宽高，使用js的offsetWidth和offsetHeight都获取不到宽高）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display属性</title>
    <style>
        .con1{
            display: block;
            width: 400px;
            height: 100px;
            background-color: pink;
        }
        .con3{
            display: inline;
            width: 100px;
            height: 100px;
            background-color: red;

        }
        .con4{
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: #5df2ff;
        }
        .con5{
            display: none;
        }
    </style>
</head>
<body>
    <span class="con1">hello</span>
    <em class="con2">world</em>
    <div class="con3">那哈哈哈</div>
    <div class="con4">con44</div>
    <div class="con5">
        222
        <span>333</span>
    </div>

</body>
</html>

visibility属性：

控制元素显示或者隐藏

hidden:控制元素隐藏
- 保留原来的位置，其他元素的布局没有发生改变
- 相当于此元素变透明
- visibility属性是继承的，里边的子元素也全部都继承属性，并且隐藏了
- 如果给子元素设置visible覆盖，那么子元素可以进行显示
visible：让visibility：hidden隐藏的元素显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>visibility属性</title>
    <style>
        .box{
            width: 600px;
            height: 400px;
            background: yellow;
        }
        .con1{
            width: 300px;
            height: 100px;
            background-color: pink;
            visibility: hidden;
        }
        .con1 .inner{
            width: 100px;
            height: 50px;
            background-color: #5ab3f4;
            visibility: visible;
        }
        .con2{
            width: 300px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="con1">
            <div class="inner"></div>
        </div>
        <div class="con2"></div>
    </div>
</body>
</html>

display和visibility隐藏的区别

visibility可以继承，子元素是因为继承了才隐藏
- 可以覆盖继承，子元素即可显示
- display不能被继承，而是直接带着所有内部元素直接隐藏
visibility隐藏，原来空间仍然保留,display隐藏，原来空间消失被占用
js可以获取到visibility隐藏元素的可视化宽高, js不可以获取到display隐藏元素的可视化宽高

opacity不透明度：

指定了一个元素的透明度

当opacity作用在某一个元素上的时候，把这个元素和里边的内容当成一个整体看待即使里边的元素没有继承opacity。它也和父级有一样的透明度
opacity的取值是 1-0
- 1代表完全不透明
- 0代表完全透明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>opacity透明度</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: deeppink;
            font-size: 30px;
            text-align: center;
            line-height: 200px;
            opacity: .6;
        }
    </style>
</head>
<body>
    <div class="box" id="box">
        <span>你好</span>
    </div>
    <script>
        var oBox = document.querySelector("#box");
        var timer = null;
        var i = 1;
        timer = setInterval(function () {
            i -= 0.01;
            oBox.style.opacity = i;
        },1000/60)
    </script>
</body>
</html>

opacity和rgba和hsla透明的区别：

rgba和hsla只是一个颜色，是属性的取值，比如color background-color，所以只是对颜色的一个处理
opacity是一个属性，透明是直接设置给元素的，并不会对元素的某部分进行控制

盒子模型

盒子模型的概念：

在html中，把每一个元素都当做成一个盒子，拥有盒子的平面外形和空间
盒模型由内容（content）+内边距（padding）+边框（border）+外边距（margin）4部分构成
- 内容区域：你书写的内容或者子元素能够显示的区域
- 内边距：撑开内容与边框的距离
- 边框：元素的边框
- 外边距：撑开元素和其他元素之间的距离

盒子模型-内容区域（在标准盒子模型下）：

标准盒子模型下设置的width和height都是content（内容）区域的宽高

width：
- 默认是auto。auto分为4种情况：
  1. fill-available：充分利用可使用空间（块标签）
  2. fit-content:收缩到合适（浮动，定位）
  3. min-content:收缩到最小（表格中常见）
  4. max-content:超出容器限制（英文单词较长，或者设置了不换行，就会超出容器限制）
height：
- auto：其高度由内部元素堆叠而成，也就是内部元素撑起来的

设置宽度的坑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置宽度的坑</title>
    <style>
        .box{
            /*假设一个元素 内容区域加上左右各50的margin  正好撑满父级
            以下设置是错误的*/
            width: 100%;/*把内容区域设置成了和父级一样宽 再加上margin 就超出父级了*/
            margin: 0 50px;
            height: 100px;
            background-color: red;

            /*解决以上问题很简单，不写width，或者设置width为auto*/
            width: auto;
        }
        input{
            /*input元素：
                占用的宽是200px 高是50px
                边框是1px
                padding是左右各10px

                    所以设置的宽度应该是 200-2-20=178
                */
            width:178px;
            height: 48px;
            padding: 0 10px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <!--

    -->
    <div class="box">
        dd
    </div>
    <input type="text">
</body>
</html>

设置高度的坑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置高度的坑</title>
    <style>
        /*想让con元素和屏幕一样高*/
        /*想要让高度的百分比生效，需要给父级也要设置高度（不能是auto）*/
        html{
            height: 100%;
        }
        body{
            height: 100%;
        }
        .outer{
            height: 100%;
        }
        .con{
            height: 100%;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="con"></div>
    </div>
</body>
</html>

margin基础

设置一个元素外边距的宽度。外边距可以理解为当前元素与父级或其他兄弟级元素的距离。
值可以是一个单位，也可以是一个百分比
分4个方向
- margin-left、margin-right、margin-top、margin-bottom
- 每个方向的值都可以单独的设置
- margin-left、margin-top是让自身元素靠右靠下
- margin-bottom、margin-right是让其他元素靠右靠下
margin的简写：
- margin后跟4个值：分别代表上右下左
- margin后跟3个值：分别代表上左右下
- margin后跟2个值：分别代表上下左右
- margin后跟1个值：分别代表上下左右

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin基础</title>
    <style>
        .con1,.con2{
            width: 200px;
            height: 200px;
        }
        .con1{
            background-color: #5df2ff;
            /*margin-left: 100px;
            margin-top: 80px;
            margin-right: 30px;
            margin-bottom: 40px;*/

            /*margin: 80px 30px 40px 100px;*/
            /*margin: 80px 50px 40px;*/
            margin: 80px 50px;
            margin: 50px;
        }
        .con2{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="con1"></div>
    <div class="con2"></div>
</body>
</html>

margin 0 auto居中:

在正常的布局中，块级元素具有满屏的属性，也就是在水平方向上占满父级的宽度
满屏以后，内部元素的内容+内边距+边框+外边距刚好是等于父级的内容区域的大小
所以当水平方向上的宽度边框内边距都是固定值的时候，在水平方向上margin设置auto的时候，默认左右平分剩余空间，达到水平居中效果
当水平方向出现auto的时候，剩余空间会进行分配，当某一边不要另外一边出现auto，剩余空间就会直接给另外一边

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin 0 auto居中</title>
    <style>
        .outer{

        }
        header{
            width: 1000px;
            height: 100px;
            background-color: pink;
            margin: 0 auto;
            margin: 30px auto 50px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <header></header>
        <section></section>
        <footer></footer>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平方向auto小练习</title>
    <style>
        .con{
            width: 400px;
            height: 100px;
            background-color: red;
            margin-left: auto;
            margin-right: 0;
        }
    </style>
</head>
<body>
    <!--
        水平方向auto小练习:
            当水平方向出现auto的时候，剩余空间会进行分配
             当右边不要  左边出现auto 剩余空间就会直接给左边
    -->

    <div class="con">

    </div>
</body>
</html>

垂直方向上的 margin ： auto 0 为什么不行

相对于水平方向来说，块元素在垂直方向上并没有满屏的属性，margin默认在上下的值都是0
无论是否设置垂直方向的auto，表现出来的都是元素多高就占用多少，并没有剩余空间去平分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin 0 auto居中</title>
    <style>
        .outer{
            height: 400px;
            background-color: #b51d1a;
        }
        header{
            width: 1000px;
            height: 100px;
            background-color: pink;
            margin: auto 0;
        }
    </style>
</head>
<body>
    <div class="outer">
        <header></header>
    </div>
</body>
</html>

margin的父级塌陷：

当一个父级中第一个元素的margin-top会塌陷给父级
最后一个元素的margin-bottom会塌陷给父级

防止父级和其他元素之间的间隙过大，当第一个和最后一个子元素的margn塌陷给父级以后父级就可以和兄弟元素在垂直方向上进行叠加
避免父级塌陷
1. 给父级设置一个边框边框的宽度不能为0
  
  防止影响视觉，可以设置透明（transparent）颜色
2. 开启BFC（块级格式化上下文）
  
  很多种方法，后边讲解:overflow：hidden 可以开启。。。。。。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin基础</title>
    <style>
        .con1,.con2{
            width: 200px;
            height: 200px;
        }
        .con1{
            background-color: #5df2ff;
            margin-top: 50px;
        }
        .con2{
            margin-top: 40px;
            background-color: yellow;
            margin-bottom: 40px;
        }
        .outer{
            background-color: pink;

            /*border:1px solid transparent;*/
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="con1"></div>
        <div class="con2"></div>
    </div>

</body>
</html>

margin对元素的影响和支持性：（margin都为正值）

对块标签来说：
- margin-left：元素右移动
- margin-top：元素下移动
- margin-right：如果右边有元素后边的元素右移动
- margin-bottom：如果下边有元素后边的元素下移动
- margin垂直方向叠加，父级塌陷
对行标签：
- margin在垂直方向上不生效
- 水平方向：margin-left：元素右移动，margin-right：如果右边有元素后边的元素右移动
对行内块:
- 和块元素一样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin对元素的影响和支持性</title>
    <style>
        .con2{
            margin: 40px;
        }
        .ipt{
            margin: 30px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="con1">div</div>
        <span class="con2">我是span1</span>
        <span class="con2">我是span1</span>
        <input type="text" class="ipt">
    </div>
</body>
</html>

负margin的基础用法：

margin-left为负：
- 元素向左移动，并且原来的位置不保留（后边元素会紧跟上一起移动），
- 元素向左移动，并不会挤到前边的兄弟元素，而是覆盖前边的兄弟元素
margin-right为负：
- 元素视觉大小不发生变化
- 但是元素实际所占用的空间变小，后边元素会跟上来或者是撑不开父级宽度
- 假如元素width为100px 设置marginright为-20 元素实际大小是80px
margin-top为负：
- 元素向上移动，并且原来的位置不保留（下边元素会紧跟上一起移动），
- 元素向上移动，并不会挤到上边的兄弟元素，而是覆盖上边的兄弟元素
margin-bottom为负：
- 元素视觉大小不发生变化
- 但是元素实际所占用的空间变小，下边元素会跟上来或者是撑不开父级高度
- 假如元素height为100px 设置marginbottom为-20 元素实际大小是80px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>负margin的基础用法</title>
    <style>
        .outer{
            background-color: red;
            /*overflow: hidden;*/
        }
        .con1{
            width: 200px;
            height: 200px;
            background-color: deeppink;
            /*float: left;*/

            margin-left: 0px;
            margin-right: 0px;
        }
        .con2{
            width: 200px;
            height: 200px;
            background-color: yellow;
            /*float: left;*/

            margin-top: 0px;
            margin-bottom: -0px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="con1"></div>
        <div class="con2"></div>
    </div>
</body>
</html>

负margin练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>负margin练习1</title>
    <style>
        header{
            width: 1000px;
            height: 100px;
            background-color: red;
            margin: 0 auto;
        }
        section{
            width: 800px;
            height: 400px;
            background-color: yellow;
            /*margin: 0 auto;
            margin-top: -50px;*/

            margin: -50px auto 0;
        }
    </style>
</head>
<body>
    <div class="outer">
        <header>

        </header>
        <section>

        </section>
    </div>
</body>
</html>

边框的设置:

border-width:边框宽度
border-style:边框样式 solid 实现 dashed 虚线 dotted 点线
border-color：边框颜色
合写：border：border-width border-style border-color
注意：
- 边框是在margin里边
- 背景颜色在边框中显示（实线的时候，我们看不到）
- 背景图片原点没有从边框开始而是从padding开始的，但是可能会平铺到边框中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框的设置</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            border: 10px dotted #000;
            margin: 10px;
            background-color: red;
            background: url("../images/05.jpg") 0 0 no-repeat;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

边框的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框的应用</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .head_out{
            width: 100%;
            border-bottom: 4px solid #55a5ff;
        }
        .head_out .head{
            width: 1000px;
            height: 100px;
            background-color: orangered;
            margin: 0 auto;
        }
        .head a{
            text-decoration: none;
            color: #3c3c3c;
            font-size: 12px;
        }
        .head .head_login{
            border-right: 3px solid #3c3c3c;
            border-left:3px solid #3c3c3c;
            padding: 10px 20px;
            margin-left: 20px;
        }
        .head .head_regist{
            border-right: 3px solid #3c3c3c;
            padding: 10px 20px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="head_out">
            <header class="head">
                <div class="head_top">
                    <a href="###" class="head_login">登录</a>
                    <a href="###" class="head_regist">注册</a>
                </div>
            </header>
        </div>
    </div>
</body>
</html>

padding：

什么是padding
- padding的写法和margin基本一摸一样
- padding主要撑开内容之间的距离
- 背景颜色可以显示在padding中，也可以显示在border中
- 背景图片的原点，其实默认在 padding的左上角
padding的支持性：
- 块标签：四个方向都支持
- 行标签：水平方向直接支持，垂直方向也支持设置，但是不能撑开元素的距离
padding不支持负值
padding也不去设置auto 不支持

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>padding的设置</title>
    <style>
        .box{
            width: 800px;
            height: 400px;
            background-color: #b51d1a;
        }
        .con{
            width: 200px;
            height: 200px;
            background-color: #5df2ff;
            padding: 10px 20px;
            background: url("../images/05.jpg");
        }
        .con span{
            padding: 20px;
            color: #fff;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="con">
            今天天气真好
            <span>哈哈哈</span>
        </div>

    </div>
</body>
</html>

padding扩大点击区域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .con1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        a{
            font-size: 12px;
            padding: 20px 0;
        }
    </style>
</head>
<body>
    <div>
        <div class="con1"></div>
        <a href="###">百度两下你就直到</a>
        <div class="con1"></div>

    </div>
</body>
</html>

标准盒模型和怪异盒模型：

默认情况基本都是标准盒模型

怪异盒模型：
标准盒模型：
- 元素占用的空间大小为：内容区域（content）+内边距（padding）+边框（border）+外边距（margin）
- ex：
  
  一个元素 margin：20px 30px;
```
                padding:10px 5px;
                border: 2px solid #000;
                width:300px;
```
  求这个元素所占用的宽度空间大小是：374px
怪异盒模型：
- ie6 或者是没有正确书写版本声明或者是设置了box-sizing
- 元素所占用的空间大小为：内容（content+padding+border）+外边距（margin）
- 怪异盒模型设置的width是 content+padding+border整体的宽度
  
  ex：
  
  一个元素 margin：20px 30px;
```
                padding:10px 5px;
                border: 2px solid #000;
                width:300px;
```
  求这个元素所占用的宽度空间大小是：360px 求这个元素内容（content）区域的宽度是286px

生成怪异盒模型

一个盒子模型中，每一个属性盒子都有自己的名字，由内向外分别是 content-box 、 padding-box、border-box、margin-box（没有官方说明）
将一个元素设置盒模型显示
- box-sizing属性：
  
  content-box:标准盒模型
  
  border-box:怪异盒模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>怪异盒模型</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            padding: 10px;
            margin: 15px;
            border: 2px solid #000;
            box-sizing: content-box;/*标准盒模型*/
            box-sizing: border-box;/*怪异盒模型*/
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>

盒子模型概念总结

在html中，把每一个元素都当做成一个盒子，拥有盒子的平面外形和空间
盒子模型由内容（content）、内边距（padding）、边框（border）、外边距（margin）四个构成
盒子模型分为怪异盒子模型和标准盒子模型
标准盒子模型的所占用空间的计算方式是 content+padding+border+margin
怪异盒子模型所占的的空间计算方式是 content+margin（content内容是包含内容内边距和边框的）
使用box-sizing属性可以切换盒子模型的方式

padding和margin的使用场景

padding和margin的使用场景
- padding：撑开内容与边框的距离 padding中会显示背景颜色和背景图片
- margin：撑开元素之间距离
日常使用过程中，可以按照下边方式来使用：
- padding和margin都可以撑开元素之间的距离。
- padding主要用来撑开父子之间的距离
- margin主要用来撑开兄弟之间的距离

浮动

浮动的来历

正常页面流：
- 在css中，是存在流的概念的，正常情况下，页面总是由左至右，由上至下布局，我们把这种情况称作为正常页面流
- 但是，在很多情况下，正常页面流有很多效果实现不了，所以需要一些手段来破坏流，而浮动（float）就是破坏流的一种手段
浮动的来历：
- float设计的初始想法仅仅是为了做文字环绕图片
  - 浮动以后元素出现重叠，但是行框盒子和浮动元素有不可重叠性
- 在目前开发中，很多的元素都是一个个的float堆叠起来的，但是这种布局及其容易崩溃
- 只要高度和宽度发生一点变化，页面都可能发生错乱

浮动

float属性：

左浮动（left）：让元素沿着容器左侧放置，允许文本和内联元素环绕它，它从正常的页面中移除，虽然还保持一点流动性
右浮动（right）：让元素沿着容器右侧放置，允许文本和内联元素环绕它，它从正常的页面中移除，虽然还保持一点流动性
none：不浮动

浮动解决一行显示块标签问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动解决一行显示块标签问题</title>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 5px;
            /*float: left;*/
            float: right;
        }
        .box2{
            width: 150px;
            height: 150px;
            background-color: yellow;
            margin: 5px;
            /*float: left;*/
            float: right;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box1"></div>
        <div class="box2">aa</div>
    </div>
</body>
</html>

可能被阻挡的浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>可能被阻挡的浮动</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul{
            width: 960px;
            margin: 0 auto;
            background-color: #5df2ff;
        }
        ul li{
            width: 300px;
            height: 200px;
            margin: 10px;
            background-color: red;
            float: left;
        }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

浮动对元素的影响

浮动对元素的影响:
- 块标签：
  
  不再独占一行
  
  仍然可以设置宽和高
  
  构成了BFC，不再进行父级塌陷
  
  完美支持margin和padding
- 行标签：
  
  可以设置宽高
  
  完美支持padding和margin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动对元素的影响</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 10px;
            padding: 10px;

            /*float: left;*/
        }

        .span1{
            width: 100px;
            height: 30px;
            background-color: #5df2ff;
            margin: 40px;
            padding: 20px;

            float: left;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
    <span class="span1">span1</span>
</body>
</html>

脱离文档流

设置浮动的元素会脱离文档流，浮动的元素，并不属于文档中的普通流，元素漂浮于普通流之上，像浮云一样，但能够左右浮动。
由于浮动这种特性，导致本属于普通流的元素设置浮动后，如果父级不存在其他普通流元素，父级的高度就会为0，如果父级存在其他普通流的元素，父级的高度也会受影响

清除浮动

浮动的概念：让元素脱离文档流，按照指定的方向发生移动，遇到父级的边界或者是上一个浮动元素或者是上一个不浮动兄弟元素就停下来
高度塌陷：
- 浮动元素以后，脱离父级内容区域，父级没有内容撑开自身的高度
- 父级的兄弟元素是按照父级的位置进行布局的，所以页面会乱掉
清除浮动：清除浮动不是不让元素浮动，而是清除浮动对父级带来的影响
清除浮动的方法：
1. 给浮动元素的父级设置高度height（不推荐使用）
  
  缺点：很多情况下高度都是不缺定的所有不适用
2. 以浮制浮，给浮动元素的父元素设置浮动，原理是开启BFC（不推荐使用）
  
  缺点：只有在父级需要浮动的时候，可以这么清除，否则父级的浮动会影响布局
3. overflow：hidden；给父级设置，原理也是开启BFC（可以使用）
  
  优点：简单快捷
  
  缺点：元素超出的时候，会隐藏超出部分
4. br清除浮动：在浮动元素的后边书写一个br。br中书写clear属性，值为all
  
  缺点：增加不必要的元素，不符合样式与结构相分离的要求
5. clear清浮动法：给浮动元素的下边添加一个块元素，书写样式clear:both
  
  缺点：增加额外的结构，不符合语义化标准
6. after伪元素清浮动（推荐）
  
  可以给所有浮动元素的父级一个 clearFix的类名
  
  当一个元素需要清除浮动的时候直接设置clearFix类名即可
```
.clearFix:after{
    content:"\200B";  必须拥有content属性   内容为空
    display: block;   必须块标签才能清浮动
    height: 0;          高度为0 不占用空间
    clear: both;        清除浮动
}

.clearFix{  //兼容ie
    *zoom:1;    //*是css  hack 只有ie6.7 认识
    ie6、7 不支持伪元素，所以需要开启元素的haslayout来清除浮动
}
```

定位

定位的概念：

除非专门指定，否则所有框都在普通流中定位。
也就是说，普通流中的元素的位置由元素在 HTML 中的位置决定。
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素甚至浏览器窗口本身的位置
通过使用 position 属性，我们可以选择 4 种不同类型的定位

position属性是把元素放置到一个静态的、相对的、绝对的、或固定的位置中

position属性的四个值分别对应static、relative、absolute、fixed
left、right、top、bottom可以设置定位的位置

单位为 px 或百分比都可以

left 和 right 同时设置时只有left有效

top 和bottom一起设置时只有top有效

相对定位

position:relative;
让元素相对定位：

元素先放置在未添加定位时候的区域

然后再不改变页面布局的情况下（

1、其他元素没有受到任何影响

2、自身原来的位置也保留

3、和浮动可以一起使用

）进行移动
位置设置

left: 设置元素左边缘到原来左边缘位置的距离

right: 设置元素右边缘到原来右边缘位置的距离

top: 设置元素上边缘到原来上边缘位置的距离

bottom: 设置元素下边缘到原来下边缘位置的距离

在相对定位中：left为正元素向右走

在相对定位中：top为正元素向下走

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style>
        .outer div{
            width: 200px;
            height: 200px;
        }
        .con1{
            background-color: orangered;
            position: relative;
            left: 0px;
            right: 0px;
            float: left;
        }
        .con2{
            background-color: #5df2ff;
            float: left;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="con1"></div>
        <div class="con2"></div>
    </div>
</body>
</html>

包含块：

绝对定位的元素相对于它的包含块进行定位
如何确定一个元素的包含块，完全取决于它自身的position属性：
- 如果一个元素自身的position属性是 static或者是relative：它的包含块就是离他最近的祖先元素或者是格式化上下文。
- 如果一个元素自身的position属性是absolute，
  
  它的包含块就是离他最近的拥有定位属性（值不为static）的元素
- 如果一个元素自身的position属性是fixed
  
  它的包含块就是viewport（视口）
- 补充：如果一个元素的position属性是absolute 或者是 fixed 在下边几种情况下，包含块会发生改变
  
  1、当祖先元素的拥有 transform 或 perspective 属性并且值不为none的时候它也是被当做包含块
  
  2、当祖先元素拥有 filter属性的时候（值不为none）它也可以被当做包含块
- 如果由内向外找不到包含块条件的元素，那么html（根元素）被称作为初始包含块

绝对定位：

不预留任何的空间（脱离页面流)
通过指定当前元素相对于其包含块偏移的量来确定当前元素的位置
绝对定位以后，浮动失效。margin padding仍然可以使用
- left: 0; 让定位元素的左边距离包含块左边为0
- top: 0;让定位元素的上边距离包含块上边为0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style>
        .outer{
            width: 800px;
            height: 500px;
            background-color: red;
            margin: 0 auto;
            overflow: hidden;

            /*transform: rotateX(0deg);*/
            /*perspective: 300px;*/
            position: relative;
        }
        .inner{
            width: 600px;
            height: 300px;
            background-color: deeppink;
            margin: 50px;
            overflow: hidden;
            position: relative;
        }
        .con{
            width: 300px;
            height: 200px;
            background-color: greenyellow;
            margin: 30px;
            position: relative;

        }
        .box{
            width: 100px;
            height: 100px;
            background-color: yellow;
            position: absolute;

            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
 <div class="outer">
        <div class="inner">
            <div class="con">
                con
                <div class="box"></div>
            </div>
        </div>
    </div>
</body>
</html>

固定定位

固定定位：

不为元素预留空间（脱离页面流）
相对于视口（viewport）的位置来定位元素的
滚动页面滚动条的时候，视口不发生改变，元素位置也不会改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>
    <style>
        .con{
            height: 4000px;
            background-color: #3c3c3c;
        }
        .left{
            position: fixed;
            width: 150px;
            height: 300px;
            left: 0;
            top: 100px;
            background-color: red;
            text-align: center;
            line-height: 100px;
            font-size: 30px;
            color: #fff;

            animation: change .2s linear infinite;

        }
        .right{
            position: fixed;
            width: 150px;
            height: 300px;
            right: 0;
            top: 100px;
            background-color: red;
            text-align: center;
            line-height: 100px;
            font-size: 30px;
            color: #fff;
            animation: change .2s linear infinite;
        }

        @keyframes change {
            0%{
                background-color: red;
            }
            20%{
                background-color: green;
            }
            40%{
                background-color: pink;
            }
            60%{
                background-color: yellowgreen;
            }
            80%{
                background-color: grey;
            }
            100%{
                background-color: red;
            }
        }
    </style>
</head>
<body>
    
    <div class="con"></div>
    <div class="gg">
        <div class="left">
            开局一条狗
            <br>
            装备全靠爆
        </div>
        <div class="right">
            我是砸砸辉
            <br>
            是兄弟就来
            <br>
            砍我吧
        </div>
    </div>
</body>
</html>

定位位置的设置

定位位置是通过 left right top bottom来设置的
值可以是

像素

轮播图布局练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片轮播布局</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .outer{
            width: 520px;
            border: 1px solid #5df2ff;
            margin: 100px auto 0;
            position: relative;
        }
        .inner{
            width: 520px;
            overflow-x: scroll;
        }
        .con{
            width: 2600px;
            overflow: hidden;
        }
        .con img{
            width: 520px;
            height: 280px;
            float: left;
        }
        .left{
            width: 30px;
            height: 30px;
            font-size: 24px;
            line-height: 30px;
            text-align: center;
            background-color: rgba(0,0,0,.5);
            color: #fff;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }
        .right{
            width: 30px;
            height: 30px;
            font-size: 24px;
            line-height: 30px;
            text-align: center;
            background-color: rgba(0,0,0,.5);
            color: #fff;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
        }
        .page{
            position: absolute;
            bottom: 20px;
            left: 50%;
            /*让元素向左移动自身的一半*/
            transform: translateX(-50%);
        }
        .page li{
            width: 20px;
            height: 20px;
            background-color: rgba(255,255,255,.4);
            border-radius: 50%;
            float: left;
            margin: 3px;
        }
        .page .active{
            background-color: rgba(255,255,255,1);
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">
            <div class="con">
                <img src="../images/01.jpg" alt="">
                <img src="../images/02.jpg" alt="">
                <img src="../images/03.jpg" alt="">
                <img src="../images/04.jpg" alt="">
                <img src="../images/05.jpg" alt="">
            </div>
            <p class="left">&lt;</p>
            <p class="right">&gt;</p>
            <ul class="page">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>

</body>
</html>

z-index属性：

指定了一个定位属性的元素及其后代的层叠顺序
只有定位元素（非static值）拥有 z-index属性
z-index的值没有单位理论上来说 z-index的值大的元素会覆盖小的元素
定位元素默认的z-index 的值是 auto
如果一个拥有z-index属性的定位元素中子元素也设置了z-index

那么子元素会重新创建一个层叠上下文，子元素的z-index只能在当前的层叠上下文中对比排列

元素层叠顺序：

z-index为负< background< border< 块级元素 <浮动元素 <内联元素 <没有设置z-index的定位元素 < z-index为正

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>z-index属性</title>
    <style>
        .outer{
            width: 500px;
            height: 300px;
            background-color: rgba(34,45,124,.5);
            position: absolute;
            z-index: 1;
        }
        .outer .con{
            width: 300px;
            height: 200px;
            background-color: rgba(111,43,21,.5);
            position: absolute;
            z-index: 1000;
        }
        .inner{
            width: 300px;
            height: 200px;
            background-color: rgba(234,124,35,1);
            position: absolute;
            top: 180px;
            z-index: 4;
        }
    </style>
</head>
<body>
<div class="outer">
        <div class="con">

        </div>
    </div>
    <div class="inner"></div>
</body>
</html>

z-index练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>z-index练习</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .outer{
            overflow: hidden;
            background-color: #ccc;
        }
        .outer li{
            float: left;
            width: 300px;
            height: 200px;

            margin: 100px;
            position: relative;
        }
        .outer li .con{
            width: 300px;
            height: 200px;
            background-color: pink;
            position: relative;
            z-index: 4;
        }
        .outer li .show{
            width: 300px;
            height: 50px;
            background-color: #5df2ff;
            position: absolute;
            bottom: -25px;
            right: -25px;
            z-index: 3;
        }
    </style>
</head>
<body>
    <!--
        如果想让一个元素拥有z-index属性，并且还不想影响它的其他正常布局
        我们可以给这个元素一个 position：relative;
    -->
    <ul class="outer">
        <li>
            <div class="con"></div>
            <div class="show"></div>
        </li>
        <li>
            <div class="con"></div>
            <div class="show"></div>
        </li>
        <li>
            <div class="con"></div>
            <div class="show"></div>
        </li>
        <li>
            <div class="con"></div>
            <div class="show"></div>
        </li>
        <li>
            <div class="con"></div>
            <div class="show"></div>
        </li>
        <li>
            <div class="con"></div>
            <div class="show"></div>
        </li>
    </ul>
</body>
</html>

定位练习2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位练习</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .outer{

        }
        .outer li{
            position: relative;
            float: left;
        }
        .outer li img{
            display: block;
            width: 313px;
            height: 220px;
        }
        .outer li p{
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            color: #fff;
            /*背景半透明解决方案1：*/
            /*background-color: rgba(0,0,0,.5);*/


            /*背景半透明解决方案2:opacity*/
            /*opacity: .5;
            background-color: black;*/

            /*背景半透明解决方案3:*/
            background: url("../images/black.png") 0 0 repeat;
        }
    </style>
</head>
<body>
    <ul class="outer">
        <li>
            <img src="../images/01.jpg" alt="">
            <p>今天天气真好啊啊</p>
        </li>
    </ul>
</body>
</html>

CSS其他

CSS精灵

精灵图（雪碧图、css sprites）:

是一种网页图片的应用处理方式，允许将一个页面中很多零星的小图片包含到一张大图中去，当访问页面的时候，就不会一张张的去请求显示图片

对于当前的网络来说，小于200k的文件加载速度是一样的

通过background-position属性将图片定位到需要的位置即可
优点：

减少图片大小

减少服务器请求次数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>精灵图</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .outer{
            width: 101px;
            overflow: hidden;
            border: 1px solid #3c3c3c;
            margin: 100px auto 0;
        }
        .box{
            overflow: hidden;
            width: 102px;
            margin-top: -1px;
        }
        .box li{
            width: 50px;
            height: 80px;
            border-right: 1px solid #3c3c3c;
            border-top: 1px solid #3c3c3c;
            float: left;
        }
        .box li i{
            width: 45px;
            height: 40px;
            display: block;
            margin: 10px auto 0;
            background: url("../images/jd_2.png") 0 0 no-repeat;
        }
        .box li:nth-child(1) i{
            background-position: -1px -3px;
        }
        .box li:nth-child(2) i{
            background-position: -70px -5px;
        }
        .box li:nth-child(3) i{
            background-position: -2px -73px;
        }
        .box li:nth-child(4) i{
            background-position: -70px -73px;
        }

        .box li p{
            text-align: center;
            margin-top: 5px;
        }
    </style>
</head>
<body>
<div class="outer">


    <ul class="box">
        <li>
            <i></i>
            <p>加油卡</p>
        </li>
        <li>
            <i></i>
            <p>白条</p>
        </li>
        <li>
            <i></i>
            <p>机票</p>
        </li>
        <li>
            <i></i>
            <p>电影票</p>
        </li>
    </ul>
</div>
</body>
</html>

a标签的4个伪类

四个伪类

link：当有链接属性时

visited:当连接被访问过以后

hover：当连接被鼠标悬浮的时候

active:当连接在激活状态的时候
位置不能互换

这4个选择器优先级是一样的。

顺序改变就可能后边覆盖前边的

比如visited写在最后，那么当连接被访问过后，访问过后的颜色就会覆盖hover和active
记忆：爱恨法则 love-hate
hover适用于多数其他元素，并且伪元素也可以使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a标签的4个伪类</title>
    <style>
        a{
            color: pink;
        }
        .a1:link{
            color: yellow;
        }
        .a2:visited{
            color: blueviolet;
        }
        .a3:hover{
            color:red;
        }
        .a4:active{
            color: #2ba5eb;
        }

    </style>
</head>
<body>

<a href="###" class="a1">link 当有链接属性时</a>
<a href="####" class="a2">visited 当连接被访问过之后</a>
<a href="####" class="a3">hover 当连接被鼠标悬浮的时候</a>
<a href="####" class="a4">active:当连接在激活状态的时候</a>


<a href="##" class="a1 a2 a3 a4">同时设置4个伪类</a>

</body>
</html>

a标签伪类的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hover的下拉效果</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .outer{
            width: 300px;
            border: 1px solid #ffa000;
            position: relative;
        }
        .outer p{
            width: 300px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            color: #fff;
            background-color: #ccc;
        }
        .outer .con{
            position: absolute;
            width: 400px;
            left: 0;
            top:50px;
            background-color: #2ba5eb;

            display: none;
        }
        .con li{
            line-height: 30px;
        }

        .outer:hover>.con{
            display: block;
        }
        .outer:hover>p{
            background-color: red;
        }
        .outer .con li:hover{
            background-color: deeppink;
        }
    </style>
</head>
<body>
    <div class="outer">
        <p>我是一个标题</p>
        <ul class="con">
            <li>新闻</li>
            <li>娱乐</li>
            <li>我的</li>
            <li>天气</li>
            <li>真好</li>
        </ul>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hover的下拉效果</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .outer_fathor{
            /*overflow: hidden;*/
        }
        .outer{
            width: 300px;
            border: 1px solid #ffa000;
            position: relative;
            float: left;
        }
        .outer p{
            width: 300px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            color: #fff;
            background-color: #ccc;
        }
        .outer .con{
            position: absolute;
            width: 400px;
            left: 0;
            top:50px;
            background-color: #2ba5eb;

            display: none;
        }
        .con li{
            line-height: 30px;
        }

        .outer:hover>.con{
            display: block;
        }
        .outer:hover>p{
            background-color: red;
        }
        .outer .con li:hover{
            background-color: deeppink;
        }
    </style>
</head>
<body>
    <ul class="outer_fathor">
        <li class="outer">
            <p>我是一个标题</p>
            <ul class="con">
                <li>新闻</li>
                <li>娱乐</li>
                <li>我的</li>
                <li>天气</li>
                <li>真好</li>
            </ul>
        </li>
        <li class="outer">
            <p>我是一个标题</p>
            <ul class="con">
                <li>新闻</li>
                <li>娱乐</li>
                <li>我的</li>
                <li>天气</li>
                <li>真好</li>
            </ul>
        </li>
        <li class="outer">
            <p>我是一个标题</p>
            <ul class="con">
                <li>新闻</li>
                <li>娱乐</li>
                <li>我的</li>
                <li>天气</li>
                <li>真好</li>
            </ul>
        </li>
        <li class="outer">
            <p>我是一个标题</p>
            <ul class="con">
                <li>新闻</li>
                <li>娱乐</li>
                <li>我的</li>
                <li>天气</li>
                <li>真好</li>
            </ul>
        </li>
    </ul>

</body>
</html>

伪元素

常用伪元素

伪元素可以理解为“虚假的元素”，他们虽然会在内容元素的前后插入额外的元素，但并不会在文档中生成，在文档的源代码当中并不能够找到它们。
虽然在结构上是虚假元素，但是在表现上和普通元素没有什么区别，能为它们添加任何样式，比如改变文字颜色、添加背景、调整字体大小等等

after:

在当前元素的最后边插入一个伪元素

before：

在当前元素的最前边插入一个伪元素

伪元素必须拥有content属性，才能生效，伪元素默认是一个行内元素，伪元素对其他属性基本都是支持的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素</title>
    <style>
        .box{
            width: 200px;
            height: 50px;
            background-color: red;
            position: relative;
        }
        .box:after{
            content:"没有我你是不行的";
            display: block;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .box:before{
            content:"hahahah";
            display: block;
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 300px;
            top: 80px;
        }
    </style>
</head>
<body>

    <div class="box">我是一个box</div>
</body>
</html>

其他伪元素

first-letter伪元素：

把一个块级元素的第一个文字选中，可以单独进行控制
first-line伪元素

把一个块级元素的第一行选中，单独进行控制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>其他伪元素</title>
    <style>
        p{
            width: 300px;
            line-height: 1.6;
            background-color: red;
        }
        p:first-letter{
            font-size: 30px;
            color: #fff;
        }
        p:first-line{
            font-size: 24px;
            color: yellow;
        }
    </style>
</head>
<body>
    <p>今天天气真的好今天天气真的好今天天气真的好今天天气真的好今天天气真的好今天天气真的好今天天气真的好今天天气真的好今天天气真的好今天天气真的好今天天气真的好今天天气真的好今天天气真的好今天天气真的好今天天气真的好今天天气真的好今天天气真的好今天天气真的好今天天气真的好</p>
</body>
</html>

样式重置

什么是样式重置（css reset）

将html的默认样式全部去掉，需要的时候我们自行添加。

统一页面风格
为什么是使用样式重置：

多数元素拥有自己的默认样式，并且我们很多都不需要

默认样式在不同浏览器中呈现的也不一定相同，就会导致浏览器展示页面不相同的现象

整个页面中固定的风格代码，可以在样式重置中直接书写，不用每一个都设置
为什么不使用

样式重置简单，不够完整一些demo可以使用，真正项目不推荐使用，请使用css reset

*通配符匹配所有的标签，影响很大效率很低
normalize.css是什么

normalize觉得，存在即合理。保留了应该存在的默认样式，并且把每一个默认样式在浏览器中中统一了

/* 清除内外边距 */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,
dl, dt, dd, ul, ol, li,
pre,
fieldset, lengend, button, input, textarea,
th, td {
    margin: 0;
    padding: 0;
}

/* 设置默认字体 */
body,
button, input, select, textarea { /* for ie */
    /*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/
    font: 16px/1.3 "Microsoft YaHei",Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; /* 用 ascii 字符表示，使得在任何编码下都无问题 */
}

h1 { font-size: 18px; /* 18px / 12px = 1.5 */ }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4, h5, h6 { font-size: 100%; }

address, cite, dfn, em, var, i{ font-style: normal; } /* 将斜体扶正 */
b, strong{ font-weight: normal; } /* 将粗体扶细 */
code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */

/* 重置列表元素 */
ul, ol { list-style: none; }

/* 重置文本格式元素 */
a { text-decoration: none; }


/* 重置表单元素 */
legend { color: #000; } /* for ie6 */
fieldset, img { border: none; }
button, input, select, textarea {
    font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */
}

/* 重置表格元素 */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* 重置 hr */
hr {
    border: none;
    height: 1px;
}

/* 让非ie浏览器默认也显示垂直滚动条，防止因滚动条引起的闪烁 */
html { overflow-y: scroll; }

最小/最大宽度/高度

使用 min-height 来设置最小高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>最小高度</title>
    <style>
        .outer{
            width: 200px;
            border: 1px solid #000;
        }
        header,footer{
            text-align: center;
            height:40px;
            line-height: 40px;
        }
        .con{
            border: 1px solid red;
            line-height: 1.7;
            min-height: 100px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <header>
            头部
        </header>
        <div class="con">
            文章1 <br>
            文章1 <br>
            文章1 <br>
            文章1 <br>
            文章1 <br>
            文章1 <br>
            文章1 <br>
            文章1 <br>
            文章1 <br>
        </div>
        <footer>
            底部
        </footer>
    </div>
</body>
</html>

min-width设置最小宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>最小宽度</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .head_out{
            width: 100%;
            border-bottom: 4px solid #5ab3f4;
            min-width: 1000px;
        }
        .head{
            width: 1000px;
            margin:0 auto;
            height: 100px;
            background-color: #ffa000;
        }
    </style>
</head>
<body>
<!--
    案例中，当浏览器缩小窗口，生成横向滚动条的时候，
    head_out  width：100%的宽度  是屏幕的宽度，当滑动横向滚动条的时候，这个元素的宽度没有达到主要内容1000px的要求
    所以可以给head_out设置最小宽度  min-width
-->
    <div class="head_out">
        <div class="head"></div>
    </div>
</body>
</html>

最大宽度和最大高度

宽度：width min-width max-width

高度：height min-height max-height

当3个冲突后怎么办：

当min-width和max-width 冲突的时候，min-width是优先的
当width和 min或max冲突以后，min或者max直接无视width的存在（无论是否添加！important）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            height: 100px;
            background-color: red;
            min-width: 800px;
            max-width: 700px;
            width: 400px !important;
        }
    </style>
</head>
<body>

<div class="box">

</div>
</body>
</html>

css hack

由于不同的厂商的浏览器，或者是同一个浏览器不同的版本（ie），对css的解析和认识不完全一样,可能会导致不同浏览器显示的效果不相同,那么我们需要针对某个浏览器，去写不同的样式，让代码能够兼容所有的浏览器
比如：

after伪元素清浮动，只有ie8及以上支持，所以要针对ie6、7书写一个开启haslayout

*代表ie6,7 zoom代表开启haslayout 所以可以书写 *zoom：1；

那么这个代码只有ie 6 7 认识
为什么使用css hack

第一种理解：让我们css 的代码兼容不同的浏览器

第二种理解：我们可以为不同的浏览器定制不同的样式

css hack有3种表现方式：

1、css属性前缀法 2、选择器前缀法 3、IE条件注释法

IE条件注释法

主要针对IE的版本

    gt ：大于
    lt：小于
    gte：大于等于
    lte：小于等于
    ！：非当前
    目前条件注释只支持到ie9及以下  其他浏览器不支持条件注释

css属性前缀法

*color：ie 5,6,7
+color：ie 5,6,7
#color：ie 5,6,7
-color：ie 5、6
color\0:ie 9 10 11
color\9:ie 6 7 8 9 10
color\9\0:ie 8 9 10

选择器前缀法

将前缀写在选择器前边，控制选择器是否针对当前浏览器有效
*html  ie 5 6
*+html ie7
:root  ie9 10 11

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css hack</title>
    <style>
        .clearFix{
            *zoom:1;
            color\0\9:yellow;
        }
        *html .clearFix{
            width: 1000px;
        }
        .clearFix:after{
            content: "\200B";
            height: 0;
            display: block;
            clear: both;
        }
    </style>
    <!--[if IE]>
        <style>
            .clearFix{
                background-color: pink;
                width: 100px;
                height: 100px;
            }
        </style>
    <![endif]-->

    <!--[if lt IE 7]>
    <style>
        .clearFix{
            background-color: green;
            width: 100px;
            height: 100px;
        }
    </style>
    <![endif]-->
</head>
<body>
<div class="clearFix">
    今天天气真好
</div>
</body>
</html>

BFC(块级格式化上下文)

它是页面 CSS 视觉渲染的一部分，用于决定块级盒的布局及浮动相互影响范围的一个区域。

BFC 的创建

以下元素会创建 BFC：

根元素（html）
浮动元素（float 不为 none）
绝对固定定位元素（position 为 absolute 或 fixed）
表格的标题和单元格（display 为 table-caption，table-cell）
匿名表格单元格元素（display 为 table 或 inline-table）
行内块元素（display 为 inline-block）
overflow 的值不为 visible 的元素

BFC 的范围

A block formatting context contains everything inside of the element creating it, that is not also inside a descendant element that creates a new block formatting context.

直译过来就是, BFC包含创建它的元素的所有子元素, 但不包括创建了新BFC的子元素的内部元素
简单来说，子元素如果又创建了一个新的 BFC，那么它里面的内容就不属于上一个 BFC 了，这体现了 BFC 隔离的思想
也就是所说，一个元素不能同时存在于两个 BFC 中。

BFC 的特性

BFC 除了会创建一个隔离的空间外，还具有以下特性：

BFC 内部的块级盒会在垂直方向上一个接一个排列

同一BFC下的相邻块级元素可能发生外边距折叠，创建新的BFC可以避免外边距折叠

<style>
    .top {
      height: 50px;
      margin: 10px 0;
      background: yellow;
    }

    .outer {
      background: gray;
      height: 50px;
      /* 创建新的 BFC 就可以避免这两个相邻块级盒间的外边距折叠，尝试去掉注释后看效果 */
      /* overflow: auto; */
    }

    .inner {
      height: 20px;
      margin: 10px 0; /* 这里设置了inner box的 margin，很明显没有生效 */
      background: green;
    }
</style>
<div class="top">TOP</div>
<div class="outer">
  <div class="inner">INNER</div>
</div>

每个元素的外边距盒（margin box）的左边与包含块边框盒（border box）的左边相接触（从右向左的格式化，则相反），即使存在浮动也是如此

<style>
    .box {
      background: gray;
    }

    .left {
      /* 即使存在浮动元素，BFC中其他元素的margin box的左边也会与包含块border box的左边相接触 */
      /* 在这个例子中，黄框向左浮动，脱离了普通流，此时绿框被定位到包含块的左上角 */
      float: left;
      width: 100px;
      height: 80px;
      background: yellow;
      opacity: .5;
    }

    .right {
      width: 200px;
      height: 50px;
      background: green;
      opacity: .5;
    }
</style>
<div class='box'>
  <div class="left"></div>
  <div class="right"></div>
</div>

浮动盒的区域不会和BFC重叠

<style>
    .wrapper {
      height: 100px;
      background: gray;
    }

    .float {
      float: left;
      width: 80px;
      height: 100px;
      background: green;
      opacity: .6;
    }

    .bfc {
      width: 200px;
      height: 50px;
      background: yellow;
      /* 如果不创建 BFC，浮动盒的区域会和黄框重叠 */
      /* 尝试去掉 overflow 注释，使黄框创建 BFC，观察 BFC 区域和浮动盒的重叠情况 */
      overflow: hidden; 
    }
</style>
<div class="wrapper">
  <div class="float"></div>
  <div class="bfc">
  </div>
</div>

计算BFC的高度时，浮动元素也会参与计算

<style>
    .bfc {
      /* 计算 BFC 高度时，包含 BFC 内所有元素，即使是浮动元素也会参与计算 */
      /* 这一特性可以用来解决浮动元素导致的高度塌陷 */
      /* 如果父元素没有创建 BFC，在计算高度时，浮动元素不会参与计算，此时就会出现高度塌陷 */
      overflow: auto;
      background: gray;
    }

    .float {
      float: left;
      width: 100px;
      height: 80px;
      background: green;
    }

    .inner {
      height: 50px;
      background: yellow;
    }

</style>
<div class="bfc">
  <div class="float"></div>
  <div class="inner"></div>
</div>

BFC 的应用

自适应多栏布局

中间栏创建 BFC，左右栏宽度固定后浮动。由于盒子的 margin box 的左边和包含块 border box 的左边相接触，同时浮动盒的区域不会和 BFC 重叠，所以中间栏的宽度会自适应

<style>
    .wrapper div {
      height: 200px;
    }

    .left {
      float: left;
      width: 200px;
      background: gray;
    }

    .right {
      float: right;
      width: 200px;
      background: gray;
    }

    .main {
      /* 中间栏创建 BFC */
      /* 由于 盒子的 margin box 的左边和包含块 border box 的左边相接触 */
      /* 同时 BFC 区域不会和浮动盒重叠，所以宽度会自适应 */
      overflow: auto;
      background: cyan;
    }
</style>
<div class="wrapper">
   <div class="left"></div>
   <div class="right"></div>
   <div class="main"></div>
</div>

防止外边距折叠

创建新的 BFC ，让相邻的块级盒位于不同 BFC 下可以防止外边距折叠
清除浮动

BFC 内部的浮动元素也会参与高度计算，可以清除 BFC 内部的浮动

IFC的规则

在一个行内格式化上下文中，盒是一个接一个水平放置的，从包含块的顶部开始
这些盒之间的水平margin，border和padding都有效
盒可能以不同的方式竖直对齐：以它们的底部或者顶部对齐，或者以它们里面的文本的基线对齐

空元素和替换元素

空元素：

在html中，一个不可能存在子节点（注释节点，文本节点，元素节点）的元素就叫做空元素
通常在空元素上使用闭合标签是无效的

<input type="text"></input> ：闭合标签无效

br、hr、img、input、link、meta、source

替换元素

浏览器根据元素的标签和属性，来决定元素具体显示的内容
img、input、textarea、select、video、iframe是替换元素
audio、canvas标签在某些时候也是替换元素

calc方法

calc()

我们可以把它当做一个函数，其实他是calculate（计算）缩写。

是css3提供的一个新功能，主要用来计算长度

我们可以用它来给padding margin width height font-size等等计算大小值值是一个动态的
注意

使用+ - * /进行运算

可以使用百分比 px em rem等单位

可以单位混合计算

在使用的时候，尽量在 + - * / 前后添加一个空格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>calc方法</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: calc(100% - 200px);
            height: calc(100px / 2 + 100px);
            margin: 0 auto;
            background-color: red;
        }
    </style>
</head>
<body>
    <!--书写一个效果，让div永远距离两边都是100px
    计算div的宽度-->
    <div class="box"></div>
</body>
</html>

常见布局

粘连布局

又称作 stick footer布局
如果页面不够长的话 footer粘在视窗的底部
如果页面内容长度超出，footer就会被页面向下推送出去

粘连布局方法1

给inner最小高度是 100%
让footer给margin-top：-50px (自身高度)上去（main元素和footer重叠）
给main元素一个padding-bottom 50px 就算重叠文字也显示不到padding中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>粘连布局</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        .outer{
            height: 100%;
        }
        .inner{
            min-height: 100%;
        }
        .main{
            padding-bottom: 50px;
        }
        footer{
            height: 50px;
            background-color: #5ab3f4;
            margin-top: -50px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">
            <div class="main">
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>   
            </div>
        </div>
        <footer></footer>
    </div>
</body>
</html>

粘连布局方法2

给inner设置最小高度是100%
给inner设置padding-bottom是50px
给inner设置为怪异盒子模型：box-sizing：border-box
让footermargin-top为负上来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>粘连布局</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        .outer{
            height: 100%;
        }
        .inner{
            min-height: 100%;
            padding-bottom: 50px;
            /*设置为怪异盒子模型的方式：
            高度就包含了padding  总共加起来是百分百  并且main不会显示在inner的padding中*/
            box-sizing: border-box;
        }
        .main{

        }
        footer{
            height: 50px;
            background-color: #5ab3f4;

            margin-top: -50px;
        }
    </style>
</head>
<body>

    <div class="outer">
        <div class="inner">
            <div class="main">
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
            </div>
        </div>
        <footer></footer>
    </div>
</body>
</html>

粘连布局方法3

直接计算inner的最小高度是 100% - 50px
footer在main元素小的时候，刚好跟着inner 在最下边。否则就被inner撑下去

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>粘连布局</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        .outer{
            height: 100%;
        }
        .inner{
            min-height: calc(100% - 50px);
            /*padding-bottom: 50px;*/
        }
        .main{

        }
        footer{
            height: 50px;
            background-color: #5ab3f4;

            /*margin-top: -50px;*/
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">
            <div class="main">
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
            </div>
        </div>
        <footer></footer>
    </div>
</body>
</html>

水平垂直居中

水平垂直居中方法1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01.水平垂直居中方法1</title>
    <style>
        .box{
            width: 700px;
            height: 500px;
            background-color: pink;
            margin: 40px auto;
            position: relative;
        }
        .con{
            width: 300px;
            height: 200px;
            background-color: #009ff2;
            position: absolute;
            /*left: 50%;*/
            /*在已知被居中元素的宽高的时候：
                在定位的时候，直接使用calc方法 计算left的百分之50 减去自身的宽度
                一次性定位结束*/
            left:calc(50% - 150px);
            top:calc(50% - 100px);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="con"></div>
    </div>
</body>
</html>

水平垂直居中方法2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01.水平垂直居中方法1</title>
    <style>
        .box{
            width: 700px;
            height: 500px;
            background-color: pink;
            margin: 40px auto;
            position: relative;
        }
        .con{
            width: 300px;
            height: 200px;
            background-color: #009ff2;
            position: absolute;
            /*left: 50%;*/
            /*在已知被居中元素的宽高的时候：
                在定位的时候，定位设置50%   里边元素的左上角在容器的正中心，需要将元素向左和上 移动自身的一半 达到居中
                使用margin负值 将元素移动（需要自己算出来一半是多少）
            */
            left:50%;
            top:50%;
            margin-left: -150px;
            margin-top: -100px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="con"></div>
    </div>
</body>
</html>

水平垂直居中方法3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平垂直居中方法3</title>
    <style>
        .box{
            width: 700px;
            height: 500px;
            background-color: pink;
            margin: 40px auto;
            position: relative;
        }
        .con{
            width: 300px;
            height: 200px;
            background-color: #009ff2;
            position: absolute;
            /*left: 50%;*/
            /*在不知道被居中元素的宽高的时候：
                在定位的时候，定位设置50%   里边元素的左上角在容器的正中心，需要将元素向左和上 移动自身的一半 达到居中
               使用变形transform属性里的位移值 translate  translate的百分比是参考自身宽高的，所有不需要知道元素宽高即可
            */
            left:50%;
            top:50%;
            /*transform是变形的属性，里边包含一个位移的值， 百分比是相对自身宽度的*/
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="con"></div>
    </div>
</body>
</html>

水平垂直居中方法4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平垂直居中方法4</title>
    <style>
        .box{
            width: 700px;
            height: 500px;
            background-color: pink;
            margin: 40px auto;
            position: relative;
        }
        .con{
            width: 300px;
            height: 200px;
            background-color: #009ff2;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="con"></div>
    </div>
</body>
</html>

方法4其他应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>方法4应用</title>
    <style>
        html,body{
            height: 100%;
            margin: 0;
        }
        .outer{
            width: 100%;
            height: 100%;
        }
        .outer>header{
            height: 100px;
            background-color: #009ff2;
            line-height: 100px;
            text-align: center;
            font-size: 40px;
            color: #fff;
            position: relative;
        }
        .outer>section{
            /*width: 100%;*/
            background-color: #0ee69c;

            /*当绝对定位元素没有设置宽高的时候，我们设置了left和right  或者同时设置了top和bottom*/
            /*那么元素就会自适应的把自身的宽高撑开，来达到相应的要求*/
            position: absolute;
            top: 100px;
            left: 0;
            bottom: 0;
            right: 0;

            /*因为4周不需要margin*/
            /*margin: auto;*/
        }
    </style>
</head>
<body>
<div class="outer">
    <header>
        header
    </header>
    <section></section>
</div>
</body>
</html>

三列布局

全浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06.三列布局-全浮动方法</title>
    <style>
        .outer{

        }
        .left{
            width: 100px;
            height: 200px;
            background-color: red;
            float: left;
        }
        .center{
            width: calc(100% - 200px);
            height: 200px;
            background-color: #009ff2;
            float: left;
        }
        .right{
            width: 100px;
            height: 200px;
            background-color: pink;
            float: left;
        }
    </style>
</head>
<body>
<!--
    方法一：全浮动，使用calc设置宽度
        不推荐使用calc   兼容不好
        并且center不是优先加载
-->
    <div class="outer">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
</body>
</html>

浮动方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06.三列布局-全浮动方法</title>
    <style>
        .outer{

        }
        .left{
            width: 100px;
            height: 200px;
            background-color: red;
            float: left;
        }
        .right{
            width: 100px;
            height: 200px;
            background-color: pink;
            float: right;
        }
        .center{
            height: 200px;
            background-color: #009ff2;
            margin: 0 100px;
        }

    </style>
</head>
<body>
<!--
    方法二：left和right浮动，center不设置宽度

        center必须写在最后，center不是优先加载
-->
    <div class="outer">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>
    </div>
</body>
</html>

定位方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06.三列布局-全浮动方法</title>
    <style>
        .outer{
            position: relative;
        }
        .left{
            width: 100px;
            height: 200px;
            background-color: red;
            position: absolute;
            left: 0;
            top: 0;
        }
        .right{
            width: 100px;
            height: 200px;
            background-color: pink;
            position: absolute;
            right: 0;
            top: 0;
        }
        .center{
            height: 200px;
            background-color: #009ff2;
            margin: 0 100px;
        }

    </style>
</head>
<body>
<!--
    方法三： center位置随便写，左右margin100px，不要设置宽度
        left和right分别定位在两边

        缺点：
            无法进行等高布局
-->
    <div class="outer">
        <div class="center"></div>
        <div class="left"></div>
        <div class="right"></div>

    </div>
</body>
</html>

等高布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>等高布局</title>
    <style>
        .outer{
            overflow: hidden;
        }
        .left{
            width: 100px;
            background-color: red;
            float: left;

            padding-bottom: 10000px;
            margin-bottom: -10000px;
        }
        .right{
            width: 100px;
            background-color: pink;
            float: right;

            padding-bottom: 10000px;
            margin-bottom: -10000px;
        }
        .center{
            background-color: #009ff2;
            margin: 0 100px;
            padding-bottom: 10000px;
            margin-bottom: -10000px;
        }

    </style>
</head>
<body>
    <!--
        等高布局：
            将元素padding-bottom设置很大一个值，
            然后给父级设置overflow：hidden
            给元素设置margin-bottom-很大的值，当小到一定程度，父级就是由其他元素撑开
    -->
    <div class="outer">
        <div class="left">
            left <br>
            left <br>
            left <br>
            left <br>
            left <br>
            left <br>
            left <br>
        </div>
        <div class="right">
            right <br>
        </div>
        <div class="center">
            center <br>
            center <br>
            center <br>
        </div>
    </div>
</body>
</html>

圣杯布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06.三列布局-圣杯方法</title>
    <style>
        .out{
            overflow: hidden;
        }
        .outer{
            width: auto;
            margin: 0 100px;
        }
        .center{
            width: 100%;
            height: 200px;
            background-color: red;
            float: left;

            padding-bottom: 10000px;
            margin-bottom: -10000px;
        }
        .left{
            width: 100px;
            height: 200px;
            background-color: #009ff2;
            float: left;
            margin-left: -100%;
            position: relative;
            left: -100px;

            padding-bottom: 10000px;
            margin-bottom: -10000px;
        }
        .right{
            width: 100px;
            height: 200px;
            background-color: #0ee69c;
            float: left;

            margin-left: -100px;
            position: relative;
            right: -100px;

            padding-bottom: 10000px;
            margin-bottom: -10000px;
        }
    </style>
</head>
<body>
<!--
    保证center优先加载，所有center放在第一个

    内容足够小的时候，内容会换行
-->
<div class="out">
    <div class="outer">
        <div class="center">
        </div>
        <div class="left">
        </div>
        <div class="right">
        </div>
    </div>

</div>
</body>
</html>

双飞翼布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06.三列布局-双飞翼方法</title>
    <style>
        .outer{
            overflow: hidden;
        }
        .main{
            float: left;
            width: 100%;
        }
        .center{
            margin: 0 100px;
            /*height: 100px;*/
            background-color: red;

            padding-bottom: 10000px;
            margin-bottom: -10000px;
        }
        .left{
            float: left;
            width: 100px;
            /*height: 100px;*/
            background-color: pink;
            margin-left: -100%;
            padding-bottom: 10000px;
            margin-bottom: -10000px;
        }
        .right{
            float: left;
            width: 100px;
            /*height: 100px;*/
            background-color: #009ff2;
            margin-left: -100px;
            padding-bottom: 10000px;
            margin-bottom: -10000px;
        }
    </style>
</head>
<body>
<!--
    1.给center添加一个父级main（main全屏，center添加两边的margin），让main和left right进行排列
    2.给left margin-left -100%  直接到位  ，  right margin-left:-100px  也直接到位
-->

    <div class="outer">
        <div class="main">
            <div class="center">
                <br> center
                <br> center
                <br> center
                <br> center
                <br> center
                <br> center
            </div>
        </div>
        <div class="left">
            <br> center
            <br> center
        </div>
        <div class="right">
            <br> center
            <br> center
        </div>
    </div>


</body>
</html>

HTML5

HTML5新标签

html标签的语义化

语义化标签更具有可读性，便于团队的开发和维护
没有css的情况下，网页也能很好的呈现出内容结构和代码结构
关于SEO，搜索引擎更能理解到网页中各部分之间的关系，更准确更快速搜索信息

用来定义文档（网页或者是某一个段落）的页眉（头部）
可能包含一些标题元素，也可能包含其他元素，比如logo、搜索框、作者信息等等
<header> 元素不是分段内容，而是属于独立分块的头部.因此不会往大纲中引入新的段落。也就是说，<header> 元素通常用于包含周围部分的标题（h1 至 h6 元素），但这不是必需的。
完成的网页或者是完整的块（网页的一个独立区域）是头部、内容、尾部组成的（并不是强制）
整个页面没有header限制个数，可以使用多个
<header> 元素不能作为 <address>、<footer> 或另一个 <header> 元素的子元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>header标签</title>
</head>
<body>
    <div>
        <!--头部区域-->
        <header>
            <h1>你看我像不像logo</h1>
            <nav>
                <a href="###">news</a>
                <a href="###">my</a>
                <a href="###">tiyu</a>
            </nav>
        </header>
        <!--内容区域-->
    </div>
</body>
</html>

footer标签代表一个网页或者章节内容的底部区域（页脚）
footer通常包含章节的作者，版权数据和文章的其他链接
其他和header同理，比如不是独立的区域，应该是隶属于一个章节或者是网页
<footer> 元素不能作为 <address>、<header> 或另一个 <footer> 元素的子元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>footer</title>
</head>
<body>
    <div>
        <!--头部区域-->
        <header>
            <h1>你看我像不像logo</h1>
            <nav>
                <a href="###">news</a>
                <a href="###">my</a>
                <a href="###">tiyu</a>
            </nav>
        </header>
        <!--内容区域-->

        <!--底部区域-->
        <footer>
            <div>
                <h3>友情链接</h3>
                <a href="###">百度</a>
                <a href="###">阿里巴巴</a>
                <a href="###">阿里妈妈</a>
            </div>
        </footer>
    </div>
</body>
</html>

nav标签

<nav>元素表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。
导航部分的常见示例是菜单，目录和索引
并不是所有的导航都需要用nav标签，只是当前页面中比较重要的热门的可以使用nav，比如在底部导航，就没有必要加入链接
一个网页可能会有多个导航，比如整个网页的导航，也可以是某一块区域的导航

注意 nav使用有两种方法：

当nav中的导航列表是静态的：nav中直接嵌套a标签使用即可
当nav中的导航是动态的（需要滑动查看更多，主要出现在移动端）：nav中最好嵌套ul>li>a标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>nav标签</title>
</head>
<body>
    <div>
        <!--头部区域-->
        <header>
            <h1>你看我像不像logo</h1>
            <nav>
                <a href="###">news</a>
                <a href="###">my</a>
                <a href="###">tiyu</a>
                <a href="###">tiyu</a>
                <a href="###">tiyu</a>
                <a href="###">tiyu</a>
            </nav>
            <!--
            <nav>
                <ul>
                    <li><a href="###">news</a></li>
                    <li><a href="###">news</a></li>
                    <li><a href="###">news</a></li>
                    <li><a href="###">news</a></li>
                    <li><a href="###">news</a></li>
                    <li><a href="###">news</a></li>
                    <li><a href="###">news</a></li>
                    <li><a href="###">news</a></li>
                    <li><a href="###">news</a></li>
                </ul>
            </nav>-->
        </header>
        <!--内容区域-->

        <!--底部区域-->
        <footer>
            <div>
                <h3>友情链接</h3>
                <a href="###">百度</a>
                <a href="###">阿里巴巴</a>
                <a href="###">阿里妈妈</a>
            </div>
        </footer>
    </div>


</body>
</html>

section标签

section是html中一个独立的区域（主要针对网页分块），没有其他语义，一般会包含一个独立的标题
假设有一个效果，上边是nav导航栏，导航栏一般对对应一个区域，用来显示这个导航到的内容，这个区域我们就可以使用section
section主要是对网页进行分块，也可以对网页中的某块内容进行分块
通常一个完整的section是有标题和内容组成的，不推荐给没有标题的区域设置section
如果想要给一个内容设置有个容器用来书写样式，那么还是推荐使用div

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>section标签</title>
</head>
<body>
    <div>
        <!--头部区域-->
        <header>
            <h1>你看我像不像logo</h1>
            <nav>
                <a href="###">news</a>
                <a href="###">my</a>
                <a href="###">tiyu</a>
                <a href="###">tiyu</a>
                <a href="###">tiyu</a>
                <a href="###">tiyu</a>
            </nav>
        </header>
        <!--内容区域-->
        <section>
            <h2>我是section元素的头部啊啊啊啊啊</h2>

        </section>
        <!--底部区域-->
        <footer>
            <div>
                <h3>友情链接</h3>
                <a href="###">百度</a>
                <a href="###">阿里巴巴</a>
                <a href="###">阿里妈妈</a>
            </div>
        </footer>
    </div>
</body>
</html>

article标签

代表文档、页面、或程序中，可以独立的完整的被外部引用的内容
比如一篇博客、一篇文章、一段用户的评论、一个日历插件，或者是其他独立内容
一般来说一个article也有自己的头部header，或者是footer

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>article</title>
</head>
<body>
    <div>
        <!--头部区域-->
        <header>
            <h1>你看我像不像logo</h1>
            <nav>
                <a href="###">news</a>
                <a href="###">my</a>
                <a href="###">tiyu</a>
                <a href="###">tiyu</a>
                <a href="###">tiyu</a>
                <a href="###">tiyu</a>
            </nav>
        </header>
        <!--内容区域-->
        <section>
            <h2>这里是评论区域</h2>
            <article>
                <h3>评论人：张三</h3>
                <p>今天天气真好</p>
            </article>
            <article>
                <h3>评论人：李四</h3>
                <p>今天天气真好</p>
            </article>
            <article>
                <h3>评论人：王五</h3>
                <p>今天天气真好</p>
            </article>
        </section>
        <!--底部区域-->
        <footer>
            <div>
                <h3>友情链接</h3>
                <a href="###">百度</a>
                <a href="###">阿里巴巴</a>
                <a href="###">阿里妈妈</a>
            </div>
        </footer>
    </div>

</body>
</html>

div、article和section

article和section
1. article元素可以看做是特殊的section，但是强调独立性比section更强
2. section主要强调分段分块，article是强调很强的独立性
3. 原则上来说能用article的时候，也可以使用section，但是假设用article更合适，请使用article
div、article和section
1. div、section、article语义依次递增
2. div没有任何的语义，仅仅是用作样式，可以用在任何场景，但是我们容易看不清上下文关系
3. 对于主题性的区域，我们可以使用section
4. 加入这个区域可以脱离上下文，作为完整独立的内容存在，使用article

aside元素

表示一个和其余页面内容几乎无关的区域
被认为是独立于内容的一部分，并且可以拆出来而不会使整体收到影响，通常表现为侧边栏
这个里边的内容和其他元素内容关联性不强

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>aside元素</title>
</head>
<body>
    <div>
        <!--头部区域-->
        <header>
            <h1>你看我像不像logo</h1>
            <nav>
                <a href="###">news</a>
                <a href="###">my</a>
                <a href="###">tiyu</a>
                <a href="###">tiyu</a>
                <a href="###">tiyu</a>
                <a href="###">tiyu</a>
            </nav>
        </header>
        <!--内容区域-->

        <div>
            <!-- 主题区域-->
            <section>
                <h2>这里是评论区域</h2>
                <article>
                    <h3>评论人：张三</h3>
                    <p>今天天气真好</p>
                </article>
                <article>
                    <h3>评论人：李四</h3>
                    <p>今天天气真好</p>
                </article>
                <article>
                    <h3>评论人：王五</h3>
                    <p>今天天气真好</p>
                </article>
            </section>
            <!--侧边栏-->
            <aside>
                我是侧边栏内容
            </aside>
        </div>

        <!--底部区域-->
        <footer>
            <div>
                <h3>友情链接</h3>
                <a href="###">百度</a>
                <a href="###">阿里巴巴</a>
                <a href="###">阿里妈妈</a>
            </div>
        </footer>
    </div>

</body>
</html>

figure元素

代表一块独立的内容，是一个独立的引用单元
这个标签在主文中用来引用图片、插画、表格、代码段等等信息
一般会在figure元素中插入figcaption元素（标题元素），将figcaption代表的标题与figure内容相关联
如果是单独一张图片或者单独的表格等等，那么直接使用相应的标签即可，如果存在图片和标题，那么请使用figure标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>figure</title>
</head>
<body>
    <figure>
        <figcaption>海贼王的图片</figcaption>
        <img src="../images/05.jpg" alt="" width="300">
    </figure>
</body>
</html>

mark元素

为引用的内容进行标记或突出显示文本，用来表示和上下文之间的关联性
突出显示的文本通常可能和用户当前的活动等有一定的关联性
比如，用户搜索的时候，它可以显示搜索之后的关键字
不要把mark和 em、strong进行混淆。em、strong都是表示文本在上下文的重要性，而mark只是为了表示关联性
mark标签是行内标签，默认黄色背景颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mark元素</title>
</head>
<body>
    <input type="text" value="下雨">
    <p>今天晚上可能会<mark>下雨</mark>，明天中秋节晴朗</p>
</body>
</html>

time元素

用来表示24小时制或者是一个公历时间
作用：以机器可读的格式去表示日期和时间，安排日程表的应用就可以使用这个time标签
通用时间格式 XXXX-XX-XX XX XX
两种用法：
1. time标签直接包含时间
2. 使用datetime属性来表示时间

<!--内容区域-->
    <div>
        <!-- 主题区域-->
        <section>
            <h2>这里是评论区域</h2>
            <article>
                <h3>评论人：张三</h3>
                <p>今天天气真好</p>
                <p><time>2019-9-12 19:00:00</time></p>
            </article>
            <article>
                <h3>评论人：李四</h3>
                <p>今天天气真好</p>
                <p><time datetime="2019-9-12 18:00:00">一小时之前</time></p>
            </article>
            <article>
                <h3>评论人：王五</h3>
                <p>今天天气真好</p>
            </article>
        </section>
        <!--侧边栏-->
        <aside>
            我是侧边栏内容
        </aside>
    </div>

datalist 元素

包含了一组option元素，代表是列表可选的值
和input进行相关联，用来配套使用
input中的list属性 == datalist的id属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>datalist元素</title>
</head>
<body>
    <input list="city" type="text">
    <datalist id="city">
        <option value="河南">河南</option>
        <option value="河北">河北</option>
        <option value="湖北">湖北</option>
        <option value="湖南">湖南</option>
        <option value="胡建">胡建</option>
    </datalist>
</body>
</html>

progress元素

主要用来显示一项任务的完成程度
规范没有规定默认的样式，所以各个浏览器默认的样式不一定相同
属性:
1. value：是当前进度的值
2. max：是总进度的长度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>progress元素</title>
</head>
<body>
    <progress max="100" value="80"></progress>
</body>
</html>

HTML5新表单属性

表单的新属性规范

h5规范允许当属性名和属性值相等的时候可以直接书写属性名即可
在js中，h5允许以布尔值的形式控制属性开启或关闭

也就是在js中给autofocus属性设置值为true（真，打开）或者是 false（假，关闭）

但是在元素的属性中不允许使用true或者是false来控制开启或关闭
如果多个表单书写autofocus(只能出现一次的属性)，那么以第一个书写的为准

表单的新属性

placeholder：

占位符
autocomplete：

是否提示用户曾经输入过的值默认是on 关闭是off
autofocus：

默认自动获取焦点

他有唯一一个值是autofocus
required：

必填项，当提交的时候，此表单必须填写
disabled：

禁用任何表单元素，这个元素就被禁止输入或选择等等操作

使用disabled禁用表单，表单元素是不会在被提交了

checked：

单选框或多选框默认被选中
readonly：

对于可编辑的表单来说表示不能再次被编辑但是是可以被提交的

对单选多选按钮不支持

form：

          如果input存在form属性，表示当前的input属于某一个表单
          
          此时form表单的id的值 就是这个input的值
          
          那么form表单 和当前的input就进行关联了
          
          无论input书写在哪里，都能随着表单发送数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单元素的新属性</title>
</head>
<body>
<form action="###" method="get" id="form1">
    请输入用户名：
    <input type="text" name="user" placeholder="请输入用户名" autofocus autocomplete="off">
    <br>

    请输入密码：
    <input type="text" name="pass" value="123456" autofocus required>
    <br>

    请确认性别：
    男：<input type="radio" name="sex" value="男" disabled checked>
    女：<input type="radio" name="sex" value="女" disabled>
    <br>


    请确认年龄：
    大于30岁：<input type="radio" name="age" value="30-" checked readonly>
    小于30岁：<input type="radio" name="age" value="30+" readonly>

    请输入邮箱：
    <input type="email" name="email" value="lipeihua@atguigu.com" readonly>

    <br>
    <button>提交</button>
</form>

<!--在form表单外有一个input，但是想点击form中的提交按钮的时候，把这个input也给提交了，form属性就这样使用-->
<input type="hidden" name="id" form="form1" value="12587">
</body>
</html>

表单的新类型

input：（如果input的新类型不被浏览器所支持，那么他会默认显示成text文本框）
大多数都被谷歌浏览器支持，如果开发移动端，只要谷歌支持即可，因为所有安卓系统内置浏览器都是chrome
type旧类型：

text：文本框

password：密码框

radio：单选框

checkbox：多选框

hidden：隐藏域

file：文件域

button：按钮

reset：重置按钮

submit：提交按钮
type新类型
1. color：
  
  用来引入或者打开指定颜色的控件
2. date：
  
  日期的控件（年月日）
3. week：
  
  日期的控件（年周）（火狐不支持）
4. month：
  
  日期的控件（年月）（火狐不支持）
5. email：
  
  编辑email的字段
  
  自带验证，但是验证不完整，一般还是自己书写
  
  在移动端上有相对应的自动弹出键盘包含 @ .com 等按键
6. number：
  
  用来输入数字的控件
  
  多了一个上下的按键，可以增加和降低数字大小
  
  验证必须是数字
  
  其他属性
  - min：最少数量
  - max：最大数量
  - value：当前数量
  - step：每次累加累减数量
7. search：
  
  用来搜索框，当用户输入内容后，在末尾有一个删除按钮，单击可以删除输入好的文字
8. tel：
  
  电话号码输入框
9. url：
  
  url地址
10. range：
  
  输入一个拖拽的控件
  
  属性：
  - max：最大值
  - min：最小值
  - step：每次走的最小单位
  - value：当前值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新type类型-input</title>
</head>
<body>
    <form action="###" method="get">
        请选择你喜欢的颜色：
        <input type="color" name="color">
        <br>

        请选择你的出生日期：
        <input type="date" name="brithday">
        <br>

        请输入当前的周数：
        <input type="week" name="week">
        <br>

        请输入你几月生日：
        <input type="month" name="month">
        <br>

        请输入您的邮箱地址：
        <input type="email" name="email">
        <br>

        请选择您购买的数量：
        <input type="number" name="num" min="2" max="10" step="2">
        <br>

        请在本框中进行检索：
        <input type="search" name="sear">
        <br>

        请输入您的电话号码：
        <input type="tel" name="tel">
        <br>

        请输入你的个人博客的网址：
        <input type="url" name="url">
        <br>

        请选择：
        <input type="range" name="range" min="30" max="100" value="50">
        <br>
        <br>
        <button>提交</button>
    </form>

</body>
</html>

select元素的新属性

selected：默认选中项
multiple：让select可以进行多选（按住ctrl键进行多选）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>select元素的属性</title>
</head>
<body>
<form action="###" method="get">
    请选择你喜欢的食物：
    <select name="food" id="" multiple>
        <option value="肉">肉</option>
        <option value="鸡蛋">鸡蛋</option>
        <option value="水果" selected>水果</option>
        <option value="骨头">骨头</option>
    </select>
    <button>提交</button>
</form>
</body>
</html>

调用相册和摄像头

input的file补充：

<input type="file" accept="image/*" capture="camera">

`

文件域的 accept属性书写 image/* 代表接受任何格式的图片

capture=camera 代表从相机拍照接收

capture=photo 代表从相册选取照片

但是在pc端的表现都是选取文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>调用本地相册和相机</title>
</head>
<body>

    <input type="file" accept="image/*" capture="camera">

    <input type="file" accept="image/*" capture="photo">
</body>
</html>

音视频

音视频历史

大家都有在网页中浏览视频的经历，但在HTML5之前，对视频乃至音频都还没有一个标准因此在网页中看到的视频，都是通过第三插件的方式嵌入的，可能是QuickTime，也可能是RealPlayer 或者 Flash。浏览器很好的整合了这些插件，你完全意识不到它们的存在

音视频格式

大多数人会认为视频文件就是 .avi .mp4,但事实上 avi和mp4仅仅是容器的格式，它只决定怎么将视频存储起来，而不关系存储的内容。有点类似于.zip
不管是音频文件或视频文件，实际上都只是一个容器文件。这点类似于压缩了一组文件的ZIP文件，视频文件（视频容器）包含了音频轨道、视频轨道和其他一些元数据。
视频播放的时候，音频轨道和视频轨道是绑定在一起的。
元数据包含了视频的封面、标题、子标题、字幕、时间等相关信息

编解码器

音频和视频编码/解码是一组算法，用来对一段特定音频或视频进行解码和编码，以便音频和视频能够播放。
原始的媒体文件体积非常巨大，如果不对其进行编码，那么数据量是非常惊人的，在互联网上传播则要耗费无法忍受的时间；
如果不对其进行解码，就无法将编码后的数据重组为原始的媒体数据

不同浏览器对音视频的兼容性

目前还没有一种编解码和容器的组合能应用于所有的浏览器中！！！

音视频格式的转换

使用ffmpeg工具

1.安装，并找到bin目录 2.在计算机图标上右键 3.选择属性 4.更改设置 5.高级 6.环境变量 7.找到系统变量的 path 8.把ffmpeg 的 bin的路径添到后边 9.一直点确定完成

测试是否安装成功

1.window+r 2.输入CMD 3.打开命令行窗口输入ffmpeg 检测是否安装成功

ffmpeg的使用

用 FFmpeg 制作MP4 视频 ffmpeg -i test.mp4 -c:v libx264 -s 1280x720 -b:v 1500k -profile:v high -level 3.1 -c:a aac -ac 2 -b:a 160k -movflags faststart OUTPUT.mp4

用 FFmpeg 制作 WebM 视频 ffmpeg -i test.mp4 -c:v libvpx -s 1280x720 -b:v 1500k -c:a libvorbis -ac 2 -b:a 160k OUTPUT.webm

FFmpeg 制作 Ogg 视频 ffmpeg -i test.mp4 -c:v libtheora -s 1280x720 -b:v 1500k -c:a libvorbis -ac 2 -b:a 160k OUTPUT.ogv

FFmpeg 制作Mp3音频 ffmpeg -i tt.mp3 -c:a libmp3lame -ac 2 -b:a 160k OUTPUT.mp3

FFmpeg 制作Ogg音频 ffmpeg -i tt.mp3 -c:a libvorbis -ac 2 -b:a 160k OUTPUT.ogg

FFmpeg 制作ACC音频
ffmpeg -i tt.mp3 -c:a aac -ac 2 -b:a 160k OUTPUT.aac

音视频旧格式

<object> 标签的作用是在 HTML 页面中嵌入多媒体元素

<object data="1.swf" width="400"></object>
<embed> 标签的作用是在 HTML 页面中嵌入多媒体元素

<embed src="1.swf" width="400">

为什么淘汰：

需要flash，效率低
如果浏览器不支持 Flash，那么视频将无法播放
iPad 和 iPhone 不能显示 Flash 视频
将视频转换为其他格式，仍然不能在所有浏览器中播放
目前安卓4.4也抛弃了flash......

html5的新音视频标签

视频基本标签用法：
- <video width=" " height="" src=""> </video>
- src 属性：指定播放文件的URL。
- width、height属性：
  - 设置媒体元素的大小，单位为像素；
  - 省略该属性，则使用播放源文件的大小；
  - 仅设置宽度值，将根据播放源文件的长宽比例自动生成一个与之对应的高度值。
音频基本格式：
- <audio src="" controls> </audio>
- src 属性：指定播放文件的URL。
- 其他和视频一样。
指定一种视频格式，不能播就提示： <video src="examp.mp4" >您的浏览器不支持</video>
给定多个source标签，给定多种视频格式，浏览器根据自身支持程度选择播放哪一种 <source src="1.mp4" type="video/mp4" />

音视频标签的属性

preload：

该属性旨在告诉浏览器作者认为达到最佳的用户体验的方式是什么
- none: 提示作者认为用户不需要查看该视频，服务器也想要最小化访问流量；换句话说就是提示浏览器该视频不需要缓存。
- metadata: 提示尽管我们认为用户不需要查看该视频，不过抓取元数据（比如：长度）还是很合理的。
- auto: 用户需要这个视频优先加载；换句话说就是提示：如果需要的话，可以下载整个视频，即使用户并不一定会用它。
- 空字符串：也就代指 auto 值。

CSS3

CSS3高级选择器

动态伪类选择器

锚点伪类：link、visited
用户行为伪类：hover、active、focus
目标伪类target（IE9及以上）

属性选择器

选择器	描述
E[attr]	有属性att的所有E元素
E[attr='val']	属性att的值是val的元素
E[attr^='val']	属性att的值以val开头的元素
E[attr$='val']	属性att的值以val结尾的元素
E[attr*='val']	属性att的值包含val字符串的元素

状态伪类选择器

选择器	描述
E:enabled	匹配表单中可用的元素
E:disabled	匹配表单中禁用的元素
E:checked	匹配表单中被选中的radio（单选框）或checkbox（复选框）元素

checkbox只能设置宽高，不能设置背景颜色和边框

需要清除默认样式appearance：none（需要兼容）

结构性选择器

选择器	描述
E:first-child	选择第一个子元素E
E:last-child	选择最后一个子元素E
E:nth-child(n)	选择一个或多个特定的子元素（第一个编号为1）
E:nth-last-child(n)	选择一个或多个特定的子元素，从最后一个子元素开始算
E:only-child	匹配父元素下仅有的一个子元素
E:empty	匹配一个不包含任何子元素的元素 ( 文本节点也被看作子元素 )
E:not(s)	匹配不符合当前选择器的任何元素( 反选 )

练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>尺子练习</title>
    <link rel="stylesheet" href="./reset.css">
    <style>
        .outer{
            margin: 100px;
        }
        .outer>li{
            width: 2px;
            height: 8px;
            background-color: black;
            float: left;
            margin-right: 6px;
            position: relative;

            counter-increment: num;
        }
        .outer>li:nth-child(5n+1){
            width: 3px;
            height: 11px;
        }
        .outer>li:nth-child(10n+1){
            width: 4px;
            height: 14px;
            position: relative;
        }
        .outer>li:nth-child(10n):after{
            content: counter(num);
            position: absolute;
            left: -1px;
            top: 15px;
        }
        .outer>li:nth-child(1):after{
            content: counter(num);
            position: absolute;
            top: 15px;
            left: -3px;
        }
    </style>
</head>
<body>
<!--
    css 自增函数：
        counter-increment：num；
        num是自己命名的
        每次选择器选择到一个元素，num就自加1  从1开始

        当在某个元素上使用 counter（num）  就得到了值
-->
    <ul class="outer">
        li*100
    </ul>
</body>
</html>

CSS3其他

圆角边框

CSS3 圆角边框（IE9.0以前版本不支持）：

border-radius：[ length | % ]{1,4} / [ length | % ]{1,4}
border-top-left-radius:5px ;
border-top-right-radius:15px;
border-bottom-right-radius:20px;
border-bottom-left-radius:25px;
border-radius:5px 15px 20px 25px ;
border-radius:20px / 10px ;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆角边框</title>
    <style>
        .box{
            width: 300px;
            height: 200px;
            background-color: #009ff2;

            /*8个值：1 2 3 4/5 6 7 8*/
            /*1 2 3 4代表横向上的4个位置    5 6 7 8 代表竖向上的4个位置*/
            border-radius: 10px 20px 30px 40px/50px 60px 70px 80px;

            /*设置每个角1个半径，总共4个值*/
            border-radius: 30px 40px 50px 60px;

            /*横向都是40  竖向都是60px*/
            border-radius: 40px/60px;

            /*左上右下是40  左下和右上是60*/
            border-radius: 40px 60px;

            border-radius: 40px/40px 70px;

            border-radius: 30px 50px 70px;
            border-radius: 30px 50px 70px 50px;

            border-radius: 40px;

            /*border-radius百分比是相对于自身的宽高*/
            border-radius: 10% 0 0 0;
        }
    </style>
</head>
<body>
<!--
    圆角边框：
        border-radius:允许设置元素的边框圆角
            当使用一个半径的时候，设置的是圆形的角
            当使用两个半径的时候，设置的是椭圆形的角

        值：可以是单位   百分比
-->
<div class="box"></div>
</body>
</html>

练习

<!-- 畅言 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>畅言</title>
    <link rel="stylesheet" href="./reset.css">
    <style>
        .outer{
            width: 500px;
            height: 300px;
            border: 1px solid #009ff2;
            border-radius: 20px;
            margin: 100px auto;
            position: relative;
        }

        .login{
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background-color: #fff;
            position: absolute;
            left: 30px;
            top: -57px;
            border: 1px solid #009ff2;

        }
        .login_in{
            width: 50px;
            height: 50px;
            margin: 15px;
            border-radius: 50%;
            line-height: 50px;
            text-align: center;
            font-size: 14px;
            color: #009ff2;
            border: 1px solid #009ff2;
            position: relative;
            z-index: 2;
        }
        .mask{
            width: 82px;
            height: 57px;
            background-color: #fff;
            position: absolute;
            left: 30px;
            top: -58px;
        }
    </style>
</head>
<body>
    <div class="outer">

        <div class="login">
            <div class="login_in">登录</div>
        </div>
        <div class="mask"></div>

    </div>
</body>
</html>

文字阴影

text-shadow：none | length{2,3} color 默认值：none

none：无阴影

第1个长度值：阴影水平偏移值。可为负值

第2个长度值：阴影垂直偏移值。可为负值

第3个长度值：可选，阴影模糊值。不允许负值

color：设置阴影的颜色

盒子阴影

box-shadow。

和文本阴影相比，盒阴影多一个属性值——阴影外延值（第四个值）

第一个字可选，可以设置内阴影

box-shadow：none |inset length{2,4} color

倒影

box-reflect:倒影

below / above / left / right offset

滤镜设置

使用filter属性（IE不支持）

blur(px)：模糊

brightness(%)：亮度

contrast(%)：对比度

opacity(%)：透明度

saturate(%)：饱和度

….

CSS3多列

什么是多列

编辑

多列的属性

column-count
1. 定义：规定元素应该被分隔的列数
2. 语法：column-count: number;
column-width
1. 定义：列的宽度
2. 语法：column-width:像素值
column-count和column-width用来控制列的宽度和数量：
- column-count是控制列数
- column-width是控制每一列的最小宽度
- column-count和column-width冲突的时候,分为栏数少的优先
columns是简写，后边跟 count和width 也可以随意跟count和width其中的一个值
column-gap
1. 定义：规定列之间的间隔
2. 语法：column-gap: 像素值;
column-rule
1. 定义：所有 column-rule-* 属性的简写属性(颜色，样式，宽度)
2. 语法：column-rule: 颜色，样式，宽度;
3. 列之间规则的颜色：[column-rule-color]
  
  列之间规则的样式：[column-rule-style]
  
  列之间规则的宽度：[column-rule-width]
column-span
1. 定义：元素应该横跨的列数
2. 语法：column-span:all

渐变

渐变本质绘制的是一张图片（背景图片），所以使用background或者使用background-image （IE 6 7 8 9不支持）
百分比：把元素渐变方向的整体长度看成100%

线性渐变

渐变的写法：
- 从上到下（默认）：background: linear-gradient(red,blue);
- 从左到右：background: linear-gradient(to right,red,blue);
- 对角：background: linear-gradient(to right bottom,red,blue);
- 角度background: linear-gradient(45deg,red,blue);
角度坐标
重复渐变

background: repeating-linear-gradient(90deg,red 0%,blue 20%);

background: repeating-linear-gradient(90deg,red 0%,blue 10%,red 20%);

练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地板砖</title>
    <style>
        .inner{
            width: 1000px;
            height: 1000px;
            /*background: linear-gradient(45deg,red 25%,transparent 25%,transparent 75%,red 75%),linear-gradient(135deg,red 25%,#fff 25%,#fff 75%,red 75%);*/
            background: repeating-linear-gradient(45deg,red 25%,transparent 25%,transparent 75%,red 75%,red 100%),repeating-linear-gradient(135deg,red 25%,#fff 25%,#fff 75%,red 75%,red 100%);

            background-size: 100px 100px;
        }
    </style>
</head>
<body>
<!--
    地板砖
-->
    <div class="inner"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发廊灯</title>
    <style>
        .outer{
            width: 300px;
            height: 70px;
            border: 1px solid #000;
            margin: 100px auto;
            overflow: hidden;
        }
        .con{
            width: 2000px;
            height: 70px;
            background: repeating-linear-gradient(45deg,#fff 0px,#fff 20px,#000 20px,#000 40px);
            transition: all 10s linear;
        }
        .outer:hover .con{
            margin-left: -1700px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="con"></div>
    </div>
</body>
</html>

径向渐变

radial-gradient()
- 第一个参数：圆的类型
  
  ellipse：根据元素形状渐变，元素为正方形是显示效果与circle无异
  
  circle：渐变为最大的圆形
第二个参数：执行径向渐变的大小

farthest-corner:圆心到最远角

closest-side：圆心到最近的边

closest-corner：圆心到最近的角

farthest-side：圆心到最远的边
- 第三个参数：圆心的位置
- 第四个参数：渐变的颜色点

.box{
    width: 1000px;
    height: 300px;
    background: radial-gradient(orangered,greenyellow);
    background: radial-gradient(circle,orangered,greenyellow);

    /*background: -webkit-radial-gradient(800px 100px, farthest-side,orangered,greenyellow);*/

    background: radial-gradient(at left top,orangered,greenyellow);
    /*background: radial-gradient(at center center,orangered,greenyellow);*/
}

CSS3 背景设置

背景图裁剪

background-clip

border-box | padding-box | content-box
background-clip的作用为将背景图片做适当的裁剪，以适应需要。
background-clip有content- box,padding-box,border-box，text几个值剪裁方法：根据设置的盒子部位，那么图片在这个部位的外边缘以外的部分都会不可见。

背景图大小

background-size

length：长度值---第一个值设置宽度，第二个值设置高度

percentage：百分比---第一个值设置宽度，第二个值设置高度

cover：等比缩放到完全覆盖容器，背景图像有可能超出容器

contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内

多重背景

background-image：CSS3允许您为元素使用多个背景图片
background-image: url('1.jpg),url('2.jpg') ... 使用逗号把图片分开
元素引入多个背景图片，前面图片会覆盖后面的图片

CSS动画

过渡动画

允许 CSS 的属性值在一定时间区间内平滑的过渡，在鼠标点击，鼠标滑过或对元素任何改变中触发，并圆滑地以动画改变css的属性值
CSS3 过渡语法：
- transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]
- [ transition-property ]：检索或设置对象中的参与过渡的属性
  - all | none | property,property ...
  - all：所有可以进行过渡的css属性
  - none：不指定过渡的css属性
  - property：指定要进行过渡的css属性
- [ transition-duration ]：检索或设置对象过渡的持续时间
- [ transition-timing-function ]：检索或设置对象中过渡的动画类型
  - transition-timing-function：linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(number, number, number, number)
  - 检索或设置对象中过渡的动画类型
  - 如果提供多个属性值，以逗号进行分隔
  - http://cubic-bezier.com/（贝塞尔曲线生成器）
- [ transition-delay ]：检索或设置对象延迟过渡的时间
注意事项:

并不是所有元素都支持过渡

元素没有渲染完的情况下，过渡不生效

关键帧动画

关键帧

CSS3 动画语法－关键帧：
```
@keyframes name{

  [keyframes-selector] { Properties:Properties value; }

  [keyframes-selector] { Properties:Properties value; }

 }
```
- keyframes 控制关键位置，并不是所有的位置
- keyframes-selector：必写项，动画持续时间的百分比
- 0% - 100%之间，或者使用from和to关键字也可以设置，from代表0%，to代表100%

案例

@keyframes move{
    0% { margin-left: 100px; background: green; }
    40% { margin-left: 150px; background: orange; }
    60% { margin-left: 75px; background: blue; }
    100% { margin-left: 100px; background: red; }
}

关键帧的使用

基础语法：

animation-name:move; /动画属性名，前面keyframes样例定义的动画名/
animation-duration: 10s; /动画持续时间/
animation-timing-function: ease-in-out; /动画帧频，和transition-timing-function是一样的//animation-timing-function:检测的是关键帧的区间，并不是整个动画过程/ease | linear | ease-in | ease-out | cubic-Bezier (n1 , n2, n3, n4)
animation-delay: 2s; /动画延迟时间/
animation-iteration-count: 10; /动画循环次数，infinite为无限次/
animation-direction: normal; /定义动画播放方式/

默认normal，动画正常播放； alternate，动画轮流反向播放

合写：animation:[<animation-name> || <animation-duration> ||<animation-timing-function> || <animation-delay> ||<animation-iteration-count> || <animation-direction>]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关键帧动画</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: #009ff2;
            /*animation: jello 1s infinite;*/

            /*!*关键帧名称*!
            animation-name: move2;

            !*关键帧动画执行总时间，百分比是平分了总时间*!
            animation-duration: 1s;

            !*动画执行类型，在每一个帧节点之间进行动画类型*!
            animation-timing-function: linear;

            !*整个动画的延迟时间*!
            animation-delay: 500ms;

            !*动画执行的次数，可以是数字  可以是infinite*!
            animation-iteration-count: infinite;

            !*动画播放方式：可以选择动画轮流反向播放*!
            animation-direction: alternate;*/

            /*合写：按照刚才书写的顺序 依次书写即可  不用的可以省略*/
            animation:move2 3s linear .5s infinite alternate;



        }

        @keyframes  move{
            0%{
                /*background-color: black;*/
            }
            50%{
                /*变形在检测0%的时候没有这个属性，50%出现了，就会在0%到50%之间过渡*/
                transform: rotateX(30deg);
                background-color: green;
            }
            100%{
                background-color: pink;
            }
        }
        @keyframes move2 {
            0%{
                margin-left: 0px;
                background-color: pink;
            }
            25%{
                margin:0 0 0 1000px;
                transform: scale(1.3);
            }
            50%{
                margin: 400px 0 0 1000px;
            }
            100%{
                margin: 400px 0 0 0;
            }
            /*百分百不写就是默认*/

        }

        @keyframes swing {
            20% {
                -webkit-transform: rotate3d(0, 0, 1, 15deg);
                transform: rotate3d(0, 0, 1, 15deg);
            }

            40% {
                -webkit-transform: rotate3d(0, 0, 1, -10deg);
                transform: rotate3d(0, 0, 1, -10deg);
            }

            60% {
                -webkit-transform: rotate3d(0, 0, 1, 5deg);
                transform: rotate3d(0, 0, 1, 5deg);
            }

            80% {
                -webkit-transform: rotate3d(0, 0, 1, -5deg);
                transform: rotate3d(0, 0, 1, -5deg);
            }

            to {
                -webkit-transform: rotate3d(0, 0, 1, 0deg);
                transform: rotate3d(0, 0, 1, 0deg);
            }
        }

        @-webkit-keyframes jello {
            from,
            11.1%,
            to {
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
            }

            22.2% {
                -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
                transform: skewX(-12.5deg) skewY(-12.5deg);
            }

            33.3% {
                -webkit-transform: skewX(6.25deg) skewY(6.25deg);
                transform: skewX(6.25deg) skewY(6.25deg);
            }

            44.4% {
                -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
                transform: skewX(-3.125deg) skewY(-3.125deg);
            }

            55.5% {
                -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
                transform: skewX(1.5625deg) skewY(1.5625deg);
            }

            66.6% {
                -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
                transform: skewX(-0.78125deg) skewY(-0.78125deg);
            }

            77.7% {
                -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
                transform: skewX(0.390625deg) skewY(0.390625deg);
            }

            88.8% {
                -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
                transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
            }
        }
    </style>
</head>
<body>
<!--
    @keyframes用来定义关键帧
    关键帧的起点是0%（from）  结束点是100%（to）

    当from和to不是默认样式的话，动画开始后会直接跳到0%的样式，动画结束后，会跳到动画默认样式

    如果百分之0和百分之百不写，那么默认效果就是百分之0和百分百


-->
    <div class="box"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡动画触发条件</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
        }


        .box:hover{
            animation: change 1s linear 4;
        }

        @keyframes change {
            from{
                width: 100px;
                height: 100px;
                background-color: red;
            }
            to{
                width: 200px;
                height: 200px;
                background-color: pink;
            }
        }
    </style>
</head>
<body>
    <button id="btn">变！！！</button>
    <div class="box"></div>
    <script>
        var oBox = document.querySelector(".box");
        var oBtn = document.querySelector("#btn");

        oBtn.onclick = function () {
            oBox.style.animation="change 1s linear 4"
        }


    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡动画触发条件</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;

            transition: all 1s;
        }

        .box2{
            width: 200px;
            height: 200px;
            background-color: green;
        }

        .box:hover{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <button id="btn">变！！！</button>
    <div class="box"></div>
    <script>
        var oBox = document.querySelector(".box");
        var oBtn = document.querySelector("#btn");

        // 第一种，添加行内样式覆盖原有样式
        oBtn.onclick = function () {
            oBox.style.backgroundColor = "pink";
            oBox.style.width = "200px";
            oBox.style.height = "200px";
        }

        //第二种，改变类名来改变样式
        oBtn.onclick = function () {
            oBox.classList.add("box2");
        }
    </script>
</body>
</html>

动画的暂停和播放

animation-play-state 属性

paused：规定动画已暂停
running：规定动画正在播放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关键帧动画的暂停和开始</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background: #009ff2;
            animation: change 3s infinite;
            animation-play-state: paused;
        }
        /*animation-play-state 控制动画的播放于暂停*/
       /* running：播放
        paused：暂停*/

        .box:hover{
            animation-play-state: running;
        }
        @keyframes change{
            from{
                width: 300px;
                height: 300px;
                background-color: #9b55ff;
            }
            to{
                width: 400px;
                height: 400px;
                background-color: pink;
            }
        }
    </style>
</head>
<body>
<!--
    动画起始和结束状态：

-->
    <div class="box"></div>
</body>
</html>

动画开始和结束状态

animation-fill-mode 属性

none：使用得动画不会对动画等待和动画完成的元素样式产生改变
forwards：告诉浏览器动画结束后，元素的样式将设置为动画的最后一帧的样式
backwards ：那么在动画等待的那段时间内，元素的样式将设置为动画第一帧的样式
both：在动画等待和动画结束状态，元素将分别应用动画第一帧和最后一帧的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画起始和结束状态</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background: #009ff2;

            /*动画开始之前，保持默认值
            动画开始之后，直接跳到第一帧的动画帧
            动画结束之后，直接跳到默认值*/

            /*animation-fill-mode属性控制动画起始和结束状态*/
            /*forwards:执行完最后一帧后，样式停留在最后一帧上*/
            /*backwards：无论是动画刚刚开始，还是开始前，动画始终停留在第一帧上*/
            /*both：动画开始和结束后，分别在第一帧和最后一帧保持*/

            animation: change 2s 1s;
            animation-fill-mode:forwards;
            animation-fill-mode:backwards;
            animation-fill-mode:both;
            animation-fill-mode:none;
        }
        @keyframes change{
            from{
                width: 300px;
                height: 300px;
                background-color: #9b55ff;
            }
            to{
                width: 400px;
                height: 400px;
                background-color: pink;
            }
        }
    </style>
</head>
<body>
<!--
    动画起始和结束状态：

-->
    <div class="box"></div>
</body>
</html>

逐帧动画

steps() 是 Animation 中的一个 timing-function 函数，

能够实现动画的阶跃式变化，而非两个状态间的线性过渡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>兔斯基动画</title>
    <style>
        .box{
            width: 48px;
            height: 48px;
            background: url("../images/tusiji.png") 0 0 no-repeat;

            /*逐帧动画  的动画类型是steps（） 里边书写步数*/
            animation: tusiji 12.5s steps(12) infinite;
        }
        @keyframes tusiji {
            from{
                background-position-x: 0;
            }
            to{
                background-position-x: -576px;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跳动的心</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background: url("../images/heart-sprite.png") 0 0 no-repeat;

            /*animation: heart 1s steps(29) infinite;*/
            /*animation-fill-mode:forwards;*/

        }
        @keyframes heart {
            from{
                background-position-x: 0;
            }
            to{
                background-position-x: -2900px;
            }
        }
    </style>
</head>
<body>
    <!--

    -->
<div class="box">

</div>
    <script>
        var oBox = document.querySelector(".box");
        oBox.onclick=function () {
            oBox.style.animation="heart 1s steps(29)";
            // oBox.style.animationFillMode="forwards";
        }
    </script>
</body>
</html>

弹性盒布局

伸缩盒子模型
- 伸缩盒子模型控制的是父子关系
- 父元素：伸缩容器
- 子元素：伸缩项目
- 主轴：start-end
- 交叉轴（侧轴）
Flex容器

display:flex

display:-webkit-box(旧版本)
主轴布局方向

flex容器flex-direction：
- row
- row-reverse
- column：主轴与侧轴发生对调
- column-reverse
富余空间管理（主轴）

justify-content：
- flex-start
- flex-end
- center
- space-around：富余空间包含伸缩项目
- space-between：伸缩项目包含富裕空间
富余空间管理（侧轴）

align-items：
- flex-start
- flex-end
- baseline
- center
- stretch
弹性空间

flex-grow

将富裕空间分配到项目上
项目换行

Flex布局，如果没有执行换行，无论设置多宽都不会换行

flex-wrap: nowrap; --- 默认值，父元素宽度不够，子元素自身宽度会被压缩

flex-wrap: wrap; --- 父元素宽度不够，子元素会进行换行

flex-wrap: wrap-reverse; --- 子元素换行的同时，侧轴的start与end发生对调

出现flex-wrap：wrap；之后，出现单行的富裕空间

注意：align-items 每一行的富裕空间，align-items: flex-start;
控制整体侧轴的富裕空间

align-content: flex-start; --- 项目整体进行打包，放在整体侧轴的start处

align-content: flex-end; --- 项目整体进行打包，放在整体侧轴的end处

align-content: center; --- 项目整体进行打包，放在整体侧轴的center处;
flex-flow

是flex-wrap 与 flex-direction 的缩写

flex-flow:wrap-reverse column-reverse;
order

order排序，把排序元素先单独拿出来，让剩余元素先正常排列，排完之后，order元素在其后边再进行顺序排列

order是沿着主轴方向进行排序的
项目自身侧轴的富裕空间

每一个项目控制自身的侧轴

align-self: flex-start;

align-self: flex-end;

align-self: center;
收缩率（flex项目）

当伸缩项目设置宽度，比容器宽度还要大时，元素并没有发生溢出的情况，那此时就出现一个东西叫收缩因子（收缩率）

flex-shrink:拉伸因子 0 ---不拉伸

flex-shrink:收缩因子默认值：1 --- 收缩
子元素的基准值

flex-basis：0
flex属性

flex-basis,flex-grow,flex-shrink的缩写

响应式布局

前言

早在2010年，设计人员和开发人员就开始实践“响应网页设计”(RWD):

随着网络设备尺寸千变万化，为了达到相同的体验，通常的做法是剪切不相关的设计。实际上，我们可以让我们的设计更好的适应渲染屏幕。

一、什么是响应式

响应式网页设计就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。

打个比方来说：现在社会有很多响应产品，例如折叠沙发，折叠床等等，

在项目中你会遇到不同的终端，由于终端分辨率不同，所以你要想让用户体验更好，就必要让你的页面能够兼容多个终端。

响应式Web设计可以让一个网站同时适配多种设备和多个屏幕，可以让网站的布局和功能随用户的使用环境（屏幕大小、输入方式、设备/浏览器能力）而变化

二、什么时候用到响应式

小型的项目或需求页PC端和移动端共用一套
大型的项目PC端（固定布局）和移动端（移动适配）各用一套

三、媒体查询

3.1 为什么响应式 Web 设计需要媒体查询

在媒体查询出现之前，针对不同尺寸设备的设计常常依靠JS或PHP等依靠userAgent来勉强实现，而现在自适应的响应式设计成为了家常便饭。
作为响应式布局的核心技术之一，媒体查询（media query）提供了一种检测设备特征的方法，它使开发者可以根据不同的设备特征应用不同样式，为不同设备创建合适的用户体验。
CSS3媒体查询可以让我们针对特定的设备能力或条件为网页应用特定的CSS样式。如果没有媒体查询，光用CSS是无法大大修改网页外观的。
这个模块让我们可以提前编写出适应很多不可预测因素的CSS规则，比如屏幕方向水平或垂直、视口或大或小等等。
弹性布局虽然可以让设计适应较多场景，也包括某些尺寸的屏幕，但有时候确实不够用，因为我们还需要对布局进行更细致的调整。媒体查询让这一切成为可能，它就相当于CSS中基本的条件逻辑。

3.2 css2中的媒体查询

在CSS2中，媒体查询只使用于style和link标签中，以media属性存在；media属性用于为不同的媒介类型规定不同的样式

<style media="screen,tv">
<link ref="stylesheet" href="demo.css" media="screen">

3.3 媒介类型

all           适合所有设备
screen         计算机屏幕（默认值） 
print          打印预览模式 / 打印页   
tty            电传打字机以及使用等宽字符网格的类似媒介
tv             电视类型设备（低分辨率、有限的屏幕翻滚能力）
projection     放映机
handheld       手持设备（小屏幕、有限的带宽）
braille        盲人 用点字法反馈设备
aural          语音合成器

<style media="screen,tv">
.box{
    height: 100px;
    width: 100px; 
    background-color: lightblue;
}    
</style>
<div class="box"></div>

3.4 媒体特征

媒体查询支持丰富的设备特征，除了我们最常看到的宽度和高度查询，还有一些其他的媒体特征比如方向、分辨率等对检测设备也很有用，更多常用的媒体特征详细信息可参考下表：

设备特征	取值	说明
width	长度数值，如600px	输出设备渲染区域（如可视区域的宽度或打印机纸盒的宽度）的宽度
height	长度数值，如600px	输出设备渲染区域（如可视区域的高度或打印机纸盒的高度）的高度
aspect-raido	整数或小数	viewport 宽高比，值为宽度/高度
orientation	portrait 或 landscape	设备处于横屏（宽度大于高度）模式还是竖屏（高度大于宽度）模式
resolution	数值	设备分辨率，如 300ppi
color	正整数	检查设备支持多少种颜色等
scan	progressive 或 interlace	输出设备的扫描方式，大部分现代屏幕使用 progressive 渐进式方式，部分等离子电视使用 interlace 隔行扫描
grid	0 或 1	判断输出设备是网格设备还是位图设备

另外，对于部分取值为数值的属性，媒体查询可以使用 min- 或 max- 前缀表示范围，这为媒体查询提供了更方便的判断方式。例如使用 max-width: 320px 表示设备 viewport 的宽度小于等于 320px，min-width: 321px 表示 viewport 宽度大于等于 321px。

@media (max-width: 320px) { /* viewports <= 320px 时的样式*/ }
@media (min-width: 321px) { /* viewports >= 321px 时的样式*/ }

3.5 逻辑条件

通过使用 and、not、only 等逻辑条件关键词，可以组合多个媒体查询条件。

and:
@media (min-width: 700px) and (orientation: landscape) { ... }
上面的示例是宽度大于 700px 的媒体查询条件，如果你只想在横屏情况时使用这个条件，可以如下所示使用 and 操作符来合并媒体属性。

not 和 only:
使用 not 可以不在某种条件下使用当前媒体查询规则，如以下示例中媒体查询匹配 viewport 宽度大于 320px 且不是打印机的设备。
可以用关键字not表示一个否定查询；not必须置于查询的一开头并会对整条查询串生效，除非逗号分割的多条

@media not print and (min-width: 320px) { ... }

而使用 only 可以仅在某种条件下使用规则，如示例中仅在 viewport 宽度大于 320px 的屏幕设备中使用。
@media only screen and (min-width: 320px) { ... }

3.6使用媒体查询设置断点

如何选择网站内容的响应点，即如何选择不同 viewport 的 min-width 和 max-width 的取值，我们称为选择断点。在设计断点时，可以从最小支持的屏幕宽度开始，逐渐增加屏幕宽度，覆盖不同尺寸屏幕的体验。断点的设置主要取决于产品设计本身，没有万能媒体查询的代码。但经过实践，总结了一套比较具有代表性的设备断点，代码如下：

/* 很小的设备（手机等，小于 600px） */
@media only screen and (max-width: 600px) {...}
/* 比较小的设备（竖屏的平板，屏幕较大的手机等, 大于 600px） */
@media only screen and (min-width: 600px) {...}
/* 中型大小设备（横屏的平板, 大于 768px） */
@media only screen and (min-width: 768px) {...}
/* 大型设备（电脑, 大于 992px） */
@media only screen and (min-width: 992px) {...}
/* 超大型设备（大尺寸电脑屏幕, 大于 1200px） */
@media only screen and (min-width: 1200px) {...}

3.7 Media Queries Level 4规范中新的媒体特性

update – 根据设备的更新频度区分其类型 (none 如打印机, slow 如电子墨水, fast 正常设备)
scripting – none 不支持脚本或未启用 | initial-only 仅支持页面初始化脚本 | enabled 支持脚本并且已启用
pointer – 设备交互的精度 (coarse不精确如手指, fine 精确如鼠标, none 无指点)
hover – 设备是否支持悬停状态

3.8 CSS3的媒体查询

媒体查询最基本的形式，就是单独或组合使用媒体类型和媒体特性(后者要置于括号中)，如

@media screen {
    body {
        font-size: 20px;
    }
}

@media screen, print {
    body {
        font-size: 20px;
    }
}

@media (width: 30em) {
    nav li {
        display: block;
    }
}

@media screen and (width: 30em) {
    nav li {
        display: block;
    }
}

引入外部文件时的媒体查询

<!--即使媒体查询不符，样式文件总会被下载-->
<link rel="stylesheet" href="styles.css" 
    type="text/css" media="screen x-width: 480px)">

3.9 媒体查询的嵌套

@media screen {
    @media (min-width: 20em) {
        img {
            display: block;
            width: 100%;
            height: auto;
        }
    }
    @media (min-width: 40em) {
        img {
            display: inline-block;
            max-width: 300px;
        }
    } 
}

3.10 less书写媒体查询

*{
  margin: 0;
  padding: 0;
}

#box{
  width: 200px;
  height: 200px;
  background-color: red;
  @media screen and (max-width: 768px){
    background-color: yellow;
  }
}