CSS1

CSS

简介

CSS简介

目标

1. 能够说出什么是CSS
2. 能够使用CSS基础选择器
3. 能够设置字体样式
4. 能够设置文本样式
5. 能够说出CSS的三种引入样式
6. 能够使用Chrome调试工具调试样式

介绍

CSS也是一种标记语言

CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽度、边框样式、边距等）以及版面的布局和外观显示样式

CSS可以让页面布局简单

HTML主要做结构，显示元素内容

结构和样式分离

CSS语法规范

CSS规则由两个主要的部分构成：

选择器以及一条或多条声明

• 选择器用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式
• 属性和属性值以“键值对”的形式出现
• 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
• 属性和属性值之间用英文 “：”分开
• 多个“键值对”之间用英文“；”进行区分

CSS代码风格

样式格式书写

1. 紧凑格式
2. 展开格式

h3 {
	color: pink;
	font-size: 20px;
}

强烈推荐第二种格式

样式大小写

h3 {
	color: pink;
}

强烈推荐样式选择器，属性名，属性值关键词全部使用小写字母，特殊情况除外

空格规范

h3 {
	color: pink;
}

1. 属性值前面，冒号后面，保留一个空格
2. 选择器（标签）和大括号中间保留空格

CSS基础选择器

CSS选择器的作用

选择器（选择符）就是根据不同需求，把不同的标签选出来，就是选择器的作用。就是选择标签用的

h1 {
	color: red;
	font-size: 25px;
}

选择器分类

1. 基础选择器
2. 复合选择器

基础选择器是由单个选择器组成的

基础选择器包括：标签选择器、类选择器、id选择器、通配符选择器

标签选择器

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

优点

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

缺点

不能涉及差异化样式，只能选择全部的当前标签

类选择器

想要差异化选择不同的标签，单独选一个或者几个标签，可以使用类选择器

.类名 {
	属性1：属性值1；
	...
}

.red {
	color: red;
}

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

<div class="red">变红色</div>

类选择器在HTML中以 class 属性表示，在CSS中，类选择器以 “.” 显示

注意

1. 类选择器使用 “.”（英文点号）进行标识，后面紧跟类名（自定义）
2. 场名称或词组可以使用中横线来为选择器命名
3. 不要使用纯数字、中文等命名，尽量使用英文字母来表示
4. 命名要有意义
5. 命名规范（Web前端开发规范手册.doc）

类命名规则

头：header

内容：content/container

尾：footer

导航：nav

侧栏：sidebar

栏目：column

页面外围控制整体布局宽度：wrapper

左右中：left right center

登录条：loginbar

标志：logo

广告：banner

页面主体：main

热点：hot

新闻：news

下载：download

子导航：subnav

菜单：menu

子菜单：submenu

搜索：search

友情链接：friendlink

页脚：footer

版权：copyright

滚动：scroll

案例

div就是一个盒子，用来装网页内容

小技巧

sublime和vscode中，输入HTML的不带<>的标签名，按Tab键

会自动出现完整标签

类选择器

1. 多类名使用方式

<div class="red font20">红色，字体20</div>

在标签class属性中写多个类名

多个类名中间必须用空格分开

这把标签就可以分别具有这些类名的样式

2. 多类名开发中使用场景

可以把一些标签相同的样式，放到一个类中

这些标签都可以调用这个公共的类，然后再调用自己独有的类

节省CSS代码，统一修改也方便

多个类名中间用空格隔开

id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式

HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义

将id为nav元素中的内容设置为红色

#nav {	color: red;}

id选择器口诀：

样式#定义，结构id调用，只能调用一次，别人切勿使用

id选择器和类选择器的区别

1. 类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用
2. id选择器好比人的身份证号码，全中国是唯一的，不得重复
3. id选择器和类选择器最大的不同在于使用次数上
4. 类选择器在修改样式中使用最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript 搭配使用

通配符选择器

在CSS中，通配符选择器使用“*”定义，表示选取页面中所有元素（标签）

通配符选择器不需要调用，自动就给所有的元素使用样式

特殊情况才使用，后面讲解使用场景（以下是清除所有的元素标签的内外边距，后期讲）

* {	margin: 0;	padding: 0;}

总结

基础选择器	作用	特点	使用情况
标签选择器	可以选出所有相同的标签，比如p	不能差异化选择	较多
类选择器	可以选出1个或者多个标签	可以根据需求选择	非常多
id选择器	一次只能选择1个标签	ID属性只能在每个HTML文档中出现一次	一般和js搭配
通配符选择器	选择所有标签	选择的太多，有部分不需要	特殊情况使用

每个基础选择器都有使用场景，都需要掌握

如果是修改样式，类选择器是使用最多的

CSS字体属性

CSS Fonts（字体）属性用于定义字体系列、大小、粗细和文字样式（如斜体）

字体系列

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

• 各种字体之间必须使用英文状态下的逗号隔开
• 一般情况下，如果有空格隔开的多个单词组成的字体，加引号
• 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
• 最常见的几个字体：

