css45道面试题

1 介绍下标准的css盒子模型？与低版本IE的盒子模型有什么不同？

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

2 box-sizing 属性？

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

3 css选择器有哪些？哪些属性可以继承

css选择符：

• id选择器（#id名）
• 类(class)选择器（.类名）
• 标签选择器 （div , h1 p span …）
• 相邻选择器 （h1+p）
• 子选择器 （ul > li ） //ul下方的li
• 后代选择器（div p）
• 通配符选择器 （*） //选中全部
• 属性选择器 （a[rel=“external”]）
• 伪类选择器 （a:hover）
• 可继承的属性：font-size font-family color
• 不可继承的样式： border padding margin width height
• 优先级(就近原则) ：!important > [id>class>标签选择器] !important比内联优先级高

4CSS优先级算法如何计算？

• 元素选择符：1
• class选择符：10
• id选择符：100
• 元素标签：1000
• !important 生命的样式优先级最高，如何冲突再进行计算
• 如果优先级相同，则选择最后出现的样式
• 继承得到的样式的优先级是最低的

5CSS3新增的伪类有哪些?

(以下以p元素为基点)
p:first-of-type 选择属于其父元素的首个元素
p:last-of-type 选择属于其父元素的最后一个元素
p:only-of-type 选择属于其父元素的唯一一个元素
p:nth-child(num)  选择属于其父元素的第num个元素
p:nth-last-child(num) 选中属于其父元素倒数第num个元素
p:nth-child(even) 选择属于其父元素的偶数元素(even 或者是 2n) 
p:nth-child(odd) 选择属于其父元素的奇数元素(odd 或者是 2n-1) 
：enabled  
：disabled 内容不可选中
：checked 单选框或者复选框被选中  

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

居中div(垂直)：

margin:0 auto;

居中浮动元素：

	float：left；
	position：absolute；
	width：200px；
	height：200px；
	left：50%；
	top：50%；
	margin:-100px 0 0 -100px

绝对定位的左右居中：

position：absolute；
width：200px；
height：200px；
margin：0 auto；
left：0；
right：0；

7display有哪些值？说明他们的作用

display-inline(默认) 把元素转换为内联元素
display-none 隐藏元素
display-block 把元素转换为块元素
display-table 元素块级表格显示
display-inline-block 默认宽度为内容宽度，可设置宽高，
display-list-item 元素想块类型元素一样，并添加样式列表标记
inherit 规定从父元素继承display属性的值

8position的值？

static(默认) 按照正常文档里进行排列
relative 相对定位，不脱离文档流，以自身静态位置为参考，通过left bottom right top 定位
absolute 绝对定位，以距其最近的一个不为static的父级元素为参考，通过 L B R T（省略） 定位
fixed 固定定位，以可视窗口为参考对象进行定位，固定值；

9css3有哪些新特性？

RBGA 和透明度
background-image 背景图片 background-origin 基点
word-warp 对长的不可分割单词进行换行。 word-warp：break-word
text-shadow 文本阴影， 5px 5px 5px red (水平阴影，垂直阴影，模糊距离，阴影颜色)
font-face 定义自己的字体
border-radius 圆角样式 5px 5px 5px 5px (左上角 右上角 ，右下角，左下角)
5px 5px 5px (左上角 右上角和左下角 ， 右下角)
5px 5px (左上角和右下角，右上角和左下角)
5px （全部角）
边框图片：border-image ：url(图片地址) 30 30 round
盒子阴影 box-shadow 10px 10px 5px #0000cd (解释见上方文本阴影)
媒体查询：定义两套css，当浏览器尺寸发生变化时，会采用两套不同的css

10 请解释一下css3的flexbox(弹性盒子布局模型) ，以及适用场景？

该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局中，block布局是把块在垂直方向从上到下依次排列的

而inline布局则是在水平方向来排列，弹性盒子布局并没有这样内在的方向限制，可以自由开发人员自由操作
适用：弹性布局适合于移动端的开发，在Android和Ios上也完美的支持

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

#str{
				width: 0;
				height: 0;
				border-top:20px solid transparent;
				border-bottom:20px solid red;
				border-right: 20px solid transparent;
				border-left: 20px solid transparent;
			}
		//创建一个div 不设置高宽，四个方向的边框，三个设置为透明。只显示一个方向的边框，

12一个满屏品字布局如何设计？

