目录

 WHAT 

书写位置

选择器

 浮动属性/标准盒模型

 文本属性/背景属性/列表属性/溢出/阴影

 元素类型

 定位/锚点/透明

表格/BFC

宽高自适应

 渐变/过渡/动画

2D-3D 

弹性盒布局

 层叠样式表（cascading style sheet ）

关于CSS的层叠性

CSS语法：选择器：(选择符){属性1：属性值1；属性2：属性值2；}

link与@import引入方法的区别

1. 本质的差别：link属于XHTML标签，而@import完全是CSS提供的一种方式

2. 加载顺序的差别：当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显

3. 兼容性的差别：@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题

4. 使用dom(document object model文档对象模型 )控制样式时的差别：当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的

通配符 权重0 标签选择器 权重1 类选择器 权重10 ld选择器 权重100 绝对权重 !important 后代选择器 空格 子代选择器 > 相邻选择器 + 相邻所有兄弟节点 ~ 交集并集选择器 伪类选择器 权重10 伪对象选择器 权重1 属性选择器 结构选择器 状态伪类选择器 否定选择器

 伪类选择器

        :link 默认状态

        :visited 已访问状态

        :hover 鼠标悬停状态

        :active 鼠标按下但未松开状态

注意

        除了:hover没有限制，其他三个只能作用在a标签上，并且顺序必须是liink visited hover active

 伪对象选择器

::before 在最前面添加一个结构

::after 在最后面添加一个结构

注意

必须要有content，否则不出现；

添加的元素是一个行内元素

::first-line 块级元素第一行

::first-letter 块级元素的首字

 属性选择器

ele[attr] 选中ele元素带有attr属性的元素

ele[attr="value"] 选中ele元素attr属性为"value"的元素

ele[attr=^"value"] 选中ele元素attr属性为"value"开头的元素

ele[attr=$"value"] 选中ele元素attr属性为"value"结尾的元素

ele[attr=*"value"] 选中ele元素attr属性的属性值包含子串"value"的元素

ele[attr][attr] 选中ele元素匹配多个attr属性的元素

ele[attr~="value"] 选中ele元素匹配部分attr属性的元素

在属性选择器的右方括号前添加一个用空格隔开的字母 i（或 I），可以在匹配属性值时忽略大小写;

在属性选择器的右方括号前添加一个用空格隔开的字母 s（或 S），可以在匹配属性值时区分大小写.

 结构选择器

:first-child 第一个子元素

:last-child 最后一个子元素

:nth-child(xn + y) 第几个子元素(从1开始)

匹配所有下标在集合 { an + b; n = 0, 1, 2, ...} 中的子元素

偶数：even ；奇数：odd

- 注意：以上几个必须和前置选择器配套

:first-of-type 第一个类型元素

:last-of-type 最后一个类型元素

:nth-of-type(xn+y) 第一个类型元素

 状态伪类选择器

:checked 单选框复选框选中后的样式

:empty 空选择器

:root 根选择器

:selection 鼠标选中后的文本的样式

否定选择器

 :not() 用来匹配不符合一组选择器的元素

 浮动 float

-在原始标准文档流不再继续占位

-浮动会遮盖原始文档流的内容，文本和图片不遮盖

盒模型 

content 内容

padding 内边框 不可以设置负数

border 边框 1.边框属性         border-width边框的宽度 (数值+单位)         border-style 边框的样式 (solid 实线、dashed 虚线、dotted 点线、double 双实线)         border-color 边框的颜色 (颜色的css写法相同) 2.简写方式         属性: border         属性值: border-width border-style borde-color

margin 外边框可以设置负数

margin塌陷 上面的盒子给下margin，下面的盒子给上margin，按大的取值父子盒子都设置margin,父盒子和子盒子之间的margin重叠 解决办法 overflow hidden上 padding border 脱离标准文档流 

 标准盒模型 box-sizing:content-box

怪异盒模型 box-sizing:border-box

 文本属性

1. font-size 文本大小

● 网页中常用的单位是px

● 浏览器中默认大小是16px，浏览器中默认设置最小的字体大小是12px

● 除了px还有常见的pt、em等（12pt=16px 1em=16px）