body {	font-family: 'Microsoft Yahei', tahoma, arial, 'Hiragino Sans GB'}

字体大小

p {	font-size: 20px;}

• px（像素）大小是网页的最常用单位
• 谷歌浏览器默认的文字大小为16px
• 不同浏览器可能默认显示的自豪大小不一致，我们尽量给一个明确值大小，不要默认大小
• 可以给 body 指定整个页面文字的大小

字体粗细

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

p {	font-weight: bold;}

属性值	描述
normal	默认值（不加粗的）
bold	定义粗体（加粗的）
100-900	400等同于 normal， 而700 等同于 bold，注意这个数字后面不跟单位

h标签比较特殊，对body标签，操作后，不能改变h标签的字体粗细

需要对h标签，单独设置

实际开发时，我们更喜欢用数字表示粗细

文字样式

CSS 使用 font-style 属性设置文本的风格

p {	font-style: normal;}

属性值	作用
normal	默认值，浏览器会显示标准的字体样式 font-style: normal;
italic	浏览器会显示斜体的字体样式

注意：平时我们很少给文字加斜体，反而要给斜体标签（em，i）改为不倾斜字体

字体复合属性

字体属性可以把以上文字样式综合来写，节约代码

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

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

CSS文本属性

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

文本颜色

color属性用于定义文本的颜色

div {	color: red;}

表示	属性值
预定义的颜色值	red, green, blue
十六进制	#FF0000, #FF6600, #29D794
RGB代码	rgb(255,0,0)或rgb(100%,0%,0%)

开发中最常用的是十六进制

对齐文本

text-align属性用于设置元素内文本内容的水平对齐方式

div {	text-align: center;}

属性值	解释
left	左对齐（默认值）
right	右对齐
center	居中对齐

装饰文本

text-decoration 属性规定添加到文本的装饰，可以给文本添加下划线、删除线、上划线等

div {	text-decoration: underline;}

属性值	描述
none	默认。没有装饰线（最常用）
underline	下划线。链接a自带下划线（常用）
overline	上划线。（几乎不用）
line-through	删除线。（不常用）

重点记住如何添加下划线，如何删除下划线，其余了解即可

文本缩进

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

div {	text-indent: 10px;}

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

p {	text-indent: 2em;}

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

行间距

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

p {	line-height: 26px;}

上间距

文本高度

下间距

手动测量行间距的工具

FSCapture.exe

CSS引入方式

CSS的三种样式表

按照CSS样式书写的位置（或者引入的方式），CSS样式表可以分为三大类：

1. 行内样式表（行内式）
2. 内部样式表（嵌入式）
3. 外部样式表（链接式）

内部样式表

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

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

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

行内样式表

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

<div style="color: red; font-size: 12px;">行内样式表</div>

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

外部样式表

样式单独写在CSS中，之后把CSS文件引入到HTML页面中使用

引入外部样式表分为两步：

1. 新建一个.css的样式文件，把所有CSS代码放在文件中
2. 在HTML中，使用link标签引入这个文件

<link rel="stylesheet" href="css文件路径" />

属性	作用
rel	定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件
href	定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径

使用外部样式表设定CSS，通常也被称为外链式或链接式引入

CSS复合选择器

什么是复合选择器

选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的

• 复合选择器可以更准确、更高效的选择目标元素（标签）
• 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
• 常用的复合选择器：后代选择器、子选择器、并集选择器、伪类选择器

后代选择器（重点）

后代选择器又称为包含选择器，可以选择父元素里面子元素

写法：外层标签写在前面，内层标签写在后面，中间用空格分隔

当标签发生嵌套时，内层标签就成为外层标签的后代

元素1 元素2 { 样式声明 }

以上语法表示选择元素1里面的所有元素2（后代元素）

ul li { 样式声明 } /* 选择ul里面所有的li标签元素 */

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

子选择器（重要）

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

元素1>元素2 {样式声明}

以上语法表示选择元素1里面的所有直接后代（子元素）元素2

div>p {样式声明}

• 元素1和元素2中间用大于号隔开
• 元素1是父级，元素2是子级，最终选择的是元素2
• 元素2必须是亲儿子，其孙子、重孙之类都不归他管，也可以叫它 亲儿子选择器

并集选择器

并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于计提声明

并集选择器是各选择器通过英文逗号（，）连接而成，任何形式的选择器都可以作为并集选择器的一部分

元素1，元素2 {样式声明}

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

div,p,.pig li {	color: pink;}

约定的语法规范，我们并集选择器喜欢竖着写

一定要注意，最后一个选择器，不需要加逗号

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素

书写特点：用冒号（：）表示，比如:hover、:first-child

伪类选择器有很多，有链接伪类、结构伪类等

链接伪类选择器

a:link			/*选择所有未被访问的链接*/a:visited		/*选择所有已被访问的链接*/a:hover			/*选择鼠标指针位于其上的链接*/a:active		/*选择活动链接（鼠标按下未弹起的链接）*/

一、链接伪类选择器注意事项

