css-小知识点
一，兄弟选择器(+与~)
- （div + p） 紧接在另一个元素后的元素，是单个的，而且二者有相同的父元素
- （div ~ p） 也叫兄弟选择器，表示某元素后所有同级的指定元素
二，伪类和伪元素区别
- 伪类值一种状态 比如:hover :checked等
- 伪元素是一个真实存在的元素，他可以有样式有内容 比如 ::after
实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。对于CSS2之前已有的伪元素，比如:before，单冒号和双冒号的写法::before作用是一样的
三，选择器的权重
!important(权重infinity) > 行内样式(权重1000) > ID 选择器(权重100) > (类选择器 | 属性选择器 | 伪类选择器 )(权重10) > 元素选择器(权重1) > \*(权重0)
四，浏览器解析css
CSS 中，浏览器查找元素是通过选择权从后往前找的， 这样做的目的是加快 CSS 解析速度，从后往前，排除法
- 因为所有样式规则可能数量很大，而且绝大多数不会匹配到当前的 DOM 元素（因为数量很大所以一般会建立规则索引树），所以有一个快速的方法来判断「这个 selector 不匹配当前元素」就是极其重要的。
- 如果正向解析，例如「div div p em」，我们首先就要检查当前元素到 html 的整条路径，找到最上层的 div，再往下找，如果遇到不匹配就必须回到最上层那个 div，往下再去匹配选择器中的第一个 div，回溯若干次才能确定匹配与否，效率很低。
- 逆向匹配则不同，如果当前的 DOM 元素是 div，而不是 selector 最后的 em，那只要一步就能排除。只有在匹配时，才会不断向上找父节点进行验证。
- 但因为匹配的情况远远低于不匹配的情况，所以逆向匹配带来的优势是巨大的。同时我们也能够看出，在选择器结尾加上「*」就大大降低了这种优势，这也就是很多优化原则提到的尽量避免在选择器末尾添加通配符的原因。
五，盒模型
盒模型有两种， IE 怪异盒子模型、W3C 标准盒子模型；
盒模型是由： 内容(content)、内边距(padding)、边框(border)、外边距(margin) 组成的。
标准模型的宽高是指的 content 区宽高；(box-sizing: content-box)
IE 盒模型的宽高是指的 content+padding+border 的宽高。(box-sizing: border-box)
[W3C盒模型]
[IE盒模型]
六，行高的构成
行高是由 line-box 组成的
line-box 是由一行里的 inline-box 组成的
inline-box 中最高的那个，或字体最大的拿个决定行高
七，inline-block 的间隙
两个并列的 inline-block 中间会有一条裂缝，这个的原因是两个标签之间有空格，浏览器把这些空格当成文字中空格，所以这两个块中间多少有间隙。
解决办法：
1. 删除两个标签间的空格，但是这样 html 排版不好
2. 容器元素 font-size: 0 然后再在里面再重新设置字体大小
八，你对 line-height 是如何理解的？
- line-height 指一行字的高度，包含了字间距，实际上是下一行基线到上一行基线距离
- 如果一个标签没有定义 height 属性，那么其最终表现的高度是由 line-height 决定的
- 一个容器没有设置高度，那么撑开容器高度的是 line-height 而不是容器内的文字内容
- 把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中
- line-height 和 height 都能撑开一个高度，height 会触发 haslayout（一个低版本 IE 的东西），而 line-height 不会
九，line-height 三种赋值方式有何区别？（带单位、纯数字、百分比）
- 带单位：px 是固定值，而 em 会参考父元素 font-size 值计算自身的行高
- 纯数字：会把比例传递给后代。例如，父级行高为 1.5，子元素字体为 18px，则子元素行高为 1.5 \* 18 = 27px
- 百分比：将计算后的值传递给后代
参考：https://www.cnblogs.com/xxm980617/p/10885313.html
十，为什么img标签图片下方有缝隙
因为 img 也相当于一个 inline 的元素， inline 就要遵守行高的构成，它会按照 base 基线对齐，基线对齐的话那么它就会和底线间有一个缝隙。
如何解决： 因为它会遵守文字对齐方案，那么就把图片的对齐方式修改为 `vertical-align: bottom`。或者让他`display: block`，这样图片虽然会换行，但是没有间隙了。
十一，关于文字折行
①overflow-wrap 用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行
word-wrap | normal
normal行只能在正常的单词断点处中断。（例如两个单词之间的空格）。break-word表示如果行内没有多余的地方容纳该单词到结尾，则那些正常的不能被分割的单词会被强制分割换行。
② word-break
break-all | normal
break-all 允许在单词内换行
③white-space
nowrap 文字不换行，直到遇到 <br> 标签为止
十二，文本溢出显示省略号
单行
```css
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
多行
```css
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; /*将对象作为弹性伸缩盒子模型显示*/
-webkit-line-clamp: 3; /*用来限制在一个块元素显示的文本的行数*/
-webkit-box-orient: vertical; /*设置或检索伸缩盒对象的子元素的排列方式*/
十三，display: none; 与 visibility: hidden; 的区别
结构：
- display:none
- 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击，
- visibility: hidden
- 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击
- opacity: 0
- 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击
继承
- display: none
- 非继承属性:父元素都不在了，子元素自然也就不会显示了
- opacity: 0
- 非继承属性:不能通过设置子元素opacity: 1使其重新显示
- visibility: hidden
- 继承属性，子孙节点消失由于继承了 hidden，通过设置 visibility: visible;可以让子孙节点显式。
性能
- display:none
- 修改元素会造成文档回流。读屏器不会读取 display: none 元素内容，性能消耗较大
- visibility:hidden
- 修改元素只会造成本元素的重绘,性能消耗较少。读屏器读取 visibility: hidden 元素内容
- opacity: 0
- 修改元素会造成重绘，性能消耗较少
过渡动画
transition对于display肯定是无效的，大家应该都知道；
transition对于visibility 和opacity 是有效的；
相同点： 它们都能让元素不可见、他们都依然可以被 JS 所获取到
十四，外边距折叠
外边距重叠就是 margin-collapse
相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。 这种合并外边距的方式被称为折叠，结合而成的外边距称为折叠外边距
折叠结果遵循下列计算规则：
- 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值
- 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值
- 两个外边距一正一负时，折叠结果是两者的相加的和
新手在做导航栏的时候发现页面整体掉下来一截就是这个原因。
传送：外边距折叠详解
十五，css单位
1. px 绝对单位。传统上一个像素对应于计算机屏幕上的一个点，而对于高清屏则对应更多。
2. % 父元素**宽度**的比例。
如果对 html 元素设置 font-size 为百分比值，则是以浏览器默认的字体大小 16px 为参照计算的（所有浏览器的默认字体大小都为 16px），如 62.5%即等于 10px（62.5% \* 16px = 10px）。
3. em 相对单位。 不同的属性有不同的参照值。
对于字体大小属性（font-size）来说，em 的计算方式是相对于父元素的字体大小；
border, width, height, padding, margin, line-height）在这些属性中，使用 em 单位的计算方式是参照该元素的 font-size，1em 等于该元素设置的字体大小。同理如果该元素没有设置，则一直向父级元素查找，直到找到，如果都没有设置大小，则使用浏览器默认的 字体大小。
4. rem 是相对于根元素 html 的 font-size 来计算的，所以其参照物是固定的。
好处：rem 只需要修改 html 的 font-size 值即可达到全部的修改，即所谓的牵一发而动全身。
5. vw, vh, vmin, vmax 相对单位，是基于视窗大小（浏览器用来显示内容的区域大小）来计算的。
vw：基于视窗的宽度计算，1vw 等于视窗宽度的百分之一
vh：基于视窗的高度计算，1vh 等于视窗高度的百分之一
vmin：基于 vw 和 vh 中的最小值来计算，1vmin 等于最小值的百分之一
vmax：基于 vw 和 vh 中的最大值来计算，1vmax 等于最大值的百分之一
十六，css优化，提升性能的方法有哪些？
- 多个 css 合并，尽量减少 HTTP 请求
- css 雪碧图
- 抽象提取公共样式，减少代码量
- 选择器优化嵌套，尽量避免层级过深 （用‘>’替换‘ ’）
- 属性值为 0 时，不加单位
- 压缩 CSS 代码 （删除空格、去掉换行、去掉过剩分号等）
- 避免使用 [CSS 表达式]
- 它们要计算成千上万次并且可能会对你页面的性能产生影响。
十七，DOM 层级顺序与 z-index
十八，link与@import的区别
- link 是 HTML 方式， @import 是 CSS 方式
- link 最大限度支持并行下载，@import 过多嵌套导致串行下载，出现 FOUC
- link 可以通过 rel="alternate stylesheet" 指定候选样式
- 浏览器对 link 支持早于@import ，可以使用 @import 对老浏览器隐藏样式
- @import 必须在样式规则之前，可以在 css 文件中引用其他文件
- 总体来说：link 优于@import
十九，css有哪些继承属性
- font
- word-break
- letter-spacing
- text-align
- text-rendering
- word-spacing
- white-space
- text-indent
- text-transform
- text-shadow
- line-height
- color
- visibility
- cursor
二十，css3新特性？
- 新增选择器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)}
- 弹性盒模型 display: flex;
- 多列布局 column-count: 5;
- 媒体查询 @media (max-width: 480px) {.box: {column-count: 1;}}
- 个性化字体 @font-face{font-family: BorderWeb; src:url(BORDERW0.eot);}
- 颜色透明度 color: rgba(255, 0, 0, 0.75);
- 圆角 border-radius: 5px;
- 渐变 background:linear-gradient(red, green, blue);
- 阴影 box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);
- 倒影 box-reflect: below 2px;
- 文字装饰 text-stroke-color: red;
- 文字溢出 text-overflow:ellipsis;
- 背景效果 background-size: 100px 100px;
- 边框效果 border-image:url(bt_blue.png) 0 10;
- 平滑过渡 transition: all .3s ease-in .1s;
- 动画 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;
- 变形 transform
- 旋转 transform: rotate(20deg);
- 倾斜 transform: skew(150deg, -10deg);
- 位移 transform: translate(20px, 20px);
- 缩放 transform: scale(.5);
二十一， CSS 创建一个三角形？三角边？
三角形：
.test{
width: 0px;
height: 0;
border-style: solid;
border-width: 100px;
border-color: transparent transparent red transparent;
}
三角边：用来制作气泡框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三角边</title>
<style>
.test {
width: 0px;
height: 0;
border-style: solid;
border-width: 100px;
border-color: transparent transparent red transparent;
}
.test:after{
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
content: "";
border-width: 100px;
border-bottom-color: #FFF;
margin-left: -100px;
border-top-width: 2px;
}
</style>
</head>
<body>
<div class="test"></div>
</body>
</html>
通过添加伪元素覆盖之前元素，然后移动一下相对位置
气泡框看这篇：css气泡框
二十二， rgba() 和 opacity 的透明效果有什么不同？
- opacity 作用于元素以及元素内的所有内容（包括文字）的透明度
- rgba() 只作用于元素自身的颜色或其背景色，子元素不会继承透明效果
二十三，元素竖向的百分比设定是相对于容器的高度吗？
子元素的宽度百分比依赖父元素的宽度百分比，子元素的高度百分比依赖父元素的高度百分比
margin ，padding这些属性都是参照父元素的宽度，而不是高度
二十四，为什么要初始化 CSS 样式？
- 不同浏览器对有些标签样式的默认值解析不同
- 不初始化 CSS 会造成各现浏览器之间的页面显示差异
- 可以使用 reset.css 或 Normalize.css 做 CSS 初始化
二十五，抽离样式模块怎么写，说出思路？
CSS 可以拆分成 2 部分：公共 CSS 和 业务 CSS：
- 网站的配色，字体，交互提取出为公共 CSS。这部分 CSS 命名不应涉及具体的业务
- 对于业务 CSS，需要有统一的命名，使用公用的前缀。可以参考面向对象的 CSS
二十六，回流与重绘何时发生？如何优化？
1. 当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。
2. 当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。
注意：回流必将引起重绘，而重绘不一定会引起回流。
回流何时发生：
当页面布局和几何属性改变时就需要回流。下述情况会发生浏览器回流：
1、添加或者删除可见的DOM元素；
2、元素位置改变；
3、元素尺寸改变——边距、填充、边框、宽度和高度
4、内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；
5、页面渲染初始化；
6、浏览器窗口尺寸改变——resize事件发生时；
优化：
css中：
1尽可能在DOM树的最末端改变class
2.避免设置多层内联样式
3.动画效果应用到position属性为absolute或fixed的元素上
4.避免使用table布局
5.使用css3硬件加速，可以让transform、 opacity、 filters等动画效果不会引起回流重绘
js中：
1.避免使用JS一个样式修改完接着改下一一个样式，最好一-次性更改CSS样式， 或者将样式列表定义为class的名称
2.避免频繁操作DOM，使用文档片段创建一个子树， 然后再拷贝到文档中
3.先隐藏元素，进行修改后再显示该元素，因为display:none 上的DOM操作不会引|发回流和重绘
4.避免循环读取offsetLeft等属性，在循环之前把它们存起来
5.对于复杂动画效果,使用绝对定位让其脱离文档流，否则会弓|起父元素及后续元素大量的回流
二十七，怎么让 Chrome 支持小于 12px 的文字？
p span{
font-size:10px;
display:block;
}
用transform:scale()这个属性进行缩放！
二十八，如何修改 Chrome 记住密码后自动填充表单的黄色背景？
- 产生原因：由于 Chrome 默认会给自动填充的 input 表单加上 input:-webkit-autofill 私有属性造成的
- 解决方案 1：在 form 标签上直接关闭了表单的自动填充：autocomplete="off"
- 解决方案 2：input:-webkit-autofill { background-color: transparent; }
二十九，网站图片文件，如何点击下载？而非点击预览？
<a href="logo.jpg" download>下载</a>
<a href="logo.jpg" download="网站LOGO">下载</a>
三十，content 和 attr 配合使用
如果你不想把content内容在CSS里写死，那你可以使用attr表达式来从页面元素中动态的获取内容：
/* <div data-line="1"></div> */
div[data-line]:after {
content: attr(data-line); /* 属性名称上不要加引号！ */
}
attr属性通常和自定义属性data-配合使用，因为传统的其它属性虽然也能存值，但通常不适合存放表达性文字。