2. font-family 文本类型

● 当属性值是中文汉字时候需要加引号（引号也可省略）

● 当属性值是英文单词时候必须加引号

● 多个字体中间用逗号隔开，表示从用户的电脑字体库中进行选择字体，默认先解析第1个字体，如果没有就解析第2个字体，以此类推

3. font-weight 文本加粗

● 100~900 整百数（100~500表示正常字体、600~900表示加粗字体）

●lighter 细

● bold 加粗的

● bolder 更加粗的

● normal 常规、清除加粗标签的默认样式

4. font-style 文本倾斜

● italic 斜体的

● oblique 更倾斜的

● normal 常规、清除倾斜标签的默认样式

5. line-height 文本行高（单行）

● 当行高等于容器的高度时候，文本在垂直方向居中显示

● 当行高大于容器的高度时候，文本在垂直方向往下移动

● 当行高小于容器的高度时候，文本在垂直方向往上显示

6. text-align 文本居中

● left 文本向左对齐（默认值）

● right 文本向右对齐

● center 文本水平方向居中显示

● justify 两端对齐（多行文本才有效果）

7. font 文本属性的简写方式

8. color 字体颜色

● 英文单词 green、red、blue

● 十六进制 #000000、#999

● rgb/rgba（red、green、blue）

9. text-decoration 文本修饰

● underline 下划线

● overline 上划线

● line-through 删除线

● none 没有、清除下划线

10. text-indent 首行缩进

● 只针对于第一行文本起作用

● 可以设置px、em单位

● 可以设置负值

● 注意：只能在块级元素中使用（能设置宽高大小）

11. letter-spacing 文字间距

12.word-spacing 词间距

13.text-transform 转大小写

●touppercase 转大写

●tolowercase 转小写

 文本溢出

overflow：当文本超出容器时候显示方式

● visible：默认值，内容不会被修剪，会呈现在元素框之外

● hidden：内容会被修剪，并且其余内容是不可见的

● scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容

● auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容

省略号的设置方法

当单行文本超出时候需要设置省略号，需要以下四个条件

1. 容器宽度 width：value

2. 文本强制性在一行内显示 white-space：nowrap

3. 溢出内容为隐藏 overflow：hidden

4. 溢出文本显示省略号 text-overflow：ellipsis（默认值为clip）

背景属性

background 复合背景样式

background-color 背景颜色

background-image: url(地址) 背景图片

background-size 背景图片尺寸

background-position 背景图片定位

background-repeat 背景图片重复

background-clip 背景图片裁切

+ 默认：border-box 填充到边框位置

+ padding-box 填充到padding区域

+ content-box 填充到内容区域

background-origin 背景图片原点

+ 默认：padding-box padding 左上角

+ content-box 内容左上角

+ border-box 边框左上角

列表属性 

list-style:none 清除有序和无序的默认样式

阴影

文字阴影

+ 样式：text-shadow

+ 取值：x轴阴影 y轴阴影 模糊 颜色

- 可以写多个阴影，多个之间用逗号分隔

盒子阴影

+ 样式：box-shadow

+ 取值：x轴偏移量 y轴偏移量 模糊 扩散 颜色

- 书写的时候，可以写多个阴影，多个之间用逗号分隔

 行内元素

+ 一行并列

+ 不设置宽高：宽高默认是内容宽高

行内块元素

+ 一行并列

+ 可以设置宽高：宽高默认是内容宽高

+ 多个行内块之间有可控间隙

vertical-align属性：控制行内块元素在垂直方向的对齐方式

块级元素

+ 独占一行

+ 可以设置宽高

+ 默认宽度是父元素的宽度

+ 默认高度是内容的高度

元素类型切换

display

+ inline 行内

+ inline-block 行内块

+ block 块

+ none 不显示

 隐藏元素的方式

