CSS笔记

CSS学习笔记

1 CSS简介

css为层叠样式表语言，css规则由两个主要的部分构成：选择器以及一条或多条声明

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

2 CSS的引入方式

2.1 内部样式表

包括文档样式表、内嵌样式表

/* 可以在style元素或者CSS文件中使用@import导入其他的CSS文件 */
@import url(./other.css)

写到html页面内部，是将所有的CSS代码抽取出来，单独放到一个<style>中

2.2 行内样式表

<h2 style=""></h2>

2.3 外部样式表

须在html页面中，使用<link>标签引入这个文件

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

3 CSS基础选择器

选择器就是根据不同需求把不同的标签选出来，为之添加CSS样式

选择器分为基础选择器和复合选择器两个大类

• 基础选择器是由单个选择器组成的
• 基础选择器又包括：标签选择器、类选择器、id选择器和通配符选择器

display: none/block隐藏/显示（块）指定的内容

3.1 标签选择器

用html标签名称作为选择器

3.2 类选择器

用“.类名”作为选择器

对应改变样式的文字或图片应在其标签属性添加class=”类名”

长名称和词组可以使用中横线来为选择器命名；不要使用纯数字、中文命名，尽量使用英文字母来表示

可在class中写多个类名，用空格隔开

常见的类命名规则如下：

内容	类名
头	header
内容	content/container
尾	footer
导航	nav
侧栏	sidebar
栏目	column
页面外围控制整体布局宽度	wrapper
左右中	left right center
登录条	loginbar
标志	logo
广告	banner
页面主体	main
热点	hot
新闻	news
下载	download
子导航	subnav
菜单	menu
子菜单	submenu

3.3 id选择器

用“#id名”作为选择器

id值如果由多个单词组成，单词之间可以用中划线-、下划线_连接，也可以使用驼峰标识

特点：只能调用一次，经常和js一起使用

3.4 通配符选择器

用*作为选择器，一般用来给所有元素做一些通用性的设置（比如改变内边距、外边距；重置一些内容）

特点：改变所有。效率比较低，尽量不要使用

3.5 属性选择器

拥有某个属性[att]，属性等于某个值att=val

[title] {
    color: blue;
}

[title=box] {
    color: red;
}

attr*=val:属性值包含某一个值val

attr^=val:属性值以val开头

attr$=val:属性值以val结尾

attr|=val:属性值等于val或者以val开头后面紧跟连接符-

attr~=val:属性值包含val，如果有其他值必须以空格和val分割

4 CSS字体属性

4.1 字体系列

font-family: 字体;

各种字体之间必须使用英文状态下的逗号隔开。一般情况下，如果有空格隔开的多个单词组成的字体，加引号。

浏览器会选择列表中第一个该计算机上有安装的字体，或者时通过@font-face指定的可以直接下载的字体

最常见的几个字体： font-family: 'Microsoft Yahei',tahoma,arial,'Hiragino Sans GB';

使用Web Fonts

1、将字体放到对应的目录中

2、通过@font-face来引入字体，并且设置格式

3、使用字体

@font-face {
    font-family: "hyfont01";
    src: url(./fonts/AaJianHaoTi-2.ttf);
}
body {
    font-family: "hyfont01";
}

兼容性写法

format用于帮助浏览器快速识别字体的格式

4.2 字体大小

font-size: 数字px;

谷歌浏览器默认的文字大小是17px，我们可以给body指定整个页面文字的大小

• 推荐使用px，也可以使用em，1em代表100%，2em代表200%，0.5em代表50%
• 百分比：基于父元素的font-size计算，比如50%表示等于父元素font-size的一半

浏览器默认最小字体大小为12px

4.3 字体粗细

font-weight:

属性：
名称 | 含义
:—-:|:—-:
normal | 正常的字体
bold | 粗体
bolder | 特粗体
lighter | 细体
number | 100……
normal相当于number为400，声明此值将取消之前任何设置|

bold相当于number为700，也相当于b对象的作用

number后面不需要加单位

4.4 文字样式

font-style:

• normal
• italic：用字体的斜体显示（通常会有专门的字体）
• oblique：文本倾斜显示（仅仅是让文字倾斜）

4.5 小写字母变形

font-variant: normal | small-caps

small-caps: 将小写字母替换为缩小过的大写字母

4.6 复合属性

font: font-style font-variant font-weight font-size/line-height font-family;

• font-style、font-variant、font-weight可以随意调换顺序，也可以省略

• /line-height可以省略，如果不省略，必须跟在font-size后面

• font-size、font-family不可以调换顺序，不可以省略

5 CSS文本属性

5.1 文本颜色

color:

表示方法：预定义的颜色值，十六进制，RGB代码（rgb(255,0,0)）

5.2 对齐文本

text-align: (水平对齐方式)

MDN：定义行内内容（例如文字）如何相对它的块父元素对齐

属性值：right, left, center, justify（两端对齐）

5.3 装饰文本

