CSS知识点

CSS

 2019/10/08 

CSS 基础

1、选择器
2、盒模型
3、伪类（处理 a 标签的那些和用来处理选择器的:first-child，:nth-child 等）和伪元素(eg. 处理 p 标签首行或首字母的:first-line 和:first-letter ；在元素的内容之前或之后插入内容的:before 和:after)
4、页面导入样式时，使用 link 和@import 的区别

link 属于 XHTML 标签，除了加载 CSS 外，定义 rel 连接属性等作用；而@import 是 CSS 提供的，只能用于加载 CSS;
页面被加载的时，link 会同时被加载，而@import 引用的 CSS 会等到页面被加载完再加载;
@import 是 CSS2.1 提出的，只在 IE5 以上才能被识别，而 link 是 XHTML 标签，无兼容问题;

5、

行内元素和块级元素的区别：行内元素会在一行水平方向排列，块级元素独占一行，自动填满父级元素；块级元素可以包含行内元素和块级元素，行内只能包含文本和其他行内元素；行内元素不能设置宽高
inline-block、inline 和 block 的区别：block 除了上述特性外，还有前后都有换行符；inline 设置宽高无效，margin 在竖直方向无效，padding 有效（但最好也不要设，不会挤开其他盒子的内容），前后无换行符；inline-block 可以设置宽高，margin/padding 有效，前后无换行符

6、为什么 img 是 inline 还可以设置宽高
img 是置换元素。置换元素是具有固有尺寸（intrinsic dimensions），浏览器根据其标签和属性决定显示内容的元素。
浏览器根据 img 的 src 属性渲染出对应路径的图片。图片具有固有尺寸，即你不做设置时，它就会照其固有尺寸渲染。
这类元素的展现效果不是由 CSS 来控制的。他们是一种外部对象，外观的渲染独立于 CSS。内容不受当前文档的样式影响，CSS 可以影响置换的位置，但是不会影响到置换自身的内容。（比如 iframe，可能有自己的样式表，不会继承父文档的样式）置换元素有内置宽高，性质同设置了 inline-block 一样。置换元素还有视觉元素 img、object, video；表单元素 input，select，textarea；audio 和 canvas

7、CSS 选择器的权重排序

！important 权重无限大
内联样式写在 html 标签里的，权值为 1000
id，权值为 100
类伪类和属性选择器，权值为 10
标签选择器和伪元素选择器 div p:after，权值为 1
通配符、子选择器、相邻选择器
继承的样式没有权值

8、外边距重叠
相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距（所以有时候让其不发生可以加个空格或者空标签）。其折叠结果遵循下列规则：

两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值
两个外边距一正一负时，折叠结果是两者的相加的和

解决方法：两者间加个空格或空盒子；给其中一个盒子加 overflow: hidden 形成 BFC

9、层叠上下文
层叠上线文就是结界，其中的元素如果跟层叠上下文之外的元素发生层叠，就比较他们的层叠水平高低来显示。
创建的方法：postion 为 relative、absolute、fixed 的元素设置 z-index
顺序是：底层的 border、background，负值 z-index，块级盒子，浮动盒子，内联盒子，z-index：auto, 正 z-index
10、元素隐藏方法和区别

display：none 元素不可见，不占据空间，资源会加载，DOM 可以访问
visibility:hidden 元素不可见，不能点击，但占据空间，资源会加载，可以使用。
opacity：0 元素不可见、可以点击，占据空间，可以使用。（不占据的话再加一个 position absolute)(不能点击不占据空间 postion absolute+z-index:-1)(不能点击、占据空间 postion relative z-index:-1)

display：none和visibility:hidden的区别

display：none 元素不占据空间，visibility:hidden 空间保留
display：none 会影响 opacity 过渡效果
display 会产生重绘回流，visibility:hidden 只重绘
display：none 节点和子孙节点都不见，visibility:hidden 的子孙节点可以设置 visibility:visible 显示。
visibility:hidden 不会影响计数器计数（ol 标签）

11、img 和 background-image 的区别

解析机制：img 属于 html 标签，background-img 属于 css。img 先解析
SEO：img 标签有一个 alt 属性可以指定图像的替代文本，有利于 SEO，并且在图片加载失败时有利于阅读
语义化角度：img 语义更加明确

12、rgba()和 opacity 的区别

opacity 作用于元素及元素中所有的内容（包括文字、图片）有继承性
rgba()只用于元素的颜色及背景色
当 opacity 属性的值应用于某个元素上时，把这个元素和它内容当作一个整体来看待，即使这个值没有被子元素继承。因此一个元素和它包含的元素都会有与元素背景相同的透明度，哪怕父子元素由不同的 opacity 的值。

13、CSS 哪些属性可以被继承