第一种真正的品字：
三块高宽是确定的
上面那块用marign：0 auto居中
下面两块用float浮动或者inline-block不换号
用margin外边距调整位置使他们居中
第二种全屏的品字布局：
上面的div设置为100%；
下面的div分别为宽50%；
然后使用float或者inline使其不换号

13常见的兼容问题？

• 不同的浏览器的标签默认内边距和外边距不一样
  *{padding：0；margin：0；}
• IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示
  的margin比设置的大，hack：display：inline；将其转换为行内属性
• 渐进识别的方式，从总体中逐渐排出局部。首先，巧妙的使用9这一标记， 将IE浏览器从所有情况中分离出来，接着，再次使用+将ie7和ie8
  ie6 分离出来，这样ie8就能独立识别

{background-color:#f1ee18;
/*所有识别*/
.background-color:#00deff\9; 
/*IE6、7、8识别*/
+background-color:#a200ff;
/*IE6、7识别*/
_background-color:#1e0bd1;
/*IE6识别*/}

• 设置较小高度标签，在ie6 ie7中高度超出自己设置高度，hack：给超出高度的标签设置overflow：hidden；
• IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute（）获取自定义属性(统一解决方法)
• Chrome 中文界面下默认会将小于12px的文本强制按照12px显示，可以通过加入CSS属性
  -webkit-text-size-adjust：none ； 解决；
• 超链接访问后hover样式就不见了，被点击访问过的超链接不再具有hover样式，解决方法：改变css属性的排列顺序。L-V-H-A（love
  hate）： a:link{} a:visited{} a:hover{} a:active{}

14 为什么要初始化css样式?

因为浏览器的兼容问题，每个浏览器显示的都多多少少有些不同，会影响用户的体验性，

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

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

16 CSS里的visibility属性有个collapse属性值，在不同浏览器显示下会有什么区别？

	当一个元素的visibility属性被何止成collapse后，对于一般的元素而言，它的表现和hidden是一样的
	Chrome中，使用collapse值和使用hidden没有区别，
	Firefox Opera  IE 使用collapse和使用display：none 没有区别。

17 display：none 和 visibility ：hidden的区别？

display：none  不显示对应元素，在文档布局中不占据空间(回流+重绘)
visibility：hidden 隐藏元素，在文档布局中保留对应空间。（重绘）

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

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

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

19：对BFC规定（块级格式化上下文：block formatting context）的理解？

BFC规定了内部的block box如何布局
定位方案：

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

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

8. 根元素，即HTML
9. float的值不为none
10. overflow的值不为visible
11. display的值为inline-block table-cell table-caption
12. position的值为absolute或者fixed

20 为什么会出现浮动和什么时候需要清除浮动？清除浮动的样式？

浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。
浮动元素会漂浮在文档流的块框上。

浮动带来的问题：

1. 父元素的高度无法撑开，影响与父元素同级的元素
2. 与浮动元素同级的非浮动元素会跟随其后
3. 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面的结构展示

清除浮动的方法：

• 父级div定义height
• 最后一个浮动元素后的元素添加样式 clear：both(代表左右浮动都可以清除)
• 包含浮动元素的父标签添加样式overflow为hidden或者auto
• 父级div定义zoom

21上下margin重合的问题

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

<div class="aside"></div>
<div class="text">
 <div class="main"></div>
</div>
<!--下面是css代码--> 
.aside {            
  margin-bottom: 100px;  
 width: 100px;            
  height: 150px;            
  background: #f66;
        }        
.main {           
    margin-top: 100px;            
    height: 200px;            
    background: #fcc;
        }
.text{            
/*盒子main的外面包一个div，
通过改变此div的属性使两个
盒子分属于两个不同的BFC，
以此来阻止margin重叠*/overflow: hidden;  
//此时已经触发了BFC属性。
        }
		
		 

22 设置元素浮动后，该元素的display值是多少?

自动变成display-block

23 移动端的布局的媒体查询？

通过媒体查询可以为不同大小尺寸的媒体定义不同的css，适应相应的设备

里边

<link rel="stylesheet" type="text/css" href="xxx.css" media ="only screen and (max-device-width:480px)">
css:@media only screen and (max-device-width:480px) 

24 使用css预处理器？

css预处理器定义了一种新的语言，css预处理器种类有几种：
sass：基于ruby 通过服务端处理，功能强大
less ：基于nodeJS 通过客户端处理，使用简单