text-decoration: (规定添加到文本的修饰)

属性：none(默认——可以去除a元素默认的下划线)，underline(下划线)，overline(上划线)，line-through(删除线)

#baidu {
   text-decoration : underline;
   /* text-decoration : overline; */
   /* text-decoration : line-through; */
   /* text-decoration : blink; */
}

5.4 首行缩进

text indent: 数字px/em;（用于设置第一行内容的缩进）

text-indent: 2em;
/* 刚好缩进两个文字 */

5.5 行间距

line-height: 数字px;

行间距为两行文字基线之间的间距，包括上间距，文本高度，下间距

5.6 大小写转换

text-transform: 用于设置文字的大小写转换

• capitalize：(使…首字母大写, 资本化的意思)将每个单词的首字符变为大写
• uppercase：(大写字母)将每个单词的所有字符变为大写
• lowercase：(小写字母)将每个单词的所有字符变为小写
• none：没有任何影响

5.7 字符间距

letter-spacing: 设置字母之间的间距

word-spacing: 设置单词之间的间距

默认为0，可以设置为负数

6 CSS三大特性

6.1 层叠性

• 样式冲突，选择器权重大的生效；权重相同时，后面设置的生效
• 样式不冲突，不会层叠

6.2 继承性

子元素可以继承父元素的样式（text-, font-, line-这些元素的开头可以继承，以及color属性）

行高的继承性

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

行高可以跟单位也可以不跟单位，如果子元素没有设置行高，则会继承父元素的行高为1.5，此时子元素的行高是：当前子元素的文字大小*1.5

6.3 优先级

选择器	选择器权重
继承或者 *	0, 0, 0, 0
标签选择器 伪元素	0, 0, 0, 1
类选择器 属性选择器 伪类选择器	0, 0, 1, 0
ID选择器	0, 1, 0, 0
行内样式style = “ “	1, 0, 0, 0
!important	无穷大

• 权重由四位数字组成，但是不会有进位

权重的叠加

复合选择器会有权重叠加，但不会进位

7 emmet语法

emmet使用缩写，来提高html/css的编写速度

7.1 快速生成html结构语法

可以添加()来分组（可以理解为优先级）

• !和html:5可以快速生成完整结构的html5代码

• 生成标签：直接输入标签名，并按Tab键即可

• 生成多个相同标签，div*3可以快速生成3个div

• 生成父子级关系的标签，div>ul>li

• 生成兄弟关系的标签，fiv+p

• 生成带有类名或者id名字的，直接写.demo或者#twotab键就可以了

• 生成的div类名是有顺序的，可以用自增符号$

• 想要在生成的标签内部写内容可以用{ }表示

  e.g. div$5 div{文字} 5

7.2 快速生成CSS样式语法

输入简写的首字母，再按Tab键

7.3 快速格式化代码

Shift+Ait+F或者“右键点击格式化文档”

8 复合选择器

css中根据选择器的类型分为基础选择器和复合选择器

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

8.1 后代选择器

后代选择器又称为包含选择器，指所有的后代（直接/间接的后代），选择器之间以空格分割

语法：元素1 元素2 { 样式声明 }

//改变ol中的li
ol li {
    color:pink;
}

元素1，元素2可以为任何基础选择器

8.2 子选择器

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

语法：元素1 > 元素2 { 样式声明 }

8.3 并集选择器

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

并集选择器是各选择器通过英文逗号(,)连接而成，任何形式的选择器都可以作为并集选择器的一部分，并集选择器习惯竖着写

语法：元素1，元素2 { 样式声明 }

8.4 交集选择器

div.one {
    color: red;
}

8.5 伪类选择器

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

伪类选择器书写最大的特点是用冒号（：）表示，比如：:hover、:first-child

8.5.1 链接伪类选择器

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

8.5.2 :focus伪类选择器

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

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

input:focus {
    background-color :yellow;
    color:red;
}

8.6 兄弟选择器

```



### 8.5.1 相邻兄弟选择器

```css
.one + div {
    color: red;
}

8.5.2 普遍兄弟选择器

.one ~ div {
    color: red;
}

9 元素的显示模式

9.1 什么是元素显示模式

作用：网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页

元素显示模式就是元素（标签）以什么方式进行显示，比如 <div> 自己占一行，比如<span>一行可以放多个，两者左上角都有x，y的坐标

html元素一般分为块元素和行内元素两种类型

9.2 块元素

常见的块元素有： <h1> ~ <h6> 、 <p> 、 <div> 、 <li>

特点：

• 独占一行
• 高度、宽度，外边距以及内边距都可以控制
• 宽度默认是容器（父级宽度）的100%
• 是一个容器及盒子，里面可以放行内或者块级元素

注意：

• 文字类元素内不能使用块级元素
• <p> 标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>
• 同理，<h1> ~ <h6>等都是文字类块级标签，里面也不能放其它块级元素