1. 为了确保生效，请按照LVHA的顺序声明:link, :visited, :hover, :active
2. 因为a链接在浏览器中具有默认样式，实际工作中都需要给链接单独指定样式

二、链接伪类选择器实际开发中的写法

只写这2个

a {	color: gray;}a:hover {	color: red;}

:focus伪类选择器

:focus伪类选择器用于选取获得焦点的表单元素

焦点就是光标，一般情况l类表单元素才能获取，因此这个选择器也主要针对于表单元素来说

input:focus {	background-color: yellow;}

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择后代元素	可以使子孙后代	较多	符号是空格 .nav a
子代选择器	选择最近一级元素	只选亲儿子	较少	符号是大于 .nav>p
并集选择器	选择器某些相同样式的元素	可以用于计提声明	较多	符号是逗号 .nav, .header
链接伪类选择器	选择不同状态的链接	跟链接有关	较多	重点记住 a{}和a:hover 实际开发的写法
:focus选择器	选择获得光标的表单	跟表单相关	较少	input:focus 记住这个写法

CSS背景

通过CSS背景属性，可以给页面元素添加背景样式

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等

背景颜色

background-color 属性定义了元素的背景颜色

background-color: 颜色值;

一般情况下，元素背景颜色默认值是transparent（透明）,我们也可以手动指定背景颜色为透明色

背景图片

background-image 属性描述了元素的背景图像

实际开发常见于 logo 或者一些装饰的小图片或者超大的背景图片（正常的商品图片，应该是不用这种方式）

优点是非常便于控制位置（精灵图也是一种运用场景）

background-image: none | url(url)

参数值	作用
none	无背景图（默认的）
url	使用绝对或相对地址指定背景图像

背景平铺

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

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

参数值	作用
repeat	背景图像在纵向和横向上平铺（默认的）
no-repeat	背景图像不平铺
repeat-x	背景图像在横向平铺
repeat-y	背景图像在纵向平铺

背景图片设置

1. 参数是方位名词

• 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致
• 如果只指定了一个方位名词，另一个省略，则第二个值默认居中对齐

2. 参数是精确单位

• 如果参数值是精确坐标，那么第一个是x坐标，第二个是y坐标
• 如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中

3. 参数是混合单位

• 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标

背景图像固定（背景附着）

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动

background-attachment后期可以制作视差滚动的效果

background-attachment: scroll | fixed

参数	作用
scroll	背景图像是随对象内容滚动
fixed	背景图像固定

背景复合写法

为了简化背景属性的代码，可以将这些属性合并简写在同一个属性background中，从而节约代码

当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为：

background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;

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

这是实际开发中，提倡的写法

背景色半透明

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

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

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

案例

练习价值：

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

CSS特性

CSS有3个重要的特性：层叠性、继承性、优先级

层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式

层叠性主要解决样式冲突的问题

层叠性原则

• 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
• 样式不冲突，不会层叠

继承性

CSS中的继承：字标签会继承父标签的某些样式，如文本颜色和字号。

• 恰当地使用继承可以简化代码，降低CSS样式的复杂性
• 子元素可以继承父元素的样式（text-,font-,line-这些元素开头的可以继承，以及color属性）

行高的继承性

body {	font: 12px/1.5 Microsoft YaHei;}

• 行高可以跟单位也可以不跟单位
• 如果子元素没有设置行高，则会继承父元素的行高为1.5
• 此时子元素的行高是：当前子元素的文字大小*1.5
• body 行高 1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

优先级

当同一个元素指定多个选择器，就会有优先级产生

• 选择器相同，则执行层叠性
• 选择器不同，则根据选择器权重执行

选择器权重

选择器	选择器权重
继承 或者*	0
元素选择器	1
类选择器，伪类选择器	10
ID选择器	100
行内样式 style=""	1000
!important	无穷大

优先级注意点：

1. 权重是有4组数字组成，但是不会有进位
2. 可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推
3. 等级判断从左向右，如果某一位数值相同，则判断下一位数值
4. 可以简单记忆法：通配符和继承权重为0，标签选择器为1
5. 继承的权重为0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0

从而理解a标签的特殊性，对body设置样式，对a标签不起作用

权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重

• div ul li----0,0,0,3
• .nav ul li—0,0,1,2
• a:hover—0,0,1,1
• .nav a—0,0,1,1

<head>	<style>		/* .nav li的权重是11 */        .nav li {            color: red;        }        /* 需求把第一个li 颜色改为 粉色加粗 */        /* .pink权重是10 .nav .pink权重是20 */        .nav .pink {            color: pink;            font-weight: 700;        }	</style></head><body>    <ul class="nav">        <li class="pink">人生四大悲</li>        <li>家里没宽带</li>        <li>网速不够快</li>        <li>手机没流量</li>        <li>学校没wifi</li>    </ul></body>

CSS盒模型

目标

1. 能够准确阐述盒子模型的4个组成部分
2. 能够利用边框复合写法给元素添加边框
3. 能够计算盒子的实际大小
4. 能够利用盒子模型布局模块案例
5. 能够给盒子设置圆角边框
6. 能够给盒子添加阴影
7. 能够给文字添加阴影

