介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？
CSS盒子模型：由四个属性组成的外边距(margin)、内边距(padding)、边界(border)、内容区(width和height);
标准的CSS盒子模型和低端IE CSS盒子模型不同：宽高不一样
标准的css盒子模型宽高就是内容区宽高；
IE低于版本8的浏览器 css盒子模型宽高 内边距﹢边界﹢内容区；
CSS选择符有哪些？哪些属性可以继承？
CSS 选择符：
id选择器(# myid)类选择器(.myclassname)标签选择器(div, h1, p)相邻选择器(h1 + p)子选择器(ul > li)后代选择器(li a)通配符选择器( * )属性选择器(a[rel = "external"])伪类选择器(a: hover, li:nth-child)
可继承的样式：
font-sizefont-familycolortext-indent
不可继承的样式：
borderpaddingmarginwidthheight
CSS优先级算法如何计算？
优先级就近原则，同权重情况下样式定义最近者为准;载入样式以最后载入的定位为准;3.!important > id > class > tagimportant 比 内联优先级高，但内联比 id 要高
CSS3新增伪类有那些？
p:first-of-type 选择属于其父元素的首个 p 元素的每个 p 元素。p:last-of-type 选择属于其父元素的最后p 元素的每个p 元素。p:only-of-type 选择属于其父元素唯一的p 元素的每个p 元素。p:only-child 选择属于其父元素的唯一子元素的每个 p元素。p:nth-child(2) 选择属于其父元素的第二个子元素的每个 p 元素。:enabled :disabled 控制表单控件的禁用状态。:checked 单选框或复选框被选中。
CSS3有哪些新特性？
- CSS3实现圆角（border-radius）
- 阴影（box-shadow）
- 对文字加特效（text-shadow、Word-wrap & Text-overflow ），
- 线性渐变（gradient）
- transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) > skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
- 增加了更多的CSS选择器 多背景 rgba
- 在CSS3中唯一引入的伪元素是 ::selection.
- 媒体查询 media，
- 多栏布局 -webkit-column-count: 3;
-webkit-column-rule: 1px solid #bbb;
-webkit-column-gap: 2em;- border-image
如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？
1、块状元素水平居中：
margin-left=auto；margin-right=auto；
2、浮动块状元素水平居中：
外包装块“float：left；position：relative；left：50%”；
内部块“float：left；position：relative；right：50%”
3、内容居中：
内联元素：text-align:center；vertical-align:middle
块状元素：
display:table-cell;vertical-align:middle;
若是单行内容：line-height=height
4、绝对定位元素垂直水平居中：
方法1：
.element {
width: 600px; height: 400px;
position: absolute; left: 50%; top: 50%;
margin-top: -200px; /* 高度的一半 */
margin-left: -300px; /* 宽度的一半 */
}
但这种方法优点是兼容性较好，缺点是需要提前知道元素的尺寸，否则margin负值的调整无法精确。此时，往往要借助JS获得。
方法2：使用[CSS3]
CSS3的兴起，使得有了更好的解决方法，就是使用transform代替margin. transform中translate偏移的百分比值是相对于自身大小的，无需提前知道元素尺寸，其都是水平垂直居中显示的。但此方法兼容性不好。
.element {
width: 600px; height: 400px;
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%); /* 第一个50%为width的一半，第二个50%为height的一半 */
}
方法3：上下左右均0位置定位+“margin: auto”（推荐做法！）
.element {
width: 600px; height: 400px;
position: absolute; left: 0; top: 0; right: 0; bottom: 0;
margin: auto; /* 水平和垂直都居中 */
}
若只设置“margin-left:auto”+“margin-right:auto”,则仅水平居中；
若只设置“margin-top:auto”+“margin-bottom:auto”,则仅垂直居中；
display有哪些值？说明他们的作用。
position的值relative和absolute定位原点是？
1，relative（[相对定位]）的定位原点是以自己本省原来所在位置做为原点的。
2，absolute（[绝对定位]）的定位原点是离自己这一级元素最近的一级position设置为absolute或者relative的父元素的左上角为原点的，（当然，如果自己的所有父元素都没有设置position，那么就以body为定位原点)
3，static默认值。没有定位，元素出现在正常的流中
4，inherit 规定从父元素继承 position 属性的值。
5，fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。
请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？
用纯CSS创建一个三角形的原理是什么？
- 使用border的均分原理
- 设置不显示的边为透明
- 根据需要进行旋转
经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？
-
png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.
-
浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;}
这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——display:inline;将其转化为行内属性。(这个符号只有ie6会识别)
渐进识别的方式，从总体中逐渐排除局部。
首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。
接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
css
.bb{
background-color:#f1ee18;/所有识别/
.background-color:#00deff\9; /IE6、7、8识别/
+background-color:#a200ff;/IE6、7识别/
_background-color:#1e0bd1;/IE6识别/
}
-
IE下,可以使用获取常规属性的方法来获取自定义属性,
也可以使用getAttribute()获取自定义属性;
Firefox下,只能使用getAttribute()获取自定义属性。
解决方法:统一通过getAttribute()获取自定义属性。 -
IE下,even对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。 -
解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
-
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,
可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。 -
超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
行框的排列会受到中间空白（回车\空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，
解决方案
- 把字符大小设为0，就没有空格了。
- 将结束尖括号和开个li的开始尖括号写一起 li><li
- 使用注释符来衔接
为什么要初始化CSS样式。
-
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
-
当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。
最简单的初始化方法： * {padding: 0; margin: 0;} （强烈不建议）
淘宝的样式初始化代码：
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; }
absolute的containing block计算方式跟正常流有什么不同？
CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？
position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？
对BFC规范(块级格式化上下文：block formatting context)的理解？
CSS权重优先级是如何计算的？
请解释一下为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式
移动端的布局用过媒体查询吗？
使用CSS预处理器吗？喜欢那个？
CSS优化、提高性能的方法有哪些？
浏览器是怎样解析CSS选择器的？
在网页中的应该使用奇数还是偶数的字体？为什么呢？
margin和padding分别适合什么场景使用？
◆何时应当使用margin
需要在border外侧添加空白时。
空白处不需要背景（色）时。
上下相连的两个盒子之间的空白，需要相互抵消时。如15px+20px的margin，将得到20px的空白。
◆何时应当时用padding
需要在border内测添加空白时。
空白处需要背景（色）时。
上下相连的两个盒子之间的空白，希望等于两者之和时。如15px+20px的padding，将得到35px的空白。
元素竖向的百分比设定是相对于容器的高度吗？
可见对于height属性取值百分比，是现对于容器高度的
全屏滚动的原理是什么？用到了CSS的那些属性？
什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？
视差滚动效果，如何给每页做不同的动画？（回到顶部，向下滑动要再次出现，和只出现一次分别怎么做？）
- 利用background-attachment属性实现。
background-attachment: fixed || scroll || local
默认情况下，此属性取值scroll，页面滚动时，内容和背景一起运动，如果取值fixed，背景相对浏览器固定。 - 通过js控制
在页面滚动过程中，我们获取页面的scrollTop的值，根据不同参数值去设置各自scene的top值，这样滚动页面的时候，不同的速度就出来了
::before和:after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。
单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
你的直觉是:before和:after伪元素可能是 插入的内容会被注入到目标元素的前或后注入。但是，正如上面提到的，不是这样的。
<p class="box">Other content.</p>
p.box {
width: 300px;
border: solid 1px white;
padding: 20px;
}
p.box:before {
content: "#";
border: solid 1px white;
padding: 2px;
margin: 0 10px 0 0;
}
n458945478927.jpg
外面的盒子是这个段落。围绕有散列符号的边框表示伪元素的边界。所以，不是插入“before”到段落，而是伪元素被置于到此段落的“Other content”的前面。
如何修改chrome记住密码后自动填充表单的黄色背景 ？
chrome表单自动填充后，input文本框的背景会变成偏黄色的，这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性，然后对其赋予以下样式：
input:-webkit-autofill {
background-color: #FAFFBD;
background-image: none;
color: #000;
}
但是私有属性已经无法重写
情景一：input文本框是纯色背景的
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
border: 1px solid #CCC!important;
}
思路二： 关闭浏览器自带填充表单功能
设置表单属性 autocomplete="off/on" 关闭自动填充表单，自己实现记住密码
<!-- 对整个表单设置 -->
<form autocomplete="off" method=".." action="..">
<!-- 或对单一元素设置 -->
<input type="text" name="textboxname" autocomplete="off">
你对line-height是如何理解的？
基线位置是由字体确定的，css的line-height指的是一行字的高度，包含了字间距，实际上就是下一行的基线到上一行的基线距离。
单行文字的垂直居中对齐
网上都是这么说的，把line-height值设置为height一样大小的值可以实现单行文字的垂直居中。这句话确实是正确的，但其实也是有问题的。问题在于height，看我的表述：“把line-height设置为您需要的box的大小可以实现单行文字的垂直居中”，差别在于我把height去掉了，<b>这个height是多余的</b>
<div class="" style="line-height: 150px;border: 1px dashed #0062CC;">
单行文字居中
</div>
多行文字居中
<p style="line-height: 150px;border: 1px dashed #0062CC;">
<span style="display: inline-block;font-size:12px;line-height: 1.4em;">
这里是高度为150像素的标签内的多行文字，文字大小为12像素。
<br>这里是第二行，用来测试多行的显示效果。
</span>
</p>
设置元素浮动后，该元素的display值是多少？
自动变成display:block
怎么让Chrome支持小于12px的文字？
chrome可以设置该私有属性，但是新版的chrome已经静止设置了
-webkit-text-size-adjust: none;
现在需要使用tramslate:scale(0.8);缩放的方式来缩小字体
p span{
font-size: 12px;
display: block;
transform: scale(0.8);
}
让页面里的字体变清晰，变细用CSS怎么做？（-webkit-font-smoothing:antialiased;）
-webkit-font-smoothing
它有三个属性值：
none ------ 对低像素的文本比较好
subpixel-antialiased------默认值
antialiased ------抗锯齿很好
font-style属性可以让它赋值为“oblique” oblique是什么意思？
可以理解成Italic是使用文字的斜体，Oblique是让没有斜体属性的文字倾斜！
如果需要手动写动画，你认为最小时间间隔是多久，为什么？
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms
display:inline-block什么时候会显示间隙？
移除空格
- 标签衔接
2.借助html注释符
使用margin负值
让闭合标签吃胶囊
使用font-size:0
overflow:scroll时不能平滑滚动的问题怎么处理？
-webkit-overflow-scrolling : touch;
有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。
Flex方法
.box {width:200px;height:300px;background:red;display:flex;flex-direction:column;}
.el1 {height:100px;background:green;}
.el2 {background:blue;flex:1}
png、jpg、gif这些图片格式解释一下，分别什么时候用。有没有了解过webp？
|格式 |压缩模式 |交错支持 |透明支持 |动画支持|
| ------------- |:-------------:| -----:|
|JPG |有损压缩 |支持 |不支持 |不支持|
|PNG |无损压缩 | 支持 | 支持 | 不支持 |
JPG的特性
1、支持摄影图像或写实图像的高级压缩，并且可利用压缩比例控制图像文件大小。
2、有损压缩会使图像数据质量下降，并且在编辑和重新保存JPG格式图像时，这种下降损失会累积。
3、JPG不适用于所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片。
PNG的特性
1、能在保证最不失真的情况下尽可能压缩图像文件的大小。
2、PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可存储多到16位的α通道数据。
3、对于需要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在Web页面上。
什么是 WebP？
WebP（发音 weppy，项目主页），
是一种支持有损压缩和无损压缩的图片文件格式，派生自图像编码格式 VP8。根据 Google 的测试，无损压缩后的 WebP 比 PNG 文件少了
45％ 的文件大小，即使这些 PNG 文件经过其他压缩工具压缩之后，WebP 还是可以减少 28％ 的文件大小。
什么是Cookie隔离？（或者说：请求资源的时候不要让它带cookie怎么做）
style标签写在body后与body前有什么区别？
页面加载自上而下 当然是先加载样式
写在head标签中利于浏览器逐步渲染（resources downloading->CSSOM+DOM->RenderTree(composite)->Layout->paint）。具体渲染过程请参考http://delai.me/code/js-and-performance/
写在body标签后由于浏览器以逐行方式对html文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待
加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）
网友评论