前端知识点面试题 - CSS基础篇（1）

1、说出标准的CSS的盒子模型是什么？与低版本IE的盒子模型有什么不同的？

盒子模型就是 元素在网页中的实际占位，有两种：标准盒子模型和IE盒子模型

• 标准(W3C)盒子模型：内容content+填充padding+边框border+边界margin
  宽高指的是 content 的宽高
• 低版本IE盒子模型：内容（content+padding+border）+ 边界margin，
  宽高指的是 content+padding+border 部分的宽高

2、CSS 如何设置这两种模型？

box-sizing: content-box;
box-sizing: border-box

默认为content-box

• context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是 content 部分的高/宽
• border-box：IE 传统盒子模型。设置元素的 height/width 属性指的是 content + border + padding 部分的高/宽

3、对 BFC 规范(块级格式化上下文：block formatting context)的理解？

（W3C CSS 2.1 规范中的一个概念,它是一个独立容器，决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。）
一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型。
不同类型的 Box，会参与不同的Formatting Context（决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染，也就是说BFC内部的元素和外部的元素不会互相影响。

BFC规定了内部的 Block Box 如何布局。 定位方案：

• 内部的 Box 会在垂直方向上一个接一个放置。
• Box 垂直方向的距离由margin 决定，属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠。
• 每个元素的 margin box的左边，与包含块 border box 的左边相接触。
• BFC 的区域不会与 float box 重叠。
• BFC 是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
• 计算 BFC 的高度时，浮动元素也会参与计算。

满足下列条件之一就可触发 BFC

• 根元素，即 html
• float 的值不为none（默认）
• overflow 的值不为visible（默认）
• display 的值为 inline-block、table-cell、table-caption
• position的值为 absolute 或 fixed

4、CSS margin上下重叠问题

块元素在垂直方向上的margin会有重叠现象。 如果display都是block，有三种情况：

• 外边距均为正数，竖直方向上会选择最大的外边距作为间隔
• 一正一负，间距 = 正 - |负|
• 两个负，间距 = 0 - 绝对值最大的那个
  设置display: inline-block的盒子不会有margin重叠，position: absolute的也不会出现。

5、CSS选择器有哪些？哪些属性可以继承？CSS优先级算法如何计算？

CSS选择符：

1. id选择器（ # myid）
2. 类选择器（.myclassname）
3. 标签(元素)选择器（div, h1, p）
4. 相邻选择器（h1 + p）
5. 子选择器（ul > li）
6. 后代选择器（li a）
7. 通配符选择器（ * ）
8. 属性选择器（a[rel = “external”]）
9. 伪类选择器（a:hover, li:nth-child）
10. 伪元素选择器、分组选择器。

继承性：

• 可继承的样式：font-size, font-family, color，ul，li，dl，dt，dd；
• 不可继承的样式：border, padding, margin, width, height
• 优先级（就近原则）：!important > [ id > class > tag ]
• !important 比内联优先级高

优先级算法计算：

• 优先级就近原则，同权重情况下样式定义最近者为准 !important>id >class>tagmportant比内联优先级高

• 元素选择符的权值：元素标签（派生选择器）：1，class选择符：10，id选择符：100，内联样式权值最大，为1000

• !important声明的样式优先级最高，如果冲突再进行计算。

• 如果优先级相同，则选择最后出现的样式。

• 继承得到的样式的优先级最低。

• ID > 类 > 标签 > 相邻 > 子选择器 > 后代选择器 > * > 属性 > 伪类

• important > 行内样式 > 文件内部style > link引入的外部css文件

• 同类选择器，层级越深优先级越高

• 同一文件，同一层级的同类选择器，下面的样式会覆盖上面的

6、CSS3新增伪类有那些?

• p:first-of-type 选择属于其父元素的首个元素的每个元素。 p:last-of-type 选择属于其父元素的最后元素的每个元素。
• p:only-of-type 选择属于其父元素唯一的元素的每个元素。 p:only-child 选择属于其父元素的唯一子元素的每个元素。
• p:nth-child(2) 选择属于其父元素的第二个子元素的每个元素。 :enabled :disabled 控制表单控件的禁用状态。
• :checked，单选框或复选框被选中。 :before在元素之前添加内容，也可以用来做清除浮动 :after在元素之后添加内容

7、display各项值的含义

8、关于居中

水平居中div：margin: 0 auto;

水平垂直居中一个浮动元素（position定位）

当元素宽高不定

    居中

当元素宽高的固定

    居中

垂直居中一个img（display : table-cell 或者 position定位）

设置绝对定位的div水平垂直居中

position: absolute;
width: 200px;
height: 100px;
margin: auto;
left: 0;
right: 0; 
top:0;
bottom:0;
border: 1px solid black;

设置文本的垂直居中

把line-height值设置为height一样大小的值可以实现单行文字的垂直居中

还有更加优雅的居中方式就是用 flex布局，但需要注意其兼容性

