相关知识点
布局、 浮动、 盒子模型、 弹性和模型、 选择器优先级、 居中定位、 兼容性、 hack写法......
如何理解CSS的盒子模型？每个HTML元素都是长方形盒子。 （1）盒子模型有两种：IE盒子模型、标准W3C盒子模型；IE的content部分包含了border和pading。 （2）标准W3C盒模型包含：内容(content)、填充(padding)、边界(margin)、边框(border)。
link和@import的区别？
（1）link属于XHTML标签，而@import是CSS提供的。 （2）页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载。 （3）import只在IE 5以上才能识别，而link是XHTML标签，无兼容问题。 （4）link方式的样式权重高于@import的权重。 （5）使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？CSS 3新增伪类有哪些？
id选择器（# myid） 类选择器（.myclassname） 标签选择器（p、h1、p） 相邻选择器（h1 + p） 子选择器（ul < li） 后代选择器（li a） 通配符选择器（ * ） 属性选择器（a[rel = "external"]） 伪类选择器（a: hover, li: nth - child） 可继承： font-size font-family color, UL LI DL DD DT; 不可继承 ：border padding margin width height ; 优先级就近原则，样式定义最近者为准，载入样式以最后载入的定位为准。 优先级为： !important > id > class > tag important 比 内联优先级高 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 单选框或复选框被选中。
如何居中p，如何居中一个浮动元素？
给p设置一个宽度，然后添加margin:0 auto属性
p{
width:200px;
margin:0 auto;
}如何居中一个浮动元素
确定容器的宽高，如宽500、高 300的层，设置层的外边距
.p {
Width:500px ; height:300px;//高度可以不设
Margin: -150px 0 0 -250px;
position:relative;相对定位
background-color:pink;//方便看效果
left:50%;
top:50%;
}经常遇到的浏览器的兼容性有哪些？原因、解决方法是什么？
（1）png24为的图片在IE6浏览器上出现背景，解决方案是做成PNG8。
（2）浏览器默认的margin和padding不同，解决方案是加一个全局的*{margin:0;padding:0;}来统一。
（3）IE6双边距bug:块属性标签float后，又有横行的margin情况下，在IE 6显示margin比设置的大。
（4）浮动ie产生的双边距问题：块级元素就加display：inline；行内元素转块级元素display：inline后面再加display：table。
.bb{
background-color:#f1ee18; /*所有识别*/
.background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff; /*IE6、7识别*/
_background-color:#1e0bd1; /*IE6识别*/
}常用Hack的技巧：
（1）IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute()获取自定义属性；
（2）Firefox下，只能使用getAttribute()获取自定义属性。解决方法：统一通过getAttribute()获取自定义属性。
（3）IE下，even对象有x,y属性，但是没有pageX,pageY属性；
（4）Firefox下，event对象有pageX,pageY属性，但是没有x,y属性。解决方法是条件注释，缺点是在IE浏览器下可能会增加额外的HTTP请求数。
（5）Chrome 中文界面下默认会将小于12px的文本强制按照12px显示，可通过加入 CSS属性-webkit-text-size-adjust: none;来解决。
（6）超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不再具有hover和active了，解决方法是改变CSS属性的排列顺序：
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}列出display的值，说明它们的作用。position的值里，relative和absolute定位原点是？
display的值： block 像块类型元素一样显示。 none 缺省值。像行内元素类型一样显示。 inline-block 像行内元素一样显示，但其内容像块类型元素一样显示。 list-item 像块类型元素一样显示，并添加样式列表标记。 relative和absolute定位原点： absolute：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。 relative：生成相对定位的元素，相对于其正常位置进行定位。
为什么要初始化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; }CSS是怎样定义权重规则的？
以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值：
/*权重为1*/
p{
}
/*权重为10*/
.class1{
}
/*权重为100*/
#id1{
}
/*权重为100+1=101*/
#id1 p{
}
/*权重为10+1=11*/
.class1 p{
}
/*权重为10+10+1=21*/
.class1 .class2 p{
}
如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现。如何理解表现与内容相分离？
表现与结构相分离简单的说就是HTML中只有标签元素 表现完全是由CSS文件控制的。
如何定义高度为1px的容器？
p{
heigh：1px;
width:10px;
background:#000;
overflow:hidden
}
IE 6下这个问题是默认行高造成的，overflow:hidden | zoom:0.08 | line- height:1px这样也可以解决。如何解决IE 6的3px问题？
_zoom:1; margin-left: value; _margin-left: value-3px;
Firefox下文本无法撑开容器的高度，如何解决？
清除浮动 .clear{ clear:both; height:0px; overflow:hidden;}怎么样才能让层显示在Flash之上呢?
解决的办法是给Flash设置透明属性 <param name="wmode" value="transparent" />或者<param name="wmode" value="opaque" />
cursor:hand在FF下不显示小手，如何解决？cursor; pointer;
在IE中内容会自适应高度，而FF不会自适应高度，怎么办？
在要自适应高度的层中加一个层，样式为
.clear{clear:both;font-size:0px;height:1px}，
这样解决有一个小小的问题，高度会多一个像素。还有一种解决方法，给当前层加上一个伪类。
#test:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}用纯 CSS 创建一个三角形的原理是什么？
把上、左、右三条边隐藏掉（颜色设为 transparent）
#demo {
width:0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}如何设计一个满屏“品”字布局？
简单的方式： 上面的p宽100%， 下面的两个p分别宽50%， 用float或inline使其不换行。
怎么让Chrome支持小于12px 的文字？
body{-webkit-text-size-adjust:none}前端页面有哪三层构成，分别是什么？作用是什么？
最准确的网页设计思路是把网页分成三个层次，即：结构层、表示层、行为层。 网页的结构层（structural layer）由HTML或XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。” 网页的表示层（presentation layer）由CSS负责创建。 CSS对“如何显示有关内容”的问题做出了回答。 网页的行为层（behavior layer）负责回答“内容应该如何对事件做出反应”这一问题。这是JavaScript语言和DOM主宰的领域。
::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。
单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。 伪元素由双冒号和伪元素名称组成。双冒号是在css3规范中引入的，用于区分伪类和伪元素。但是伪类兼容现存样式，浏览器需要同时支持旧的伪类，比如:first-line、:first-letter、:before、:after等。 对于CSS2之前已有的伪元素，比如:before，单冒号和双冒号的写法::before作用是一样的。 提醒，如果你的网站只需要兼容webkit、firefox、opera等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容IE浏览器，还是用CSS2的单冒号写法比较安全。
现在HTML5中css3可以写出一个旋转的立方体，请写出要用到的CSS属性。
-webkit-transform-style: preserve-3d; -webkit-transform: rotateY(30deg) rotateX(10deg); -webkit-animation: rot 4s linear infinite;
介绍一下 Sass 和 Less 是什么？它们有何区别？
Sass (Syntactically Awesome Stylesheets)是一种动态样式语言，语法跟css一样(但多了些功能)，比css好写，而且更容易阅读。Sass语法类似与Haml，属于缩排语法（makeup），用意就是为了快速写Html和Css。
Less一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。
区别：
(1))Sass是基于Ruby的，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出Css到浏览器，也可以在开发环节使用Less，然后编译成Css文件，直接放到项目中，也有Less.app、SimpleLess、CodeKit.app这样的工具，也有在线编译地址。
(2)变量符不一样，less是@，而Scss是$，而且变量的作用域也不一样，后面会讲到。
(3)输出设置，Less没有输出设置，Sass提供4中输出选项：nested, compact, compressed 和 expanded。
(4)Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持。文字本身的大小不兼容。
同样是font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的，ie下实际占高16px，下留白3px，ff 下实际占高17px，上留白1px，下留白3px，opera下就更不一样了。解决方案：给文字设定 line-height 。确保所有文字都有默认的 line-height 值。
IE6吞吃现象。
上下两个p，上面的p设置背景，却发现下面没有设置背景的p 也有了背景，这就是吞吃现象。对应上面的背景吞吃现象，还有滚动下边框缺失的现象。解决方案：使用zoom:1。这个zoom好象是专门为解决ie6 bug而生的。
IE6注释bug
注释也能产生bug~~~“多出来的一只猪。”这是前人总结这个bug使用的文案，ie6的这个bug 下，大家会在页面看到猪字出现两遍，重复的内容量因注释的多少而变。 解决方案：用“<!–[if !IE]> picRotate start <![endif]–>”方法写注释。
img 下的留白，如下代码：
<p> <img src=“1.jpg” /> </p> 把p的border打开，你发现图片底部不是紧贴着容器底部的，是img后面的空白字符造成，要消除必须这样写 <p> <img src=”1.jpg” /></p> 后面两个标签要紧挨着。ie7下这个bug 依然存在。解决方案：给img设定 display:block。
失去line-height
<p style=”line-height:20px”><img />文字</p>，很遗憾，在ie6下单行文字 line-height 效果消失了。原因是<img />这个inline-block元素和inline元素写在一起了。 解决方案：让img 和文字都 float起来。
clear层应该单独使用。也许你为了节省代码把clear属性直接放到下面的一个内容层，这样有问题，不仅仅是ff和op下失去margin效果，ie下某些margin值也会失效。
<p style=”background:red;float:left;”>dd</p> <p style=”clear:both;margin-top:18px;background:green”>ff</p>
ie 下overflow:hidden对其下的绝对层position:absolute或者相对层 position:relative无效。
解决方案：给overflow:hidden加position:relative或者position: absolute。 另，ie6支持overflow-x或者overflow-y的特性，ie7、ff不支持。
更多前端开发面试题总结之—CSS3 相关文章请关注PHP中文网！
Telefon tidak boleh bersambung ke set kepala Bluetooth
pemapar gambar windows tidak boleh memaparkan daripada memori
Bagaimana untuk memadam elemen dalam jquery
penyelesaian pengecualian instantiationexception
penggunaan atribut
Penyelesaian ralat 3004 tidak diketahui
Bagaimana untuk memformat cakera keras dalam linux
Penjelasan terperinci tentang pengendali anjakan java
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