25 css优化，提高性能的方法有哪些？

• 避免过度约束
• 避免后代选择符
• 避免链式选择符
• 使用紧凑的语法
• 避免不必要的命名空间
• 避免不必要的重复
• 最好使用表示语义的名字，
• 避免!important，可以选择其他选择器
• 尽可能的精简规则，你可以合并不同类里的重复代码(样式）

26 浏览器是怎样解析css选择器的？

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

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

使用偶数字体。
偶数字体相对更容易和web设计的其他部分构成比例关系。windows自带的点阵宋体从Vista开始值提供 12、14、16px这三个大小的点阵，而13、15、17px时用的是小一号的点，于是略显稀疏

28 margin和padding分别适合什么场景使用？

何时使用margin：
需要在border外侧添加空白
空白处不需要背景色
上下相连的两个盒子之间的空白，需要相互抵消时
何时使用padding
需要在border内测添加空白
空白处需要背景颜色
上下相连的两个盒子的空白，希望为两者之和

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

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

30 全屏滚动的原理是什么？用到了css的哪些属性？

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

overflow：hidden；
transition：all  1000ms  ease；

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

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

`<meta name='viewport' content=" width=device-width,initial-scale=1.maximum-scale=1,user-scalable=no"`>

32 视差滚动效果？

视差滚动(Parallax Scrolling) 通过在网页向下滚动的时候，控制背景的移动速度比之前景的移动速度慢来创建出令人惊叹的3D效果
css3实现
优点：开发时间短，性能和开发效率比较好，缺点是不能兼容到低版本的浏览器
JQuery实现
通过控制不同层滚动速度，计算每一层的时间，控制滚动效果
优点：能兼容到各个版本的，效果可控性好
缺点：开发起来对制作者要求高
插件实现
例如：parallax-scrolling 兼容性十分好

33 ::before 和 ::after中双冒号和单冒号的区别。并解释一下这两个伪元素的作用

单冒号用于css3伪类，双冒号用于css3的伪元素
::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在与DOM之中，只存在于页面中
::before 和 ::after 这两个伪元素，是在css2.1里新出现的，起初，伪元素的前缀使用的是单冒号语法，但是随着web的进化，在css3的规范里，伪元素的语法被修改成使用双冒号吗，成为::before ::after

34 你对inline-height的理解？

行高是指一行文字的高度，具体说是两行文字间基线的距离，CSS中起高度作用的是height和line-height，没有定义height属性，最终其表现作用一定是line-height
单行文本垂直居中，把line-height值设置为height一样大小的值可以实现单行文字的垂直居中，其实也可以把height删除。
多行文本垂直居中：需要设置display属性为inline-block

35 怎么让Chrome支持小于12px的文字？

p{
	font-size：10px；
	-webkit-transform：scale(0.8)
}

36 让页面里的·字体变清晰，变细用CSS怎么做？

-webkit-font-smoothing在window系统下没有起作用，但是在IOS设备上起作用
webkit-font-smoothing：antialiased是最佳的，灰度平滑

37 position：fixed ；在Android下无效怎么处理？

<meta name="viewport" 
content="width=device-width, 
initial-scale=1.0, 
maximum-scale=1.0, 
minimum-scale=1.0, 
user-scalable=no"/>

38 如果需要手动写动画，你认为最小时间间隔是多久？

多数显示器默认频率是60Hz，即一秒刷新60次，所以理论上最小间隔为1/60*1000ms=16.7ms

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

行框的排列会受到中间空白等的影响，因为空格也属于字符，这些空白也会被应用样式，占据空间，所以有间隔，把字符大小设置为0就没了(font-size：0)
解决方法：
可以将li代码全部写在一排，
浮动li中的float:left
在ul中用font-size：0 ；可以使用letter-space：-3px

40 display：inline-block 什么时候会显示间隙？

有空格时候会有间隙，解决：移除空格
margin正值的时候 解决：margin使用负值
使用font-size时候 解决：font-size：0、letter-spacing、word-spacing

41 有一个高度自适应的div 里面有两个div 一个 一个高度100px。希望另一个填满剩下的高度

外层div使用position：Relative；高度要求自适应的div使用

position：absolute；
top：100px：
bottom：0；
left：0；     

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

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

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

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

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

43 style标签写在body前和body后有什么区别？

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

44 css属性overflow属性定义溢出元素内容区的内容会如何处理？

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

45 阐述一个css sprites

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