css面试题

你的名字 2022-03-25 05:08 192阅读 0赞

# CSS面试题 #

## 一、基础篇 ##

#### 1、用纯css创建一个三角形的原理是什么？ ####

首先，需要把元素的宽高设置为0，然后设置边框样式。

width: 0;
    height: 0;
    border-top: 40px solid transparent;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 40px solid #00ff00;

#### 2、一个满屏品字布局如何设计? ####

方法一：上面那块用margin: 0 auto;居中； 下面两块用float或者inline-block不换行； 用margin调整位置使他们居中。  
方法二：上面的div设置成100%，下面的div分别宽50%，然后使用float或者inline使其不换行。

#### 3、常见的兼容性问题？ ####

不同浏览器的标签默认的margin和padding不一样。

*{ 
    	margin:0;
    	padding:0;
    }

**IE6双边距bug**：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。hack：display:inline;将其转化为行内属性。  
**渐进识别的方式**，从总体中逐渐排除局部。首先，巧妙的使用“9”这一标记，将IE浏览器从所有情况中分离出来。接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

{ 
    background-color:#ff0000;/*所有识别*/
    .background-color:#00ffff\9; /*IE6、7、8识别*/
    +background-color:#0000ff;/*IE6、7识别*/
    _background-color:#ffff00;/*IE6识别*/
    }

设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度。hack：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

IE下，可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性；Firefox下，只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。

Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 **-webkit-text-size-adjust: none;** 解决。

超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link \{\} a:visited \{\} a:hover \{\} a:active \{\}

#### 4、为什么要初始化CSS样式 ####

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差

#### 5、absolute的containing block计算方式跟正常流有什么不同？ ####

无论属于哪种，都要先找到其祖先元素中最近的 position 值不为 static 的元素，然后再判断：  
若此元素为 inline 元素，则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形；  
否则,则由这个祖先元素的 padding box 构成。  
如果都找不到，则为 initial containing block。  
**补充：**  
static(默认的)/relative：简单说就是它的父元素的内容框（即去掉padding的部分）  
absolute: 向上找最近的定位为absolute/relative的元素  
fixed: 它的containing block一律为根元素(html/body)

#### 6、CSS里的visibility属性有个collapse属性值？在不同浏览器下以后什么区别？ ####

当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。  
chrome中，使用collapse值和使用hidden没有区别。  
firefox，opera和IE，使用collapse值和使用display：none没有什么区别。

#### 7、display:none与visibility：hidden的区别？ ####

display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）  
visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）  
重绘：当render-tree中的一些元素需要更新属性，而这些属性只影响元素的外观、风格，而不影响布局，比如是background-color,则就称为重绘。

回流：当页面中的布局和几何属性改变时就需要回流，比如是：

<1>、添加或删除可见的DOM元素

<2>、元素位置的改变

<3>、元素尺寸的改变（边框、尺寸、填充、宽度、高度）

<4>、内容的改变（比如文本的改变和图片大小的改变而引起的计算值宽度和高度的改变）

<5>、页面渲染初始化

<6>、浏览器窗口尺寸的改变-resize事件发生时

**回流必将引起重绘，重绘不一定会引起回流**

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

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

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

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

#### 10、为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？ ####

浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。  
浮动带来的问题：  
父元素的高度无法被撑开，影响与父元素同级的元素  
与浮动元素同级的非浮动元素（内联元素）会跟随其后  
若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。  
**清除浮动的方式：**  
父级div定义height  
最后一个浮动元素后加空div标签 并添加样式clear:both。  
包含浮动元素的父标签添加样式overflow为hidden或auto。  
父级div定义zoom

#### 11、有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度 ####

外层div使用position：relative；高度要求自适应的div使用position: absolute; top: 100px; bottom: 0; left: 0

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

png是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式.优点是：压缩比高，色彩好。 大多数地方都可以用。

jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。

gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果.

webp格式是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%。缺点是压缩的时间更久了，兼容性不好，目前谷歌和opera支持。

#### 13、style标签写在body后与body前有什么区别？ ####

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

#### 14、CSS属性overflow属性定义溢出元素内容区的内容会如何处理? ####

参数是scroll时候，必会出现滚动条。  
参数是auto时候，子元素内容大于父元素时出现滚动条。  
参数是visible时候，溢出的内容出现在父元素之外。  
参数是hidden时候，溢出隐藏。

#### 15、阐述一下CSS Sprites ####

将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，background- repeat，background-position 的组合进行背景定位。利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能；CSS Sprites能减少图片的字节。