外边距，边框，内边距（理解）

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>内边距和外边距</title>
      <style type="text/css">
         #div1 {
            width: 300px;
            height: 300px;
            background-color: #00FFFF;
            border: solid 1px red;
            /* 内补丁 */
            padding-left: 20px;
         }
         #div2 {
            width: 100px;
            height: 100px;
            background-color: black;
            border: solid 1px red;
            /* 在div2这个节点顶部top打一个补丁，这个补丁离top 10px */
            /* 外补丁 */
            margin-top : 10px;
         }
      </style>
   </head>
   <body>
      
      <!-- 盒子套盒子 -->
      <!-- 如果盒子套盒子，需要定位的话，可以使用外补丁和内补丁。 -->
      <div id="div1">
         <div id="div2">
            
         </div>
      </div>
      
   </body>
</html>

9.3 行内元素

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>，有时也将行内元素称为内联元素

特点：

• 相邻行内元素在一行上，一行可以显示多个
• 高、宽直接设置是无效的
• 默认宽度就是它本身内容的宽度
• 行内元素只能容纳文本或其他行内元素

注意：

• 链接里不能再放链接
• 特殊情况链接 <a> 里面可以放块级元素，但是给 <a> 转换一下块级模式最安全

9.4 行内块元素

在行内元素中有几个特殊的标签—— <img/> 、<input/> 、<td>，它们同时具有块元素和行内元素的特点，可称它们为行内块元素

特点：

• 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）
• 默认宽度就是它本身内容的宽度（行内元素特点）
• 高度，行高，外边距及内边距都可以控制（块级元素特点）

9.5 snipaste的使用

snipaste是一个简单但强大的截图工具，也可以让你将截图贴回到屏幕上

常用快捷方式：

• F1可以截图，同时测量大小，设置箭头，书写文字等
• F3在桌面置顶显示
• 点击图片，Alt可以取色（按下Shift可以切换取色模式）
• 按下Esc取消图片显示

小技巧：单行文字垂直居中的代码

让文字的行高等于盒子的高度

9.6 元素显示模式的相互转换代码

display: block;

display: inline;

display: inline-block; //转换为行内块

display: none;// 隐藏

display: flex;

a {
    /*把行内元素a转换为块级元素*/
    display: block;
}

元素的隐藏方法：

一、display设置为none

元素不显示出来, 并且也不占据位置, 不占据任何空间(和不存在一样)

二、visibility设置为hidden

设置为hidden, 虽然元素不可见, 但是会占据元素应该占据的空间； 默认为visible, 元素是可见的

三、 rgba设置颜色, 将a的值设置为0

rgba的a设置的是alpha值, 可以设置透明度, 不影响子元素

四、opacity设置透明度, 设置为0

设置整个元素的透明度, 会影响所有的子元素

行内非替换元素的注意事项

1、以下属性对行内级非替换元素不起作用

width、height、margin-top、margin-bottom

2、以下属性对行内级非替换元素的效果比较特殊

padding-top、padding-bottom、上下方向的border

9.7 ul，ol序号的显示

ul {
   /* list-style-type: circle; */
   list-style-type: none;
}

ol {
   /* list-style-type: none; */
   list-style-type : upper-roman;
   /* 罗马数字*/
}

10 背景

10.1 背景颜色

background-color: transparent(透明的)，也可以改变为其他颜色

10.2 背景图片

background-image属性描述了元素的背景图像，会盖在（不是覆盖）background-color的上面。

如果设置了多张图片，设置的第一张图片将显示在最上面，其他图片按顺序层叠在下面

background-image: none/ url(地址);

普通图片：float:left/right设置浮动样式

background-image和img对比

• img，作为网页内容的重要组成部分，比如广告图片、LOGO图片、文章配图、产品图片

• background-image，可有可无。有，能让网页更加美观。无，也不影响用户获取完整的网页内容信息

10.3 背景平铺

backgrounf-repeat: repeat | no-repeat | repear-x | repeat-y

10.4 背景图片位置

background-position: x y;

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

参数值	说明
length	百分数\	由浮点数字和单位标识符组成的长度值
position	top\	center\	bottom\	left\	center\	right

1、参数是方位名词

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

2、参数是精确单位

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

3、参数是混合单位

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

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>内边距和外边距</title>
      <style type="text/css">
         #div1 {
            width: 300px;
            height: 300px;
            background-color: #00FFFF;
            border: solid 1px red;
            /* 内补丁 */
            padding-left: 20px;
         }
         #div2 {
            width: 100px;
            height: 100px;
            background-color: black;
            border: solid 1px red;
            /* 在div2这个节点顶部top打一个补丁，这个补丁离top 10px */
            /* 外补丁 */
            margin-top : 10px;
         }
      </style>
   </head>
   <body>
      
      <!-- 盒子套盒子 -->
      <!-- 如果盒子套盒子，需要定位的话，可以使用外补丁和内补丁。 -->
      <div id="div1">
         <div id="div2">
            
         </div>
      </div>
      
   </body>
</html>

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

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动，后期可以制作视差滚动的效果