display:none visibility:hidden overflow: hidden(注意是溢出隐藏 opacity:0 定位:定出页面外

元素居中的方式

1、水平方向居中

2、垂直方向居中

3、行内块元素(图片)居中

4、绝对居中(垂直和水平)都居中

定位（position）

取值：

概念

- 结构父级：书写html结构写在外面的标签

- 定位父级： 当前元素的所有父级结构中，距离最近的一个非静态定位元素

z-index属性：层叠属性，规定元素的显示层级关系

● auto 默认值

● number 设置元素的堆叠顺序

锚点

1. 概念：命名锚点链接是网页制作中超级链接的一种，又叫命名锚记

2. 作用

a. 在同一页面内的不同位置进行跳转

b. 不同页面内也可以设置跳转

3. 使用方法

a. 同一页面（点击a标签跳转到同一页面的指定位置）

■

■

b. 不同页面（点击a标签跳转到另外一个页面的指定位置）

■

■

透明

1. 标准浏览器：opacity：value 取值0~1之间

2. IE低版本浏览器：filter：alpha（opacity=value） 取值0~100之间

表格

标签名称

table、tr、td

表格相关属性

表格的HTML标签及属性

rules属性

表格的css属性

border-spacing 单元格之间的间距

border-collapse 单元格边框合并

empty-cells 无内容时单元格的设置

table-layout 单元格的计算属性

BFC

1. 概念：Block Formatting Contexts (块级格式化上下文)，只针对于块级元素，可以把 BFC 理解为一个封闭的空间，内部的布局与外面的毫不相干

2. 特点

● BFC就是页面上的一个独立容器，容器里面的元素不会影响到外面的元素

● 盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻盒子的margin会发生重叠

● BFC内部的盒子会在垂直方向，一个接一个的放置

● 盒子的左边与包含块的边框相接触才可以移动位置

● BFC的区域不会与浮动盒子发生重叠

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

3. 触发条件

● 根元素 html默认就是一个BFC

● float的值设置为left或者right

● overflow的值不为visible

● display的值为inling-block/table-cell/table-caption/flex/inline-flex

● position的值为absolute或fixed

margin重叠

相邻兄弟元素的margin-bottom和margin-top发生重叠，这时候我们可以设置其中一个元素为BFC即可解决

父元素的margin-top和子元素的margin-top发生重叠，他们发生重叠是因为这两个元素是相邻的，所以可以通过以下几种方法来解决：

高度为auto的父元素的margin-bottom和最后一个子元素的margin-bottom发生重叠，他们发生重叠一个原因是他们是相邻的，另一个原因是父元素的高度是不固定的，那么可以通过以下几种方法来解决：

没有内容的元素，自身的margin-top和margin-bottom发生重叠，可以通过以下几种方法解决：

定义

元素的大小能够根据窗口或子元素自动调整，这就是自适应作用

能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示

宽度自适应

1. 浏览器是块级元素，宽度默认是100%

2. 当块级元素设置宽度为100%或者宽度不写的时候，默认是占满浏览器全屏宽度（通栏效果）

3. 子级元素不设置宽度，会与父级等宽（宽度没有继承，只是布局规范效果）

4. 如果当前元素没有设置宽度并且脱离文档流的时候，宽度由内容决定

高度自适应

1. 浏览器默认高度是0，常用的设置html，body{height:100%}

2. 设置height:0 容器的高度就是0不会显示，设置内容的时候会超出容器

3. 设置height:auto、或者height不写的时候，设置内容的时候可以实现自适应

高度塌陷问题

当父元素未设置高度时，所有子元素浮动后，造成子元素脱离文档流进而无法把父元素撑开，父元素高度为0产生高度塌陷

解决方案:

1，给父级设置高度

2，触发BFC

触发BFC的方法：

3，给所有的浮动元素后面(即div2后)加一个空的标签。给添加的这个空标签添加声明 clear: both;/left;/right;

4，万能清浮动

浏览器

常见的五大浏览器

名字

        内核

        前缀

IE浏览器

        Trident内核

        -ms-

Firefox浏览器

        Gecko内核

        -moz-

Safari浏览器

        Webkit内核

        -webkit-

Opera浏览器

        最初是自己的Presto内核，后来是Webkit，现在是Blink内核

        -o- / -webkit- / -blink-

Google浏览器

        以前是Webkit内核，现在是Blink内核

        -webkit- / -blink-

渐变

 线性渐变的使用：指定水平和垂直的起始位置来制作一个对角渐变

标准写法background

linear-gradient （to 结束的方向值，to 结束的对角值，角度值（deg单位 ）

兼容写法background

-浏览器前缀-linear-gradient （不加to，设置开始的方向，不加to，设置开始的对角，90° - 标准写法）

方向可以不写（默认是从上到下的）、多个参数之间使用逗号隔开

 径向渐变的使用：带有指定的角度的线性渐变

属性值（参数1：起点位置；参数2：渐变形状；参数3：渐变大小）

background

-浏览器前缀-radial-gradient

默认center（方向值）/ 设置坐标值

ellipse 椭圆形（默认值） / circle 表示圆形

closest-side / farthest-side（最近/远边） closest-corner / farthest-corner（最近/最远角）

重复渐变的使用：重复线性渐变和重复径向渐变

重复线性渐变

background：repeating-linear-gradient

重复径向渐变

background：repeating-radial-gradient

过渡

transition-property 参与过渡的属性，默认是all transition-duration 过渡的时间，单位使用s

transition-delay 过渡的延迟时间，单位使用s

transition-timing-function 过渡运动的方式: ease/linear/ease-in/ease-out/ease-in-out

transition 复合属性/简写方式

动画

创建动画

调用动画

animation-name

要和Keyframes中自定义的名字一致

animation-duration

动画运动时间，单位是s

animation-delay

动画延迟时间，单位是s

animation-timing-function

动画运动方式（同过渡，steps）

animation-iteration-count

运动次数（默认一次），infinite为无限次数循环

animation-direction

定义运动方向：normal（顺时针）/ reverse（反向的）/ alternate（先正反后）

animation-play-state

running 运动的（默认值）/ paused 暂停的

animation

复合属性 / 简写方式

 变形transform

常用的变形属性有以下几个：

1. transform：none 默认值

2. transform：translate 移动 、平移 （单位是px）

3. transform：scale 缩放 （没有单位， 默认值是1）

4. transform：rotate 旋转 （单位是deg 度数 ）

5. transform：skew 倾斜 （单位是deg 度数）

6. transform：perspective 景深 、视距（单位是px）

2D

2D中位移属性

transform ：translateX(200px) 根据X轴给定的参数，从当前元素位置移动

transform ：translateY(200px) 根据Y轴给定的参数，从当前元素位置移动

transform ：translate(10px,20px) 简写：定义 2D 平移移动

2D中缩放属性

transform ：scaleX(2) 通过设置 X 轴的值来定义缩放转换

transform ：scaleY(3) 通过设置 Y 轴的值来定义缩放转换。

transform ：scale(2,2) 简写：定义 2D 缩放 相等的时候可以设置一个参数

2D中旋转属性

transform ：rotateX(30deg) 根据X轴给定的参数，从当前元素位置旋转

transform ：rotateY(30deg) 根据Y轴给定的参数，从当前元素位置旋转

transform ：rotate(一个参数) 默认等同于Z轴，正数顺时针、负数逆时针

2D中倾斜属性

transform ：skewX(30deg) 通过设置 X 轴的值来定义倾斜转换

transform ：skewY(30deg) 通过设置Y 轴的值来定义倾斜转换

transform ：skew(30deg,130deg) 定义2D倾斜

转换基点属性

transform-origin：x y z x和y可以设置坐标值/方向，z轴只能是坐标值

景深效果属性

设置在父级元素上 perspective（1200px）

设置在子级元素上 transform：perspective（1200px）

注意

1. 用来设置用户和元素3D空间Z平面之间的距离

2. 值越小，用户与3D空间Z平面距离越近

3. 值越大，用户与3D空间Z平面距离越远

3D

transform-style：设置的空间属性值 需要设置在父级元素上

flat（2D空间、默认值）/ preserve-3d（3D空间）

3D中位移属性

transform ：translateZ(200px) 定义 3D 转换，只是用 Z 轴的值

transform ：translate3d(10px,20px,30px) 定义 3D 平移移动

3D中缩放属性

transform ：scaleZ(2) 定义 3D 缩放转换，单独使用没有效果

transform ：scale3d(2,3,4) 定义 3D 缩放

3D中旋转属性

transform ：rotateZ(30deg) 定义 3D 转换，只是用 Z 轴的值

transform ：rotate3d(0,0,1,30deg) 定义 3D 旋转

3D中倾斜属性 倾斜没有Z轴的写法

基本概念

- flex 布局是 一种盒子的布局方式

        - 弹性盒 也是一种元素类型(display:flex转换)

+ flex 弹性元素

        - 注意: 弹性元素不弹自己, 弹子元素

弹性父元素的属性

+ 主轴方向调整

- 样式: flex-direction

- 样式值:

+ row 主轴从左到右(默认)

+ row-reverse 主轴从右到左

+ column 主轴从上到下

+ column-reverse 主轴从下到上

- 注意:

+ 当主轴是 row 或者 row-reverse 的时候, 侧轴都是从上到下

+ 当主轴是 column 或者 column-reverse 的时候, 侧轴都是从左到右

+ 主轴方向上元素的排列方式

- 样式: justify-content

- 值:

+ flex-start 堆放在开始位置(默认)

+ flex-end 堆放在结束位置

+ center 堆放在居中位置

+ space-between 把所有的空白位置均分在每两个元素之间(假设 6 个元素, 5 个空白)

+ space-around 把所有的空白位置均分放在每个元素两侧(假设 6 个元素, 12 个空白)

+ space-evenly 把所有的空白位置绝对均分(假设 6 个元素, 7 个空白)

+ 允许换行

+ 样式: flex-wrap

+ 值:

- nowrap 不允许换行(默认)

- wrap 允许换行

+ 注意:

- 当元素开启换行以后, 换多少行决定了元素的排列位置

- 当元素开启换行以后, 会出现多个临时侧轴

+ 每一行会有自己的临时侧轴

+ 元素在侧轴上的排列方式(单行)

+ 指: 在不允许换行的情况下使用

+ 样式: align-items

+ 值:

- flex-start 放在侧轴开始位置(默认)

- flex-end 放在侧轴结束位置

- center 放在侧轴居中位置

+ 注意: 多行的情况下, 可以生效的, 前提: 不能有 align-content 样式

- 关注: 每一行的临时侧轴

- flex-start 把每一行元素放在临时侧轴的开始位置

- flex-end 把每一行元素放在临时侧轴的结束位置

- center 把每一行元素放在临时侧轴的居中位置

+ 元素在侧轴上的排列方式(多行)

+ 指: 在允许换行的情况下使用(单行情况不生效)

+ 关注: 主要侧轴上(和每一行的临时侧轴没有关系)

+ 样式: align-content

+ 值:

- flex-start 堆放在侧轴开始位置

- flex-end 堆放在侧轴结束位置

- center 堆放在侧轴居中位置

- space-between 把所有的空白位置均分在每两行元素之间(假设 3 行元素, 2 个 空白)

- space-around 把所有的空白位置均分放在每行元素两侧(假设 3 行元素, 6 个 空白)

- space-evenly 把所有的空白位置绝对均分(假设 3 行元素, 4 个 空白)

 弹性子元素的属性

- 注意: 直接设置到弹性子元素身上

- 占有剩余空间的比例

+ 样式: flex

+ 值: 一个数字(没有单位)

+ 计算方式:

- 主轴方向的整体长度 减去 设置了固定宽度的元素 (800 - 400 === 400)

- 计算所有书写了 flex 样式的元素的数字的总和当做分母 (10 + 30 === 40)

- 每一个元素的 flex 的值就是 分子

+ 注意: 当你没有换行, 并且元素出界以后, 开始挤压的时候, 优先挤压没有设置固定宽度的元素

- 排序

+ 样式: order

+ 值: 一个数字(没有单位)

+ 意义: 谁大, 谁排在后面

- 自己单独在侧轴上的排列方式

+ 注意:

=> 如果是单行

=> 如果是多行, 按照每一行的临时侧轴来进行调整

+ 样式: align-self

+ 值:

=> flex-start 放在侧轴开始位置

=> flex-end 放在侧轴结束位置

=> center 放在侧轴居中位置