#### 16、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？ ####

标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin  
低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin

#### 17、box-sizing属性？ ####

用来控制元素的盒子模型的解析模式，默认为content-box  
context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽  
border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽

#### 18、CSS选择器有哪些？哪些属性可以继承？ ####

CSS选择符：id选择器(\#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（\*）、属性选择器（a\[rel=”external”\]）、伪类选择器（a:hover, li:nth-child）

可继承的属性：font-size, font-family, color

不可继承的样式：border, padding, margin, width, height

优先级（就近原则）：!important > \[ id > class > tag \]  
!important 比内联优先级高

#### 19、CSS优先级算法如何计算？ ####

元素选择符： 1  
class选择符： 10  
id选择符：100  
元素标签：1000

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

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

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

以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值：
    /*权重为1*/
    div{ 
    }
    /*权重为10*/
    .class1{ 
    }
    /*权重为100*/
    #id1{ 
    }
    /*权重为100+1=101*/
    #id1 div{ 
    }
    /*权重为10+1=11*/
    .class1 div{ 
    }
    /*权重为10+10+1=21*/
    .class1 .class2 div{ 
    }

#### 20、CSS3新增伪类有那些? ####

p:first-of-type 选择属于其父元素的首个元素  
p:last-of-type 选择属于其父元素的最后元素  
p:only-of-type 选择属于其父元素唯一的元素  
p:only-child 选择属于其父元素的唯一子元素  
p:nth-child(2) 选择属于其父元素的第二个子元素  
:enabled :disabled 表单控件的禁用状态。  
:checked 单选框或复选框被选中。

#### 21、如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？ ####

div：{ 
    	border: 1px solid red;
    	margin: 0 auto; 
    	height: 50px;
    	width: 80px;
    }

浮动元素的上下左右居中：

div: { 
    	order: 1px solid red;
    	float: left;
    	position: absolute;
    	width: 200px;
    	height: 100px;
    	left: 50%;
    	top: 50%;
    	margin: -50px 0 0 -100px; 
    }

绝对定位的左右居中：

div: { 
    	border: 1px solid black;
    	position: absolute;
    	width: 200px;
    	height: 100px;
    	margin: 0 auto;
    	left: 0;
    	right: 0; 
    }

#### 22、display有哪些值？说明他们的作用? ####

inline（默认）–内联  
none–隐藏  
block–块显示  
table–表格显示  
list-item–项目列表  
inline-block

#### 23、position的值？ ####

static（默认）：按照正常文档流进行排列；  
relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；  
absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；  
fixed(固定定位)：所固定的参照对像是可视窗口。

#### 24、CSS3有哪些新特性？ ####

RGBA和透明度

background-image background-origin(content-box/padding-box/border-box) background-size background-repeat

word-wrap（对长的不可分割单词换行）word-wrap：break-word

文字阴影：text-shadow： 5px 5px 5px \#FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）

font-face属性：定义自己的字体

圆角（边框半径）：border-radius 属性用于创建圆角

边框图片：border-image: url(border.png) 30 30 round

盒阴影：box-shadow: 10px 10px 5px \#888888

媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性

#### 24、请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景？ ####

该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。  
试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。

#### 25、上下margin重合的问题 ####

在重合元素外包裹一层容器，并触发该容器生成一个BFC。  
eg：

<div class="aside"></div>
    <div class="text">
        <div class="main"></div>
    </div>
    
     .aside {
                margin-bottom: 100px;  
                width: 100px;
                height: 150px;
                background: #f66;
            }
    .main {
            margin-top: 100px;
            height: 200px;
            background: #fcc;
    }
    .text{
             overflow: hidden;  //此时已经触发了BFC属性。
    }

#### 26、设置元素浮动后，该元素的display值是多少？ ####

自动变成display:block

#### 27、使用 CSS 预处理器吗？ ####

Less sass

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

避免过度约束

避免后代选择符

避免链式选择符

使用紧凑的语法

避免不必要的命名空间

避免不必要的重复

最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么

避免！important，可以选择其他选择器

尽可能的精简规则，你可以合并不同类里的重复规则

#### 29、浏览器是怎样解析CSS选择器的？ ####

CSS选择器的解析是从右向左解析的。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。  
而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。在建立 Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 Render Tree。

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

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

#### 31、margin和padding分别适合什么场景使用？ ####

何时使用margin：

需要在border外侧添加空白

空白处不需要背景色

上下相连的两个盒子之间的空白，需要相互抵消时。

何时使用padding：

需要在border内侧添加空白