background-attachment: scroll|fixed

参数	作用
scroll	背景图像是随对象内容滚动
fixed	示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动
local	如果一个元素拥有滚动机制，背景将会随着元素的内容滚动.

10.6 背景图片大小

• auto：默认值, 以背景图本身大小显示

• cover：缩放背景图，以完全覆盖铺满元素,可能背景图片部分看不见

• contain：缩放背景图，宽度或者高度铺满元素，但是图片保持宽高比

• <percentage>：百分比，相对于背景区（background positioning area）

• length：具体的大小，比如100px

10.7 背景属性复合写法

没有特定书写顺序，一般顺序为：

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

10.8 背景色半透明

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

• 最后一个参数是alpha透明度，取值范围在0~1之间
• 我们习惯把0.3的0省略掉，写为background: rgba(0, 0, 0, .3);
• 背景半透明是指盒子背景半透明，盒子里面的内容不受影响
• CSS3新增属性，是IE9+版本浏览器才支持的

11 盒子模型

HTML中的每一个元素都可以看做是一个盒子，可以具备这4个属性

• 内容（content）：元素的内容width/height
• 内边距（padding）：元素和内容之间的间距
• 边框（border）：元素自己的边框
• 外边距（margin）：元素和其他元素之间的间距

因为盒子有四边, 所以margin/padding/border都包括top/right/bottom/left四个边

11.1 内容

设置内容是通过宽度和高度设置的:

• 宽度设置: width

• 高度设置: height

◼ 注意: 对于行内级非替换元素来说, 设置宽高是无效的!

• min-width：最小宽度，无论内容多少，宽度都大于或等于min-width

• max-width：最大宽度，无论内容多少，宽度都小于或等于max-width

移动端适配时, 可以设置最大宽度和最小宽度;

下面两个属性不常用:

• min-height：最小高度，无论内容多少，高度都大于或等于min-height

• max-height：最大高度，无论内容多少，高度都小于或等于max-height

11.2 内边距

padding值的个数	padding例子	代表的含义
4	padding: 10px 20px 30px 40px;	top: 10px, right: 20px, bottom: 30px, left: 40px;
3	padding: 10px 20px 30px;	缺少left, left使用right的值;
2	padding: 10px 20px;	缺少left, 使用right的值; 缺少bottom, 使用top的值;
1	padding: 10px;	top/right/bottom/left都使用10;

11.3 边框

border:可以统一设置

11.3.1 边框宽度

• border-top-width、border-right-width、border-bottom-width、border-left-width

• border-width是上面4个属性的简写属性

11.3.2 边框颜色

• border-top-color、border-right-color、border-bottom-color、border-left-color

• border-color是上面4个属性的简写属性

11.3.3 边框样式

• border-top-style、border-right-style、border-bottom-style、border-left-style

• border-style是上面4个属性的简写属性

设置值：

11.3.4 圆角

border-radius用于设置盒子的圆角

• 数值：通常用来设置小的圆角，如6px
• 百分比：通常用来设置一定的弧度或者圆形

如果一个元素是正方形, 设置border-radius大于或等于50%时，就会变成一个圆

11.4 外边距

margin取值同padding

11.4.1 上下margin的传递

1、margin-top传递

如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素

2、 margin-bottom传递

如果块级元素的底部线和父元素的底部线重叠，并且父元素的高度是auto，那么这个块级元素的margin-bottom值会传递给父元素

如何防止出现传递问题？

• 给父元素设置padding-top\padding-bottom

• 给父元素设置border

• 触发BFC: 设置overflow为auto

使用场景

• margin一般是用来设置兄弟元素之间的间距

• padding一般是用来设置父子元素之间的间距

11.4.2 上下margin的折叠

垂直方向上相邻的2个margin（margin-top、margin-bottom）有可能会合并为1个margin，这种现象叫做collapse（折叠）；水平方向上的margin（margin-left、margin-right）永远不会collapse

折叠后最终值的计算规则：两个值进行比较，取较大的值

如何防止margin collapse？

只设置其中一个元素的margin

11.5 外轮廓

outline表示元素的外轮廓

• 不占用空间

• 默认显示在border的外面

outline相关属性有

• outline-width: 外轮廓的宽度

• outline-style：取值跟border的样式一样，比如solid、dotted等

• outline-color: 外轮廓的颜色

• outline：outline-width、outline-style、outline-color的简写属性，跟border用法类似

应用场景：去除a元素、input元素的focus轮廓效果

11.6 盒子阴影

box-shadow属性可以设置一个或者多个阴影

• 每个阴影用<shadow>表示

• 多个阴影之间用逗号,隔开，从前到后叠加

<shadow>的常见格式如下

• 第1个<length>：offset-x, 水平方向的偏移，正数往右偏移

• 第2个<length>：offset-y, 垂直方向的偏移，正数往下偏移

• 第3个<length>：blur-radius, 模糊半径

• 第4个<length>：spread-radius, 延伸半径

