CSS

CSS简介

CSS的起源

在 web 早期（1990-1993）, html 是一个很局限的语言。几乎完全由用于描述段落，超链接，列表和标题的结构化元素组成。
随着万维网的出现（用户交互体验的加强），对 html 的要求越来越大，人们迫切需要 html 增加新的元素，去完成一个特定的功能
迫于压力，html 开始出现b u i s等标签。但是 html 是一种描述结构的语言，也开始描述外在表现了。几年之后这种随便的做法暴露出严重的问题：
- 由于 html 既写结构又写样式，导致页面缺乏结构性，降低了网页的可访问性。
- 页面维护越来越困难
1994年，哈肯·维姆·莱和伯特·波斯合作设计CSS，在1996年的时候发布了CSS1；
- 直到1997年初，W3C组织才专门成立了CSS的工作组，1998年5月发布了CSS2；
- 在2006~2009非常流行 “DIV+CSS”布局的方式来替代所有的html标签；
- 从CSS3开始，所有的CSS分成了不同的模块（modules），每一个“modules”都有于CSS2中额外增加的功能，以及向后兼容。
- 直到2011年6月7日，CSS 3 Color Module终于发布为W3C Recommendation。
与 html 相比，
- CSS 支持更丰富的文档外观，CSS 可以为任何元素的文本和背景设置颜色；
- 允许在任何元素外围设置边框；允许改变文本的大小，装饰（如下划线），间隔，甚至可以确定是否显示文本。
- 对HTML进行布局，按照某种结构显示（CSS进行布局 – 浮动、flex、grid）；

HTML的局限性

说起 HTML，这其实是个非常单纯的家伙，他只关注内容的语义。
比如 h1 表明这是一个大标题，p 表明这是一个段落，img 表明这儿有一个图片，a 表示此处有链接。
很早的时候，世界上的网站虽然很多，但是他们都有一个共同的特点：丑。
虽然 HTML 可以做简单的样式，但是带来的是无尽的臃肿和繁琐…

CSS 官方文档

CSS官方文档地址 : https://www.w3.org/TR/?tag=css
CSS推荐文档地址：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference#%E5%85%B3%E9%94%AE%E5%AD%97%E7%B4%A2%E5%BC%95
由于浏览器版本、CSS版本等问题，查询某些CSS是否可用：
- 可以到 https://caniuse.com/ 查询 CSS 属性的可用性；
- 这个网站在后续的 browserlist 工具中我们再详细说明；

认识 CSS

CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称.
- 有时我们也会称之为 CSS 样式表 或 级联样式表。
CSS 也是一种语言吗
- MDN解释：CSS 也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言；
- 维基百科解释：是一种计算机语言，但是不算是一种编程语言；
CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮，让页面布局更简单。
CSS 最大价值: 由 HTML 专注去做结构呈现，样式交给 CSS，即结构 ( HTML ) 与样式( CSS ) 相分离。

CSS语法规范

使用 HTML 时，需要遵从一定的规范，CSS 也是如此。要想熟练地使用 CSS 对网页进行修饰，首先需要了解 CSS 样式规则。
CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。

选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式
属性和属性值以 “键值对” 的形式出现
属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
属性和属性值之间用英文:分开
多个 “键值对” 之间用英文;进行区分
所有的样式，都包含在 style 标签内，表示是样式表。style 一般写到 head 结束标签的上方。

<head>
    <style type="text/css>
        h4 {
            color: blue;
            font-size: 100px;
        }
    </style>
</head>

注意点:

style 标签必须写在 head 标签的开始标签和结束标签之间(也就是必须和 title 标签是兄弟关系)
style 标签中的 type 属性其实可以不用写, 默认就是 type="text/css"
设置样式时必须按照固定的格式来设置. key: value;其中:不能省略, 分号大多数情况下也不能省略(当有多个属性时, 最后一个可以省略)

CSS的注释

CSS 代码也可以添加注释来方便阅读：
- CSS 的注释和HTML的注释是不一样的；
- /* 我是被注释的内容 */

1
2
3

h3 {
    color: pink;/*字体颜色*/
}

CSS代码风格

样式书写风格

1	h3 { color: deeppink;font-size: 20px;} /不推荐/

/* 推荐 */
h3 {
    color: pink;
    font-size: 20px;
}

样式大小写

/* 推荐  强烈推荐样式选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外。 */
h3 {
	color: pink;
}

/* 不推荐 */
H3 {
	COLOR: PINK;
}

空格规范

/*
	属性值前面，冒号后面，保留一个空格
	选择器（标签）和大括号中间保留一个空格  */
h3 {
	color: pink;
}

CSS的引入方式

按照 CSS 样式书写的位置（或者引入的方式），CSS 样式表可以分为三大类：
- 1) 行内样式表（行内式）
- 2) 内部样式表（嵌入式）
- 3) 外部样式表（链接式）

内部样式表

内部样式表（内嵌样式表）是写到 html 页面内部,是将所有的 CSS 代码抽取出来，单独放到一个 style 标签中。

<style>
    div {
        color: red;
        font-size: 12px;
    }
</style>

style 标签理论上可以放在 HTML 文档的任何地方，但一般会放在文档的 head 标签中
通过此种方式，可以方便控制当前整个页面中的元素样式设置
代码结构清晰，但是并没有实现结构与样式完全分离
使用内部样式表设定 CSS，通常也被称为嵌入式引入，这种方式是我们练习时常用的方式

行内样式表

行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式.

1	<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>

style 其实就是标签的属性
在双引号中间，写法要符合 CSS 规范
可以控制当前的标签设置样式
由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用
使用行内样式表设定 CSS，通常也被称为行内式引入

外部样式表

实际开发都是外部样式表. 适合于样式比较多的情况. 核心是:样式单独写到 CSS 文件中，之后把 CSS 文件引入到 HTML 页面中使用.
引入外部样式表分为两步：
- 1. 新建一个后缀名为 .css 的样式文件，把所有 CSS 代码都放入此文件中。
- 1. 在 HTML 页面的 head 标签中，使用 link 标签引入这个文件。

1	<link rel="stylesheet" href="./index.css">

使用外部样式表设定 CSS，通常也被称为外链式或链接式引入，这种方式是开发中常用的方式

@import方法导入

可以在style元素或者CSS文件中使用@import导入其他的CSS文件

@import url(./other.css)
.red{
	color:red;
}

CSS引入方式总结

CSS基础选择器

选择器的作用

选择器(选择符)就是根据不同需求把不同的标签选出来,这就是选择器的作用。 简单来说，就是选择标签用的。

以上 CSS 做了两件事：
- 1. 找到所有的 h1 标签。选择器（选对人）。
- 1. 设置这些标签的样式，比如颜色为红色（做对事）。

选择器分类

选择器分为 基础选择器和复合选择器 两个大类，我们这里先讲解一下基础选择器。
基础选择器是由单个选择器组成的
基础选择器又包括：标签选择器、类选择器、id 选择器和通配符选择器

标签选择器

标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。

<style>
     div{
         width: 100px;
         height: 100px;
         background-color: red;
     }
 </style>

作用:

标签选择器可以把某一类标签全部选择出来，比如所有的 div 标签和所有的 span 标签。
优点:

能快速为页面中同类型的标签统一设置样式。
缺点:

不能设计差异化样式，只能选择全部的当前标签。

类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器.
例如，将所有拥有 red 类的 HTML 元素均为红色:

<style>
    .red{
        color: red;
    }
</style>

结构需要用 class 属性来调用, class : 类的意思:

1	<div class=‘red’> 变红色 </div>

类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点.显示。
类选择器使用.（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）。
可以理解为给这个标签起了一个名字，来表示。
长名称或词组可以使用中横线来为选择器命名。
不要使用纯数字、中文等命名，尽量使用英文字母来表示。
命名要有意义，尽量使别人一眼就知道这个类名的目的。
命名规范：见附件（ Web 前端开发规范手册.doc）
记忆口诀：样式点定义，结构类调用。一个或多个，开发最常用。

类选择器案例

通过这个案例练习两个地方:
- 类选择器的使用
- div 就是一个盒子,用来装网页内容的.

<head>
    <style>
        div{
            width: 100px;
            height: 100px;
        }
        .red {
            background-color: red;
        }
        .green {
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="red"></div>
    <div class="green"></div>
    <div class="red"></div>
</body>

类选择器-多类名

我们可以给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签.
简单理解就是一个标签有多个名字.

01 多类名使用方式
- 在标签 class 属性中写多个类名
- 多个类名中间必须用空格分开
- 这个标签就可以分别具有这些类名的样式

1	<div class="red font20">亚瑟</div>

02 多类名开发中使用场景
- 1. 可以把一些标签元素相同的样式(共同的部分)放到一个类里面.
- 1. 这些标签都可以调用这个公共的类,然后再调用自己独有的类.
- 1. 从而节省 CSS 代码,统一修改也非常方便.

<div class="pink fontWeight font20">亚瑟</div>
<div class="font20">刘备</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蝉</div>

各个类名中间用空格隔开
简单理解：就是给某个标签添加了多个类，或者这个标签有多个名字
这个标签就可以分别具有这些类名的样式
从而节省 CSS 代码,统一修改也非常方便.
多类名选择器在后期布局比较复杂的情况下，还是较多使用的

id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以 # 来定义。
注意：同一个 id 名在每个 HTML 文档中只能出现一次。口诀: 样式 # 定义,结构 id 调用
- 不要用标签名作为 id 值
例如，将 id 为 nav 元素中的内容设置为红色。

1
2
3

#nav {
	color:red;
}

id 和类选择器的区别

类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。
id 选择器好比人的身份证号码，全中国是唯一的，不得重复。
id 选择器和类选择器最大的不同在于使用次数上。
类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，id 选择器经常和 JavaScript 搭配使用。
在企业开发中到底用 id 选择器还是用 class 选择器?
- id 一般情况下是给 js 使用的, 所以除非特殊情况, 否则不要使用 id 去设置样式
- 在企业开发中一个开发人员对类的使用可以看出这个开发人员的技术水平
- 一般情况下在企业开发中要注重冗余代码的抽取, 可以将一些公共的代码抽取到一个类选择器中, 然后让标签和这个类选择器绑定即可

通配符选择器

在 CSS 中，通配符选择器使用 * 定义，它表示选取页面中所有元素（标签）。
通配符选择器自动给所有的元素使用样式
特殊情况才使用，一般用来给所有元素作一些通用性的设置
-  比如内边距、外边距;
-  比如重置一些内容;

1	*{margin:0;padding:0;}

效率比较低，尽量不要使用;

基础选择器总结

