前端基础之CSS(二)

1.11 浏览器是怎样解析CSS选择器的？

CSS选择器的解析是从右向左解析的

原因：

从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点(叶子节点)，而从左向右的匹配规则的性能都浪

费在了失败的查找上面

1.12 width:auto 和 width:100%的区别

• width:100%会使元素box的宽度等于父元素的contentbox的宽度
• width:auto会使元素撑满整个父元素，margin、border、padding、content区域会自动分配水平空间。

1.13 display、position和float的相互关系？

• 首先我们判断display属性是否为none，如果为none，则position和float属性的值不影响元素最后的表现
• 然后判断position的值是否为absolute或者fixed，如果是，则float属性失效，并且display的值应该被 设置为table或者block，具体转换需要看初始转换值
• 如果position的值不为absolute或者fixed，则判断float属性的值是否为none，如果不是，则display 的值则按上面的规则转换。注意，如果position的值为relative并且float属性的值存在，则relative相对 于浮动后的最终位置定位
• 如果float的值为none，则判断元素是否为根元素，如果是根元素则display属性按照上面的规则转换，如果不是， 则保持指定的display属性值不变

总的来说，可以把它看作是一个类似优先级的机制，"position:absolute"和"position:fixed"优先级最高，有它存在 的时候，浮动不起作用，'display'的值也需要调整；其次，元素的'float'特性的值不是"none"的时候或者它是根元素 的时候，调整'display'的值；最后，非根元素，并且非浮动元素，并且非绝对定位的元素，'display'特性值同设置值。

1.14 IFC 是什么？

IFC指的是行级格式化上下文，它有这样的一些布局规则：

• 行级上下文内部的盒子会在水平方向，一个接一个地放置。
• 当一行不够的时候会自动切换到下一行。
• 行级上下文的高度由内部最高的内联盒子的高度决定

1.15 为什么不建议使用统配符初始化 css 样式

• 采用*{pading:0;margin:0;}这样的写法好处是写起来很简单，但是是通配符，需要把所有的标签都遍历一遍，当网站较大时， 样式比较多，这样写就大大的加强了网站运行的负载，会使网站加载的时候需要很长一段时间，因此一般大型的网站都有分层次的一 套初始化样式
• 出于性能的考虑，并不是所有标签都会有padding和margin，因此对常见的具有默认padding和margin的元素初始化即 可，并不需使用通配符*来初始化

1.16 CSS3 新特新

1. 新增各种 CSS 选择器 :not(p) 选择每个非p的元素； p:empty 选择每个没有任何子级的p元素（包括文本节点）
2. 边框（Borders）
3. 背景 background-clip（规定背景图的绘制区域），background-origin，background-size
4. 线性渐变 （Linear Gradients） 向下/向上/向左/向右/对角方向
5. 文本效果 阴影text-shadow，textwrap，word-break，word-wrap
6. 2D 转换 transform:scale(0.85,0.90) | translate(0px,-30px) | skew(-9deg,0deg) |rotate() 3D转换 perspective()；transform是向元素应用 2D 或者 3D 转换
7. 过渡 transition
8. 动画
9. 多列布局 （multi-column layout）
10. 盒模型
11. flex 布局
12. 多媒体查询 **定义两套css，当浏览器的尺寸变化时会采用不同的属性

1.17 position 跟 display、float 这些特性相互叠加后会怎么样？

• display 属性规定元素应该生成的框的类型；position属性规定元素的定位类型；float属性是一种布局方式，定义元素在哪个方向浮动。
• 类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。

1.18 什么是CSS 预处理器？为什么使用？

• Less、Sass、Stylus，用来预编译Sass或less，增强了css代码的复用性，还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率

为什么要使用？

• 可嵌套性
• 变量
• Mixins(混合@mixin)：可重用性高，可以注入任何东西
• @extend：允许一个选择器继承另一个选择器
• @function:函数功能，用户使用@function 可以去编写自己的函数
• 引用父元素&：在编译时，&将被替换成父选择符
• 计算功能
• 组合连接： #{} :变量连接字符串
• 循环语句：（很少用到）
• if 语句：（很少用到）