• <color>：阴影的颜色，如果没有设置，就跟随color属性的颜色

• inset：外框阴影变成内框阴影

11.7 文字阴影

text-shadow用法类似于box-shadow，用于给文字添加阴影效果

<shadow>的常见格式如下

相当于box-shadow, 它没有spread-radius的值;

11.8 box-sizing

box-sizing用来设置盒子模型中宽高的行为

• content-box：padding、border都布置在width、height外边

• border-box：padding、border都布置在width、height里边

12 伪类

所有的伪类: https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes

12.1 动态伪类

a:link未访问的链接

a:visited已访问的链接

a:hover鼠标挪动到链接上（重要）

a:active激活的链接（鼠标在连接上长按住未松开）

:focus指当前拥有输入焦点的元素（能接收键盘输入），比如文本输入框一聚焦后，背景就会变红色

使用注意：

• :hover必须放在:link和:visited后面才能完全生效

• :active必须放在:hover后面才能完全生效

所以建议的编写顺序是 :link、 :visited、 :focus、 :hover、 :active

直接给a元素设样式，相当于给a元素的所有动态伪类都设置了。除了a元素，:hover、:active也能用在其他元素上

12.2 目标伪类

:target

URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。:target 选择器可用于选取当前活动的目标元素

12.3 语言伪类

:lang() 根据元素的lang属性确定的元素

12.4 元素状态伪类

:enabled

:disabled

:checked

12.5 结构伪类

• :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

:nth-child

:nth-child(1)：父元素中的第1个子元素

:nth-child(2n)：n代表任意正整数和0，与:nth-child(even)同义

:nth-child(2n+1)：与:nth-child(odd)同义

:nth-last-child

与:nth-child的区别为从后往前计数

• :nth-last-child(1)，代表倒数第一个子元素

• :nth-last-child(-n + 2)，代表最后2个子元素

:nth-of-type

nth-of-type()用法跟:nth-child()类似

不同点是:nth-of-type()计数时只计算同种类型的元素

:nth-last-of-type

:nth-last-of-type()用法跟:nth-of-type()类似

不同点是:nth-last-of-type()从最后一个这种类型的子元素开始往前计数

其他常见的伪类

• :first-child，等同于:nth-child(1)
• :last-child，等同于:nth-last-child(1)
• :first-of-type，等同于:nth-of-type(1)
• :last-of-type，等同于:nth-last-of-type(1)
• :only-child，是父元素中唯一的子元素
• :only-of-type，是父元素中唯一的这种类型的子元素
• :root，根元素。就是HTML元素
• :empty，代表里面完全空白的元素

13.6 否定伪类

:not()的格式是:not(x)

• x是一个简单选择器（元素选择器、通用选择器、属性选择器、类选择器、id选择器、伪类（除否定伪类））

:not(x)表示除x以外的元素

13 伪元素

为了区分伪元素和伪类，建议伪元素使用2个冒号

常见的伪元素有

::first-line 针对首行文本设置属性

::first-letter针对首字母设置属性

::before在一个元素的内容之前插入其他内容

::after在一个元素的内容之后插入其他内容

常通过content属性来未一个元素添加修饰性的内容

.box::before {
    content: "123";
    color: red;
}
.box::after {
    content: "321";
    color: blue;
}

伪类和伪元素的区别

影响文档的方式不同，伪类的表现像给文档添加类，伪元素的效果好像有元素插入在了文档中

14 滚动栏

overflow用于控制内容溢出时的行为

• visible溢出的内容照样可见
• hidden溢出的内容直接裁剪
• scroll溢出的内容被裁剪，但可以通过滚动机制查看，滚动条区域占用的空间属于width、height（有无溢出均会显示滚动条，包括横竖摄像头）
• auto自动根据内容是否溢出来决定是否提供滚动机制

15 定位

15.1 标准流

默认情况下，元素都是按照normal flow（标准流、常规流、正常流、文档流【document flow】）进行排布

• 从左到右、从上到下按顺序摆放好

• 默认情况下，互相之间不存在层叠现象

在标准流中，可以使用margin、 padding对元素进行定位，会影响标准流中其他元素的定位效果，不便于实现元素层叠的效果

标准流，定位流，浮动流

15.2 position

单独对某个元素定位

1、static：默认值，静态定位

元素按照normal flow布局；left、right、top、bottom没有任何作用

2、relative：相对定位

元素按照normal flow布局；可以通过left、right、top、bottom定位，定位参照对象是元素自己原来的位置

应用场景：在不影响其他元素位置的前提下，对当前元素位置进行微调

3、absolute：绝对定位

元素脱离normal flow（脱离标准流、脱标）；可以通过left、right、top、bottom进行定位。定位参照对象是最邻近的定位祖先元素，如果找不到这样的祖先元素，参照对象是视口

◼ 定位元素（positioned element） ：position值不为static的元素，也就是position值为relative、absolute、fixed的元素

子绝父相