每个基础选择器都有使用场景，都需要掌握
如果是修改样式，类选择器是使用最多的

CSS 复合选择器

什么是复合选择器

在 CSS 中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。
复合选择器可以更准确、更高效的选择目标元素（标签）
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等

后代选择器

后代选择器又称为包含选择器，可以选择父元素里面的后代元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

1	ul li { color:red } /* 选择 ul 里面所有的 li标签元素 */

元素1 和元素2 中间用空格隔开
元素1 是父级，元素2 是子级，最终选择的是元素2
元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可
元素1 和元素2 可以是任意基础选择器

子元素选择器

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素.

1	div > p { color:red } /* 表示选择div元素里面的所有直接后代(子元素) p元素。 */

元素1 和元素2 中间用大于号隔开
元素1 是父级，元素2 是子级，最终选择的是元素2
元素2 必须是亲儿子，其孙子、重孙之类都不归他管. 你也可以叫他亲儿子选择器
注意点:
- 子元素选择器只会查找儿子, 不会查找其他被嵌套的标签
- 子元素选择器之间需要用>符号连接, 并且不能有空格
- 子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器
- 子元素选择器可以通过>符号一直延续下去

后代和子元素选择器区别

1. 后代选择器和子元素选择器之间的区别:
- 后代选择器使用空格作为连接符号
- 子元素选择器使用>作为连接符号
- 后代选择器会选中指定标签中, 所有的特定后代标签, 也就是会选中儿子/孙子…, 只要是被放到指定标签中的特定标签都会被选中
- 子元素选择器只会选中指定标签中, 所有的特定的直接标签, 也就是只会选中特定的儿子标签
1. 后代选择器和子元素选择器之间的共同点:
- 后代选择器和子元素选择器都可以使用 标签名称 / id 名称 / class 名称 来作为选择器
- 后代选择器和子元素选择器都可以通过各自的连接符号一直延续下去
- 选择器1>选择器2>选择器3>选择器4{ }
1. 在企业开发中如何选择:
- 如果想选中指定标签中的所有特定的标签, 那么就使用后代选择器
- 如果只想选中指定标签中的所有特定儿子标签, 那么就使用子元素选择器

选择器案例

1. 请将下面的链接文字修改为红色。

<div class="nav">
    <ul>
        <li><a href="#">百度</a></li>
        <li><a href="#">百度</a></li>
    </ul>
</div>

1
2
3

.nav ul li a {
	color: red;
}

1. 请将下面的大肘子文字修改为红色。

<div class="hot">
    <a href="#">大肘子</a>
    <ul>
        <li><a href="#">猪头</a></li>
        <li><a href="#">猪尾巴</a></li>
    </ul>
</div>

1
2
3

.hot>a {
	color: red;
}

交集选择器

什么是交集选择器?
作用: 给所有选择器选中的标签中, 相交的那部分标签设置属性
- 在开发中通常为了精准的选择某一个元素;
格式:

/*
选择器1选择器2{
    属性: 值;
} */
div.box{
  color:red;
}

注意点:
- 选择器和选择器之间没有任何的连接符号
- 选择器可以使用 标签名称 / id名称 / class名称
- 交集选择器仅仅作为了解, 企业开发中用的并不多

并集选择器

并集选择器可以选择多组标签, 同时为他们定义相同的样式。
在开发中通常为了给多个元素设置相同的样式;
并集选择器是各选择器通过英文逗号,连接而成，任何形式的选择器都可以作为并集选择器的一部分。

1	ul,div { color: red; } /* 选择 ul 和 div标签元素 */

元素1 和元素2 中间用逗号隔开
逗号可以理解为和的意思
并集选择器通常用于集体声明

兄弟选择器

相邻兄弟选择器

什么是相邻兄弟选择器 CSS2
作用: 给指定标签后面紧跟的那个标签设置属性
格式:

/*选择器1+选择器2{
    属性:值;
}*/
h1+p{
  color:red;
}

注意点:
- 相邻兄弟选择器必须通过+连接
- 相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签

通用兄弟(CSS3)

什么是通用兄弟选择器
作用: 给指定选择器后面的所有选择器选中的所有标签设置属性 , 前面的不会选中
格式:

/*选择器1~选择器2{
    属性:值;
} */
h1~p{
  color:red;
}

注意点:
- 通用兄弟选择器必须用~连接
- 通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中

伪类选择器

伪类选择器的作用

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。
伪类选择器书写最大的特点是用冒号:表示，比如 :hover 、 :first-child 。
因为伪类选择器很多，比如有链接伪类、结构伪类等，所以这里先给大家讲解常用的链接伪类选择器。

链接伪类选择器

/* 未访问过的状态 */
a:link{
    color: #333;
}
/* 已经访问过的状态 */
a:visited{
    color: orange;
}
/* 鼠标经过的状态 */
a:hover{
    color: blue;
}
/* 点击未松开时的状态 */
a:active{
    color: green;
}

链接伪类选择器注意事项:
- 为了确保生效，请按照 LVHA 的循顺序声明 :link－:visited－:hover－:active。
记忆法：love hate 或者 lv 包包 hao 。
- 因为 a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。
注意点
- 1. a 标签的伪类选择器可以单独出现也可以一起出现
- 1. a 标签的伪类选择器如果一起出现，那么有严格的顺序要求, 编写的顺序必须要遵守爱恨原则 love hate
- 1. 如果默认状态的样式和被访问过状态的样式一样，那么可以缩写
- 1. 在企业开发中编写 a 标签的伪类选择器最好写在标签选择器的后面
- 1. 在企业开发中和 a 标签盒子相关的属性都写在标签选择器中(显示模式/宽度/高度/padding/margin)
- 1. 在企业开发中和 a 标签文字/背景相关的都写在伪类选择器中

/* a 是标签选择器 所有的链接 */
a {
	color: gray;
}
/* :hover 是链接伪类选择器 鼠标经过 */
a:hover {
	color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */
}

除了a元素，:hover、:active也能用在其他元素上
直接给a元素设置样式，相当于给a元素的所有动态伪类都设置了同一个样式
- 相当于a:link、a:visited、a:hover、a:active、a:focus 的 color 都是 gray

:focus伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素。
焦点就是光标，一般情况 input 类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。

1
2
3

input:focus {
	background-color:yellow;
}

因为链接a元素可以被键盘的Tab键选中聚焦，所以:focus也适用于a元素

其他伪类选择器

目标伪类
- :target
语言伪类
- :lang( )
元素状态伪类
- :enabled、:disabled、:checked
结构伪类
- :nth-child( )、:nth-last-child( )、:nth-of-type( )、:nth-last-of-type( )
- :first-child、:last-child、:first-of-type、:last-of-type
- :root、:only-child、:only-of-type、:empty
否定伪类
- :not()

复合选择器总结

序选择器(CSS3)

序选择器是 CSS3 中新增的选择器最具代表性的就是序选择器
什么是序选择器?
- 作用: 选中指定的任意标签然后设置属性
格式:
- 1. 同级别的第几个
  - :first-child 选中同级别中的第一个标签
  - :last-child 选中同级别中的最后一个标签
  - :nth-child(n) 选中同级别中的第 n 个标签
  - :nth-last-child(n) 选中同级别中的倒数第n个标签
  - :only-child 选中父元素中唯一的标签
  - 注意点: 不区分类型
- 1. 同级别同类型的第几个
  - :first-of-type 选中同级别中同类型的第一个标签
  - :last-of-type 选中同级别中同类型的最后一个标签
  - :nth-of-type(n) 选中同级别中同类型的第 n 个标签
  - :nth-last-of-type(n) 选中同级别中同类型的倒数第 n 个标签
  - :only-of-type 选中父元素中唯一类型的某个标签
- 1. 其它用法
  - :nth-child(odd) 选中同级别中的所有奇数
  - :nth-child(even) 选中同级别中的所有偶数
  - :nth-child(xn+y)
    - x 和 y 是用户自定义的, 而 n 是一个计数器, 从 0 开始递增
  - :nth-of-type(odd) 选中同级别中同类型的所有奇数
  - :nth-of-type(even) 选中同级别中同类型的所有偶数
  - :nth-of-type(xn+y)
    - x 和 y 是用户自定义的, 而 n 是一个计数器, 从 0 开始递增

CSS字体样式

字体系列

字体的使用

CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式（如斜体）。
CSS 使用 font-family 属性定义文本的字体系列。

1 2	p { font-family:"微软雅黑";} div {font-family: Arial,"Microsoft Yahei", "微软雅黑";}

各种字体之间必须使用英文状态下的逗号隔开
一般情况下,如果有空格隔开的多个单词组成的字体,需要加引号.
尽量使用系统默认自带的字体，保证在任何用户的浏览器中都能正确显示,如果设置的字体不存在, 那么系统会使用默认的字体来显示
最常见的几个字体：body {font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB'; }
- 会先使用第一种字体,没有就往后继续使用,依次下去,最后还没有,就使用电脑默认字体
默认一般使用宋体
如果想给中文和英文分别单独设置字体, 怎么办?
- 但凡是中文字体, 里面都包含了英文
- 但凡是英文字体, 里面都没有包含中文
- 也就是说中文字体可以处理英文, 而英文字体不能处理中文
- 注意点: 如果想给界面中的英文单独设置字体, 那么英文的字体必须写在中文的前面

字体原理

首先, 我们需要通过一些渠道获取到希望使用的字体(不是开发来做的事情):
- 对于某些收费的字体, 我们需要获取到对应的授权;
- 对于某些公司定制的字体, 需要设计人员来设计;
- 对于某些免费的字体, 我们需要获取到对应的字体文件;
其次, 在我们的CSS代码当中使用该字体(重要):
- 具体的过程看后面的操作流程;
最后, 在部署静态资源时, 将HTML/CSS/JavaScript/Font一起部署在静态服务器中;
用户的角度:
- 浏览器一个网页时, 因为代码中有引入字体文件, 字体文件会被一起下载下来;
- 浏览器会根据使用的字体在下载的字体文件中查找、解析、使用对应的字体；
- 在浏览器中使用对应的字体显示内容；

自定义字体的使用

使用过程如下：
- 1.将字体放到对应的目录中
- 2.通过@font-face来引入字体, 并且设置格式

@font-face {
	font-family : "fontName";
	src : url(./font/font.ttf);
}
body {
	font-family:"fontName";
}

字体的兼容性

我们刚才使用的字体文件是 .ttf, 它是TrueType字体.
- 在开发中某些浏览器可能不支持该字体, 所以为了浏览器的兼容性问题, 我们需要有对应其他格式的字体;
TrueType字体：拓展名是 .ttf
- OpenType/TrueType字体：拓展名是 .ttf、.otf，建立在TrueType字体之上
- Embedded OpenType字体：拓展名是 .eot， OpenType字体的压缩版
- SVG字体：拓展名是 .svg、 .svgz
- WOFF表示Web Open Font Format web开放字体：拓展名是 .woff，建立在TrueType字体之上
这里我们提供一个网站来生产对应的字体文件:
- https://font.qqe2.com/# 暂时可用
可以如下格式编写:

src 用于指定字体资源
url 指定资源的路径
format 用于帮助浏览器快速识别字体的格式;

px（像素）大小是我们网页的最常用的单位
- 也可以使用em单位(不推荐)：1em代表100%，2em代表200%，0.5em代表50%
- 也可以使用百分比 : 基于父元素的font-size计算，比如50%表示等于父元素font-size的一半
谷歌浏览器默认的文字大小为16px
不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
可以给 body 指定整个页面文字的大小

字体粗细

CSS 使用 font-weight 属性设置文本字体的粗细。

1
2
3

p {
	font-weight: bold;
}

学会让加粗标签（比如 h 和 strong 等) 不加粗，或者其他标签加粗
实际开发时，我们更喜欢用数字表示粗细
strong、b、h1~h6 等标签的 font-weight 默认就是 bold

