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 新特新
- 新增各种 CSS 选择器
:not(p)选择每个非p的元素；p:empty选择每个没有任何子级的p元素（包括文本节点） - 边框（Borders）
- 背景 background-clip（规定背景图的绘制区域），background-origin，background-size
- 线性渐变 （Linear Gradients） 向下/向上/向左/向右/对角方向
- 文本效果 阴影text-shadow，textwrap，word-break，word-wrap
- 2D 转换 transform:scale(0.85,0.90) | translate(0px,-30px) | skew(-9deg,0deg) |rotate() 3D转换 perspective()；transform是向元素应用 2D 或者 3D 转换
- 过渡 transition
- 动画
- 多列布局 （multi-column layout）
- 盒模型
- flex 布局
- 多媒体查询 **定义两套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 浏览器是怎样解析的？
- HTML 被 HTML 解析器解析成 DOM 树；2. CSS 被 CSS 解析器解析成 CSSOM 树；
- 结合 DOM 树和 CSSOM 树，生成一棵渲染树(Render Tree)，这一过程称为 Attachment；
- 生成布局(flow)，浏览器在屏幕上“画”出渲染树中的所有节点；
- 将布局绘制(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，就没有空格了
解决方法：
- 可以将代码全部写在一排
- 浮动li中float：left
- 在ul中用font-size：0（谷歌不支持）；
- 可以将 ul{letter-spacing: -4px;};li{letter-spacing: normal;}
1.24 display:inline-block 什么时候会显示间隙？
- 有空格时候会有间隙 解决：s除空格
- margin正值的时候 解决：margin使用负值
- 使用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 在某元素之后插入某些内容
