本帖最后由 AngularBaby 于 2018-5-3 17:04 编辑
1 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？ 标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin 低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin
2 box-sizing属性？ 用来控制元素的盒子模型的解析模式，默认为content-box context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽 border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽
3 CSS选择器有哪些？哪些属性可以继承？ CSS选择符： 可继承的属性： font-size font-family color
不可继承的样式 border padding margin width height
优先级（就近原则）： !important > [ id > class > tag ]
!important 比内联优先级高。
4 CSS优先级算法如何计算？ 元素选择符：1 class选择符：10 id选择符：100 元素标签：1000 5 CSS3新增伪类有那些? p:first-of-type 选择属于其父元素的首个元素 p:last-of-type 选择属于其父元素的最后元素 p:only-of-type 选择属于其父元素唯一的元素 p:only-child 选择属于其父元素的唯一子元素 p:nth-child(2) 选择属于其父元素的第二个子元素 :enabled :disabled 表单控件的禁用状态。 :checked 单选框或复选框被选中。
6 如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？ [CSS] 纯文本查看 复制代码 div {
border: 1px solid red;
margin: 0 auto;
height: 50px;
width: 80px;
}
浮动元素的上下左右居中： [CSS] 纯文本查看 复制代码 div {
border: 1px solid red;
float: left;
position: absolute;
width: 200px;
height: 100px;
left: 50%;
top: 50%;
margin: -50px 0 0 -100px;
}
绝对定位的左右居中： [CSS] 纯文本查看 复制代码 div {
border: 1px solid black;
position: absolute;
width: 200px;
height: 100px;
margin: 0 auto;
left: 0;
right: 0;
}
7 display有哪些值？说明他们的作用? inline（默认）--内联 none--隐藏 block--块显示 table--表格显示 list-item--项目列表 inline-block--行内块
8 position的值？ static（默认）：按照正常文档流进行排列； relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位； absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位； fixed(固定定位)：所固定的参照对像是可视窗口。
9 CSS3有哪些新特性？ RGBA和透明度 background-image，background-origin(content-box/padding-box/border-box)，background-size，background-repeat word-wrap（对长的不可分割单词换行），word-wrap：break-word 文字阴影： text-shadow：5px5px5px#FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色） font-face属性：定义自己的字体 圆角（边框半径）：border-radius 属性用于创建圆角 边框图片： border-image:url(border.png)3030round 盒阴影： box-shadow:10px10px5px#888888 媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性
10 请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景？ 该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。 试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。
11 用纯CSS创建一个三角形的原理是什么？ 首先，需要把元素的宽度、高度设为0。然后设置边框样式。 [CSS] 纯文本查看 复制代码 div {
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;
}
12 一个满屏品字布局如何设计? 第一种真正的品字： 第二种全屏的品字布局： 上面的div设置成100%，下面的div分别宽50%，然后使用float或者inline使其不换行。
13 常见的兼容性问题？ 1、不同浏览器的标签默认的margin和padding不一样。 [CSS] 纯文本查看 复制代码 * {
margin: 0;
padding: 0;
}2、IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。hack：display:inline;将其转化为行内属性。 3、渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“\9”这一标记，将IE浏览器从所有情况中分离出来。接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。 [CSS] 纯文本查看 复制代码 {
background-color: #f1ee18;
/*所有识别*/
.background-color: # 00deff \9;
/*IE6、7、8识别*/
+background-color: #a200ff;
/*IE6、7识别*/
_background-color: # 1e0bd1;
/*IE6识别*/
}4、设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度。hack：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。 5、IE下，可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性；Firefox下，只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。 6、Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust:none; 解决。 7、超链接访问过后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 的元素，然后再判断： 若此元素为 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)
16 CSS里的visibility属性有个collapse属性值？在不同浏览器下以后什么区别？ 当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。 17 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如何布局。 定位方案： 内部的Box会在垂直方向上一个接一个放置。 Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。 每个元素的margin box 的左边，与包含块border box的左边相接触。 BFC的区域不会与float box重叠。 BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。 计算BFC的高度时，浮动元素也会参与计算。
满足下列条件之一就可触发BFC： 20 为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？ 浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。 浮动带来的问题： 清除浮动的方式：
| 
收藏
淘帖
踩