字体样式

CSS 使用 font-style 属性设置文本的风格。
font-style用于设置文字的常规、斜体显示
- normal：常规显示
- italic(斜体)：用字体的斜体显示(通常会有专门的字体)
- oblique(倾斜)：文本倾斜显示(仅仅是让文字倾斜)

1
2
3

p {
	font-style: oblique;/* 文本倾斜显示(仅仅是让文字倾斜) */
}

注意： 平时我们很少给文字加斜体，反而要给斜体标签（em，i）改为不倾斜字体。
em、i、cite、address、var、dfn 等元素的 font-style 默认就是 italic

字体复合样式

字体属性可以把以上文字样式综合来写, 这样可以更节约代码:

1
2
3

body {
	font: font-style font-weight font-size/line-height font-family;
}

使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用

字体属性总结

CSS文本属性

CSS Text（文本）属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

文本颜色

color 属性用来设置文本内容的前景色,包括文字、装饰线、边框、外轮廓等的颜色
开发中最常用的是十六进制.

1
2
3

div {
	color: red;
}

颜色关键字（color keywords）：
- 是不区分大小写的标识符，它表示一个具体的颜色；
- 可以表示哪些颜色呢？
- https://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value#%E8%AF%AD%E6%B3%95
RGB颜色：
- RGB是一种色彩空间，通过R（red，红色）、G（green，绿色）、B（blue，蓝色）三原色来组成了不同的颜色；
  - 也就是通过调整这三个颜色不同的比例，可以组合成其他的颜色；
- RGB 各个原色的取值范围是 0~255；
RGB颜色可以通过以#为前缀的十六进制字符和函数（rgb()、rgba()）标记表示。
方式一：十六进制符号：#RRGGBB[AA]
- R（红）、G（绿）、B （蓝）和A （alpha）是十六进制字符（0–9、A–F）；A是可选的。
- 比如，#ff0000等价于#ff0000ff；
方式二：十六进制符号：#RGB[A]
- R（红）、G（绿）、B （蓝）和A （alpha）是十六进制字符（0–9、A–F）；
- 三位数符号（#RGB）是六位数形式（#RRGGBB）的减缩版。
  - 比如，#f09和#ff0099表示同一颜色。
- 四位数符号（#RGBA）是八位数形式（#RRGGBBAA）的减缩版。
  - 比如，#0f38和#00ff3388表示相同颜色。
方式三：函数符： rgb[a](R, G, B[, A])
- R（红）、G（绿）、B （蓝）可以是<number>（数字），或者<percentage>（百分比），255相当于100%。
- A（alpha）可以是0到1之间的数字，或者百分比，数字1相当于100%（完全不透明）。

对齐文本

text-align 属性用于设置元素内文本内容的水平对齐方式。
- MDN: 定义行内内容（例如文字）如何相对它的块父元素对齐;
格式: text-align: center;

1
2
3

div {
	text-align: justify;/* 两端对齐 */
}

装饰文本

text-decoration 属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。
格式: text-decoration: underline;
a 元素有下划线的本质是默认被添加了 text-decoration 属性

1
2
3

div {
	text-decoration：underline；
}

pink 老师总结: 重点记住如何添加下划线 ? 如何删除下划线 ? 其余了解即可.

文字大小写转换

text-transform用于设置文字的大小写转换
- Transform单词是使变形/变换(形变);
text-transform有几个常见的值:
- capitalize：(使…首字母大写, 资本化的意思)将每个单词的首字符变为大写
- uppercase：(大写字母)将每个单词的所有字符变为大写
- lowercase：(小写字母)将每个单词的所有字符变为小写
- none：没有任何影响

1
2
3

h1 {
  text-transform: capitalize;/*将每个单词的首字符变为大写*/
}

实际开发中用JavaScript代码转化的更多

字间距/词间距

letter-spacing、word-spacing 分别用于设置字母、单词之间的间距
- 默认是0，可以设置为负数

文本缩进

text-indent 属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。

1
2
3

div {
	text-indent: 10px;
}

通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。

1
2
3

p {
	text-indent: 2em;/* 缩进2个文字 */
}

em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小, 如果当前元素没有设置大小，则会按照父元素的 1 个文字大小。

行高

line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离.

1
2
3

p {
	line-height: 26px;
}

行高的严格定义是：两行文字基线（baseline）之间的间距
基线（baseline）：与小写字母x最底部对齐的线

小技巧:单行文字垂直居中
- CSS 没有给我们提供文字垂直居中的代码. 这里我们可以使用一个小技巧来实现.
  - 解决方案: 让文字的行高等于盒子的高度就可以让文字在当前盒子内垂直居中
单行文字垂直居中的原理:

简单理解: 行高的上空隙和下空隙把文字挤到中间了. 是如果行高小于盒子高度,文字会偏上,如果行高大于盒子高度,则文字偏下

文本属性总结

CSS的元素显示模式

什么是元素显示模式

作用：网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。
元素显示模式就是元素（标签）以什么方式进行显示，比如 div 自己占一行，比如一行可以放多个 span。
HTML 元素一般分为块元素和行内元素两种类型。

块级元素

常见的块元素有h1~h6、p、div、ul、ol、li等，其中 div 标签是最典型的块元素。
块级元素的特点：
- 1) 比较霸道，自己独占一行。
- 2) 高度，宽度、外边距以及内边距都可以控制。
- 3) 宽度默认是容器（父级宽度）的100%。
- 4) 是一个容器及盒子，里面可以放行内或者块级元素。
注意：
- 文字类的元素内部不能使用块级元素
- p 标签主要用于存放文字，因此 p 里面不能放块级元素，特别是不能放 div 标签,否则浏览器会解析出错
- 同理， h1~h6 等都是文字类块级标签，里面也不能放其他块级元素

行内元素

常见的行内元素有 a、strong、b、em、i、del、s、ins、u、span等，其中 span 标签是最典型的行内元素。
有的地方也将行内元素称为内联元素。
行内元素的特点：
- 01 相邻行内元素在一行上显示，一行可以显示多个。
- 02 高、宽直接设置是无效的。
- 03 默认宽度就是它本身内容的宽度。
- 04 行内元素只能容纳文本或其他行内元素。
- 05 行内元素设置宽高样式不生效
注意：
- 链接里面不能再放链接
- 特殊情况链接 a 里面可以放块级元素，但是给 a 转换一下块级模式最安全

行内块元素

在行内元素中有几个特殊的标签 —— img 、input 、td，它们同时具有块元素和行内元素的特点。也称它们为行内块元素。
行内块元素的特点：
- 01 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。
- 02 默认宽度就是它本身内容的宽度（行内元素特点）。
- 03 高度，行高、外边距以及内边距都可以控制（块级元素特点）。

元素显示模式总结

学习元素显示模式的主要目的就是分清它们各自的特点，当我们网页布局的时候，在合适的地方用合适的标签元素。

元素显示模式的转换

特殊情况下，我们需要元素模式的转换，简单理解: 一个模式的元素需要另外一种模式的特性
比如想要增加链接 a 的触发范围。
转换为块元素：display:block;
- 独占父元素的一行
- 可以随意设置宽高
- 高度默认由内容决定
转换为行内元素：display:inline;
- 跟其他行内级元素在同一行显示;
- 不可以随意设置宽高;
- 宽高都由内容决定;
转换为行内块：display: inline-block;
- 跟其他行内级元素在同一行显示
- 可以随意设置宽高
- 可以这样理解
  - 对外来说，它是一个行内级元素
  - 对内来说，它是一个块级元素
隐藏元素 : display:none;

元素显示模式案例

案例的核心思路分为两步:
- 1. 把链接 a 转换为行块级元素, 这样链接就可以设置宽度和高度,并在同一行显示
- 1. 鼠标经过a 给链接设置背景颜色

<head>
  <style>
    a {
      display: inline-block;
      width: 50px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      background-color: pink;
    }
    a:hover{
      color: red;
      background-color: #ccc;
    }
  </style>
</head>

<body>
  <a href="#">新闻</a>
  <a href="#">体育</a>
  <a href="#">汽车</a>
  <a href="#">好用</a>
</body>

元素的显示与隐藏

类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！
本质：让一个元素在页面中隐藏或者显示出来。

display 显示隐藏

display 属性用于设置一个元素应如何显示。
- display: none ；隐藏对象, 元素不显示出来, 并且也不占据位置, 不占据任何空间(和不存在一样);
- display：block ；除了转换为块级元素之外，同时还有显示元素的意思
display 隐藏元素后，不再占有原来的位置。
后面应用及其广泛，搭配 JS 可以做很多的网页特效。

visibility 可见性

