原文链接:https://www.jianshu.com/p/f60b619aa52b
相关知识点
布局、 浮动、 盒子模型、 弹性和模型、 选择器优先级、 居中定位、 兼容性、 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)
标签选择器(div、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:last-of-type 选择属于其父元素的最后
元素的每个
元素。
p:only-of-type 选择属于其父元素唯一的
元素的每个
元素。
p:only-child 选择属于其父元素的唯一子元素的每个
元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个
元素。
:enabled、:disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。
如何居中div,如何居中一个浮动元素?
给div设置一个宽度,然后添加margin:0 auto属性
div{
width:200px;
margin:0 auto;
}
如何居中一个浮动元素
确定容器的宽高,如宽500、高 300的层,设置层的外边距
.div {
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/
div{
}
/权重为10/
.class1{
}
/权重为100/
#id1{
}
/权重为100+1=101/
#id1 div{
}
/权重为10+1=11/
.class1 div{
}
/权重为10+10+1=21/
.class1 .class2 div{
}
如果权重相同,则最后定义的样式会起作用,但是应该避免这种情况出现。
如何理解表现与内容相分离?
表现与结构相分离简单的说就是HTML中只有标签元素 表现完全是由CSS文件控制的。
如何定义高度为1px的容器?
div{
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设置透明属性
![](“1.jpg”)
![](”1.jpg”)