盒模型

看透网页布局的本质

网页布局过程：

1. 先准备好相关的网页元素，网页元素基本都是盒子Box
2. 利用CSS设置好盒子样式，然后摆放到相应位置
3. 往盒子里面装内容

网页布局的本质：利用CSS摆盒子

盒模型组成

盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器

CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容

• 边框
• 外边距
• 内边距
• 实际内容

边框（border）

border可以设置元素的边框

边框有三部分组成：边框宽度（粗细）、边框样式、边框颜色

写法

border: border-width || border-style || border-color

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式
border-color	边框颜色

div {	width: 300px;	height: 200px;	border-width: 5px;	border-style: solid;	/* border-style: dashed */ //虚线	/* border-color: dotted */ //点线	border-color: pink;}

CSS边框属性允许指定一个元素边框的样式和颜色

border: 1px solid red;

边框分开写法：

border-top: 1px solid red;

表格的细线边框

border-collapse 属性控制浏览器绘制表格边框的方式，它控制相邻单元格的边框

border-collapse: collapse;

• collapse 单词是合并的意思
• border-collapse: collapse; 表示相邻边框合并在一起

注意事项

1. 测量盒子大小的时候，不量边框
2. 如果测量的时候包含了边框，则需要 width/height 减去边框宽度
3. 边框会影响盒子实际大小（错误，盒子外面的，就不属于这个盒子了）
4. 边框会额外增加盒子的实际大小（错误，盒子宽度、高度没有变，边框只是在外面添加了宽度）

内边距（padding）

padding 属性用于设置内边距，即内容到边的距离

有点像现实中的纸盒子，有一些厚度类似的意思，体会吧

这样解释的话，边框，就不太好解释了

其实想想，应该还是 内边距撑大盒子 解释，理解 比较好

写法

完整写

div {    padding-top: 5px;    padding-right: 10px;    padding-bottom: 20px;    padding-left: 30px;}

简写

值的个数	表达意思
padding: 5px;	1个值，代表上下左右都有5px内边距
padding: 5px 10px;	2个值，代表上下内边距5px，左右内边距10px
padding: 5px 10px 20px;	3个值，代表上内边距5px 左右内边距10px 下内边距20px
padding: 5px 10px 20px 30px;	4个值，上是5px 右10px 下20px 左30px 顺时针

注意事项

给盒子指定padding之后，

1. 内容和边框有了距离，添加了内边距
2. padding影响了盒子实际大小

• padding 影响盒子实际大小，测量的时候，需要注意

• 如果盒子已经有了宽度和高度，此时再指定padding，会撑大盒子

  • 解决方案：

    为保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可

• 如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小

内边距会影响盒子的大小，但在调试工具中，可以通过颜色看出来，哪块是真正的盒子，哪块是内边距

padding 好像确实可以撑大盒子

内边距应用

案例-利用padding影响盒子

新浪导航案例-padding影响盒子好处

相关取值：

1. 上边框为3像素，颜色为 #ff8500
2. 下边框为1像素 颜色为 #edeef0
3. 盒子高度为41像素，背景颜色为 #fcfcfc
4. 文字颜色为 #4c4c4c

外边距（margin）

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

写法

完整写

div {    margin-top: 5px;    margin-right: 10px;    margin-bottom: 20px;    margin-left: 30px;}

简写

值的个数	表达意思
margin: 5px;	1个值，代表上下左右都有5px外边距
margin: 5px 10px;	2个值，代表上下外边距5px，左右外边距10px
margin: 5px 10px 20px;	3个值，代表上外边距5px，左右外边距10px，下外边距20px
margin: 5px 10px 20px 30px;	4个值，上是5px，右10px，下20px，左30px，顺时针

注意事项

外边距是否会影响盒子大小

margin负值，什么意思

auto,怎么显示，没有写margin，是默认auto吗

auto，是让盒子水平居中，浏览器宽度减去盒子宽度，剩下的宽度，两边分半

其他不设置，默认应该是0

调试工具上面显示（margin: 0 0 17px）,而右侧显示 margin-bottom: 17px;

一些元素自带外边距，比如 div 自带 margin: 8px 8px 8px 8px; 所以就有了经常清除默认内外边距的代码如下

* {    margin: 0;    padding: 0;}

外边距应用

块级元素水平居中

外边距可以让块级盒子水平居中，但是必须满足2个条件

1. 盒子必须指定宽度（width）
2. 盒子左右的外边距都设置为auto

注意：

以下方法是让块级元素水平居中，

行内元素或者行内块元素水平居中，给其父元素添加 text-align: center;即可（父元素内的子元素，都当做文字看待）

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

常见的3种写法

写法1

div {    margin-left: auto;    margin-right: auto;}

写法2

div {    margin: auto;}

写法3

div {    margin: 0 auto;}

外边距合并

使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并

相邻块元素垂直外边距的合并

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下边距 margin-bottom，下面的元素有上外边距 margin-top，则他们之间的垂直间距不是 margin-bottom 与margin-top之和，

取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并

解决方案：

尽量只给一个盒子添加 margin 值

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

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

解决方案：

1. 可以为父元素定义上边框
2. 可以为父元素定义上内边距
3. 可以为父元素添加overflow:hidden;

还有其他方法，比如浮动、固定、绝对定位的盒子不会有塌陷问题，后面再总结

清除内外边距

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

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

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

margin负值的运用

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

PS基本操作

• ctrl+R: 调出标尺

• 或者 视图-标尺

• 右击标尺，把里面的单位改为像素

• ctrl++，可以放大视图，ctrl±，可以缩小视图

• 按住空格键，鼠标可以变成小手，拖动ps视图

• 用选区拖动，可以测量大小

• ctrl+D 可以取消选区，或者在旁边空白处点击一下，也可以取消选区

综合实例

案例1：产品模块

box-div

img

review-p

appraise-div

info-div

https://www.bilibili.com/video/BV14J4114768?p=158

总结

布局为什么用不同盒子，我只想用div？

标签都是有语义的，合理的地方用合理的标签。比如产品标题 就用h，大量文字段落就用p

为什么用那么多类名？

类名就是给每个盒子起一个名字，可以更好的找到这个盒子，选取盒子更容易，后期维护也方便

到底用margin还是padding？

大部分情况两个可以混用，两者各有优缺点，但是根据实际情况，总是有更简单的方法实现

自己做没有思路？

布局有很多实现方式，同学们可以开始先模仿我的写法，然后再做出自己的风格

最后同学们一定多运用辅助工具，比如屏幕画笔，ps等等

案例2：快报模块

​ 10 阴影

盒子阴影

CSS3中新增了盒子阴影，可以使用 box-shadow属性为盒子添加阴影

box-shadow: h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必需，水平阴影的位置。允许负值
v-shadow	必需，垂直阴影的位置。允许负值
blur	可选，模糊距离
spread	可选，阴影的尺寸
color	可选，阴影的颜色，请参阅CSS颜色值
inset	可选，将外部阴影（outset）改为内部阴影

注意：

1. 默认的是外阴影（outset），但是不可以写这个单词，否则导致阴影无效
2. 盒子阴影不占用空间，不会影响其他盒子排列

文字阴影

CSS3中，我们可以使用 text-shadow 属性将阴影应用于文本

text-shadow: h-shadow v-shadow blur color;

值	描述
h-shadow	必需，水平阴影的位置。允许负值
v-shadow	必需，垂直阴影的位置。允许负值
blur	可选，模糊的距离
color	可选，阴影的颜色，参阅CSS颜色值

圆角边框（重点）

在CSS3中，新增了圆角边框样式，这样盒子就可以变圆角了

border-radius 属性用于设置元素的外边框圆角

border-radius: length;

radius 半径（圆的半径）原理：（椭）圆与边框的交集形成圆角效果

• 参数值可以为数值或百分比的形式
• 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写成50%
• 如果是个矩形，设置为高度的一半就可以做
• 该属性是一个简写属性，可以跟4个值，分别代表左上角、右上角、右下角、左下角
• 分开写：border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius

CSS浮动

目标

1. 能够说出为什么需要浮动
2. 能够说出浮动的排列特性
3. 能够说出3中最常见的布局模式
4. 能够说出为什么需要清除浮动
5. 能够写出至少2中清除浮动的方法
6. 能够利用ps实现基本的切图
7. 能够利用ps插件实现切图
8. 能够完成学成在线的页面布局

网页布局的本质：用CSS来摆放盒子，把盒子摆放到相应位置

CSS提供了三种传统布局方式（简单说，就是盒子如何进行排列顺序）

• 普通流（标准流）
• 浮动
• 定位

标准流（普通流/文档流）

所谓的标准流，就是标签按照规定好默认方式排列

1. 块级元素会独占一行，从上到下顺序排列

• 常用元素：div, hr, p, h1-h6, ul, ol, dl, form, table

2. 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行

• 常用元素：span, a, i, em等

以上都是标准流布局，我们前面学习的就是标准流，标准流是最基本的布局方式

这3中布局方式都是用来排放盒子的，盒子摆放到合适位置，布局就自然完成了

注意：实际开发中，一个页面基本都包含了这3种布局方式（后面移动端学习新的布局方式）

浮动

为什么需要浮动？

提问：

1. 如何让多个块级盒子（div）水平排列成一行？

比较难，虽然转换为行内块元素可以实现一行显示，但是他们之间会有大的空白缝隙，很难控制

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

总结：有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局，因为浮动可以改变元素标签默认的排列方式

浮动最典型的应用：可以让多个块级元素一行内排列显示

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

什么是浮动？

float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘及包含块或另一个浮动框的边缘

选择器 {float: 属性值;}

属性值	描述
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右浮动

浮动特性

加了浮动之后的元素，会具有很多特性

1. 浮动元素会脱离标准流（脱标）
2. 浮动的元素会一行内显示并且元素顶部对齐
3. 浮动的元素会具有行内块元素的特性

设置了浮动的元素的重要特性：

1. 脱离标准普通流的控制（浮）移动到指定位置（动），（俗称脱标）

2. 浮动的盒子不再保留原先的位置

3. 如果多个盒子都设置了浮动，则他们会按照属性值一行内显示并且顶端对齐排列

注意：浮动的元素是相互贴靠在一起（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐

3. 浮动元素会具有行内块元素特性

任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性

• 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容决定
• 浮动的盒子中间是没有缝隙的，是紧挨着一起的
• 行内元素同理

1.6 浮动元素经常和标准流父级搭配使用

为了约束浮动元素位置，我们网页布局一般采用的策略是：

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则

• 标准流父盒子
• 浮动子盒子

案例：

小米布局案例1

小米布局案例2

小米布局案例3

常见网页布局

• 标准流
• 细分
• 再细分（小米官网）

浮动布局注意点

1.浮动和标准流的父盒子搭配

先用标准流的父元素排列上下位置，之后内部子元素才去浮动排列左右位置

2.一个元素浮动了，理论上其余的兄弟元素也要浮动

一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题

浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

清除浮动

思考题：

我们前面浮动元素有一个标准流的父元素，他们有一个共同的特点，都是有高度的

但是，所有的父盒子都必须有高度吗？

理想中的状态，让子盒子撑开父亲，有多少孩子，我父盒子就有多高

为什么需要清除浮动？

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

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

清除浮动本质

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

语法：

选择器 {clear: 属性值;}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

实际工作中，几乎只用 clear: both;

清除浮动的策略：闭合浮动

只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子

清除浮动的方法

1. 额外标签法也称为隔墙法，是W3C推荐的做法
2. 父级添加 overflow属性
3. 父级添加after属性
4. 父级添加双伪元素

额外标签法

也称隔墙法，是W3C推荐的做法

额外标签法会在浮动元素末尾添加一个空的标签，例如

<div style="clear: both"></div>

或者其他标签，如
等

• 优点：通俗易懂，书写方便
• 缺点：添加许多无意义的标签，结构化较差

注意：要求这个新的空标签必须是块级元素

父级添加overflow属性

可以给父级添加 overflow 属性，将其属性设置为 hidder, 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;}

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