visibility 属性用于指定一个元素应可见还是隐藏。
- visibility：visible ; 默认为 visible, 元素是可见的;
- visibility：hidden; 元素隐藏,虽然元素不可见, 但是会占据元素应该占据的空间;
visibility 隐藏元素后，继续占有原来的位置。
如果隐藏元素想要原来位置，就用 visibility：hidden
如果隐藏元素不想要原来位置，就用 display：none (用处更多重点）

overflow 溢出显示隐藏

overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。
- visible：溢出的内容照样可见
- hidden：溢出的内容直接裁剪
- scroll：溢出的内容被裁剪，但可以通过滚动机制查看
  - 会一直显示滚动条区域，滚动条区域占用的空间属于 width、height
- auto：自动根据内容是否溢出来决定是否提供滚动机制
一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。
但是如果有定位的盒子，请慎用 overflow:hidden; 因为它会隐藏多余的部分。

设置透明度

rgba设置颜色, 将a的值设置为 0
- rgba的a设置的是alpha值, 可以设置透明度, 不影响子元素;
opacity设置透明度, 设置为 0
- 设置整个元素的透明度, 会影响所有的子元素;

显示与隐藏总结

1. display 显示隐藏元素但是不保留位置
1. visibility 显示隐藏元素但是保留原来的位置
1. overflow 溢出显示隐藏但是只是对于溢出的部分处理

显示与隐藏案例

练习元素的显示与隐藏
练习元素的定位
核心原理：原先半透明的黑色遮罩看不见，鼠标经过大盒子，就显示出来。
遮罩的盒子不占有位置，就需要用绝对定位和 display 配合使用。

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      position: relative;
      width: 300px;
      height: 200px;
      background-color: red;
    }
    img {
      width: 100%;
      height: 100%;
    }
    .cover {
      position: absolute;
      display: none;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(123, 124, 214, 0.4);
    }
    .box:hover .cover {
      display: block;
    }
  </style>
</head>
<body>
  <div class="box">
    <img src="./img.jpg" alt="">
    <div class="cover"></div>
  </div>
</body>

CSS背景样式

通过 CSS 背景属性，可以给页面元素添加背景样式。
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

背景颜色

background-color 属性定义了元素的背景颜色。
一般情况下元素背景颜色默认值是 transparent（透明），我们也可以手动指定背景颜色为透明色。

1	background-color:transparent; /指定背景颜色为透明色/

1	background-color:red; /指定背景颜色为红色/

背景图片

background-image 属性描述了元素的背景图像。实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片
优点是非常便于控制位置. (精灵图也是一种运用场景)
如果设置了多张图片
- 设置的第一张图片将显示在最上面，其他图片按顺序层叠在下面
- 如果设置了背景图片后，元素没有具体的宽高，背景图片是不会显示出来的

1	background-image: url(././images/24.jpg);

注意：背景图片后面记得加 url ，同时里面的路径不要加引号。

背景平铺

如果需要在 HTML 页面上对背景图像进行平铺，可以使用 background-repeat 属性。

1	background-repeat: repeat \| no-repeat \| repeat-x \| repeat-y

1	background-repeat: no-repeat; /背景不平铺/

背景定位

利用 background-position 属性可以改变图片在背景中的位置。

1	background-position: x y;

参数代表的意思是：x 坐标和 y 坐标。可以使用方位名词或者精确单位

01 参数是方位名词
- 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致
- 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
02 参数是精确单位
- 如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标
- 如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中
03 参数是混合单位
- 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标

背景固定

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
background-attachment 后期可以制作视差滚动的效果。
可以设置以下 3 个值:
- scroll：此关键属性值表示背景相对于元素本身固定，而不是随着它的内容滚动
- local：此关键属性值表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动.
- fixed：此关键属性值表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。

1	background-attachment : scroll; /背景和内容一起滚动/

1	background-attachment : fixed; /背景固定位置不动,不会随着内容而动/

背景复合写法

为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性 background 中。从而节约代码量.这是实际开发中，我们更提倡的写法。
当使用简写属性时，没有特定的书写顺序,一般习惯约定顺序为：
- background: 背景颜色背景图片地址背景平铺背景图像滚动背景图片位置;

1	background: transparent url(image.jpg) repeat-y fixed top ;

1 2	/* 背景颜色图片平铺是否滚动图片位置 */ background:#ccc url(./images/24.jpg) no-repeat fixed center top;

背景颜色透明(CSS3)

CSS3 为我们提供了背景颜色半透明的效果

1	background: rgba(0, 0, 0, 0.3);

最后一个参数是 alpha 透明度，取值范围在 0~1之间
我们习惯把 0.3 的 0 省略掉，写为 background: rgba(0, 0, 0, .3);
注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响
CSS3 新增属性，是 IE9+ 版本浏览器才支持的
但是现在实际开发,我们不太关注兼容性写法了,可以放心使用

背景样式总结

背景图片:实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置. (精灵图也是一种运用场景)

背景样式综合案例

练习价值:
1. 链接属于行内元素, 但是此时需要宽度高度,因此需要模式转换.
2. 里面文字需要水平居中和垂直居中. 因此需要单行文字垂直居中的代码.
3. 链接里面需要设置背景图片.因此需要用到背景的相关属性设置.
4. 鼠标经过变化背景图片,因此需要用到伪类选择器.

<head>
    <style>
        div{
            display: inline-block;
            width: 120px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background:url(./images/bg.png) no-repeat left top;
        }
        div:hover{
            background: url(./images/bgc.png);
        }
    </style>
</head>
<body>
    <div>首页</div>
    <div>首页</div>
    <div>首页</div>
    <div>首页</div>
    <div>首页</div>
    <div>首页</div>
</body>

背景尺寸大小

background-size 属性指定背景图片大小。

1	background-size: length\|percentage\|cover\|contain;

length	设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
percentage	将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为”auto(自动)”
cover	此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain	此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

background-size: 600px 400px; /* 像素值设置背景图片高度和宽度。只给出一个值，第二个是设置为 auto (自动) */

background-size: 100%  90%; /* 百分比  只给出一个值，第二个是设置为 auto (自动) */

background-size: cover; /* cover 拉伸图片到能覆盖整个容器的最小大小*/

background-size: contain; /* contain 拉伸图片到达容器边缘就停止拉伸*/

背景图片定位区域(CSS3)

background-origin 属性规定 background-position 属性相对于什么位置来定位

1	background-origin: padding-box\|border-box\|content-box;

值	描述
padding-box	背景图像填充框的相对位置
border-box	背景图像边界框的相对位置
content-box	背景图像的相对位置的内容框

background-origin: padding-box; /*背景图片从padding开始,背景图片会填充padding的区域 默认值*/

background-origin: border-box; /*背景图片从边框开始,会填充border区域,但是border依旧处于最上层显示*/

background-origin: content-box; /*背景图片从内容区域开始,填充内容区域*/

背景绘制区域(CSS3)

background-clip 属性规定背景的绘制区域。

值	描述
border-box	背景被裁剪到边框盒。
padding-box	背景被裁剪到内边距框。
content-box	背景被裁剪到内容框。

background-clip: border-box;  /* 背景被裁剪到边框盒。 从边框开始填充,填充到边框的下方 (测试时能填充右边框和下角边框的底层,但无法填充到左边框和上边框的底层)*/
      
background-clip: padding-box;  /* 背景被裁剪到内边距框。从 padding 区域开始填充满整个 padding 区域,不会填充到边框区域 */
      
background-clip: content-box;  /* 背景被裁剪到内容框。从 content 内容区域开始填充满整个 content 内容区域,不会填充到 padding 区域*/

多重背景图片

CSS 允许您通过 background-image 属性为一个元素添加多幅背景图像。
不同的背景图像的各个属性之间用逗号隔开，并且图像会彼此堆叠，其中的第一幅图像最靠近观看者。
下面的例子有两幅背景图像，第一幅图像是花朵（与底部和右侧对齐），第二幅图像是纸张背景（与左上角对齐）