空白处需要背景颜色

上下相连的两个盒子的空白，希望为两者之和。

兼容性的问题：在IE5 IE6中，为float的盒子指定margin时，左侧的margin可能会变成两倍的宽度。通过改变padding或者指定盒子的display：inline解决。

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

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

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

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

overflow：hidden；transition：all 1000ms ease；

#### 34、link和@import的区别？ ####

（1）link属于XHTML标签，而@import是CSS提供的。  
（2）页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载。  
（3）import只在IE 5以上才能识别，而link是XHTML标签，无兼容问题。  
（4）link方式的样式权重高于@import的权重。  
（5）使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

#### 35、常用Hack的技巧： ####

（1）IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute()获取自定义属性；
    （2）Firefox下，只能使用getAttribute()获取自定义属性。解决方法：统一通过getAttribute()获取自定义属性。
    （3）IE下，even对象有x,y属性，但是没有pageX,pageY属性；
    （4）Firefox下，event对象有pageX,pageY属性，但是没有x,y属性。解决方法是条件注释，缺点是在IE浏览器下可能会增加额外的HTTP请求数。
    （5）Chrome 中文界面下默认会将小于12px的文本强制按照12px显示，可通过加入 CSS属性-webkit-text-size-adjust: none;来解决。
    （6）超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不再具有hover和active了，解决方法是改变CSS属性的排列顺序：
    L-V-H-A :  a:link { } a:visited { } a:hover { } a:active { }

#### 36、列出display的值，说明它们的作用。position的值里，relative和absolute定位原点是？ ####

display的值：  
block 像块类型元素一样显示。  
none 缺省值。像行内元素类型一样显示。  
inline-block 像行内元素一样显示，但其内容像块类型元素一样显示。  
list-item 像块类型元素一样显示，并添加样式列表标记。  
relative和absolute定位原点：  
absolute：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。  
relative：生成相对定位的元素，相对于其正常位置进行定位。

#### 37、淘宝的样式初始化： ####

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {  margin:0; padding:0; }
        body, button, input, select, textarea {  font:12px/1.5tahoma, arial, \5b8b\4f53; }
        h1, h2, h3, h4, h5, h6{  font-size:100%; }
        address, cite, dfn, em, var {  font-style:normal; }
        code, kbd, pre, samp {  font-family:couriernew, courier, monospace; }
        small{  font-size:12px; }
     ul, ol {  list-style:none; }
        a {  text-decoration:none; }
        a:hover {  text-decoration:underline; }
        sup {  vertical-align:text-top; }
        sub{  vertical-align:text-bottom; }
        legend {  color:#000; }
        fieldset, img {  border:0; }
        button, input, select, textarea {  font-size:100%; }
        table {  border-collapse:collapse; border-spacing:0; }

#### 38、如何解决IE 6的3px问题？ ####

_zoom:1; 
    margin-left: value;
    _margin-left: value-3px;

#### 39、Firefox下文本无法撑开容器的高度，如何解决？ ####

清除浮动 .clear{  clear:both; height:0px; overflow:hidden;}

#### 40、怎么样才能让层显示在Flash之上呢? ####

解决的办法是给Flash设置透明属性

#### 41、cursor:hand在FF下不显示小手，如何解决？ ####

cursor; pointer;

#### 42、介绍一下 Sass 和 Less 是什么？它们有何区别？ ####

Sass (Syntactically Awesome Stylesheets)是一种动态样式语言，语法跟css一样(但多了些功能)，比css好写，而且更容易阅读。Sass语法类似与Haml，属于缩排语法（makeup），用意就是为了快速写Html和Css。  
Less一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。  
区别：  
(1))Sass是基于Ruby的，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出Css到浏览器，也可以在开发环节使用Less，然后编译成Css文件，直接放到项目中，也有Less.app、SimpleLess、CodeKit.app这样的工具，也有在线编译地址。  
(2)变量符不一样，less是@，而Scss是$，而且变量的作用域也不一样，后面会讲到。  
(3)输出设置，Less没有输出设置，Sass提供4中输出选项：nested, compact, compressed 和 expanded。  
(4)Sass支持条件语句，可以使用if\{\}else\{\},for\{\}循环等等。而Less不支持。

#### 43、请问 “resetting” 和 “normalizing” CSS 之间的区别？你会如何选择，为什么？ ####

Normalize.css 是一个可定制的 CSS 文件，使浏览器呈现的所有元素，更一致和符合现代标准；是在现代浏览器环境下对于CSS reset的替代。 它正是针对只需要统一的元素样式。该项目依赖于研究浏览器默认元素风格之间的差异，精确定位需要重置的样式。