PS切图

常见的图片格式

1.jpg图像格式：对色彩的信息保留较好，高清，颜色较多

2.gif图像格式：gif格式最多只能存储256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果

3.png图像格式：是一种新兴的网络图形格式，结合jpg和gif的优点，具有存储形式丰富的特点，能够保持透明背景，如果想要切成背景透明的图片，请选择png格式

4.psd图像格式：可以存放图层、通道、遮罩等多种设计稿

学成在线案例

CSS定位

目标

1. 能够说出为什么要用定位
2. 能够说出定位的4中分类
3. 能够说出4中定位各自的特点
4. 能够说出为什么常用子绝父相布局
5. 能够写出淘宝轮播图布局
6. 能够说出显示隐藏的2中方式以及区别

定位

为什么需要定位

以上效果，标准流或浮动都无法快速实现，此时需要定位来实现

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

定位组成

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子

定位=定位模式+边偏移

定位模式用于指定一个元素在文档中的定位方式

边偏移决定了该元素的最终位置

定位模式

定位模式决定元素的定位方式，它通过CSS的position属性来设置，其值可以分为四个：

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

边偏移

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

边偏移属性	示例	描述
top	top: 80px;	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	bottom: 80px;	底部偏移量，定义元素相对于其父元素下边线的距离
left	left: 80px;	左侧偏移量，定义元素相对于其父元素左边线的距离
right	right: 80px;	右侧偏移量，定义元素相对于其父元素右边线的距离

