学IT到成都菁瑞优智

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

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

宽度（content+border+padding）+ margin

 2、 box-sizing属性？ 

用来控制元素的盒子模型的解析模式，默认为content-boxcontext-box：W3C的标准盒子模型，设置元素 

的height/width 属性指的是content部分的高/宽border-box：IE传统盒子模型。设置元素的height/width 

属性指的是border + padding + content部分的高/宽 

3、 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 比内联优先级高

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

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

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

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

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

 5、 CSS3新增伪类有那些? 

p:fifirst-of-type 选择属于其父元素的首个元素p:last-of-type 选择属于其父元素的最后元素p:only-of-type 

选择属于其父元素唯一的元素p:only-child 选择属于其父元素的唯一子元素p:nth-child(2) 选择属于其父元素 

的第二个子元素:enabled :disabled 表单控件的禁用状态。:checked 单选框或复选框被选中。 

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

div：

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

绝对定位的左右居中：

还有更加优雅的居中方式就是用flflexbox，我以后会做整理。 

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

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

8、 position的值？ 

static（默认）：按照正常文档流进行排列；relative（相对定位）：不脱离文档流，参考自身静态位置通过 

top, bottom, left, right 定位；absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, 

bottom, left, right 定位；fifixed(固定定位)：所固定的参照对像是可视窗口。 

9、 CSS3有哪些新特性？ 

1. RGBA和透明度 

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

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

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

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

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

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

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

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

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

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

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

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

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

第一种真正的品字：

1. 三块高宽是确定的； 

2. 上面那块用margin: 0 auto;居中； 

3. 下面两块用float或者inline-block不换行； 

4. 用margin调整位置使他们居中。 

第二种全屏的品字布局:上面的div设置成100%，下面的div分别宽50%，然后使用flfloat或者inline使其不换行。

 13 、  常 见 的兼容性问题？ 

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

2. *{margin:0;padding:0;} 

3. IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。hack：display:inline;将其转化为行内属性。 

4. 渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“9”这一标记，将IE浏览器从所有情况中分离出来。接着， 再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。 

5.{ background-color:#f1ee18; .background-color:#00deff\9;  +background- 

color:#a200ff; _background-color:#1e0bd1; } 

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

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

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

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

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

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

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

无论属于哪种，都要先找到其祖先元素中最近的position 值不为 static 的元素，然后再判断： 

1. 若此元素为 inline 元素，则 containing block 为能够包含这个元素生成的第一个和最后一个inline box 的 padding box (除 margin, border 外的区域) 的最小矩形； 

2. 否则,则由这个祖先元素的 padding box 构成。 

如果都找不到，则为initial containing block。 

补充： 

1. static(默认的)/relative：简单说就是它的父元素的内容框（即去掉padding的部分） 

2. absolute: 向上找最近的定位为absolute/relative的元素 

3. fixed: 它的containing block一律为根元素(html/body)