#example1 {
  background-image: url(flower.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

多重背景的简写

多重背景图像可以使用单独的背景属性（如上所述）或 background 简写属性来指定。
下面的例子使用 background 简写属性（结果与上例相同）：

1
2
3

#example1 {
  background: url(flower.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

多重背景的尺寸

在处理多重背景时，background-size 属性还可以接受多个设置背景尺寸的值（使用逗号分隔的列表）。
下面的例子指定了三幅背景图像，每幅图像有不同的 background-size 值：

#example1 {
  background: url(tree.png) left top no-repeat, url(flower.gif) right bottom no-repeat, 
  	url(paper.gif) left top repeat;
  background-size: 50px, 130px, auto;
}

图片和背景图片的区别

1. 背景图片仅仅是一个装饰, 不会占用位置,,插入图片会占用位置
1. 背景图片有定位属性, 所以可以很方便的控制图片的位置, 插入图片没有定位属性, 所有控制图片的位置不太方便
1. 插入图片的语义比背景图片的语义要强, 所以在企业开发中如果你的图片想被搜索引擎收录, 那么推荐使用插入图片
- img，作为网页内容的重要组成部分，比如广告图片、LOGO图片、文章配图、产品图片
- background-image，可有可无。有，能让网页更加美观。无，也不影响用户获取完整的网页内容信息

精灵图

为什么需要精灵图

一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。
因此，精灵图的目的: 就是为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）。
核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。

精灵图的使用

使用精灵图核心：
- 01 精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。
- 02 这个大图片也称为 sprites 精灵图 或者 雪碧图
- 03 移动背景图片位置，此时可以使用 background-position 。
- 04 移动的距离就是这个目标图片的 x 和 y 坐标。注意网页中的坐标有所不同
- 05 因为一般情况下都是往上 / 往左移动，所以数值是负值。
- 06 使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。
使用精灵图核心总结：
- 精灵图主要针对于小的背景图片使用。
- 主要借助于背景位置来实现 : background-position 。
- 一般情况下精灵图都是负值。（千万注意网页中的坐标： x 轴右边走是正值，左边走是负值， y 轴同理。）

盒子模型

页面布局要学习三大核心, 盒子模型, 浮动和定位. 学习好盒子模型能非常好的帮助我们布局页面.

网页布局的本质

网页布局过程：

01 先准备好相关的网页元素，网页元素基本都是盒子 Box 。

02 利用 CSS 设置好盒子样式，然后摆放到相应位置。

03 往盒子里面装内容.
网页布局的核心本质：就是利用 CSS 摆盒子。

盒子模型

1. 所谓盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
1. CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和实际内容

1. 盒模型宽度和高度
- 内容的宽度和高度
  - 就是通过 width / height 属性设置的宽度和高度, 对于行内级元素来说, 设置宽高是无效的!
  - 另外我们还可以设置如下属性:
    - min-width：最小宽度，无论内容多少，宽度都大于或等于min-width
    - max-width：最大宽度，无论内容多少，宽度都小于或等于max-width
    - 移动端适配时, 可以设置最大宽度和最小宽度;
  - 下面两个属性不常用:
    - min-height：最小高度，无论内容多少，高度都大于或等于min-height
    - max-height：最大高度，无论内容多少，高度都小于或等于max-height
- 元素的宽度和高度
  - 宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框
  - 高度同理可证
- 规律
  - 增加了 padding / border 之后元素的宽高也会发生变化
  - 如果增加了 padding / border 之后还想保持元素的宽高, 那么就必须减去内容的宽高
- 元素空间的宽度和高度
  - 宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距
  - 高度同理可证

边框

什么是边框

边框就是环绕在标签宽度和高度周围的线条
border 可以设置元素的边框。边框有三部分组成: 边框宽度(粗细) 边框样式边框颜色

1	border : border-width border-style border-color;

边框样式 border-style 可以设置如下值：
- none：没有边框,即忽略所有边框的宽度（默认值）
- solid：边框为单实线(最为常用的)
- dashed：边框为虚线
- dotted：边框为点线

1 2	/边框简写没有顺序/ border: 1px solid red;

1 2	/* 只设定上边框，其余三边的边框同理 */ border-top: 1px solid red;

边框会影响盒子实际大小:
边框会额外增加盒子的实际大小。因此我们有两种方案解决:
- 01 测量盒子大小的时候,不量边框.
- 02 如果测量的时候包含了边框,则需要 width / height 减去边框宽度
案例:请给一个 200 * 200 的盒子，设置上边框为红色，其余边框为蓝色（提示：一定注意边框的层叠性）

<style>
   div{
       width: 200px;
       height: 200px;
       border:2px solid blue; /* 所有边框设置为 blue */
       border-top: 2px solid red; /* 上边框设置为 red  层叠性*/
   }
</style>

同时设置四条边

border: 边框的宽度边框的样式边框的颜色;
注意点:
- 连写格式中颜色属性可以省略, 省略之后默认就是黑色
- 连写格式中样式不能省略, 省略之后就看不到边框了
- 连写格式中大小可以省略, 省略之后还是可以看到边框,不写边框大小,谷歌浏览器默认为 3px
示例代码:

<style>
    .box{
       width: 100px;
       height: 100px;
       background-color: red;
       border: 5px solid blue;
       /*border: 5px solid;*/
       /*border: 5px blue;*/
       /*border: solid blue;*/
   }
</style>

分别设置四条边

border-top: 边框的宽度边框的样式边框的颜色;
border-right: 边框的宽度边框的样式边框的颜色;
border-bottom: 边框的宽度边框的样式边框的颜色;
border-left: 边框的宽度边框的样式边框的颜色;
示例代码

<style>
  .box{
      width: 100px;
      height: 100px;
      background-color: red;
      border-top:5px solid blue;
      border-right:10px dashed green;
      border-bottom:15px dotted purple;
      border-left:20px double pink;
  }
</style>

按要素连写

border-width: 上右下左;
border-style: 上右下左;
border-color: 上右下左;
注意点:
- 这三个属性的取值是按照顺时针来赋值, 也就是按照上右下左来赋值, 而不是按照日常生活中的上下左右
- 这三个属性的取值省略时的规律
- 上右下左 > 上右下 > 左边的取值和右边的一样
- 上右下左 > 上右 > 左边的取值和右边的一样下边的取值和上边一样
- 上右下左 > 上 > 右下左边取值和上边一样
示例代码:

<style>
   .box{
       width: 500px;
       height: 500px;
       background-color: red;
       border-width: 5px 10px 15px 20px;
       border-style: solid dashed dotted double;
       border-color: blue green purple pink;
       /*border-color: blue green purple;*/ /* 上 左右 下*/
       /*border-color: blue green;*/ /* 上下 左右 */
       /*border-color: blue;*/ /* 四边颜色相同 */
   }
</style>

按方向和要素连写

<style>
  .box{
      width: 500px;
      height: 500px;
      background-color: red;
    
		 /* 上边框样式 */
      border-top-width: 5px;
      border-top-style: solid;
      border-top-color: blue;
		 /* 右边框样式 */
      border-right-width: 10px;
      border-right-style: dashed;
      border-right-color: green;
		 /* 下边框样式 */
      border-bottom-width: 15px;
      border-bottom-style: dotted;
      border-bottom-color: purple;
		 /* 左边框样式 */
      border-left-width: 20px;
      border-left-style: double;
      border-left-color: pink;
  }
</style>

注意点:
- 同一个选择器中如果设置了多个边框属性, 后面的会覆盖前面的(层叠性)

.box3{
   border: 5px solid red;
   border-right:5px dashed red;
}

外轮廓

outline表示元素的外轮廓
- 不占用空间
- 默认显示在border的外面
outline相关属性有
- outline-width: 外轮廓的宽度
- outline-style：取值跟border的样式一样，比如solid、dotted等
- outline-color: 外轮廓的颜色
- outline：outline-width、outline-style、outline-color的简写属性，跟border用法类似

1
2
3

input {
	outline:none;
}

内边距

padding 属性用于设置内边距，即边框与内容之间的距离。

padding 属性（简写属性）可以有一到四个值。

以上 4 种情况，我们实际开发都会遇到。
当我们给盒子指定 padding 值之后，发生了 2 件事情：
- 01 内容和边框有了距离，添加了内边距。
- 02 padding 影响了盒子实际大小。
也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。
××× 如果盒子本身没有指定 width / height 属性, 则此时 padding 不会撑开盒子大小.( ×××, 测试时即使不给盒子宽高,只设置 padding 也会撑大盒子)
解决方案: 如果要保证盒子跟效果图大小保持一致，则让 width / height 减去多出来的内边距大小即可。
内边距案例：新浪导航案例 padding 影响盒子好处,用左右内边距撑开盒子,以加大盒子之间的水平间距

<head>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 480px;
            height: 40px;
            border-top: 5px solid orange;
        }
        ul li{
            height: 40px;
            line-height: 40px;
            text-align: center;
            padding: 0 10px;
            display: inline-block;
        }
        div ul li:hover{
            background:#ccc;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>设为首页</li>
            <li>手机新浪网</li>
            <li>移动客户端</li>
            <li>博客</li>
            <li>微博</li>
            <li>关注我</li>
        </ul>
    </div>
</body>

外边距

1. margin 属性用于设置外边距，即控制盒子和盒子之间的距离。

margin 简写方式代表的意义跟 padding 完全一致。
margin: 0 auto; 可以让块级元素水平居中
1. 单独设置四条边,可选值: 百分比 | 像素值 | auto
- 示例代码:

<style>
  .box1{
    margin-top:20px;
    margin-right:40px;
    margin-bottom:80px;
    margin-left:160px;
   }
</style>

1. 同时设置四条边
- margin: 上右下左;
- 注意点:
  - 这三个属性的取值省略时的规律
  - 上右下左 > 上右下 > 左边的取值和右边的一样
  - 上右下左 > 上右 > 左边的取值和右边的一样下边的取值和上边一样
  - 上右下左 > 上 > 右下左边取值和上边一样
  - 外边距的那一部分是没有背景颜色的
- 示例代码:

<style>
  .box1{
    margin:20px 40px 80px 160px; /* 上 右 下 左 */
    /*margin:20px 40px 80px;*/ /* 上 左右 下*/
    /*margin:20px 40px;*/ /* 上下 左右*/
    /*margin:20px;*/ /* 四边 */
  }
</style>

两个居中属性的区别

text-align:center;和margin:0 auto;区别
- text-align: center; 是设置盒子中存储的文字 / 图片水平居中
- margin:0 auto; 是让盒子自己水平居中
示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>53-盒子居中和内容居中</title>
    <style>
        .father{
            width: 800px;
            height: 500px;
            background-color: red;
            /*文字图片会居中*/
            /*text-align: center;*/
            /*盒子自身会居中*/
            margin:0 auto;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="father">
    我是文字<br/>
    <img src="images/girl.jpg">
    <div class="son"></div>
</div>
</body>
</html>

外边距典型应用

外边距可以让块级盒子水平居中，但是必须满足两个条件：
- 盒子必须指定了宽度（width）。
- 盒子左右的外边距都设置为 auto 。

1	.header{ width:960px; margin:0 auto;}

常见的写法，以下三种都可以：
- margin-left: auto; margin-right: auto;
- margin: auto;
- margin: 0 auto;
注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。

外边距合并

使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。
主要有两种情况:
- 01 相邻块元素垂直外边距的合并
  - margin-top传递
  - 如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素
  - margin-bottom传递
    - 如果块级元素的底部线和父元素的底部线重写，并且父元素的高度是auto，那么这个块级元素的margin-bottom值会传递给父元素
- 02 嵌套块元素垂直外边距的塌陷
01 相邻块元素垂直外边距的合并
- 当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。而是取两个值中的较大者,这种现象被称为相邻块元素垂直外边距的合并。也可以叫做上下外边距折叠,水平外边距不会折叠
- 解决方案：尽量只给一个盒子添加 margin 值。

02 嵌套块元素垂直外边距的塌陷

-
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

解决方案：
- 01 可以为父元素定义上边框。
- 02 可以为父元素定义上内边距。
- 03 可以为父元素添加 overflow:hidden。
还有其他方法，比如浮动、固定，绝对定位的盒子不会有塌陷问题，后面咱们再总结。
建议
- margin一般是用来设置兄弟元素之间的间距
- padding一般是用来设置父子元素之间的间距

清除默认内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。

*{
    padding:0; /* 清除内边距 */
    margin:0; /* 清除外边距 */
}

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了

综合案例

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

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

        .box {
            width: 250px;
            height: 280px;
            border: 1px solid red;
            margin: 50px 100px;
        }

        .box img {
            width: 100%;
        }

        .box p {
            margin: 10px 0 30px 10px;
            font-size: 14px;
            color: rgb(63, 62, 62);
        }

        .box .appraise {
            font-size: 12px;
            color: #ccc;
            margin-left: 10px;
        }

        .box .info {
            margin: 10px 0 0 10px;
            font-size: 14px;
        }

        .box .info span {
            color: orange;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="./images/26.jpg" alt="">
        <p>快递牛,整体不错蓝牙可以说秒连,红米给力</p>
        <div class="appraise">来自于 117384232 的评价</div>
        <div class="info">Redmi AirDots真无线蓝... | <span>99.9元</span></div>
    </div>
</body>

</html>

案例总结:
- 01 布局为啥用不同盒子,我只想用 div ？
  - 标签都是有语义的, 合理的地方用合理的标签。比如产品标题就用 h , 大量文字段落就用 p
- 02 为啥用辣么多类名？
  - 类名就是给每个盒子起了一个名字,可以更好的找到这个盒子, 选取盒子更容易,后期维护也方便。
- 03 到底用 margin 还是 padding？
  - 大部分情况两个可以混用，两者各有优缺点，但是根据实际情况，总是有更简单的方法实现。
案例2:快报模块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 275px;
            height: 170px;
            border: 1px solid #ccc;
            margin: 50px;
        }
        div p{
            height: 40px;
            line-height: 40px;
            padding: 0 20px;
            border-bottom: 1px solid #ccc;
            color: #666;
        }
        div ul{
            margin: 10px 0 0 10px;
        }
        div ul li{
            list-style: none;
            color: rgb(49, 49, 49);
        }
    </style>
</head>
<body>
    <div>
        <p>品优购快报</p>
        <ul>
            <li>【特惠】爆款耳机5折秒!</li>
            <li>【特惠】母亲节,健康好礼低至5折!</li>
            <li>【特惠】爆款耳机5折秒!</li>
            <li>【特惠】9.9元洗100张照片!</li>
            <li>【特惠】长虹智能空调立省1000</li>
        </ul>
    </div>
</body>
</html>

CSS浮动

传统网页布局的三种方式

网页布局的本质——用 CSS 来摆放盒子。把盒子摆放到相应位置.
CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)：
- 普通流（标准流）
- 浮动
- 定位
什么是网页的布局方式?
- 网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的
标准流(文档流/普通流)排版方式
- 其实浏览器默认的排版方式就是标准流的排版方式
- 在 CSS 中将元素分为三类, 分别是块级元素 / 行内元素 / 行内块级元素
- 在标准流中有两种排版方式, 一种是垂直排版, 一种是水平排版
  - 垂直排版, 如果元素是块级元素, 那么就会垂直排版
  - 水平排版, 如果元素是行内元素 / 行内块级元素, 那么就会水平排版
浮动流排版方式
- 浮动流是一种 “半脱离标准流” 的排版方式
- 浮动流只有一种排版方式, 就是水平排版. 它只能设置某个元素左对齐或者右对齐
注意点:
- 浮动流中没有居中对齐, 也就是没有 center 这个取值
- 在浮动流中是不可以使用 margin: 0 auto;
特点:
- 在浮动流中是不区分块级元素 / 行内元素 / 行内块级元素的
- 无论是块级元素 / 行内元素 / 行内块级元素都可以水平排版
- 在浮动流中无论是块级元素 / 行内元素 / 行内块级元素都可以设置宽高
- 综上所述, 浮动流中的元素和标准流中的行内块级元素很像

标准流

所谓的标准流: 就是标签按照规定好默认方式排列.
- 块级元素会独占一行，从上向下顺序排列。
常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。
- 常用元素：span、a、i、em 等
以上都是标准流布局，我们前面学习的就是标准流，标准流是最基本的布局方式。
这三种布局方式都是用来摆放盒子的，盒子摆放到合适位置，布局自然就完成了。
注意：实际开发中，一个页面基本都包含了这三种布局方式（后面移动端学习新的布局方式）。

为什么需要浮动

01 如何让多个块级盒子( div )水平排列成一行？
- 比较难，虽然转换为行内块元素可以实现一行显示，但是他们之间会有大的空白缝隙，很难控制。

02 如何实现两个盒子的左右对齐？

总结：有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式.
浮动最典型的应用：可以让多个块级元素一行内排列显示。
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

什么是浮动

float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
- 定位元素会层叠在浮动元素上面

1	div { float: left; }

浮动的特性

01 加了浮动之后的元素,会具有很多特性,需要我们掌握的.
- 01 浮动元素会脱离标准流(脱标)
- 02 浮动的元素会一行内显示并且元素顶部对齐
- 03 浮动的元素会具有行内块元素的特性.
- 04 脱离标准普通流的控制（浮）移动到指定位置（动）, （俗称脱标）
- 05 浮动的盒子不再保留原先的位置

02 如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。
- 注意：浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

03 浮动元素会具有行内块元素特性
- 任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。
- 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
- 浮动的盒子中间是没有缝隙的，是紧挨着一起的
- 行内元素同理

浮动元素的使用

为了约束浮动元素位置, 我们网页布局一般采取的策略是:
- 先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置. 符合网页布局第一准侧.

浮动案例:小米布局案例

...

浮动案例:小米布局案例

...

浮动案例:小米布局案例

...

浮动元素字围现象

什么是浮动元素字围现象?
- 浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动元素字围现象

div{
    float: left;
    width: 100px;
    height: 100px;
    /*background-color: red;*/
    border: 1px solid #000;
}
p{
    width: 500px;
    height: 500px;
    background-color: yellow;
}

清除浮动

为什么需要清除浮动

父级元素高度坍塌: 由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子。

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响

清除浮动的本质

清除浮动的本质是清除浮动元素造成的影响
如果父盒子本身有高度，则不需要清除浮动
清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

清除浮动

1	div{clear:both;}

我们实际工作中，几乎只用 clear: both;
清除浮动的策略是: 闭合浮动.

清除浮动的方法

额外标签法

额外标签法也称为隔墙法，是 W3C 推荐的做法。
额外标签法会在浮动元素末尾添加一个空的标签。例如 <div style="clear:both"></div>，或者其他标签（如 br 等）。
优点：通俗易懂，书写方便
- 缺点：添加许多无意义的标签，结构化较差
注意： 要求这个新的空标签必须是块级元素。
额外标签法总结:
- 01 清除浮动本质是?
  - 清除浮动的本质是清除浮动元素脱离标准流造成的影响
- 02 清除浮动策略是?
  - 闭合浮动. 只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子.
- 03 额外标签法?
  - 隔墙法, 就是在最后一个浮动的子元素后面添加一个额外标签, 添加清除浮动样式.
  - 实际工作可能会遇到,但是不常用

父级添加 overflow 属性

可以给父级添加 overflow 属性，将其属性值设置为 hidden、 auto 或 scroll 。
注意是给父元素添加代码
- 优点：代码简洁
- 缺点：无法显示溢出的部分

父级添加 after 伪元素

:after 方式是额外标签法的升级版。也是给父元素添加
优点：没有增加标签，结构更简单
- 缺点：照顾低版本浏览器
- 代表网站：百度、淘宝网、网易等

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix { /* IE6、7 专有 */
	*zoom: 1;
}

父级添加双伪元素

优点：代码更简洁
缺点：照顾低版本浏览器
代表网站：小米、腾讯等

.clearfix:before,.clearfix:after {
    content:"";
    display:table;
}
.clearfix:after {
    clear:both;
}
.clearfix {
    *zoom:1;
}

清除浮动总结

父级没高度。子盒子浮动了。影响下面布局了，我们就应该清除浮动了。

定位

为什么需要浮动

01 浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。
02 定位则是可以让盒子自由的在某个盒子内移动位置或者固定在屏幕中某个位置，并且可以压住其他盒子。

定位组成

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。
定位 = 定位模式 + 边偏移。
定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。
1. 定位模式:
- 定位模式决定元素的定位方式，它通过 CSS 的 position 属性来设置，其值可以分为四个：

1. 边偏移:
- 边偏移就是定位的盒子移动到最终位置。有 top、bottom、left 和 right 4 个属性。

静态定位

静态定位是元素的默认定位方式，无定位的意思。

1	div{position:static;}

静态定位按照标准流特性摆放位置，它没有边偏移
静态定位在布局时很少用到

相对定位

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的（自恋型）。

1	div { position: relative; }

相对定位的特点：（务必记住）
- 01 它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。
- 02 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。
因此，相对定位并没有脱标。

绝对定位

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）。

1	div { position: absolute; }

绝对定位的特点：（务必记住）
- 01 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document 文档）。
- 02 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级有定位的祖先元素为参考点移动位置。
- 03 绝对定位不再占有原先的位置。（脱标）
所以绝对定位是脱离标准流的。

子绝父相的由来

弄清楚这个口诀，就明白了绝对定位和相对定位的使用场景。
这个“子绝父相”太重要了，是我们学习定位的口诀，是定位中最常用的一种方式这句话的意思是：子级是绝对定位的话，父级要用相对定位。
- 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
- 父盒子需要加定位限制子盒子在父盒子内显示。
- 父盒子布局时，需要占有位置，因此父盒子只能是相对定位。
这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级。
总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位
当然，子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到。

定位案例

...

固定定位 fixed

固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。

1	div { position: fixed; }

固定定位的特点：（务必记住）
01 以浏览器的可视窗口为参照点移动元素。
- 跟父元素没有任何关系
- 不随滚动条滚动。
02 固定定位不在占有原先的位置。
- 固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。

定位案例

两侧固定广告:

小算法：
- 01 让固定定位的盒子 left: 50%. 走到浏览器可视区（也可以看做版心）的一半位置。
- 02 让固定定位的盒子 margin-left: 版心宽度的一半距离。多走版心宽度的一半位置
就可以让固定定位的盒子贴着版心右侧对齐了。

粘性定位

粘性定位可以被认为是相对定位和固定定位的混合。 Sticky 粘性的

1	div { position: sticky; top: 10px; }

粘性定位的特点：
- 01 以浏览器的可视窗口为参照点移动元素（固定定位特点）
- 02 粘性定位占有原先的位置（相对定位特点）
- 03 必须添加 top 、left、right、bottom 其中一个才有效
跟页面滚动搭配使用。兼容性较差，IE 不支持。

定位总结

一定记住相对定位、固定定位、绝对定位两个大的特点：01 是否占有位置（脱标否） 02 以谁为基准点移动位置。
学习定位重点学会子绝父相。

定位扩展

01 绝对定位的盒子居中
- 加了绝对定位的盒子不能通过 margin:0 auto 水平居中，但是可以通过以下计算方法实现水平和垂直居中。
  - 01 left: 50%; 让盒子的左侧移动到父级元素的水平中心位置。
  - 02 margin-left: -100px; 让盒子向左移动自身宽度的一半。
02 定位特殊特性
- 绝对定位和固定定位也和浮动类似。
  - 01 行内元素添加绝对或者固定定位，可以直接设置高度和宽度。添加相对定位,设置高度和宽度无效
  - 02 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小
03 脱标的盒子不会触发外边距塌陷
- 浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。
04 绝对定位（固定定位）会完全压住盒子
- 浮动元素只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）
- 但是绝对定位（固定定位）会压住下面标准流所有的内容。
- 浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。 文字会围绕浮动元素

定位案例

淘宝焦点图布局

...

层级

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序 (z轴)

1	div { z-index: 1; }

数值可以是正整数、负整数或 0, 默认是 auto，数值越大，盒子越靠上
如果属性值相同，则按照书写顺序，后来居上
数字后面不能加单位
只有定位的盒子才有 z-index 属性

CSS 三大特性

继承性

什么是继承性?
- 作用: 给父元素设置一些属性, 子元素也可以使用, 这个我们就称之为继承性
CSS的某些属性具有继承性(Inherited):
- 如果一个属性具备继承性, 那么在该元素上设置后, 它的后代元素都可以继承这个属性;
- 当然, 如果后代元素自己有设置该属性, 那么优先使用后代元素自己的属性(不管继承过来的属性权重多高);
如何知道一个属性是否具有继承性呢?
- 常见的font-size/font-family/font-weight/line-height/color/text-align都具有继承性;
示例代码:

 <style>
   div{
       color: red;
   }
</style>
<div>
    <ul>
        <li>
            <p>我是段落</p>
        </li>
    </ul>
</div>

<!--p会变成红色-->

注意点:
- 并不是所有的属性都可以继承, 只有以 color / font- / text- / line- 开头的属性才可以继承
- 在 CSS 的继承中不仅仅是儿子可以继承, 只要是后代都可以继承
继承性中的特殊性
- a 标签的文字颜色和下划线是不能继承的
- h 标签的文字大小是不能继承的, h 标签的字号大小默认相对于父元素的字体大小, em 为单位,各级标题大小不同

<style>
   div{
       color: red;
       text-decoration: none;
       font-size: 30px;
   }
</style>
<div>
    <a href="#">我是超链接</a>
</div>

<div>
    <h1>我是大标题</h1>
</div>

<!--a 的颜色和下划线不继承, H 的字体大小不继承  -->

应用场景:
- 一般用于统一设置网页上的一些共性信息, 例如网页的文字颜色, 字体,文字大小等内容

body{
   font-size: 30px;
   font-family: "微软雅黑";
   color: #666;
}

层叠性

CSS 全称 Cascading StyleSheet (层叠式样式表), 其中的层叠就是指层叠性
什么是层叠性?
- 作用: 层叠性就是CSS处理冲突的一种能力
- 对于一个元素来说, 相同一个属性我们可以通过不同的选择器给它进行多次设置;
- 那么属性会被一层层覆盖上去;
- 但是最终只有一个会生效;
那么多个样式属性覆盖上去, 哪一个会生效呢?
- 判断一: 选择器的权重, 权重大的生效, 根据权重可以判断出优先级;
- 判断二: 先后顺序, 权重相同时, 后面设置的生效;
示例代码

<style>
  	p{
  	    color: red;
  	}
  	.para{
  	    color: blue;
  	}
</style>
<p id="identity" class="para">我是段落</p>

<!-- 最终显示蓝色, 因为红色被覆盖掉了 -->

注意点:
- 层叠性只有在多个选择器选中”同一个标签”, 然后又设置了”相同的属性”, 才会发生层叠性

优先级

什么是优先级?
- 作用:当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定
优先级判断的三种方式:
1. 间接选中就是指继承
- 如果是间接选中, 那么就是谁离目标标签比较近就听谁的

<style>
 	li{
    color: blue;
   }
  ul{
    color: red;
   }
</style>
<ul>
  <li>
      <p id="identity" class="para">我是段落</p>
  </li>
</ul>
<!-- 最终显示蓝色 -->

1. 相同选择器(直接选中)
- 如果都是直接选中, 并且都是同类型的选择器, 那么就是谁写在后面就听谁的

<style>
 p{
    color: blue;
   }
 p{
    color: red;
   }
</style>
<ul>
    <li>
        <p id="identity" class="para">我是段落</p>
    </li>
</ul>
<!-- 最终显示红色 -->

1. 不同选择器(直接选中)
- 如果都是直接选中, 并且不是相同类型的选择器, 那么就会按照选择器的优先级来层叠
- id > 类 > 标签 > 通配符 > 继承 > 浏览器默认
- 注意点:
  - 通配符选择器也是直接选中

<style>
   #identity{
       color: purple;
   }
   .para{
       color: pink;
   }
   p{
       color: green;
   }
   *{
       color: blue;
   }
   li{
       color: red;
   }