在绝大数情况下，子元素的绝对定位都是相对于父元素进行定位

如果希望子元素相对于父元素进行定位，又不希望父元素脱标，常用解决方案是：

• 父元素设置position: relative（让父元素成为定位元素，而且父元素不脱离标准流）

• 子元素设置position: absolute

简称为“子绝父相”

position设置为absolute/fixed元素的特点

• 可以随意设置宽高

• 宽高默认由内容决定

• 不再受标准流的约束

  • 不再严格按照从上到下、从左到右排布
  • 不再严格区分块级(block)、行内级(inline)，行内块级(inline-block)的很多特性都会消失

• 不再给父元素汇报宽高数据

• 脱标元素内部默认还是按照标准流布局

• 绝对定位元素（absolutely positioned element）

  • position值为absolute或者fixed的元素

• 对于绝对定位元素来说：定位参照对象的宽度 = left + right + margin-left + margin-right + 绝对定位元素的实际占用宽度；定位参照对象的高度 = top + bottom + margin-top + margin-bottom + 绝对定位元素的实际占用高度

• 如果希望绝对定位元素的宽高和定位参照对象一样，可以给绝对定位元素设置以下属性：left: 0、right: 0、top: 0、bottom: 0、margin:0

• 如果希望绝对定位元素在定位参照对象中居中显示，可以给绝对定位元素设置以下属性：left: 0、right: 0、top: 0、bottom: 0、margin: auto；另外，还得设置具体的宽高值（宽高小于定位参照对象的宽高）

什么是auto

◼ 800 = 200 + ml0 + mr0 + 0 + 0

◼ auto -> 交给浏览器你来出来

◼ width: auto;

◼ 1.行内非替换元素 -> width: 包裹内容

◼ 2.块级元素 ->width: 包含块的宽度

◼ 3.绝对定位元素 -> width: 包裹内容

4、fixed：固定定位

元素脱离normal flow（脱离标准流、脱标）

• 可以通过left、right、top、bottom进行定位

• 定位参照对象是视口（viewport）

• 当画布滚动时，固定不动

画布和视口

视口（Viewport）：文档的可视区域

画布（Canvas） ：用于渲染文档的区域；文档内容超出视口范围，可以通过滚动查看

画布 >= 视口

5、sticky：粘性定位

sticky可以看做是相对定位和固定(绝对)定位的结合体;

• 它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点;

• 当达到这个阈值点时, 就会变成固定(绝对)定位;

15.3 z-index

设置定位元素多大层叠顺序（仅对定位元素有效）

比较原则

1、如果是兄弟关系

• z-index越大，层叠在越上面

• z-index相等，写在后面的那个元素层叠在上面

2、如果不是兄弟关系

• 各自从元素自己以及祖先元素中，找出最邻近的2个定位元素进行比较，而且这2个定位元素必须有设置z-index的具体数值

16 浮动

float 属性可以指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它

绝对定位、浮动都会让元素脱离标准流，以达到灵活布局的效果

16.1 浮动规则

1、元素一旦浮动后, 脱离标准流

• 朝着向左或向右方向移动，直到自己的边界紧贴着包含块（一般是父元素）或者其他浮动元素的边界为止

• 定位元素会层叠在浮动元素上面

2、如果元素是向左（右）浮动，浮动元素的左（右）边界不能超出包含块的左（右）边界

3、浮动元素之间不能层叠

• 如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素（左浮找左浮，右浮找右浮）

• 如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止

4、浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出。比如行内级元素、inline-block元素、块级元素的文字内容

5、行内级元素、inline-block元素浮动后，其顶部将与所在行的顶部对齐

16.2 浮动问题——高度塌陷

解决父元素高度坍塌问题的过程，一般叫做清浮动（清理浮动、清除浮动），让父元素计算总高度的时候，把浮动子元素的高度算进去

clear

clear 属性可以指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面;

◼ clear的常用取值

left：要求元素的顶部低于之前生成的所有左浮动元素的底部

right：要求元素的顶部低于之前生成的所有右浮动元素的底部

both：要求元素的顶部低于之前生成的所有浮动元素的底部

none：默认值，无特殊要求

清除浮动的方法：

方法一: 给父元素设置固定高度

扩展性不好（不推荐）

方法二: 在父元素最后增加一个空的块级子元素，并且让它设置clear: both

会增加很多无意义的空标签，维护麻烦

违反了结构与样式分离的原则（不推荐）

方法三: 给父元素添加一个伪元素

推荐；编写好后可以轻松实现清除浮动，纯CSS样式解决，结构与样式分离

.clear-fix::after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden; /* 浏览器兼容性 */
    height: 0; /* 浏览器兼容性 */
}
.clear-fix {
    *zoom: 1; /* IE6/7兼容性 */
}

17 Flex布局

17.1 flexbox

flexbox（弹性盒子）：弹性盒子是一种用于按行或按列布局元素的一维布局方法；元素可以膨胀以填充额外的空间, 收缩以适应更小的空间。通常我们使用Flexbox来进行布局的方案称之为flex布局(flex layout)