静态定位 static（了解）

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

语法：

选择器 { position: static; }

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

相对定位 relative（重要）

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

语法：

选择器 { position: relative; }

相对定位的特点：

1. 它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）
2. 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。（不脱标，继续保留原来位置）

因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。

绝对定位 absolute （重要）

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

语法：

选择器 { position: absolute; }

绝对定位的特点：

1. 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）
2. 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置
3. 绝对定位不再占有原先的位置（脱标）

问题：

1. 绝对定位和相对定位到底有什么使用场景呢？
2. 为什么说相对定位给绝对定位当爹的呢？

子绝父相的由来

弄清这个口诀，就明白了绝对定位的相对定位的使用场景

这个“子绝父相”太重要了，是我们学习定位的口诀，是定位中最常用的一种方式，这句话的意思是：子级是绝对定位的话，父级要用相对定位

1. 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响到其他的兄弟盒子
2. 父盒子需要加定位限制子盒子在父盒子内显示
3. 父盒子布局时，需要占有位置，因此父亲只能是相对定位

这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级

总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位

当然，子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到

固定定位 fixed（重要）

固定定位是元素固定与浏览器可视区的位置。

主要使用场景：可以在浏览器页面滚动时元素的位置不会改变

选择器 {position: fixed;}

固定定位的特点：

1. 以浏览器的可视窗口为参照点移动元素
   • 跟父元素没有任何关系
   • 不随滚动条滚动