</style>
<ul>
    <li>
        <p id="identity" class="para">我是段落</p>
    </li>
</ul>
<!-- 最终显示紫色 id 选择器的优先级较高-->

优先级权重

什么是优先级的权重?
- 作用: 当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高
权重的计算规则
- 首先先计算选择器中有多少个 id , id 多的选择器优先级最高
- 如果 id 的个数一样, 那么再看类名的个数, 类名个数多的优先级最高
- 如果类名的个数一样, 那么再看标签名称的个数, 标签名称个数多的优先级最高
- 如果 id 个数一样, 类名个数也一样, 标签名称个数也一样, 那么就不会继续往下计算了, 那么此时谁写在后面听谁的
注意点:
- 只有选择器是直接选中标签的才需要计算权重, 否则一定会听直接选中的选择器的
示例代码:

<style>
   #identity1 .box2{
       color: red;
   }
   .box1 .box2{
       color: green;
   }
   div ul li p{
       color: blue;
   }
</style>
<div id="identity1" class="box1">
    <ul>
        <li>
            <p id="identity2" class="box2">我是段落</p>
        </li>
    </ul>
</div>
<!-- id多最终显示红色 -->

<style>
  .box1 .box2{
      color: blue;
  }
  div .box2{
      color: green;
  }
</style>
<div id="identity1" class="box1">
    <ul>
        <li>
            <p id="identity2" class="box2">我是段落</p>
        </li>
    </ul>