9、用纯CSS实现一个三角形

width: 0;
height: 0;
border-top: 20px solid transparent;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #ff0000;

10、为什么要初始化 CSS 样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

11、display:none 与 visibility:hidden 的区别是什么？

• display : none 隐藏对应的元素，在文档布局中不再分配空间（回流+重绘）
• visibility:hideen 隐藏对应的元素，在文档布局中仍保留原来的空间（重绘）

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

• display属性规定元素应该生成的框的类型；
• position属性规定元素的定位类型；
• float属性是一种布局方式，定义元素在哪个方向浮动。

类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float或者absolute定位的元素，只能是块元素或表格。

13、为什么会出现浮动? 什么时候需要清除浮动？清除浮动有哪些方式？

出现浮动的原因：
浮动元素碰到包含它的边框或者浮动元素的边框停留。
在CSS规范中，浮动定位不属于正常的页面流，而是独立定位的，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。

关于css的定位机制：
普通流，浮动，绝对定位（position：fixed是position：absolute的一个子类）。
浮动的框可以左右移动，直到它的外边缘遇到包含框或者另一个浮动框的边缘，所以才说浮动定位不属于正常的页面流。文档中的普通流就会表现得和浮动框不存在一样。
当浮动框高度超出包含框的时候，就会出现包含框不会自动伸缩高度类笔盒浮动元素。
所以，只含有浮动元素的父容器在显示时不需要考虑子元素的位置，就造成显示父容器像空容器一样。

浮动带来的问题：

• 父元素的高度无法被撑开，影响与父元素同级的元素
• 与浮动元素同级的非浮动元素（内联元素）会跟随其后
• 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

清除浮动的方式：

• 浮动的父元素添加overflow: hidden
• 浮动的父元素添加伪类 ::after{clear: both}

14、什么是CSS 预处理器 / 后处理器？

• 预处理器例如：LESS、Sass、Stylus，用来预编译Sass或less，增强了css代码的复用性，还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。
• 后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。
• CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题”，例如你可以在 CSS 中使用变量、简单的逻辑程序、函数（如右侧代码编辑器中就使用了变量$color）等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。
• 其它 CSS 预处理器语言：
  Sass（SCSS）
  LESS
  Stylus
  Turbine
  Swithch CSS
  CSS Cacheer
  DT CSS

15、CSS优化、提高性能的方法有哪些？

• 避免过度约束
• 避免后代选择符
• 避免链式选择符
• 使用紧凑的语法
• 避免不必要的命名空间
• 避免不必要的重复
• 最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么
• 避免！important，可以选择其他选择器
• 尽可能的精简规则，你可以合并不同类里的重复规则
• 修复解析错误
• 避免使用多类选择符
• 移除空的css规则
• 正确使用display的属性：由于display的作用，某些样式组合会无效，徒增样式体积的同时也影响解析性能。
  display:inline后不应该再使用width、height、margin、padding以及float。
display:inline-block后不应该再使用float。
display:block后不应该再使用vertical-align。
display:table-*后不应该再使用margin或者float。
• 不滥用浮动：虽然浮动不可避免，但不可否认很多css bug是由于浮动而引起。
• 不滥用web字体
  对于中文网站来说Web Fonts可能很陌生，国外却很流行。web fonts通常体积庞大，而且一些浏览器在下载web fonts时会阻塞页面渲染损伤性能。
• 不声明过多的font-size：这是设计层面的问题，设计精良的页面不会有过多的font-size声明。
• 不在选择符中使用ID标识符，主要考虑到样式重用性以及与页面的耦合性。
• 不给h1~h6元素定义过多的样式
• 全站统一定义一遍heading元素即可，若需额外定制样式，可使用其他选择符作为代替。
• 不重复定义h1~h6元素
• 值为0时不需要任何单位
• 标准化各种浏览器前缀：通常将浏览器前缀置于前面，将标准样式属性置于最后
  -moz-border-radius: 5px;border-radius: 5px;
• 使用CSS渐变等高级特性，需指定所有浏览器的前缀
• 避免让选择符看起来像正则表达式
• CSS3添加了一些类似~=等复杂属性，也不是所有浏览器都支持，谨慎使用。
• 遵守盒模型规则（Beware of broken box models）

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

使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。
Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。

17、全屏滚动的原理是什么？用到了CSS的哪些属性？

• 原理：有点类似于轮播，整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500%，只是展示100%，剩下的可以通过transform进行y轴定位，也可以通过margin-top实现
• overflow：hidden；transition：all 1000ms ease；

18、什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

• 响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。
• 基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
• 页面头部必须有meta声明的viewport。
  

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

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

20、如何实现Chrome中文本小于12px

针对谷歌浏览器加前缀进行适配

html{
　-webkit-text-size-adjust:none;
}

使用css3的transform属性

font-size:12px;
-webkit-transform:scale(0.8); // 0.8是缩放比例