CSS知识点总结

浏览器渲染原理
渲染原理 & 如何优化
### 浏览器渲染过程
1. 根据HTML构建HTML树 (DOM)
2. 根据CSS构建CSS树(CSSOM)
3. 将两棵树合并成一棵渲染树(render tree)
4. layout 布局 (文档流 \ 盒模型 \ 计算大小和位置 )
5. Paint 绘制 (把边框色 \ 文字色\ 阴影等画出来)
6. compose合成 (根据层叠关系展示画面)
>CSS渲染过程依次包括 布局 > 绘制 > 合成
其中 [布局] 和 [绘制] 可能省略
CSS Triggers 此网站查看标签触发了什么流程
## CSS简介
1.CSS是什么?
> CSS: Cascading Style sheet ( 层叠样式表或级联样式表 )
是一种样式设置规则，用于控制页面的外观的样式
2.为什么使用CSS?
> 实现内容与样式的分离，方便团队开发样式复用，便于网站后期维护页面的精确控制。
3.CSS作用
>页面外观美化, 布局和定位
### 基本用法
1.CSS语法
选择器:要修饰的对象(东西)
样式名:修饰对象的每个样式
样式值:样式的取值
> 注意:多个样式之间以分号隔开，样式名和样式值之间以冒号隔开
2.CSS引用方式
>有三种方式: 内部样式、行内样式、外部样式
2.1 内部样式
> 也称为内嵌样式，在页面头部通过style标签定义
对当前页面所有符合样式选择器的标签起作用
2.2 行内样式
> 也称为嵌入样式，使用HTML标签的style属性来定义
只对设置style属性的标签起作用
注意:几乎所有HTML标签都具有style属性
2.3 外部样式
> 使用单独的css文件来定义，然后在页面中使用link标签或@import指令来引入
使用link标签链接外部样式表(推荐)
使用@import指令导入外部样式表
## 选择器
###1.基础选择器
1.1 标签选择器
> 也称为元素选择器，以HTML标签的名字作为样式应用依据
1.2 类选择器
> 使用自定义名称，以.作为前缀，然后通过HTML标签的class属性值作为依据
注意事项:
>同时调用多个类选择器，以空格隔开, 类选择器不能以数字开头
注意:几乎所有的HTML标签具有class属性
1.3 ID选择器
>使用自定义名称，以#作为前缀，然后通过HTML标签的id属性进行名称匹配
以标签的id属性值作为样式的应用依据，一对一的关系
注意:几乎所有的HTML标签都具有id属性，且id的值必须唯一
### 2.复杂选择器
2.1 复合选择器
标签选择器和类选择器、标签选择器和ID选择器，一起使用
必须同时满足两个条件才能应用样式
2.2 组合选择器
也称为集体声明
将多个具有相同样式的选择器放在一起声明，使用逗号隔开
2.3 嵌套选择器
在某个选择器内再设置选择器，通过空格隔开
只有满足层次关系最里层选择器的标签才能应用样式
注意:使用空格不区分父子还是后代，表示的后代，使用>表示的是父子关系才可以
2.4 伪类选择器
根据不同的状态显示不同的样式，一般多用于a标签，即超链接
四种状态:
> link :未访问的链接
visited:已访问过的链接
hover :鼠标移动到a标签上，即悬浮在链接上
active :选定的链接，被激活
>注意:书写顺序:link–>visited–>hover–>active
2.5 伪元素选择器
first-letter:对应元素内容中的第一个字符
first-line:对应元素内容中的第一行
after:配合content属性使用，在指定元素后面增加内容
before:配合content属性使用，在指定元素前面增加内容
## 选择器的优先级
### 1.优先级
行内样式>ID选择器>类选择器>标签选择器
原因:首先加载标签选择器，再加载类选择器，然后再加载ID选择器，最后加载行内样式
后加载的样式会覆盖最先加载的同名样式
### 2.内、外部样式加载顺序
就近原则
原因:按照书写顺序，在同优先级的前提下，后加载的会覆盖先加载的同名样式，所以离得越近越优先
### 3.!important
可以使用!important使某个样式属性具有最高的优先级
## 常用CSS样式属性
### 1.字体属性
定义字体相关的样式
|样式名 | 含义 |
|:-:|:-:|
|font-size | 大小、尺寸 |
|font-weight | 粗细 |
|font-family | 字体 |
|font-style | 样式 |
#### 1.1 font-size
取值:
>inherit 继承，默认从父标签继承字体大小(默认值)，所有的css属性默认值都为inherit
HTML根元素默认字体大小是16px,也称为基础字体大小
> px: 像素pixel, chrome浏览器不支持12px以下的字体大小，其他浏览器没问题
%百分比 :相对于父标签的字体的大小的百分比
em 倍数: 相对于父标签字体大小的倍数
#### 1.2 font-weight
取值:
>normal 普通
bold 粗体
自定义值 (400 normal 700 bold)
##### 1.3 font-family
> 一般建议写3种字体(首选、其次、备用)，以逗号隔开
#### 1.4 font-style
取值:
>normal 普通
italic 斜体
#### 1.5 font
> 简写属性: font:font-style|font-weight|font-size|line-height|font-family
必须按照特定的顺序书写
#### 2.文本属性
| 样式名 | 含义 | 备注 |
|:-:|:-:|:-:|
|color | 颜色 | |
|line-height | 行高 | |
|text-align | 水平对齐方式 | 取值:left、center、right |
|vertical-align | 垂直对齐方式 | 取值:top、middle、bottom，一般用于图片和文字的对齐方式 |
|text-indent | 首行缩进 | |
|text-decoration | 文本修饰 | 取值:underline、overline、line-through、none |
|text-transform | 字母大小写 | 取值:lowercase、uppercase、capitalize |
|letter-sapcing | 字符间距 | |
|word-spacing | 单词间距 | 只对英文有效 |
|white-space | 空白的处理方式 | 文本超出后是否换行，取值:nowrap(直行，不换行)、normal |
#### 颜色取值:四种写法
1. 颜色名称，使用英文单词
2. 16进制的RGB，#RRGGBB
特定情况下，可以进行缩写<br />#CCCCCC----->#ccc<br />#FF0000----->#F00<br />#FF7300----->无法缩写<br />注意:不区分大小写<br />
3. rgb函数，rgb(red,green,blue)
<br />每个颜色的取值范围，[0-255]<br />rgb(255,0,0)---->红色<br />rgb(0,255,0)---->绿色<br />rgb(0,0,255)---->蓝色<br />
4. rgba函数:rgba(red,green,blue,alpha)
<br />可以设置透明度，alpha取值范围[0,1],0表示完全透明，1完全不透明<br />rgba(255,0,0,1);----->纯红<br />rgba(255,0,0,0.5);----->红色半透明<br />
### 3.背景属性
|属性 | 含义 |
|:-:|:-:|
|background-color | 背景颜色 |
|background-image | 背景图片 |
|background-repeat | 背景图的重复方式 |
|background-position | 背景图片的位置 |
|background-attachment | 背景图片是否跟随滚动 |
|background | 简写 |
3.1 background-color
> 取值:transparent(透明)
3.2 background-image
> 必须使用url()方式指定图片的路径
如果是在css文件中使用相对路径，此时是相对于css文件，而不是html文件
3.3 background-repeat
> 取值:repeat(默认)、no-repeat、repeat-y、repeat-x
#### 3.4 background-position
默认背景图片显示左上角
取值:
>关键字top、bottom、left、right、center
坐标，左上角(0,0)坐标，向右为x正方向，向下为y正方向
CSS雪碧图，即CSS Sprites，也称为CSS精灵，是一种css图像合并技术
含义:将网页许多非常小的图标/图片整合在一张大图中，当访问该页面的时候只需要下载一次，可以减少访问服务器的次数，提高性能
原理:使用background-position进行背景定位，定位出背景图片的位置
#### 3.5 background-attachment
> 取值:scroll(默认值)、fixed固定不动
#### 3.6 background
> 简写属性:background:background-color|background-image|background-repeat|background-position
书写顺序是没有要求
### 4.显示相关
#### 4.1 display
通过display属性设置元素是否显示，以及是否独占一行
常用取值:
|取值 | 含义 | 解释 |
|:-:|:-:|:-:|
|none | 不显示 | |
|inline | 显示为内联元素，行级元素的默认值 | 将块级元素变为行级元素，不再独占一行 |
|block | 显示为块级元素，块级元素的默认值 | 将行级元素变为块级元素，独占一行 |
|inline-block | 显示为内联元素，但可以设置宽和高 | 在inline的基础上设置宽和高 |
>注意:
行级元素默认是无法设置宽和高，可以为行级元素设置display:inline-block，然后就可以设置宽和高了
#### 4.2 布局技巧
##### 左右布局
如果有以下html结构，设置左右两栏布局
<br /><div class="parent clearfix"><br /> <div class="leftChild"></div><br /> <div class="rightChild"></div><br /></div><br />
##### 设置浮动
左右布局常用的方法就是为子元素设置浮动，然后在其父元素上使用clearfix类清除浮动。示例代码如下：
<br />.clearfix::after{<br /> content:"";<br /> display:block;<br /> clear:both;<br />}<br />.leftChild,<br />.rightChild{<br /> float:left;<br />}<br />
##### 设置position绝对定位
为父元素设置position:relative; 为子元素设置position:absolute 。示例代码如下：
<br />.parent{<br /> position:relative;<br />}<br />.leftChild{<br /> position:absolute;<br /> left:0;<br /> top:0;<br />}<br />.rightChild{<br /> position:absolute;<br /> left:50%;<br /> top:0;<br />}<br />
##### 左中右布局
>左中右布局主要方法也是浮动或者绝对定位，不过可以分情况选择其一使用甚至结合使用。
##### 水平居中
内联元素（比如文本和链接）
在块级父容器中让内联元素水平居中，只需设置 text-align: center;
块级元素
让单个块级元素水平居中的方法：先设置块级元素的 width，赋予一个宽度；然后设置块级元素的 margin: 0 auto;
多个块级元素
如果要让多个块级元素在同一水平线上居中，那么可以修改它们的 display: inline-block; 或者父级容器的 display: flex;
<br /><main class="inline-block-horizon-center"><br /> <div>I'm an element</div><br /> <div>I'm an element</div><br /> <div>I'm an element</div><br /></main><br /><main class="flex-horizon-center"><br /> <div>I'm an element</div><br /> <div>I'm an element</div><br /> <div>I'm an element</div><br /></main><br />/* CSS */<br />*{box-sizing: border-box;}<br />main div {<br /> max-width: 200px;<br /> border: 1px solid red;<br />}<br />.inline-block-horizon-center {<br /> text-align: center;<br />}<br />.inline-block-horizon-center div {<br /> display: inline-block;<br /> vertical-align: middle/top;<br />}<br />.flex-horizon-center {<br /> display: flex;<br /> justify-content: center;<br /> flex-wrap:wrap;<br />} <br />.flex-horizon-center div{<br /> margin:0 20px;<br /> white-space:nowrap;<br />}<br />
#### 4.3 visibility
也可以通过visibility属性设置元素是否显示
常用取值:
|取值 | 含义 |
|:-:|:-:|
|visible | 显示 |
|hidden | 隐藏 |
#### 4.4 diplay & visibility 两者的区别
>display隐藏时候不再占据页面的空间，后面的元素会占用其位置
>visibility隐藏时候会占据页面的空间，位置还保留在页面中，只是不显示
### 5.列表属性
|属性 | 含义 | 解释 |
|:-:|:-:|:-:|
|list-style-type | 设置列表项前的标记 | |
|list-style-image | 将图像作为列表前的标记 | |
|list-style-position | 设置列表前标记的位置 | outside(默认值)、inside |
|list-style | 简写 | |
#### 5.1 list-style-type
取值:none、disc、circle、square、decimal
#### 5.2 list-style
简写属性:list-style:list-style-type|list-style-image|list-style-position
书写顺序没有要求
#### 6.表格属性
border-collapse 表格中相邻的边框是否合并(折叠)为单一边框
取值:seperate(分离、默认值)、collapse(合并)
### 盒子模型
1.概念
盒子模型是网页布局的基础，将页面中所有的元素看成是一个盒子，盒子都包含以下几个属性:
<br />width 宽度<br />height 高度<br />border 边框<br />padding 内边距<br />margin 外边距<br />
### 2.盒子属性
#### 2.1 border
表示的盒子的边框
分为四个方向:
> border-top、border-right、border-bottom、border-left
#### 每个边都包含三种样式:;
> 颜色color、粗细width、样式style
<br />border-top-color、border-top-width、border-top-style<br />border-right-color、border-right-width、border-right-style<br />border-bottom-color、border-bottom-width、border-bottom-style<br />border-left-color、border-left-width、border-left-style<br />
#### border-style的取值:
>solid实线、dashed虚线、dotted点状线、double双实线、inset内嵌3D线、outset外嵌3D线
####简写，三种方式:
按方向简写
> border-top、border-right、border-bottom、border-left
书写顺序:width style color
按样式简写
> border-color、border-style、border-width
#### 必须按顺时针方向书写，即上、右、下、左，同时可以缩写
<br />border-width:2px -->四个边都是2px<br />border-width:2px 4px -->上下2px ,左右4px<br />border-width:2px 5px 10px -->上2px 左右5px 下10px<br />border-width:2px 3px 4px 5px -->上2px 右3px 下4px 左5px<br />
#### border终极简写
> 如果四个边都一样，border:width stylle color
2.2 padding
> 表示盒子的内边距，即内容与边框之间的距离
同样也分为四个方向，也可以简写(按顺时针方向)
2.3 margin
> 表示盒子的外边距，即盒子与盒子之间的距离
同样也分为四个方向，也可以简写
3其他
3.1 元素所占的空间
>页面中的元素所占空间:
宽=width+左右padding+左右margin+左右border
高=height+左右padding+上下margin+左右border
### CSS transform
>transform 属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的。
#### transform 常用的功能
+ transform: translate(120px, 50%); //平移
+ transform: scale(2, 0.5); //缩放,用得少,会模糊
+ transform: rotate(0.5turn);
+ transform: skew(30deg, 20deg);
#### transform 经验
+ 一盘需要配合transition过渡
+ inline元素不支持transform,需要先变成block
<br />#deomo{<br />left: 50%;<br />top: 50%;<br />transform:translate(-50%,-50%)<br />}<br />
让demo绝对居中
### CSS 动画的两种做法（transition 和 animation）
#### transition
> 补充中间帧
+ transition 属性名 时长 过度放松 延迟
+ transition all 1s 默认是ease-in-out ms毫秒
>transition: left 200ms linear
transition: left 200ms , top 400ms;
transition: all 200ms;
#### 过度方式:
常用
linear 动画会以恒定的速度从初始状态过渡到结束状态。
ease 它在开始时加速地更快，但在接近中间中，加速已经开始变慢了。
ease-in 动画开始时缓慢，然后逐步加速，知道达到最后状态，动画突然停止。
ease-out 动画开始很快，然后逐渐减慢，直到最终状态。
ease-in-out 使用这个定时函数，动画开始的行为类似于 ease-in 函数，动画结束时的行为类似于 ease-out函数。
—-
不常用:
step-start 使用这个定时函数，动画会立刻跳转到结束状态，并一直停留在结束状态直到动画结束。
step-end 使用这个定时函数，动画会立刻跳转到结束状态，并一直停留在结束状态直到动画结束。
cubic-bezier 立方贝塞尔, 这些曲线是连续的，一般用于动画的平滑变换，也被称为缓动函数
> 语法: cubic-bezier(x1, y1, x2, y2) , 比如 linear 就可以写成 cubic-bezier( 0, 0, 1, 1)
#### 注意
+ 不是所以属性都能过度 , dispaly: none 变成 block 没法过度
+ opacity 只是看不见,但还占着位置, visibility:hidden=>visible 也是一样效果
+ 背景色是能过度的
+ 过渡必须要有起始, 如果中间要有过度 转折 用 animation 或者2次transform
2次transform的例子 | animation的例子
#### animation 动画
用@keyframes , 2种写法: from to 和 百分比%
<br />@keyframes xxx{<br /> from{<br /> transform:translateX(0%)<br /> }<br /> to{<br /> transform:translateX(100%)<br /> }<br />}<br />
<br />@keyframes xxx{<br /> 0% { top:0; left:0; }<br /> 30% { top:50px; }<br /> 100% { left:100px; }<br />}<br />
设置好了关键帧，就可以设置animation属性了，animation也是一个符合属性，可以简写，语法如下：
参考网文
>animation: 动画名 | 时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停
>>动画名: 用来调用@keyframes定义好的动画，与@keyframes定义的动画名称一致
时长:1s 或者 10000ms
过渡方式: 跟transition一样取值: ease-in | linear … 默认是 ease
次数: 3 或 2.4 或 infinite 无限
方向: reverse | alternate ,动画过去过来交替,很适合做加载动画
填充模式: none | forwards | backwards | both , forwards常用, 动效过去后不回来了
是否暂停: paused | running
——
#### 红心案例