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选择器: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
不可继承的样式:border
, padding
, margin
, width
, height
优先级(就近原则):!important
> [ id
> class
> tag
]
!important
比内联优先级高
4.CSS优先级算法如何计算?
元素选择器:1
class选择器:10
id选择器:100
元素标签:1000
!important
声明的样式优先级最高,如果冲突再进行计算。
如果优先级相同,则选择最后出现的样式。
继承得到的样式的优先级最低。
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居中?
div:
border: 1px solid red;
margin: 0 auto;
height: 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有哪些值?说明他们的作用?
inline
(默认)内联
none
隐藏
block
块显示
table
表格显示
list-item
项目列表
inline-block
行内块元素
8.position的值?
static
(默认):按照正常文档流进行排列;
relative
(相对定位):不脱离文档流,参考自身静态位置通过 top
, bottom
, left
, right
定位;
absolute
(绝对定位):参考距其最近一个不为static
的父级元素通过 top
, bottom
, left
, right
定位;
fixed
(固定定位):所固定的参照对像是可视窗口。
9.用纯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 #ff0000;
10.为什么要初始化CSS样式
因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。