字体相关属性
- font-family 字体系列
- font-weight 字体粗细程度
- font-size 字体大小
- font-style 字体风格
文本相关属性
- text-indent 文本缩进
- text-align 文本对齐方式
- line-height 行高
- color 文本颜色
元素可见性
- visibility 控制元素的显示和隐藏
列表布局属性
- list-style 列表风格包括 list-style-type list-style-image 等
光标属性
- cursor 光标显示的各种形态

14、transition、animation 的区别
二者都能实现动画，animation 和 transition 大部分属性相同，都是随时间改变元素的属性值，区别是 transition 需要触发一个事件（eg. :hover）才能改变属性；animation 不需要触发任何事件随时间改变属性。transition 为 2 帧，from……to ，animation 可以一帧一帧的。

15、重绘和回流（重排）是什么，如何避免？
重绘是当节点需要更改外观而不会影响布局的，比如改变 color 就叫称为重绘
回流是布局或者几何属性需要改变就称为回流。
回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变父节点里的子节点很可能会导致父节点的一系列回流。
导致回流发生的因素：

调整窗口大小，浏览器窗口尺寸改变——resize 事件发生时
元素尺寸改变——边距、填充、边框、宽度和高度；改变字体大小
页面渲染初始化
元素位置改变
样式表变动
元素内容变化，尤其是输入控件
CSS 伪类激活
DOM 操作，添加或者删除可见的 DOM 元素
offsetWidth, width, clientWidth, scrollTop/scrollHeight 的计算，会使浏览器将渐进回流队列 Flush，立即执行回流。内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变

减少重绘和回流

使用 transform 替代 top
使用 visibility 替换 display: none ，因为前者只会引起重绘，后者会引发回流（改变了布局）
不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局
CSS 选择符从右往左匹配查找，避免节点层级过多
将频繁重绘或者回流的节点设置为图层，图层能够阻止该节点的渲染行为影响别的节点。比如对于 video 标签来说，浏览器会自动将该节点变为图层。通过以下几个常用属性可以生成新图层：
- position: fixed
- video、iframe 标签
- 通过动画实现的 opacity 动画转换

16、CSS Sprites
是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中，利用 CSS 的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，访问页面时避免图片载入缓慢的现象。
优点：减少 HTTP 请求数，极大地提高页面加载速度；提高压缩比，减少图片大小，减少图片的字节；更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现
缺点：图片合并麻烦；维护麻烦，修改一个图片可能需要从新布局整个图片，样式

17、padding颜色是背景色

CSS3

新特性

新增选择器：伪类选择器 E：nth-child(n) E:nth-last-child(n)
Transition、Transform 和 Animation

transition：
div{
    transition-property:width;
    transition-duration:1s;
    transition-timing-function:linear;
    transition-delay:25;
    /*简写形式*/
    transition:width 1s linear 25;
}

transform:
scale()大小, translate()位置
div{
    transform:rotate(7deg);
    -ms-transform:rotate(7deg);/*IE9*/
    -moz-transform:rotate(7deg);/*FireFox*/
    -webkit-transform:rotate(7deg);/*Safari和Chrome*/
    -o-transform:rotate(7deg);/*Opwea*/
}

animation:
@keyframes myAnimation{
    0%{background:red;width:100px;}
    25%{background:orange;width:200px;}
    50%{background:yellow;width:100px;}
    75%{background:green;width:200px;}
    100%{background:blue:width:100px;}
}
#box{
    animation:myAnimation 5s;
    width:100px;
    height:100px;
    background:red;
}

边框：box-shadow, border-radius, border-image
背景：background-clip, 自定义背景图片的裁剪区域 background-size
文字：text-shadow, text-overflow 当文本溢出包含元素时发生的事情
字体：@font-face 可以引用 Web 服务器的字体

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light, woff);
}

17、Rem,em 和 px 的区别
px 是绝对长度单位；em 是相对长度单位，继承父级元素的字体大小，所有字体都是相对于父元素大小的；rem 是相对长度单位，根元素（html),不会像 em 造成混乱。
元素的 margin，padding 设置百分数，百分数是相对于最近的块级父元素的 width 计算
18、移动端 0.5px 边框（直接写 border 是 0.5px 在安卓下会显示不出来）
利用伪元素结合 transform: scale(0.5, 0.5)
思路:

目标盒子设置为相对定位。给目标盒子加伪元素:before，并设置为绝对定位；
给伪元素添加 1px 的边框，box-sizing: border-box，宽和高设置为 200%，整个盒子模型缩小 transform: scale(0.5, 0.5)；
调整盒子模型的位置，以左上角为基准 transform-origin: 0 0;

19、 calc 结合 vw 、vh、vmin 、vmax 的使用
eg. width：calc(100% - 10px) 。括号中可以加一些表达式