</div>
<!-- id一样, 比类多, 最终显示蓝色 -->

<style>
  #identity1 ul li p{
      color: red;
  }
  #identity1 ul p{
      color: green;
  }
</style>
<div id="identity1" class="box1">
    <ul>
        <li>
            <p id="identity2" class="box2">我是段落</p>
        </li>
    </ul>
</div>
<!-- id一样, 类一样, 比标签多最终显示红色 -->

<style>
  .box1 li #identity2{
       color: blue;
   }
   #identity1 ul .box2{
       color: red;
   }
</style>
<div id="identity1" class="box1">
    <ul>
        <li>
            <p id="identity2" class="box2">我是段落</p>
        </li>
    </ul>
</div>
<!-- id一样, 类一样, 标签一样, 最终显示红色 谁写在后面听谁的-->

!important

什么是!important
作用: 用于提升某个直接选中标签的选择器中的某个属性的优先级的, 可以将被指定的属性的优先级提升为最高
示例代码

<style>
  #identity{
      color: purple;
      font-size: 50px;
  }
  .para{
      color: pink ;
  }
  p{
      color: green !important;
  }
</style>
<ul>
    <li>
        <p id="identity" class="para">我是段落</p>
    </li>
</ul>
<!-- 最终显示绿色 -->

注意点:
- !important 只能用于直接选中, 不能用于间接选中
- 通配符选择器选中的标签也是直接选中的
- !important 只能提升被指定的属性的优先级, 其它的属性的优先级不会被提升
- !important 必须写在属性值得分号前面
- !important 前面的感叹号不能省略

常见布局

布局注意点

01 浮动和标准流的父盒子搭配。
- 先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置
02 一个元素浮动了，理论上其余的兄弟元素也要浮动。
- 一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题。
- 浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.

CSS属性书写顺序

建议遵循以下顺序：
- 01 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
- 02 自身属性：width / height / margin / padding / border / background
- 03 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
- 04 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

.jdc {
    display: block;
    position: relative;
    float: left;
    width: 100px;
    height: 100px;
    margin: 0 10px;
    padding: 20px 0;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    color: #333;
    background: rgba(0,0,0,.5);
    border-radius: 10px;
}

网页布局总结

通过盒子模型，清楚知道大部分 html 标签是一个盒子。
01 标准流
- 可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。
02 浮动
- 可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局。
03 定位
- 定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。
- 一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己的专门用法。
- 通过 CSS 浮动、定位可以让每个盒子排列成为网页。

学成在线案例

案例准备工作

我们本次采取结构与样式相分离思想：
- 01 创建 study 目录文件夹 (用于存放我们这个页面的相关内容)。
- 02 study 目录内新建 images 文件夹，用于保存图片。
- 03 新建首页文件 index.html（以后我们的网站首页统一规定为 index.html )。
- 04 新建 style.css 样式文件。我们本次采用外链样式表。
- 05 将样式引入到我们的 HTML 页面文件中。
- 06 样式表写入清除内外边距的样式，来检测样式表是否引入成功。

页面布局分析

为了提高网页制作的效率，布局时通常有以下的布局流程：
- 01 必须确定页面的版心（可视区），我们测量可得知。
- 02 分析页面中的行模块，以及每个行模块中的列模块。其实页面布局，就是一行行罗列而成的。
- 03 制作 HTML 结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要。
- 04 开始运用盒子模型的原理，通过 DIV+CSS 布局来控制网页的各个模块。

确定版心

这个页面的版心是 1200 像素，每个版心都要水平居中对齐，可以定义版心为公共类：

.w {
    width: 1200px;
    margin: auto;
}

头部制作

1 号是版心盒子 header 1200 * 42 的盒子水平居中对齐，上下给一个 margin 值就可以
版心盒子里面包含 2 号盒子 logo
版心盒子里面包含 3 号盒子 nav 导航栏
版心盒子里面包含 4 号盒子 search 搜索框
版心盒子里面包含 5 号盒子 user 个人信息
注意：要求里面的 4 个盒子必须都是浮动

1 号盒子是通栏的大盒子 banner，不给宽度，给高度，给一个蓝色背景
2 号盒子是版心，要水平居中对齐
3 号盒子版心内，左对齐 subnav 侧导航栏
4 号盒子版心内，右对齐 course 课程

精品推荐模块

大盒子水平居中 goods 精品，注意此处有个盒子阴影
1 号盒子是标题 H3 左侧浮动
2 号盒子里面放链接左侧浮动， goods-item 距离可以控制链接的左右外边距（注意行内元素只给左右内外边距）
3 号盒子右浮动 mod 修改

精品推荐大模块

1 号盒子为最大的盒子， box 版心水平居中对齐
2 号盒子为上面部分，box-hd 里面左侧标题 H3 左浮动，右侧链接 a 右浮动
3 号盒子为底下部分，box-bd 里面是无序列表，有 10 个小 li 组成
小 li 外边距的问题，这里有个小技巧：给 box-hd 宽度为 1215 就可以一行装开 5 个 li
复习点：我们用到清除浮动，因为 box-hd 里面的盒子个数不一定是多少，所以我们就不给高度了，但是里面的盒子浮动会影响下面的布局，因此需要清除浮动。

底部模块

1 号盒子是通栏大盒子，底部 footer 给高度，底色是白色
2 号盒子版心水平居中
3 号盒子版权 copyright 左对齐
4 号盒子链接组 links 右对齐

CSS高级技巧

favicon图标的制作

01 把图标切成 .png 图片。
02 把 png 图片转换为 ico 图标，这需要借助于第三方转换网站，例如比特虫: http://www.bitbug.net/
03 在 head 标签中通过 link 标签引入即可

