一、CSS简介
CSS主要使用场景就是美化网页、布局页面的。
HTML只关注内容的语义，但都比较丑。虽然HTML可以做一些简单的样式，但非常冗余困难。
CSS是层叠样式表(Cascading Style Sheets)的简称，有时也会称之为CSS样式表或者级联样式表，同样也是一种标记语言。主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图形的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。
结构(HTML)与样式(CSS)相分离。
二、CSS语法规范
<style>
/* 选择器{样式} */
/* 给谁改样式 改什么样式 */
p{
color:red;
/* 文字大小修改为12像素 */
font-size: 12px;
}
</style>
- 选择器用于指定CSS样式的HTML标签，花括号内是该对象设置的具体样式
- 属性和属性值之间以“键值对”形式出现，中间用
:进行分隔；每个键值对中间使用;分隔 - 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
三、CSS代码风格
代码书写风格不是强制规范，而是符合实际开发书写方式。
（一）样式格式书写
①紧凑格式
h3 {color:deeppink;font-size:20px}
②展开格式
h3 {
color:deeppink;
font-size:20px
}
推荐第二种格式，更直观，方便修改。
（二）样式大小写
h3{
color: pink;
}
h3{
COLOR: PINK;
}
推荐样式选择器、属性名、属性值关键字全部使用小写字母(特殊情况除外)。
（三）空格规范
h3 {
color: pink;
}
- 选择器(标签)和大括号之间保留空格
- 属性值前，冒号后，也要保留空格
四、CSS基础选择器
（一）CSS选择器的作用
选择器(选择符)就是根据不同需求把不同的标签选出来，简单来说，就是选择标签用的。
（二）选择器分类
选择器分为基础选择器和复合选择器两大类。
- 基础选择器是由单个选择器组成的
- 基础选择器又包括：标签选择器、类选择器、id选择器和通配符选择器
（三）基础选择器：
1、标签选择器
标签选择器(元素选择器)是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标签选择器</title>
<style>
p {
color: green;
}
div {
color: pink;
}
</style>
</head>
<body>
<p>男生</p>
<p>男生</p>
<p>男生</p>
<div>女生</div>
<div>女生</div>
<div>女生</div>
</body>
</html>
- 可以把某一类标签全部选择出来，比如所有的
<div>标签和所有的<span>标签 - 能快速为页面中同类型标签统一设置样式，但无法选择同类型标签进行差异化设置
2、类选择器
想要差异化选择不同的标签，单独选一个或某几个标签，可使用类选择器，也是开发中最常用的。
<style>
.red {
color: red;
}
</style>
<li class="red">冰雨</li> <!--调用class-->
- 类选择器使用
.进行标识，后面紧跟类名(自定义)，但不能使用标签名 - 命名尽量要有意义
- 一个标签可以使用多类名，多个类名之间使用空格分隔
多类名：
<style>
.red {
color: red;
}
.green {
color: green;
}
.box {
width: 100px;
height: 100px;
}
</style>
<div class="red box">
红色多类名
</div>
<div class="green box">
绿色多类名
</div>
作用：
- 可以把一些标签元素相同的样式(共同部分)放到一个类里面，这些标签都可以调用这个公共的类，也可以调用自己独有的类
- 节省CSS代码，且修改也更加灵活，统一修改更方便
3、id选择器
可以为标有特定id的HTML元素指定特定的样式，HTML元素以id属性来设置id选择器，CSS中id选择器以#来定义。
#nav {
color: red;
}
注意：id选择器 样式#定义 结构id调用 只能调用一次 别人切勿使用
id选择器和类选择器的区别：
- 类class选择器好比人的名字，一个人可以有多个名字，同时一个名字也可以别多个人使用
- id选择器好比人的身份证号码，是唯一的，不能重复
- id选择器和类选择器最大的不同在于使用次数
- 类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用
4、通配符选择器
在CSS中，通配符选择器使用*定义，它表示选取页面中的所有元素(标签)
* {
color: pink;
}
通配符选择器不需要被调用，会把所有的标签全部修改样式。
五、CSS字体属性
CSS Fonts(字体)属性用于定义字体系列、大小、粗细和文字样式(如斜体)。
（一）字体系列 font-family
h2 {
font-family: '微软雅黑';
}
p {
font-family: 'Microsoft Yahei', Arial;
}
注意：
- 如果有多种字体，各种字体之间使用逗号分隔(多种字体是为了更好的兼容性，浏览器会依次使用字体系列中的字体，如果用户电脑中未安装该字体，则会使用下一种字体)
- 一个字体如果是由多个英文单词组成，则使用
""或者''括起来，如'Microsoft Yahei' - 字体可能有英文名和中文名，建议尽量使用其英文名，如
'Microsoft Yahei'和“微软雅黑”，也是为了更好的兼容性 - 尽量使用系统默认自带字体，保证任何用户的浏览器中都能正确显示
- 最常用的几个字体：
body{font-family: 'Microsoft Yahei', tahoma, arial, 'Hiragino Sans GB';}
（二）字体大小 font-size
- px(像素)是网页的最常用的单位
- 谷歌浏览器默认的文字大小是16px，不同浏览器的默认字体大小不同，所以尽量给一个明确的大小
- 可以给body指定整个页面文字的大小，但不会影响标题，标题需要单独指定大小
（三）字体粗细 font-weight
/* font-weight: normal; */
font-weight: 400; #400等价于正常字体
/* 实际开发中我们更常使用数字去定义是否粗体 */
/* font-weight: bold; */
font-weight: 700; #700等价于加粗
| 属性值 | 描述 |
|---|---|
| normal | 默认值(不加粗) |
| bold | 定义粗体(加粗) |
| 100-900 | 400等同于normal，700等同于bold 注意这个数字后面不要加单位！ |
（四）文字样式 font-style
| 属性值 | 作用 |
|---|---|
| normal | 默认值，浏览器会显示标准的字体样式 |
| italic | 浏览器会显示斜体的字体样式 |
注意：平时我们很少给文字加斜体，反而要给斜体标签(em,i)改为不倾斜字体样式。
（五）font复合属性写法
div {
/* font-style: italic;
font-weight: 700;
font-size: 16px;
font-family: 'Microsoft Yahei'; */
/* 复合属性
font: font-style font-weight font-size/line-height font-family */
font: italic 700 16px/20px 'Microsoft Yahei'
}
注意：
- 使用font属性时，必须按上面的语法格式中的书写顺序，不能更换顺序，各个属性之间以空格分隔
- 不需要设置的属性可以省略(取默认值)，但必须保留font-size和font-family属性，否则font属性将不起作用
六、CSS文本属性
CSS Text文本属性可以定义文本的外观，比如颜色、对齐文本、装饰文本、文本缩进、行间距等。
（一）文本颜色
| 表示方法 | 属性值 |
|---|---|
| 预定义的颜色值 | red, green, blue, pink…… |
| 十六进制 | #FF0000, #FF6600, #29D794 |
| RGB代码 | rgb(255, 0, 0)或rgb(100%, 0%, 0%) |
<style>
div {
/* color: deeppink; */
/* color: #8418e9; */
color: rgb(255, 0, 255);
}
</style>
开发中，最常用的是十六进制表示方法。
（二）对齐方式
text-align属性用于设置元素内文本内容的水平对齐方式。
| 属性值 | 解释 |
|---|---|
| left | 左对齐(默认) |
| right | 右对齐 |
| center | 居中对齐 |
/* 本质是让h1盒子里面的文字水平居中对齐 */
h1 {
text-align: center;
}
（三）装饰文本
text-decoration属性规定添加到文本的修饰。可以加下划线、删除线和上划线等。
| 属性值 | 描述 |
|---|---|
| none | 默认，无装饰(最常用) |
| underline | 下划线，链接a 自带下划线(常用) |
| overline | 上划线(几乎不用) |
| line-through | 删除线(不常用) |
p {
/* text-decoration: underline; */
/* text-decoration: line-through; */
text-decoration: overline;
}
a {
text-decoration: none;
/*将链接的下划线去除*/
}
（四）文本缩进
text-indent属性可以用来指定文本的第一行的缩进，通常是将段落的首行缩进。
p {
/* 20px代表首行缩进的长度 也可以是负值 */
/* text-indent: 20px; */
/* 2em代表缩进当前元素2个文字大小的距离 是个相对单位 */
text-indent: 2em;
}
em是一个相对单位，表示当前元素(font-size)1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小进行缩进。
（五）行间距
line-height属性用于设置行间的距离(行高)。可以控制文字行与行之间的距离。
行间距包含：上间距、文本高度、下间距三个部分。
div {
line-height: 26px;
}
还可以通过line-height和height的大小关系，来控制文字在盒子中的垂直位置。
- 如果两者相等，那么文字在盒子中垂直居中显示
- line-height>height，而文字内容又处于整个line-height中间位置，所以位于盒子的中间偏下位置
- 同理，line-height<height的时候，文字位于盒子的中间偏上显示
七、CSS引入方式
按照CSS样式书写的位置(或者引入的方式)，CSS样式表可分为三大类：
- 行内样式表(行内式)
- 内部样式表(嵌入式)
- 外部样式表(链接式)
（一）内部样式表
内部样式表(内嵌样式表)是写到HTML页面内部的，是将所有的CSS代码抽取出来，单独放到<style>标签内。
<style>
div {
color: pink;
……
}
</style>
<style>标签理论上可以放在HTML文档的任何地方，但一般会放在文档的<head>标签中- 通过此种方式，可以方便控制当前整个页面中的元素样式设置
- 代码结构清晰，但并没有实现结构与样式完全分离
- 使用内部样式表设定CSS，通常也被称为嵌入式引入，是练习时常用的方式
（二）行内样式表
行内样式表(内联样式表)是在元素标签内部的style属性中设定CSS样式，适合修改简单样式。
<div style="color: red; font-size: 12px;">
行内样式表
</div>
- style其实就是标签的属性
- 在双引号中，写法要符合CSS规范
- 可以控制当前标签的样式
- 由于书写繁琐，且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用
（三）外部样式表
实际开发都是外部样式表，是用于样式比较多的情况，核心是：样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用。
引入外部样式表分为两步：
-
新建一个后缀为.css的样式文件，将所有的CSS代码都放入此文件中
-
在HTML页面中，使用
<link>标签引入这个文件<link rel="stylesheet" href="css文件路径">
使用外部样式表设定CSS，通常也被称为外链接或链接式引入，这种方式是开发中常用的方式。
八、Chrome调试工具
Chrome浏览器提供了一个非常好的调试工具，可以用来调试HTML结构和CSS样式。
1、打开调试工具
打开Chrome浏览器，按下F12键或者右击页面空白处->检查。然后点击Element。
2、使用调试工具
- Ctrl+滚轮可以放大开发者工具代码大小
- 左边是HTML元素结构，右边是CSS元素样式
- 右边CSS样式可以改动数值和查看颜色(但注意！只是调试而并不能修改，并不能对代码进行修改，想要修改代码的话，还要将新代码复制回去)
- Ctrl+0可以复原浏览器大小
- 点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误
- 如果有样式，但样式前面有黄色叹号提示，则是样式属性书写错误
九、Emmet语法
Emmet语法的前身是Zen coding，它使用缩写，来提高html/css的编写速度，Vscode内部已经集成该语法。
1、快速生成HTML结构
-
生成标签 直接输入标签名 按tab键即可
-
如果想生成多个相同标签 加上
*就可以了 比如div*3就可以快速生成3个div -
如果有父子级关系的标签，可以用
>就可以了 比如ul>li -
如果有兄弟关系的标签，用
+就可以了 比如div+p -
如果生成带有类名或者id名的，直接写p.demo或者div#two tab键就可以了
生成结果为
<p class="demo"></p> 和 <div id="two"></p>如果不指定前面的p或者div，则默认生成的是div标签。 -
如果生成的div类名是有顺序的，可以用自增符号$ 比如
div.demo$*5会生成5个一次递增的div标签，class属性值分别为demo1,demo2……demo5 -
如果想要在生成的标签内部写内容可以用{}表示
2、快速生成CSS样式
<style>
.one{
/* tac */
text-align: center;
/* ti2em */
text-indent: 2em;
/* h200 */
height: 200px;
}
</style>
3、快速格式化代码
Vscode快速格式化代码：shift+alt+f
也可以设置保存时自动格式化代码：
-
(1)文件–>首选项–>设置
-
(2)搜索emmet.include
-
(3)在setting.json下的用户中添加以下代码：
"editor.formatOnType": true"editor.formatOnSave": true只需设置一次，以后都可以自动保存格式化代码
十、CSS复合选择器
复合选择器是建立在基础选择器之上的，对基本选择器进行组合形成的。
- 复合选择器可以更准确、更高效地选择目标元素(标签)
- 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
- 常用的复合选择器：后代选择器、子选择器、并集选择器、伪类选择器等等
1、后代选择器(重要)
后代选择器又称为包含选择器，可以选择父元素里面的子元素。其写法就是把外层标签写到前面，内层标签写到后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
<style>
/* 想把ol里面的小li选出来改为pink色 */
ol li {
color: pink;
}
ol li a {
color: deeppink;
}
.nav li a {
color: red;
}
</style>
这里的选择器修改的是子元素，父元素不会改变。还有这里的子元素不仅包括儿子，孙子也可以进行选择。
可以使用任意的基础选择器(不仅限于标签选择器，还可以使用类选择器、id选择器等等)
2、子选择器(重要)
子元素选择器(子选择器)只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素。
<style>
/* 后代选择器 */
/* .nav a {
color: blueviolet;
} */
/* 子选择器 */
.nav>a {
color: red;
}
</style>
父元素和子元素用>隔开，最终选择是子元素，且只会选出儿子元素，孙子元素等全都不会选择。
3、并集选择器(重要)
并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。
各个选择器之间通过,连接而成，任何形式的选择器都可以作为并集选择器的一部分。
/* 要求1：把熊大和熊二改为粉色 */
div,
p {
color: deeppink;
}
/* 要求2：把熊大 熊二改为粉色，同时小猪的一家也改为粉色 */
div,
p,
.pig li {
color: deeppink;
}
4、伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。
伪类选择器书写的最大特点是用冒号:表示，比如:hover、:first-child
伪类选择器有很多种，比如：链接伪类、结构伪类等，但最常用的还是链接伪类选择器。
(1)链接伪类选择器
a:link /*选择所有未被访问的链接*/
a:visited /*选择所有已被访问的链接*/
a:hover /*选择鼠标指针位于其上的链接*/
a:active /*选择活动链接(鼠标按下未弹起的链接)*/
实例：
/* 未访问的链接a:link */
a:link {
color: #333;
text-decoration: none;
}
/* 访问过的链接a:visited */
a:visited {
color: orange;
}
/* 鼠标经过的链接a:hover */
a:hover {
color: aqua;
}
/* 选择活动的链接a:active 也就是选择鼠标正在按下还未弹起鼠标的那个链接*/
a:active {
color: green;
}
注意事项：
-
为了确保生效，请按照LVHA的顺序声明，即
:link-:visited-:hover-:active -
因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式
-
一般来说，实际开发中并不需要都使用到，
a:hover最常用a { color: #333; text-decoration: none; } a:hover { color: #369; text-decoration: underline; }
(2):focus伪类选择器
:focus伪类选择器用于选取获得焦点的表单元素。焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。
十一、CSS元素显示模式
什么是元素显示模式：
作用：网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好布局我们的网页。
元素显示模式就是元素(标签)以什么方式进行显示，比如<div>自己独占一行，比如一行可以放多个<span>
HTML元素一般分为块元素和行内元素两种类型。
1、块元素
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。
块级元素的特点：
- 比较霸道，自己独占一行
- 高度、宽度、外边距以及内边距都可以控制
- 宽度默认是容器(父亲宽度)的100%
- 是一个容器及盒子，里面可以放行内或者块级元素
注意：
- 文字类的元素内不能使用块级元素
<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>- 同理，
<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素
2、行内元素
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
行内元素的特点：
- 相邻行内元素在一行上，一行可以显示多个
- 高、宽直接设置是无效的，默认宽度为它本身内容的宽度
- 行内元素只能容纳文本或者其他行内元素
注意：
- 链接里面不能再放链接
- 特殊情况链接
<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全
3、行内块元素
在行内元素中有几个特殊的标签——<img/>、<input/>、<td>，它们同时具有块元素和行内元素的特点，有些资料称它们为行内块元素。
行内块元素的特点：
- 和相邻行内元素(行内块)在一行上，但是它们之间会有空白缝隙。一行可以显示多个(行内元素特点)。
- 默认宽度就是它本身内容的宽度(行内元素特点)。
- 高度、宽度、行高、外边距以及内边距都可以控制(块级元素特点)。
4、元素显示模式转换
特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另一种模式的特性，比如想要增加链接<a>的触发范围。
- 转换为块级元素：
display:block; - 转换为行内元素：
display:inline; - 转化为行内块元素：
display:inline-block;
5、一个小工具的使用 Snipaste
Snipaste是一个简单但强大的截图工具，也可以让你将截图贴回到屏幕上。
常用快捷方式：
- F1可以截图，同时测量大小、设置箭头、书写文字等
- F3在桌面置顶显示
- 点击图片，alt可以取色(按下shift可以切换取色模式)
- 按下esc取消图片显示
6、设置单行文字垂直居中
CSS中并没有特定的代码可以实现这一功能，但我们可以通过设置文字的行高与盒子的高度相等来间接实现这一效果。
<style>
div {
height: 40px;
line-height: 40px;
}
</style>
原理：
---------上空隙---------
盒子高度40 -----文字本身高度------ 行高40
--------下空隙----------
简单理解：行高的上空隙和下空隙把文字挤到中间了。如果行高小于盒子高度，文字会偏上；如果行高大于盒子高度，文字会偏下。
十二、CSS的背景
通过CSS背景属性，可以给页面元素添加背景样式。
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。
1、背景颜色background-color
background-color: transparent|color;
一般情况下元素背景颜色默认值是transparent(透明)，我们也可以手动指定背景颜色为透明色。
CSS3为我们提供了背景颜色半透明的效果。
background: rgba(0,0,0,0.3)
- 最后一个参数是alpha不透明度，取值范围在0~1之间
- 也可以将0.3中的0省略，写成
background: rgba(0,0,0,.3)(习惯性写法) - 注意：背景半透明是指盒子背景半透明，盒子里面内容不受影响
- CSS3新增属性，是IE9+版本浏览器才支持的
- 但是现在实际开发中，我们不太关注兼容性写法了，可以放心使用
2、背景图片background-image
实际开发中常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置(精灵图也是一种运用场景)
background-image: none|url(url);
(1)背景平铺
如果需要在HTML页面上对背景图像进行平铺，可以使用background-repeat属性。
background-repeat: repeat|no-repeat|repeat-x|repeat-y;
默认情况下，背景图片时平铺的。
(2)背景图片位置–方位名词
利用background-position属性可以改变图片在背景中的位置。
background-position: x y;
参数代表的意思是：x坐标和y坐标，可以使用方位名词或者精确单位。
| 参数值 | 说明 |
|---|---|
| position | top|center|bottom| left|center|right 方位名词 |
| length | 百分数|由浮点数字和单位标识符组成的长度值 |
- 参数是方位名词
- 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和top left效果一致
- 如果只指定了一个方位名词，另一个省略，则第二个值默认居中对齐
- 参数是精确单位
- 如果参数值是精确坐标，那么第一个肯定是x坐标，第二个肯定是y坐标
- 如果只指定一个数值，那该数值一定是x坐标，另一个是默认垂直居中
- 混合单位
- 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标
(3)背景图像固定(背景附着)
background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动，后期可以制作视差滚动的效果。
background-attachment: scroll|fixed;
scroll(滚动)、fixed(固定)
3、背景属性复合写法
当使用将写属性时，没有特定的书写顺序，一般习惯约定顺序为：
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
这是实际开发中，更提倡的做法。
十三、CSS的三大特性
CSS有三个非常重要的特性：层叠性、继承性、优先级。
1、层叠性
相同选择器给设置相同的样式，此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题
层叠性原则：
-
样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
-
样式不冲突，就不会层叠
div { color: red; /* 字体大小样式就不会被层叠 */ font-size: 12px; } div { color: pink; }
2、继承性
子标签会继承父标签的某些样式，比如文本颜色和字号。
<head>
<style>
div {
color: deeppink;
font-size: 14px;
}
</style>
</head>
<body>
<div>
<!-- inherited from div -->
<p>龙生龙，凤生凤，老鼠的孩子会打洞</p>
</div>
</body>
- 恰当使用继承可以简化代码，降低CSS样式复杂性
- 子元素可以继承父元素的样式(text-, font-, line-这些元素开头的，以及color属性)
行高的继承：
body {
color: deeppink;
/* font: 12px/24px "Microsoft yahei"; */
font: 12px/1.5 "Microsoft yahei";
}
div {
/* 子元素继承了父元素body的行高 1.5 这里的1.5就是当前元素文字大小font-size 的1.5倍 */
font-size: 14px;
}
p {
font-size: 16px;
}
- 行高可以跟单位也可以不跟单位，不跟单位是开发中常用的写法
- 如果子元素没有设置行高，则会继承父元素的行高为1.5，此时子元素的行高为：当前子元素的文字大小×1.5
3、优先级
当同一个元素指定多个选择器，则会有优先级的产生。
- 选择器相同，则执行层叠性
- 选择器不同，则根据选择器权重执行
选择器权重如下表：
| 选择器 | 选择器权重 |
|---|---|
| 继承或者* | 0,0,0,0 |
| 元素选择器 | 0,0,0,1 |
| 类选择器，伪类选择器 | 0,0,1,0 |
| ID选择器 | 0,1,0,0 |
| 行内样式 style="" | 1,0,0,0 |
| !important 重要的 | ∞无穷大 |
<head>
<style>
.test {
color: red;
}
#demo {
color: green;
}
div {
color: deeppink !important;
}
</style>
</head>
<body>
<div class="test" id="demo" style="color: purple;">你笑起来真好看</div>
</body>
**总结：**范围越小，优先级越高。
优先级注意点：
-
权重是由4组数字组成，但不会有进位
-
可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推
-
等级判断从左向右，如果某一位数值相同，则判断下一位数值
-
**继承的权重为0！！！**如果该元素未被直接选中，不管父元素权重多高，子元素得到的权重始终都是0
body { color: greenyellow; } /* 对a链接不起作用 是因为浏览器默认给链接指定了一个蓝色的，有下划线的样式 */ <body> <a href="#">我是单独的样式</a> <!--依然显示蓝色有下划线的样式，就是因为继承的权重为0，浏览器已经给链接指定了样式--> </body>
权重叠加：
如果是复合选择器，则会有权重叠加，需要计算权重。
<style>
/* 复合选择器权重叠加问题 */
/* ul li 权重 0,0,0,1+0,0,0,1=0,0,0,2 */
ul li {
color: green;
}
/* li 权重 0,0,0,1 */
li {
color: red;
}
/* .nav li 权重 0,0,1,0+0,0,0,1=0,0,1,1 */
.nav li {
color: deeppink;
}
</style>
十四、CSS盒子模型
页面布局要学习三大核心：盒子模型、浮动和定位。学习好盒子模型能很好地帮助我们布局页面。
1、看透网页布局的本质
网页布局过程：
- 先准备好相关的网页元素，网页元素基本都是盒子Box
- 利用CSS设置好盒子样式，然后摆放到相应位置
- 往盒子里装内容
网页布局的核心本质：就是利用CSS摆盒子
2、盒子模型(Box Model)组成
所谓盒子模型，就是把HTML页面中的布局元素看做是一个矩形的盒子，也就是一个盛装内容的容器。
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容。
|-----------------------------------| border边框
| 盒子里面的内容 | content内容
| | padding内边距
|-----------------------------------| margin外边距
(1)边框(border)
border可以设置元素的边框，边框由三部分组成：边框宽度(粗细) 边框样式 边框颜色
border: border-width border-style border-color;
| 属性 | 作用 |
|---|---|
| border-width | 定义边框粗细，单位是px |
| border-style | 边框的样式 |
| border-color | 边框颜色 |
<style>
div {
width: 300px;
height: 200px;
/* 边框宽度 */
border-width: 5px;
/* 边框样式 常用 solid实线 dashed虚线 dotted点线*/
/* border-style: solid; */
/* border-style: dashed; */
border-style: dotted;
/* 边框颜色 */
border-color: deeppink;
}
</style>
①边框的复合写法：
border: 1px solid red; 没有顺序
②边框分开写法：
border-top: 5px solid pink; border-bottom: 10px dotted purple;
③边框会影响盒子的实际大小
边框会额外增加盒子的实际大小，因此有两种解决方案：
- 测量盒子大小时，不量边框
- 如果测量的时候包含了边框，则需要width/height减去边框宽度
④表格的细线边框
border-collapse属性控制浏览器绘制表格边框的方式，它控制相邻单元格的边框。
border-collapse: collapse 表示将两个相邻边框合并到一起
(2)内边距(padding)
padding属性用于设置内边距，即边框与内容之间的距离。
上下左右均可进行设置：padding-top padding-bottom padding-left padding-right
①内边距的复合写法
padding:后面直接跟1-4个值
| 值 | 表达意思 |
|---|---|
| padding: 5px; | 上下左右都有5px的内边距 |
| padding: 5px 10px; | 上下内边距是5px，左右内边距是10px |
| padding: 5px 10px 20px; | 上内边距5px 左右内边距10px 下边距20px |
| padding: 5px 10px 20px 30px; | 上5px 右10px 下20px 左30px (顺时针) |
②内边距会影响盒子的大小
如果盒子已经有了宽度和高度，此时再指定内边距padding，则会撑大盒子。
**解决：**如果保证盒子跟效果图大小保持一致，则让width/height减去多出来的内边距大小即可。
如果没有指定盒子的高度height或宽度width，则指定内边距padding，不会影响盒子的大小
如果盒子中字数不同，可以给每个盒子设置相同的左右内边距来撑开盒子，以实现更好的效果。
(3)外边距(margin)
margin属性用于设置外边距，即控制盒子与盒子之间的距离。使用方法与padding基本一致。
①外边距的复合写法
与内边距padding完全一致。
②外边距典型应用–块级盒子水平居中对齐
外边距可以让块级盒子水平居中，但必须满足两个条件：
-
盒子必须指定宽度width
-
盒子左右的外边距都设置为auto
常见的写法，有以下三种：
margin-left: auto; margin-right: auto;margin: auto;margin: 0 auto;
注意！以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中只需给其父元素添加text-align: center即可。
③外边距合并–嵌套块元素塌陷
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
对于两个嵌套关系(父子关系)的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
解决方案：
- 可以为父元素定义上边框
- 可以为父元素定义上内边距
- 可以为父元素添加
overflow: hidden
.father {
height: 400px;
width: 400px;
background-color: purple;
margin-top: 50px;
/* border: 1px solid transparent; */
/* padding: 1px; */
overflow: hidden;
}
还有其他方法，比如浮动、固定，绝对定位的盒子不会有塌陷问题，后面会讲到。
(4)清除内外边距
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局之前，首先要清除网页元素的内外边距。
* {
margin: 0px;
padding: 0px;
}
**注意：**行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了。
3、圆角边框
在CSS3中，新增了圆角边框样式。
border-radius: length; radius半径(圆的半径)原理：(椭)圆与边框的交集形成圆角效果
圆形:border-radius设置为正方形边长的一半，或者直接写成百分比的形式(50%)
.circle {
width: 200px;
height: 200px;
background-color: pink;
/* border-radius: 100px; */
border-radius: 50%;
}
圆角矩形:border-radius设置为盒子高度的一半
.rectangle {
width: 400px;
height: 100px;
background-color: pink;
border-radius: 50px;
}
不同的圆角：border-radius从左上角开始顺时针排布 有四个值
.radius {
width: 200px;
height: 200px;
background-color: pink;
border-radius: 10px 20px 30px 40px;
}
如果想要分开写，也可以写成这样：border-top-left-radius、border-top-right-radius、border-bottom-right-radiu、border-bottom-left-radius
4、盒子阴影
CSS3中新增了盒子阴影，可以使用box-shadow属性为盒子添加阴影
box-shadow: h-shadow v-shadow blur spread color inset;
| 值 | 描述 |
|---|---|
| h-shadow | 必需，水平阴影的位置 允许负值 |
| v-shadow | 必需，垂直阴影的位置 允许负值 |
| blur | 可选，模糊距离 |
| spread | 可选，阴影的尺寸 |
| color | 可选，阴影的颜色 |
| inset | 可选，将外部阴影(outset)改为内部阴影 |
注意：
- 默认是外阴影(outset)，但是不可以写这个单词，否则导致阴影无效
- 盒子阴影不占用空间，不会影响其他盒子排布
5、文字阴影
CSS3中，可以使用text-shadow属性将文字应用于文本
text-shadow: h-shadow v-shadow blur color;
十五、ps的基本操作
快捷键：
| 快捷键 | 作用 |
|---|---|
| ctrl+r | 调出标尺 |
| ctrl+(+/-) | 放大或缩小 |
| 按住空格键 | 鼠标变小手，拖动PS视图 |
| ctrl+d | 取消选区 |
十六、三种传统布局方式
1、传统网页布局的三种方式
网页布局的本质–用CSS来摆放盒子，把盒子摆放到相应的位置。
(1)三种传统布局方式
CSS提供了三种传统布局方式(简单说，就是盒子如何进行排列顺序)：
- 普通流(标准流/文档流)
- 浮动
- 定位
实际开发中，一个页面基本都包含了这三种布局方式。
(2)网页布局准则
网页布局第一准则：多个块级元素纵向排布使用标准流；多个块级元素横向排布使用浮动。
网页布局第二准则：先设置盒子大小，再设置盒子位置。
2、标准流
所谓的标准流，就是标签按照规定好默认方式排列 最基本的布局方式
块级元素会独占一行，从上向下顺序排列
- 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行
- 常用元素：span、a、i、em等
3、浮动(float)
(1)为什么需要浮动？
浮动最典型的应用：可以让多个块级元素一行内排列显示。
如果只使用标准流：
- 很难解决将div盒子放在同一行进行显示，即使转换为行内块元素，每个div中间也有空隙(而这个空隙的大小我们又未知)
- 很难实现两个盒子位于一行的最左侧和最右侧，且左右对齐的效果
(2)什么是浮动？
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
float: 属性值；
| 属性值 | 描述 |
|---|---|
| none | 元素不浮动(默认值) |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
(3)浮动特性
-
浮动元素会脱离标准流(脱标)
脱离标准普通流的控制(浮)移动到指定位置(动)，俗称脱标
浮动盒子不在保留原先的位置
-
浮动的元素会一行内显示并且元素顶部对齐
-
浮动的元素会具有行内块元素的特性(给行内元素添加浮动特性，则会具有行内块元素的特性，不需要特意添加display进行转换)
如果块级元素没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
浮动盒子中间无空隙，是紧挨在一起的
行内元素同理
(4)浮动元素经常搭配普通流的父元素
为了约束浮动元素位置，我们网页布局一般采取的策略是：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页第一准则。
(5)常见的网页布局
-
浮动要和标准流的父盒子搭配使用
先用标准流的父元素排列上下位置，然后内部子元素采取浮动排列左右位置
-
一个元素浮动了，理论上其余兄弟元素也要浮动
浮动的盒子只会影响浮动盒子后面的标准流，而不会影响前面的标准流
(6)为什么清除浮动
前面浮动元素有一个标准流的父元素，他们有一个共同特点，都是有高度的。
但是网页中，产品可能很多很多或者新闻中不知道有多少文字而不方便给高度。理想中的状态，让子盒子撑开父亲，有多少孩子，父盒子就有多高。
由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0，会影响下面的标准流盒子。
- 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响
总结来说，就是很多情况下，不方便给父元素盒子固定高度，子元素盒子的浮动又会对后面的元素产生影响。
(7)清除浮动本质
- 清除浮动的本质就是清除浮动元素造成的影响。
- 如果父盒子本身有高度，则不需要清除浮动。
- 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。
{clear: 属性值;}
| 属性值 | 描述 |
|---|---|
| left | 不允许左侧有浮动元素(清除左侧浮动影响) |
| right | 不允许右侧有浮动元素(清除右侧浮动影响) |
| both | 同时清除左右两侧浮动的影响 |
实际开发中，几乎只用clear: both;
清除浮动的策略其实是：闭合浮动。
(8)清除浮动的方法
-
额外标签法
也称为隔墙法，是W3C推荐的做法
额外标签法会在浮动元素的末尾添加一个空标签。例如
<div style="clear:both"></div>，或者其他标签(如<br/>等)注意：新增的空标签必须是块级元素，不能是行内元素。
- 优点：通俗易懂，书写方便
- 缺点：添加了许多无意义的标签，结构化比较差
-
父级添加overflow属性
overflow属性的属性值可以是
hidden、auto或者scroll- 优点：代码简洁
- 缺点：无法显示溢出部分
-
-
父级添加:after伪元素
- after方式是额外标签法的升级版，也是给父元素添加：
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {/*IE6、IE7专有*/ *zoom: 1; }- 优点：没有增加无用标签，结构更简单
- 缺点：需要照顾低版本浏览器
- 代表网站：百度、淘宝、网易都是用的该种方法来清除浮动
-
父级添加双伪元素
.clearfix:before,.clearfix:after { content:""; display:table; } .clearfix:after { clear:both; } .clearfix { *zoom:1; }- 优点：代码更简洁
- 缺点：还是需要照顾低版本浏览器
- 代表网站：小米、腾讯等
4、定位
(1)为什么需要定位？
因为以下情况只是用标准流和浮动无法实现：
- 某个元素可以自由地在一个盒子内移动位置，并压住其他盒子。
- 当我们滚动窗口的时候，某些盒子是固定在屏幕某个位置的。
(2)定位组成
将盒子定在某一位置，所以定位也是摆放盒子，按照定位的方式移动盒子。
定位=定位模式+边偏移
定位模式用于指定一个元素在文档中的定位方式；边偏移则决定了该元素的最终位置。
-
定位模式position
定位模式决定元素的定位方式，它通过CSS的
position属性来设置，其值可以分为以下四种：属性值 语义 static 静态定位 relative 相对定位 absolute 绝对定位 fixed 固定定位 -
边偏移
边偏移就是定位的盒子移动到的最终位置，有
top,bottom,left,right四个属性。top: 80px
(3)定位模式
-
静态定位static(了解)
静态定位是元素的默认定位方式，简单理解就是无定位的意思。
position: static;- 静态定位按照标准流特性摆放位置，它没有边偏移
- 布局时很少使用
-
相对定位relative(重要)
相对定位是元素在移动位置的时候，相对于它原来的位置来说的(自恋型)。
position: relative;- 是相对于自己原来的位置移动的(移动位置的时候参照点是自己原来的位置)
- 原来在标准流的位置继续占有，后面的盒子依然以标准流的方式对待它(不脱标，继续保留原来位置)
因此相对定位没有脱标，最典型的应用是给绝对定位当爹，也就是限制绝对定位的。
-
绝对定位absolute(重要)
绝对定位是元素在移动位置的时候，相对于它祖先元素来说的(拼爹型)
position: absolute;- 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位(Document文档)
- 如果祖先元素有定位(相对、绝对、固定定位)，则以最近一级的有定位祖先元素为参考点移动位置
- 绝对定位不再占有原先的位置(脱标)
-
固定定位fixed(重要)
固定定位是元素固定于浏览器可视区的位置。主要使用场景:可以在浏览器页面滚动时元素的位置不会改变。
position: fixed;- 以浏览器的可视窗口为参照点移动元素，与父元素没有任何关系，不随滚动条滚动
- 固定定位不再占有原来的位置，是脱标的(可以看做是一种特殊的绝对定位)
(4)子绝父相
子级是绝对定位的话，父级要用到相对定位。
- 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
- 父盒子需要加定位限制子盒子在父盒子内显示。
- 父盒子布局时，需要占有位置，因此父亲只能是相对定位。
**总结：**因为父级需要占有位置，因此是相对定位；子盒子不需要占有位置，则是绝对定位。
(5)固定定位小技巧
固定到版心右侧
小算法：
- 让固定定位的盒子left: 50%;到达浏览器可视区(也可以看做版心)的一半位置
- 让固定定位的盒子margin-left: 版心宽度的一半距离，多走版心宽度的一般距离。
此时，固定定位的盒子就固定到版心的右侧了。
.fixed {
position: fixed;
/* 1.走浏览器宽度的一半 */
left: 50%;
/* 2.再走版心宽度的一半 版心宽度为800px */
margin-left: 400px;
}
(6)粘性定位sticky(了解)
粘性定位可以被认为是相对定位和固定定位的混合。
position: sticky; top: 10px;
粘性定位的特点：
- 以浏览器的可视窗口为参照点移动元素(固定定位特点)
- 粘性定位占有原来的位置(相对定位特点)
- 必须添加top、left、right、bottom其中一个才会有效果(否则就是普通的固定定位的效果)
.nav {
position: sticky;
/* 设置top值 当导航栏到达距离顶部0像素时 将不再随页面进行滚动 */
top: 0;
width: 800px;
height: 50px;
background-color: pink;
margin: 100px auto;
}
跟页面滚动搭配使用，但兼容性差，IE不支持。这种相似的效果一般都是通过后面学习的JavaScript来实现的。
(7)定位的叠放顺序
在使用定位布局时，可能会出现盒子重叠的情况。此时，可以用z-index来控制盒子的前后次序(z轴)
z-index: 1;
- 数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上。
- 如果属性值相同，则按照书写顺序，后来者居上
- 数值后面无单位！
- 只有定位的盒子才有z-index属性
(8)定位的拓展
-
绝对定位的盒子居中
加了绝对定位的盒子无法通过
margin: auto;来实现居中，但可以通过以下算法来实现绝对定位的盒子居中的效果。.box { position: absolute; /* 1. left走50% 父元素宽度的一半 */ left: 50%; /* 2. right走自身宽度的50% */ margin-left: -100px; /*垂直居中*/ top: 50%; margin-top: -100px; width: 200px; height: 200px; background-color: pink; /* margin: 10px auto; */ } -
定位特殊特性
绝对定位和固定定位也和浮动类似。
- 行内元素添加绝对或者固定定位，可以直接设置高度和宽度
- 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容大小
-
脱标的盒子不会触发外边距塌陷
浮动元素、绝对定位(固定定位)的元素都不会触发外边距合并问题。
-
绝对定位(固定定位)会完全压住盒子
浮动元素只会压住它下面标准流的盒子，但不会压住下面标准流盒子里面的文字(图片)
浮动之所以不会压住文字，是因为浮动产生的目的起初是为了做文字环绕效果的
但绝对定位和固定定位会压住下面标准流所有的内容
(9)display元素的显示与隐藏
类似网站广告，当我们点击关闭就不见了，但我们重新刷新页面，又会重新出现。
本质：让一个元素在页面中隐藏或者显示出来，并不是删除。
-
display显示隐藏
display属性用于设置一个元素应如何显示
- display: none; 隐藏对象
- display: block; 除了转换为块级元素之外，同时还有显示元素的意思
**display隐藏元素后，不再占有原来位置。**后面搭配js使用，可以做很多网页特效。
-
visibility显示隐藏
visibility属性用于指定一个元素应可见还是隐藏
- visibility: visible; 可见
- visibility: hidden; 隐藏
visibility隐藏元素后，会继续占有原来位置。
-
overflow溢出显示隐藏
overflow属性指定了如果内容溢出一个元素的框(超过其指定高度及宽度)时，会发生什么
- overflow: visible; 可见
- overflow: hiddern; 隐藏溢出元素
- overflow: scroll; 滚动显示，不管是否溢出都会显示滚动条
- overflow: auto; 需要时添加滚动条，也就是不溢出的时候不会显示滚动条
一般来说，我们都不想让溢出内容显示，因为溢出会影响布局。
但如果有定位的盒子，请慎用overflow: hidden 因为这样会隐藏多余的部分(有时这个多余部分是我们故意为之的)
1041
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