2. 固定定位不再占有原先的位置

固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位

固定定位小技巧：固定在版心右侧位置

小算法：

1. 让固定定位的盒子 left: 50%，走到浏览器可视区（也可看做版心）的一半位置
2. 让固定定位的盒子 margin-left: 版心宽度的一半距离。多走版心宽度的一半位置

就可以让固定定位的盒子贴着版心右侧对齐了

粘性定位 sticky（了解）

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

语法：

选择器 { position: sticky; top: 10px; }

粘性定位的特点：

1. 以浏览器的可视窗口为参照点移动元素（固定定位特点）
2. 粘性定位占有原先的位置（相对定位特点）
3. 必须添加 top、left、right、bottom其中一个才有效

跟页面滚动搭配使用，兼容性较差，IE不支持

定位总结

定位模式	是否脱标	移动位置	是否常用
static静态定位	否	不能使用边偏移	很少
relative相对定位	否（占有位置）	相对于自身位置移动	常用
absolute绝对定位	是（不占有位置）	带有定位的父级	常用
fixed固定定位	是（不占有位置）	浏览器可视区	常用
sticky粘性定位	占（占有位置）	浏览器可视区	当前阶段少

重点学会子绝父相

定位叠放次序 z-index

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

语法：

选择器 { z-index: 1; }

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

定位的拓展

绝对定位的盒子居中

加入绝对定位的盒子不能通过 margin: 0 auto 水平居中，但是可以通过以下计算方法实现水平和垂直居中

1. left: 50%; 让盒子的左侧移动到父级元素的水平中心位置
2. margin-left: -100px; 让盒子向左移动自身宽度的一半

定位特殊特性

绝对定位和固定定位也和浮动类似

1. 行内元素添加绝对或者固定定位，可以直接设置高度和宽度
2. 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认是内容大小

脱标的盒子不会触发外边距塌陷

浮动元素、绝对定位（固定定位）元素的都不会触发外边距合并的问题

绝对定位（固定定位）会完全压住盒子

浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）

但是绝对定位（固定定位）会压住下面标准流所有的内容

浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。文字会环绕浮动元素

综合实例

案例：淘宝焦点图布局制作

1. 大盒子我们类名为：tb-promo 淘宝广告
2. 里面先放一张图片
3. 左右连个按钮，用链接就好了。左箭头 prew 右箭头 next
4. 底侧小圆点ul继续做。类名 promo-nav

https://www.bilibili.com/video/BV14J4114768?p=242

网页布局总结

元素的显示与隐藏

CSS高级技巧

目标

1. 能够使用精灵图
2. 能够使用字体图标
3. 能够写出CSS三角
4. 能够写出常见的CSS用户界面样式
5. 能够说出常见的布局技巧

精灵图

1.为什么需要精灵图？

一个网页中往往会应用很多小的背景图像作为装饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度

因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现CSS精灵技术（也称 CSS Sprites、CSS雪碧）

核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了

淘宝精灵图

2.精灵图的使用

使用精灵图核心：

1. 精灵技术主要针对于背景图片使用，就是把多个小背景图片整合到一张大图中
2. 这个大图片也称为sprites 精灵图 或者 雪碧图
3. 移动背景图片位置，此时可以使用 background-position
4. 移动的距离就是这个目标图片的x和y坐标，注意网页中的坐标有所不同
5. 因为一般情况下都是往上往左移动，所以数值是负值
6. 使用精灵图的时候需要精确测量，每个小背景图片的大小和位置

核心总结

1. 精灵图主要针对于小的背景图片使用
2. 主要借助于背景位置来实现：background-position
3. 一般情况下精灵图都是负值（注意网页中的坐标：x轴右边走是正值，左边走是负值；y轴往上走是负值，往下走是正值）

3.精灵图课堂案例

https://www.bilibili.com/video/BV14J4114768?p=254

字体图标

字体图标的产生

字体图标使用场景：主要用于显示网页中通用、常用的一些小图标

精灵图有很多优点，但是缺点很明显

1. 图片文件还是比较大的
2. 图片本身放大和缩小会失真
3. 一旦图片制作完毕想要更换非常复杂

此时，有一种技术的出现很好的解决了以上问题，就是字体图标iconfont

字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质是字体

字体图标的优点

• 轻量级：一个图标字体要比一系列的图像要小，一旦字体加载出来，图标就会马上渲染出来，减少服务器请求
• 灵活性：本质是字体，可以很随意地改变颜色、产生阴影、透明效果、旋转等
• 兼容性：几乎支持所有的浏览器

注意：字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化

总结

1. 如果遇到结构和样式比较简单的小图标，就用字体图标
2. 如果遇到一些结构和样式复杂一点的小图标，就用精灵图

字体图标的下载

• icomoon字库 http://icomoon.io

icoMoon 成立于2011年，推出第一个自定义图标字体生成器，它允许用户选择所需要的图标，使他们生产一字型。该字库内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢

• 阿里iconfont字库 http://www.iconfont.cn

这个是阿里妈妈M2UX的一个iconfont字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用AI制作图标上传生成，免费

