css优先级与盒子模型总结

分类 html

一、css优先级


1.基本优先级


!important 〉  行内样式  > id选择器  > 类选择器|伪类选择器  > 标签选择器  >  通用选择器  > 继承属性


2.综合优先级(只讨论选择器)


则下列选择器的优先级如何呢?

.a1 div{}

.a1 .a2{}

.a1 div .a2 span{}

#d1 div {}

#d1 .a1 {}

则他们比较优先级的原则是:

1,比较最高的优先级选择器的多少,多者胜;

2,最高的数量相等的时候,比较次高,多者胜;

3,依次类推


二、各种居中总结:


前提: 父盒子固定大小(宽高),其里面的“内容”在水平和垂直方向的居中对齐的常见做法:


1.水平居中:

A:“内容”为一行文字或文字性行内元素(span,a,b,u):在父盒子上设置text-align:center;

B:“内容”为具有一定形状的行内元素(如img,input,textarea):同文字(A)

C:“内容”为块元素: margin:0 auto;


2.垂直居中:

A:“内容”为一行文字或文字性行内元素(span,a,b,u):在父盒子上设置line-height为父盒子的高度;

B:“内容”为具有一定形状的行内元素(如img,input,textarea):同块元素(C)

C:“内容”为块元素: 在块元素上设置:position:relative;top为父盒子高度一半;margin-top为该块元素高度一半的负值


3.外部居中:

img与textarea与其紧挨着的文字垂直居中对齐:设置其vertical-align:middle;

input与紧挨着的文字自然垂直居中


相关教程推荐:html教程css3教程