1.19 浏览器是怎样解析的？

1. HTML 被 HTML 解析器解析成 DOM 树；2. CSS 被 CSS 解析器解析成 CSSOM 树；
2. 结合 DOM 树和 CSSOM 树，生成一棵渲染树(Render Tree)，这一过程称为 Attachment；
3. 生成布局(flow)，浏览器在屏幕上“画”出渲染树中的所有节点；
4. 将布局绘制(paint)在屏幕上，显示出整个页面。

1.20 在网页中的应该使用奇数还是偶数的字体？为什么呢？

• 使用偶数字体
• Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏

1.21 元素竖向的百分比设定是相对于容器的高度吗？

当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度

1.22 怎么让谷歌支持小于12px的文字？

使用 scale

1.23 li 与 li 之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了

解决方法：

1. 可以将代码全部写在一排
2. 浮动li中float：left
3. 在ul中用font-size：0（谷歌不支持）；
4. 可以将 ul{letter-spacing: -4px;};li{letter-spacing: normal;}

1.24 display:inline-block 什么时候会显示间隙？

1. 有空格时候会有间隙 解决：s除空格
2. margin正值的时候 解决：margin使用负值
3. 使用font-size时候 解决：font-size:0、letter-spacing、word-spacing

1.25 png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？

• png是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式.优点是：压缩比高，色彩好。 大多数地方都可以用。
• jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。
• gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果.
• webp格式是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%。缺点是压缩的时间更久了，兼容性不好，目前谷歌和opera支持。

1.26 style 标签写在 body 后与 body前有什么区别？

页面加载自上而下 当然是先加载样式。
写在 body 标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表（外联或写在 style 标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现 FOUC 现象（即样式失效导致的页面闪烁问题）

1.27 ::before 和::after 中双冒号和单冒号有什么区别、作用？

区别

在css中伪类一直用:表示，如 :hover，:active等

伪元素在CSS1中已存在，当时语法使用 : 表示 ，如：:before和:after

后来在CSS3中修订，伪元素用 ::表示，如 ::before 和 ::after，以此区分伪元素和伪类

由于低版本 IE 对双冒号不兼容，开发者为了兼容性各浏览器，继续使使用 :after 这种老语法表示伪元素

单冒号: CSS3表示伪类；双冒号::CSS3伪元素

作用：

::before 和::after 的主要作用是在元素内容前后加上指定内容

伪类与伪元素都是用于向选择器加特殊效果

伪类与伪元素的本质区别就是是否抽象创造了新元素

伪类只要不是互斥可以叠加使用

伪元素在一个选择器中只能出现一次，并且只能出现在末尾

伪类与伪元素优先级分别与类、标签优先级相同

1.28 CSS3新增伪类，以及伪元素？

CSS3 新增伪类

p:first-of-type 选择属于其父元素的首个<p>元素的每个<p>元素

p:last-of-type 选择属于其父元素的最后<p>元素的每个<p>元素

p:nth-child(n) 选择属于其父元素的第 n 个子元素的每个<p>元素

p:nth-last-child(n) 选择属于其父元素的倒数第 n 个子元素的每个<p>元素

p:nth-of-type(n) 选择属于其父元素第 n 个<p>元素的每个<p>元素

p:nth-last-of-type(n)

选择属于其父元素倒数第 n 个<p>元素的每个<p>元素

p:last-child 选择属于其父元素最后一个子元素的每个<p>元素

p:target

选择当前活动的<p>元素

:not(p) 选择非<p>元素的每个元素

:enabled 控制表单控件的可用状态

:disabled

控制表单控件的禁用状态

:checked

单选框或复选框被选中

伪元素

::first-letter 将样式添加到文本的首字母

::first-line 将样式添加到文本的首行

::before 在某元素之前插入某些内容

::after 在某元素之后插入某些内容