normalizing：  
保护有用的浏览器默认样式而不是完全去掉它们  
一般化的样式：为大部分HTML元素提供  
修复浏览器自身的bug并保证各浏览器的一致性  
优化CSS可用性：用一些小技巧  
解释代码：用注释和详细的文档来

Normalize.css 保护了有价值的默认值：  
Reset通过为几乎所有的元素施加默认样式，强行使得元素有相同的视觉效果。相比之下，Normalize.css保持了许多默认的浏览器样式。这就意味着你不用再为所有公共的排版元素重新设置样式。当一个元素在不同的浏览器中有不同的默认值时，Normalize.css会力求让这些样式保持一致并尽可能与现代标准相符合。

#### 44、请解释浮动 (Floats) 及其工作原理。 ####

float被归类于CSS 定位属性（Positioning）  
描述：规定框是否应该浮动。  
定义和用法：float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。  
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

#### 45、描述z-index和叠加上下文是如何形成的。 ####

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。  
注释：元素可拥有负的 z-index 属性值。  
注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！

而凡是拥有层叠上下文的元素，将离用户最近，也就是越靠在Z轴前面。默认情况下只有根元素HTML会产生一个层叠上下文，并且元素一旦使用了一些属性也将会产生一个层叠上下文，如我们常用的定位属性。如两个层叠上下文相遇时，总是后一个层叠前一个，除非使用z-index来改变。

详情见：  
[http://www.cnblogs.com/pssp/p/5948356.html][http_www.cnblogs.com_pssp_p_5948356.html]

#### 46、请描述伪元素 (pseudo-elements) 及其用途。 ####

伪元素例如：  
:first-line / :first-letter / :befort / :after  
详情参见链接：  
[http://www.w3school.com.cn/css/css\_pseudo\_elements.asp][http_www.w3school.com.cn_css_css_pseudo_elements.asp]

#### 47、请解释 inline 和 inline-block 的区别？ ####

**display:block**  
block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。  
block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。  
block元素可以设置margin和padding属性。  
**display:inline**  
inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。  
inline元素设置width,height属性无效。  
inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。  
**display:inline-block**  
简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

#### 48、如果设计中使用了非标准的字体，你该如何去实现？ ####

@font-face  
详见：[http://www.w3school.com.cn/css3/css3\_font.asp][http_www.w3school.com.cn_css3_css3_font.asp]

#### 49、请罗列出你所知道的 display 属性的全部值 ####

常见的包括：  
none、block、inline、inline-block、list-item、run-in、table、inline-table、table-row-group、table-header-group、table-footer-group、table-row、table-column-group、table-column、table-cell、table-caption、inherit

#### 50、请解释 \* \{ box-sizing: border-box; \} 的作用, 并且说明使用它有什么好处？ ####

大致就是说，在盒模型中，元素的高和宽包括了边框和内边距，详见：  
[http://www.w3school.com.cn/cssref/pr\_box-sizing.asp][http_www.w3school.com.cn_cssref_pr_box-sizing.asp]

#### 51、其他问题 ####

你会如何解决特定浏览器的样式问题？  
如何为有功能限制的浏览器提供网页？  
你会使用哪些技术和处理方法？  
有哪些的隐藏内容的方法 (如果同时还要保证屏幕阅读器可用呢)？  
你用过栅格系统 (grid system) 吗？如果使用过，你最喜欢哪种？  
如何优化网页的打印样式？  
请描述你曾经使用过的 CSS 预处理器的优缺点。  
你在开发或生产环境中使用过哪些 CSS 框架？你觉得应该如何改善他们？  
请问你有尝试过 CSS Flexbox 或者 Grid 标准规格吗？  
你有兼容 retina 屏幕的经历吗？如果有，在什么地方使用了何种技术？  
请问为何要使用 translate() 而非 absolute positioning，或反之的理由？为什么？

[http_www.cnblogs.com_pssp_p_5948356.html]: http://www.cnblogs.com/pssp/p/5948356.html
[http_www.w3school.com.cn_css_css_pseudo_elements.asp]: http://www.w3school.com.cn/css/css_pseudo_elements.asp
[http_www.w3school.com.cn_css3_css3_font.asp]: http://www.w3school.com.cn/css3/css3_font.asp
[http_www.w3school.com.cn_cssref_pr_box-sizing.asp]: http://www.w3school.com.cn/cssref/pr_box-sizing.asp