17.2 flex布局

flex布局（flexible布局，弹性布局）是目前web开发中使用最多的布局方案（移动端，PC端）

开启了 flex 布局的元素叫 flex container，flex container 里面的直接子元素叫做 flex item

当flex container中的子元素变成了flex item时, 具备一下特点:

• flex item的布局将受flex container属性的设置来进行控制和布局;

• flex item不再严格区分块级元素和行内级元素;

• flex item默认情况下是包裹内容的, 但是可以设置宽度和高度;

设置 display 属性为 flex 或者 inline-flex 可以成为 flex container

• flex： flex container 以 block-level 形式存在

• inline-flex： flex container 以 inline-level 形式存在

17.3 flex相关属性

17.3.1 flex-direction

17.3.2 flex-wrap

17.3.3 flex-flow

flex-flow 属性是 flex-direction 和 flex-wrap 的简写。

顺序任何, 并且都可以省略

17.3.4 justify-content

17.3.5 align-item

17.3.6 align-content

17.3.7 order

17.3.8 flex items

17.3.9 flex grow

17.3.10 flex-shrink

17.3.11 flex-basis

17.3.12 flex

18 动画

18.1 transform

允许旋转，缩放，倾斜或平移给定元素。但transform对于行内级非替换元素是无效的

常见的transform函数有以下四种

18.1.1 平移translate(x, y)

1、值个数

• 一个值时，设置x轴上的位移

• 二个值时，设置x轴和y轴上的位移

2、值类型：

• 数字：100px

• 百分比：参照元素本身（ refer to the size of bounding box ）

/* translate是translateX和translateY函数的简写 */
/* translate的百分比可以完成一个元素的水平和垂直居中 */
.box3 {
    position: relative;
    top: 50%;
    transform: translate(0, 50%);
    width: 100px;
    height: 100px;
    background-color: #f00;
}

18.1.2 缩放scale(x, y)

为scaleX和scaleY的缩写

1、值个数

• 一个值时，设置x轴上的缩放

• 二个值时，设置x轴和y轴上的缩放

2、值类型：

• 数字：

  1：保持不变

  2：放大一倍

  0.5：缩小一半

• 百分比：不支持百分比

18.1.3 旋转retate(deg)

1、值个数

一个值时，表示旋转的角度

2、值类型：

• 常用单位deg：旋转的角度（degrees）

• 正数为顺时针

• 负数为逆时针

注意：旋转的原点受transform-origin的影响

transform-origin

变形的原点

• 一个值：设置x轴的原点
• 两个值：设置x轴和y轴的原点

必须是<length>，<percentage>，或 left, center, right, top, bottom关键字中的一个

• left, center, right, top, bottom关键字

• length：从左上角开始计算

• 百分比：参考元素本身大小

transform-origin: top left;

18.1.4 倾斜skew(deg, deg)

1、值个数

• 一个值时，表示x轴上的倾斜

• 二个值时，表示x轴和y轴上的倾斜

2、值类型：

deg：旋转的角度

正数为顺时针

负数为逆时针

◼ 注意：旋转的原点受transform-origin的影响

18.1.5 transform设置多个值

.box {
    width: 200px;
    height: 200px;
    background-color: #f00;
    transform: translate(100px) scale(0.5) rotate(45deg);
}

18.2 过渡动画transition

transition提供了一种在更改CSS属性时控制动画速度的方法，可以让CSS属性变化成为一个持续一段时间的过程，而不是立即生效的。通常将两个状态之间的过渡称为隐式过渡，因为开始与结束之间的状态由浏览器决定

transition可以决定：哪些属性发生动画效果（明确列出这些属性）；何时开始（设置delay）；持续多久（设置duration）；如何动画（定义timing function，比如均匀地先快后慢）

transition CSS 属性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。并非所有的CSS属性都可以执行动画（参考链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_animated_properties）

transition-property：指定应用过渡属性的名称

• 可以写all表示所有可动画的属性
• 属性是否支持动画查看文档

transition-duration：指定过渡动画所需的时间

• 单位可以是s或ms

transition-timing-function：指定动画的变化曲线

transition-delay：指定过渡动画执行之前的等待时间

18.3 关键帧动画

之前我们学习了transition来进行过渡动画，但是过渡动画只能控制首尾两个值：

• 从关键帧动画的角度相当于只是定义了两帧的状态：第一帧和最后一帧。

• 如果我们希望可以有更多状态的变化，可以直接使用关键帧动画。

关键帧动画使用@keyframes来定义多个变化状态，并且使用animation-name来声明匹配：

1.使用 @keyframes创建一个规则

2.@keyframes中使用百分比定义各个阶段的样式

3.通过animation将动画添加到属性上

另外，也可以使用from和to关键字：

• from相当于0%

• to相当于100%

animation属性

CSS Animation的使用分成两个步骤：