1	<link rel="shortcut icon" href="/favicon.ico">

字体图标

字体图标使用场景

字体图标使用场景：主要用于显示网页中通用、常用的一些小图标。
精灵图是有诸多优点的，但是缺点很明显。
- 01 图片文件还是比较大的。
- 02 图片本身放大和缩小会失真。
- 03 一旦图片制作完毕想要更换非常复杂。
此时，有一种技术的出现很好的解决了以上问题，就是字体图标 iconfont。
字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。

字体图标的优点

轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求
灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等
兼容性：几乎支持所有的浏览器，请放心使用
注意：字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。
总结：
- 01 如果遇到一些结构和样式比较简单的小图标，就用字体图标。
- 02 如果遇到一些结构和样式复杂一点的小图片，就用精灵图。

字体图标的下载

icomoon 字库: http://icomoon.io 推荐指数 ★★★★★
- IcoMoon 成立于 2011 年，推出了第一个自定义图标字体生成器，它允许用户选择所需要的图标，使它们成一字型。该字库内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。
阿里 iconfont 字库:http://www.iconfont.cn/推荐指数 ★★★★★
- 这个是阿里妈妈 M2UX 的一个 iconfont 字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用 AI 制作图标上传生成。重点是，免费！

icomoon 字体图标引入

01 把下载包里面的 fonts 文件夹放入页面根目录下

02 在 CSS 样式中全局声明字体：简单理解把这些字体文件通过 css 引入到我们页面中。
- 一定注意字体文件路径的问题。

@font-face {
    font-family: 'icomoon';
    src: url('fonts/icomoon.eot?7kkyc2');
    src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
    url('fonts/icomoon.woff?7kkyc2') format('woff'),
    url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

03 html 标签内添加小图标。

给标签定义字体

1
2
3

span {
	font-family: "icomoon";
}

务必保证这个字体和上面 @font-face 里面的字体保持一致

iconmoon 图标的追加

如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。
把压缩包里面的 selection.json 从新上传，然后选中自己想要新的图标，从新下载压缩包，并替换原来的文件即可。

阿里矢量图标的使用

不同类型图标优缺点

unicode是字体在网页端最原始的应用方式，特点是：
- 兼容性最好，支持ie6+，及所有现代浏览器。
- 支持按字体的方式去动态调整图标大小，颜色等等。
- 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
font-class 是 unicode 使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。
- 与unicode使用方式相比，具有如下特点：
  - 兼容性良好，支持ie8+，及所有现代浏览器。
  - 相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
  - 因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。
  - 不过因为本质上还是使用的字体，所以多色图标还是不支持的。
symbol 引用 :
- 这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章这种用法其实是做了一个svg的集合，与上面两种相比具有如下特点：
  - 支持多色图标了，不再受单色限制。
  - 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
  - 兼容性较差，支持 ie9+,及现代浏览器。
  - 浏览器渲染 svg 的性能一般，还不如png。

不同类型图标的使用

1. 地址: 阿里 iconfont 字库:http://www.iconfont.cn/
1. 找到需要的图标,添加到购物车,加入项目中
1. 在我的项目中找到需要的图标
- 1. unicode 引用:
  - 1. 生产在线链接,拷贝项目生成的 font-face 样式添加到 style 样式中
  - 1. 挑选相应图标并获取字体编码，应用于页面,如:<i class="iconfont"></i>
  - 1. 修改字体图标的样式,通过 .iconfont类名修改,并添加 font-family:"iconfont" !important; 样式,字体图标才能生效,其他样式可自行添加
- 1. Font class 形式 :
  - 1. 生成在线链接, 在 head 标签中通过 link 标签引入即可
  - 1. 使用图标时,复制图标代码到标签的 class 属性中:例如:<i class="iconfont icon-gouwuchekong"></i>
  - 1. 修改字符图标样式,通过 .iconfont 类名修改
- 1. symbol 类型的图标使用:

/* 01 拷贝项目下面生成的 symbol 代码到 head 中,通过 script 标签引入在线链接 */
/* 02 加入通用的 CSS 代码到 style 中,其他自定义样式,也可以通过 .icon 类名添加 */
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
/* 03 挑选相应图标并获取类名，应用于页面即可：*/
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-xxx"></use>
    </svg>

字体文件格式

不同浏览器所支持的字体格式是不一样的，字体图标之所以兼容，就是因为包含了主流浏览器支持的字体文件。
01 TureType(.ttf) 格式 .ttf 字体是 Windows 和 Mac 的最常见的字体，支持这种字体的浏览器有 IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；
02 Web Open Font Format(.woff) 格式 woff 字体，支持这种字体的浏览器有 IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；
03 Embedded Open Type(.eot)格式 .eot 字体是IE专用字体，支持这种字体的浏览器有 IE4+；
04 SVG(.svg) 格式 .svg 字体是基于 SVG 字体渲染的一种格式，支持这种字体的浏览器有 Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；

CSS三角

CSS 三角

网页中常见一些三角形，使用 CSS 直接画出来就可以，不必做成图片或者字体图标。
一张图，你就知道 CSS 三角是怎么来的了, 做法如下：
- 容器的宽高设置为 0 , 边框设置为很大,再依次修改四边边框的颜色即可实现

div {
  width: 0;
  height: 0;
  border: 100px solid red;
  border-top-color: #FF0000;
  border-right-color: #008000;
  border-bottom-color: #0000FF;
  border-left-color: #000000;
}

CSS三角强化

div{
  width: 0;
	height: 0;
	border-color: transparent red transparent transparent;
	border-style: solid;
	border-width: 22px 8px 0 0;
}

CSS用户界面样式

所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。
更改用户的鼠标样式
表单轮廓
防止表单域拖拽

鼠标样式

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

1	li { cursor: pointer; }

轮廓线

给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉输入框默认的蓝色边框。

1	input {outline: none; }

防止拖拽文本域

1	textarea{ resize: none;}

vertical-align 属性应用

CSS 的 vertical-align 属性使用场景： 经常用于设置图片或者表单(行内块元素）和文字垂直对齐。
官方解释： 用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。

1	vertical-align : baseline \| top \| middle \| bottom

图片、表单和文字对齐

图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。

此时可以给图片、表单这些行内块元素的 vertical-align 属性设置为 middle 就可以让文字和图片垂直居中对齐了。

img {
  vertical-align: middle;
  width: 300px;
}

span {
  font-size: 30px;
  color: red;
}

解决图片底部的默认空白

bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。
主要解决方法有两种：
- 01 给图片添加 vertical-align:middle | top| bottom 等。（提倡使用的）
- 02 把图片转换为块级元素 display: block;

溢出的文字省略号显示

单行文本溢出显示

div {
  width: 300px;
  height: 50px;
  border: 1px solid red;
  /*1. 先强制一行内显示文本*/
  white-space: nowrap;
  /*（ 默认 normal 自动换行） */
  /*2. 超出的部分隐藏*/
  overflow: hidden;
  /*3. 文字用省略号替代超出的部分*/
  text-overflow: ellipsis;
}

多行文本溢出显示

多行文本溢出显示省略号，有较大兼容性问题，适合于 webKit 浏览器或移动端（移动端大部分是 webkit 内核）

div {
  width: 300px;
  height: 50px;
  border: 1px solid red;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 弹性伸缩盒子模型显示 */
  display: -webkit-box;
  /* 限制在一个块元素显示的文本的行数 */
  -webkit-line-clamp: 2;
  /* 设置或检索伸缩盒对象的子元素的排列方式 */
  -webkit-box-orient: vertical;
}

更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。

常见布局技巧

margin负值运用

01 让每个盒子 margin 往左侧移动 -1px 正好压住相邻盒子边框
02 鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如果有定位，则加 z-index ）

文字围绕浮动元素

行内块巧妙运用

页码在页面中间显示:
- 01 把这些链接盒子转换为行内块，之后给父级指定 text-align:center;
- 02 利用行内块元素中间有缝隙，并且给父级添加 text-align:center; 行内块元素会水平会居中

清除默认样式

1. 方法一: 要使用 CSS 重置，请在您的网页中包含以下源文件：

1	<link rel = "stylesheet" type = "text/css" href = "http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css" >

1. 方法二: 直接在 css 文件中添加以下 reset.css 的样式:
- (尽量减少使用通配符选择器,因为通配符选择器会遍历页面中所有标签,性能低)
1. 方法三:也可以直接安装 reset.css 依赖包:
- 安装依赖:npm install @mudas/reset.css -S
- 导入依赖:import “@mudas/reset.css”;

/* reset.css */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre,
code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
  margin: 0;
  padding: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

fieldset, img {
  border: 0;
}

address, caption, cite, code, dfn, em, strong, th, var {
  font-weight: normal;
  font-style: normal;
}

ol, ul {
  list-style: none;
}

caption, th {
  text-align: left;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal;
}

q:before, q:after {
  content: '';
}

abbr, acronym {
  border: 0;
  font-variant: normal;
}

sup {
  vertical-align: text-top;
}

sub {
  vertical-align: text-bottom;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  *font-size: 100%
}

legend {
  color: #000;
}

CSS

CSS简介

CSS的起源

HTML的局限性

CSS 官方文档

认识 CSS

CSS语法规范

CSS的注释

CSS代码风格

样式书写风格

样式大小写

空格规范

CSS的引入方式

内部样式表

行内样式表

外部样式表

@import方法导入

CSS引入方式总结

CSS基础选择器

选择器的作用

选择器分类

标签选择器

类选择器

类选择器案例

类选择器-多类名

id选择器

id 和 类选择器的区别

通配符选择器

基础选择器总结

CSS 复合选择器

什么是复合选择器

后代选择器

子元素选择器

后代和子元素选择器区别

选择器案例

交集选择器

并集选择器

兄弟选择器

相邻兄弟选择器

通用兄弟(CSS3)

伪类选择器

伪类选择器的作用

链接伪类选择器

:focus伪类选择器

其他伪类选择器

复合选择器总结

序选择器(CSS3)

CSS字体样式

字体系列

字体的使用

字体原理

自定义字体的使用

字体的兼容性

字体大小

字体粗细

字体样式

字体复合样式

字体属性总结

CSS文本属性

文本颜色

对齐文本

装饰文本

文字大小写转换

字间距/词间距

文本缩进

行高

文本属性总结

CSS的元素显示模式

什么是元素显示模式

块级元素

行内元素

行内块元素

元素显示模式总结

元素显示模式的转换

元素显示模式案例

元素的显示与隐藏

display 显示隐藏

visibility 可见性

overflow 溢出显示隐藏

设置透明度

id 和类选择器的区别