字体图标的引入

下载完毕之后，注意原先的文件不要删，后面会用

1. 把下载包里面的fonts文件夹放入页面根目录下
2. 在CSS样式中全局声明字体：简单理解把这些字体文件通过CSS引入到我们页面中（注意字体文件路径的问题）

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

不同浏览器所支持的字体格式是不一样的，字体图标之所以兼容，就是因为包含了主流浏览器支持的字体文件

字体图标的追加

如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中

把压缩包里面的 selection.json重新上传，然后选中自己想要新的图标，重新下载压缩包，并替换原来的文件

字体图标加载的原理：和精灵图类似

向服务器请求字体图标的字体文件

CSS三角

网页中常见一些三角形，使用CSS直接画出来就可以，不必做成图片或者字体图标

一张图，就知道CSS三角是怎么来的了

div {	width: 0;	height: 0;	/*下面这两句，是为了兼容低版本浏览器，高版本浏览器和移动端不用写*/	line-height: 0;	font-size: 0;	border: 50px solid transparent;	border-left-color: pink;}

CSS三角-京东

利用定位

CSS用户界面样式

什么是界面样式

界面样式，就是更改一些用户操作样式，以便提高更好的用户体验

• 更改用户的鼠标样式
• 表单轮廓
• 防止表单域拖拽

鼠标样式

li {cursor: pointer;}

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

属性值	描述
default	小白 默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

轮廓线

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

input {outline: none;}

防止拖拽文本域resize

实际开发中，我们文本域右下角是不可以拖拽的

textarea {resize: none;}

vertical-align属性应用

CSS的 vertical-align属性使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐

官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效

语法：

vertical-align: baseline | top | middle | bottom

值	描述
baseline	默认，元素放置在父元素的基线上
top	把元素的顶端与行中最高元素的顶端对齐
middle	把此元素放置在父元素的中部
bottom	把元素的顶端与行中最低的元素的顶端对齐

图片和文字默认是基线对齐

图片、表单和文字对齐

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

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

解决图片底部默认空白缝隙问题

bug: 图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐

主要解决方法有两种：

1. 给图片添加 vertical-align: middle | top | bottom 等（提倡使用）
2. 把图片转换为块级元素 display: block;

溢出的文字省略号显示

单行文本溢出显示省略号

必须满足3个条件

/*1. 先强制一行内显示文本*/white-space: nowrap: (默认 normal 自动换行)/*2. 超出的部分隐藏*/overflow: hidden;/*3. 文字用省略号替代超出的部分*/text-overflow: ellipsis;

多行文本溢出显示省略号

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

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

常见布局技巧

巧妙利用一个技术更好更快的布局

margin负值的运用

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

文字围绕浮动元素

巧妙运用浮动元素不会压住文字的特性

行内块的巧妙运用

https://www.bilibili.com/video/BV14J4114768?p=270

CSS三角强化

Emmet语法

目标

1. 能够使用Emmet语法
2. 能够使用CSS复合选择器
3. 能够写出伪类选择器的使用规范
4. 能够说出元素有几种显示模式
5. 能够写出元素显示模式的相互转换代码
6. 能够写出背景图片的设置模式
7. 能够计算CSS的权重

快速生成HTML结构语法

1. 生成标签，直接输入标签名 按tab键即可 比如 div 然后tab键，就可以生成
2. 如果想要生成多个相同标签 加上*就可以了，比如 div *3 就可以快速生成3个div
3. 如果有父子级关系的标签，可以用> 比如 ul>li 就可以了
4. 如果有兄弟关系的标签，用+就可以了 比如 div+p
5. 如果生成带有类名或者id名字的，直接.demo 或者 #two tab键就可以了
6. 如果生成的div类名是有顺序的，可以用自增符号$
7. 如果想要在生成的标签内部写内容可以用{}表示

快速生成CSS样式语法

CSS基本采取简写形式即可

1. 比如w200 按tab 可以生成 width: 200px;
2. 比如lh26 按tab 可以生成 line-height: 26px;

快速格式化代码

vscode中格式化代码快捷键：shift+alt+F

也可以谁知当我们 保存页面的时候自动格式化代码：

1. 文件->首选项->设置

2. 搜索emmet.include;

3. 在setting.json下的[用户]中添加一下语句

   “editor.formatOnType”:true,

   “editor.formatOnSave”:true

只需要设置一次即可，以后都可以自动保存格式化代码

Chrome调试工具

打开调试工具

按F12或者右击页面空白处，检查

使用调试工具

1. ctrl+滚轮，可以放大开发者工具代码大小

   这个正确，就是可以改变调试工具窗口大小

2. 左边是HTML元素结构，右边是CSS样式

3. 右边CSS样式可以改动数值（左右箭头或者直接输入）和查看颜色

4. ctrl+0，复原浏览器大小

5. 如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误

6. 如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误

CSS疑问

user agent stylesheet 什么意思

是标签自带的默认的属性设置，再显示一下，强调一下吗，整体展示一下是吗，而不是开发者自己设置写上的