目录
1、 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型 有什么不同的?
1. 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型 有什么不同的?
标准盒子模型：宽度=内容的宽度（content）+填充(padding)+边框（border）+边界（margin）
低版本IE盒子模型：宽度=内容宽度（content+paddig+border）+边界（margin）
2. box-sizing 属性？
1.用来控制元素的盒子模型的解析模式，默认为content-box
2.content-box:WsC的标准盒子模型，设置元素的height/width属性指的是content部分的高/宽
3.border-box：IE传统盒子模型。设置元素的height/width属性指的是border+padding+content部分的高/宽（因为低版本IE盒子也就是传统盒子模型的content部分把border和padding计算了进去）
3. CSS选择器有哪些？哪些属性可以继承？
1.CSS选择器：
1.id选择器（#nbsp）
2.类选择器（.sbot）
3.标签选择器（div,p,hi）
4.相邻选择器（hi+p）
5.子代选择器（div>p）
6.后代选择器（div p）
7.通配符选择器（*）
8.属性选择器（a[rel="external"]）
9.伪类选择器（:after,a:hover）
2.可继承的属性：font-size,font-family,color
3.不可继承的样式：border,padding,margin,heigth,winth
4.优先级（就近原则）important>id>class>tag , important比内联优先级高
4. CSS优先级算法如何计算?
- 元素选择符： 1级（低级）
- class选择符：2级
- id选择符： 3级
- 元素选择符： 4级（高级）
(1) important声明的优先级最高，如果冲突再进行计算。
（2）如果优先级相同，则选择最后出现的样式。
（3）继承得到的样先级最低。
5. CSS3新増伪类有那些？
- p:first-fo-type选择属于其父元素的首个元素
- p:last-fo-type选择属于其父元素的最后元素
- p:only-fo-type选择属于其父元素唯一的元素
- p:only-child选择属于其父元素的唯一子元素
- p:Nth-child(2)选择属于其父元素的第二个元素
- :after在元素之前添加内容，也可以用来做清除浮动
- :before在元素之后添加内容
- enabled:disabled选择表单禁用状态
- :checked单选框和复选框被选中状态
6 .如何居中div?如何居中一个浮动元素？如何让绝对定位的 div居中？
- div:
border:1px solid red; margin:0 auto; herght:50px; width:80px; - 浮动元素的上下左右居中：
border:1px solid red; float:left; position:absolute; width:200px; height:100px; left:50%; top:50%; margin:-50px 0 0 -100px; - 绝对定位的左右居中：
border:1px solid black; position:absolute; width:200px; height:100px; margin:0 auto; left:0; right:0;
7. display有哪些值？说明他们的作用？
- block,块类型。默认宽度为元素宽度，可设置宽高，换行显示。
- none，缺省值。像行内元素类型一样显示。
- inline，行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
- inline-block，默认宽度为内容宽度，可设置宽高，同行显示。
- list-item，像块类型元素一样显示，并添加样式列表标记。
- table，此元素会作为块级表格来显示。
- inherit，规定应该从父元素继承display属性的值。
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-size-repeat word-weap(对长的不可分割单词换行)word-wrap:break-word
- 文字阴影：text-shadow:5px 5px 5px #FFOOOO;(水平阴影，垂直阴影，模糊距离，阴影颜色)
- font-face属性：定义自己的字体
- 圆角(边框半径)：border-radius属性用于创建圆角
- 边框图片：border-image:url(border.png)30 30 round
- 盒阴影：box-shadow:10px 10px 5px #888888
- 媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性
10. 请解释一下CSS3的flexbox （弹性盒布局模型）,以及 适用场景？
- 该布局模型的目的是提供一种更加高效的方式来针对容器中的条目进行布局，对齐和分配空间。在传统的布局方式中，block布局是把块在垂直方向从上到下依次排列的；而inline布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。
- 适用场景：弹性布局适合移动前端开发，在Android和ios上也完美支持。
11 .用纯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 #ffOOOO;12 .一个满屏品字布局如何设计?
1. 第一种真正的品字：
(1). 三块高宽是确定的；
(2). 上面那块用margin: 0 auto;居中；
(3). 下面两块用float或者inline-block不换行；
(4). 用margin调整位置使他们居中。
2. 第二种全屏的品字布局：
(1). 上面的div设置成100%
(2). 下面的div分别宽50%
(3). 然后使用float或者inline使其不换行。
13. 常见的兼容性问题？
- 不同浏览器的标签默认的margin和padding不一样。 (margin:0;padding:0;}
- IE6双边距bug:块属性标签float后，又有横行的margin情况下，在IE6 显示margin比设置的大。 hack: display:inline;将其转化为行内属性。
- 渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用"9"这一标 记，将IE浏览器从所有情 况中分离出来。接着，再次使用"+ "将IE8和IE7、IE6 分离开来，这样IE8已经独立识别。 ( background-color:#f1 ee 18;/* 所有识§U/ .background-color:#00deff\9; /IE6V 7、8 / +background-color:#a200ff;/IE6x 7 iRSU/ _background-color:#1e0bd1;/IE6 识SU*/ 设置较小高度标签(一般小于10px),在IE6, IE7中高度超出自己设置高度。height:给超出高度的标签设置。
- overflow:hidden;或者设置行高line-height小于你设置的高度。
- IE7,可以使用获取常规属性的方法来获取自定义属性，也可以使用 getAttribute()获取自定义属 性；Firefox 7,只能使用getAttribute()获取自定义 属性。解决方法:统一通过getAttributeO获取自 定义属性。
- Chrome中文界面下默认会将小于12px的文本强制按照12px显示，可通 过加入 CSS 属性-webkittext-size-adjust: none;解决。
- 超链接访问过后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构成。
- 如果都找不到，则为initial containing block
补充：
- static(默认的)/relative:简单说就是他的父元素的内容边框（即去掉padding的部分）
- absolute:向上找absolute/relative的元素
- fixed:它的containing block一律为根元素（html/body）
16 CSS里的visibility(能见度)属性有个collapse属性值？在不同浏览
器下会有什么区别？
当一个元素的visibility属性被设置成collapse值后， 对于一般元素，它的表现
跟 hidden(隐藏)是一样的 。
1.chrome(谷歌)中，使用collapse值和使用hidden没有区别。
2.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(盒子)如何布局。定位方式：
- 内部的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
20. 在网页中的应该使用奇数还是偶数的字体？为什么呢?
使用偶数字体，因为偶数字号相对更容易和web设计的其他部分构成比例关系。
Windows自带的点阵宋体（中易宋体），从Vista开始只提供12，14，16px这三个大小的点阵，而13，15，17px时用的是小一号的点（即每个字占的空间大了1px，但点阵没变），于是略显稀疏。
461
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