步骤一：使用keyframes定义动画序列（每一帧动画如何执行）

步骤二：配置动画执行的名称、持续时间、动画曲线、延迟、执行次数、方向等等

@keyframes规则

可以使用@keyframes来定义多个变化状态，并且使用animation-name来声明匹配：

• 关键帧使用percentage来指定动画发生的时间点；

• 0%表示动画的第一时刻，100%表示动画的最终时刻；

• 因为这两个时间点十分重要，所以还有特殊的别名：from和to；

也就是说可以使用from和to关键字：

• from相当于0%

• to相当于100%

@keyframes moveAnim {
    0% {
        transform: translate(0, 0);
    }
    33% {
        transform: translate(0, 200px);
    }
    66% {
        transform: translate(200px, 200px);
    }
    100% {
        transform: translate(200px, 0);
    }
}

CSS animation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。

animation-name：指定执行哪一个关键帧动画

animation-duration：指定动画的持续时间

animation-timing-function：指定动画的变化曲线

animation-delay：指定延迟执行的时间

animation-iteration-count：指定动画执行的次数，执行infinite表示无限动画

animation-direction：指定方向，常用值normal和reverse

animation-fill-mode：执行动画最后保留哪一个值

• none：回到没有执行动画的位置

• forwards：动画最后一帧的位置

• backwards：动画第一帧的位置

animation-play-state：指定动画运行或者暂停（在JavaScript中使用，用于暂停动画）

19 vertical-align

vertical-align会影响行内块级元素在一个行盒中垂直方向的位置

一个div没有设置高度的时候，会不会有高度？

• 没有内容，没有高度

• 有内容，内容撑起来高度

内容撑起来高度的本质：内容有行高

行高为什么可以撑起div的高度：因为line boxes的存在，且它有一个特性，包裹每行的inline level；而其中的文字是有行高的，必须将整个行高包裹进去，才算包裹这个line-level

结论：line-boxes一定会想办法包裹住当前行中所有的内容。

但是，但是为什么对齐方式千奇百怪呢？

• 你认为的千奇百怪，其实有它的内在规律

• 答案就是baseline对齐

我们来看官方vertical-align的默认值：没错，就是baseline

但是baseline都是谁呢？

• 文本的baseline是字母x的下方

• Inline-block默认的baseline是margin-bottom的底部（没有，就是盒子的底部）

• Inline-block有文本时，baseline是最后一行文本的x的下方

一切都解释通了

现在，对于不同的取值就非常容易理解了

• baseline(默认值)：基线对齐（你得先明白什么是基线）

• top：把行内级盒子的顶部跟line boxes顶部对齐

• middle：行内级盒子的中心点与父盒基线加上x-height一半的线对齐

• bottom：把行内级盒子的底部跟line box底部对齐

• <percentage>：把行内级盒子提升或者下降一段距离（距离相对于line-height计算\元素高度）， 0%意味着同baseline一 样

• <length>：把行内级盒子提升或者下降一段距离，0cm意味着同baseline一样

解决图片下边缘的间隙方法:

方法一: 设置成top/middle/bottom

方法二: 将图片设置为block元素

20 应用场景

20.1 元素的水平居中方案

1、行内级元素(包括inline-block元素)

水平居中：在父元素中设置text-align: center

2、块级元素

水平居中：margin: 0 auto

CSS样式不生效技巧：

• 选择器的优先级太低

• 选择器没选中对应的元素

• CSS属性的使用形式不对

  • 元素不支持此CSS属性，比如span默认是不支持width和height的
  • 浏览器不支持此CSS属性，比如旧版本的浏览器不支持一些css module3的某些属性
  • 被同类型的CSS属性覆盖，比如font覆盖font-size

20.2 鼠标的样式设置

cursor常见的设值有：

auto：浏览器根据上下文决定指针的显示样式，比如根据文本和非文本切换指针样式

default：由操作系统决定，一般就是一个小箭头

pointer：一只小手，鼠标指针挪动到链接上面默认就是这个样式

text：一条竖线，鼠标指针挪动到文本输入框上面默认就是这个样式

none：没有任何指针显示在元素上面

20.3 CSS精灵图（CSS Sprite）

一种CSS图像合成技术，将各种小图片合并到一张图片上，然后利用CSS的背景定位来显示对应的图片部分

好处

• 减少网页的http请求数量，加快网页响应速度，减轻服务器压力

• 减小图片总大小

• 解决了图片命名的困扰，只需要针对一张集合的图片命名

精灵图的使用

精灵图的原理是通过只显示图片的很小一部分来展示的;

通常使用背景:

1.设置对应元素的宽度和高度

2.设置精灵图作为背景图片

3.调整背景图片的位置来展示

20.4 元素垂直居中方案

1、flex

.box {
   display: flex;
    align-item: center;
}

2、top和translation

.box {
    display: relative;
    top: 50%;
    transform: translate(0, -50%);
}

3、块级元素

.box {
    margin: 0 auto;
}