学习：CSS（5）【三大特性+盒子模型】

一.三大特性

层叠性,继承性,优先级

1.层叠性

(1)解决给相同的选择器设置相同的样式,一个样式会将另一个样式覆盖

(2)原则

• 遵循就近原则,哪个样式离结构进就执行哪个
• 样式不冲突,不会层叠

2.继承性 

(1)概念

子标签继承父标签的某些样式,如文本颜色和字号

(2)特点

• 可以简化代码,降低CSS样式的复杂性
• 继承的样式(text,font-,line-这些开头的样式,以及color属性)

 (3)行高的继承性 

body {

font:12px/24px "Microsoft yahei";

}

或者

•  1.5(不跟单位)表示当前文字大小的1.5倍
• 如果子元素没有设置行高,则继承父元素的1.5
• 可以根据子元素自己的文字大小自动调整行高

3.优先级

(1)发生场景

一个元素甚至多个选择器时,就会有优先级的产生

(2)原则

• 选择器相同则执行层叠性
• 选择器权重

• 级别依次增大
• 等级判断由左到右
• 继承的权重是0
• a链接,浏览器默认指定了一个样式

(3)!important(重要的)

如果给任意一个选择器后面的样式添加了!important,则优先执行

语法

4.权重叠加

复合选择器权重可以叠加,但不会有进位的问题

如

a--标签选择器,hover--伪类选择器,所以0,0,1,0+0,0,0,1

二.盒子模型

网页布局的三大核心:盒子模型,浮动和定位

1.网页布局过程

(1)准备网页相关元素(基本都是盒子--<div><span><p>)

(2)CSS设置样式盒子样式

(3)装内容

2.盒子模型的组成

(1)边框(border)

a.边框宽度(粗细),边框样式,边框颜色

b.语法

c.相关属性值

• border-width:一般使用px为单位
• 常用border-style:solid(实线边框)--dashed(虚线边框)--dotted(点线边框)

d.边框的复合写法

!没有顺序,空格隔开

e.边框的分开写法

• border-top:上边框
• border-bottom:下边框
• border-left:左边框
• border-right:右边框

f.表格的细线边框

border-collapse: collapse;

合并相邻的边框

g.注意

• 测量盒子的时候可以不测边框
• 加了边框,实际盒子的大小的变化

(2)内容(content)

各种网页元素

(3)内边距(padding)

内容和边框的距离

a.相关属性

单位:px

b.简写属性

• 1个值--代表上下左右
• 2个值--上下和左右
• 3个值--上和左右再到下
• 4个值--上右下左(顺时针)

c.注意

• 内容和边框有了实际距离
• 内边距也影响盒子的大小
• 盒子的width/height减去多出来的内边距的大小
• 不指定宽度内边距就不会撑大盒子

d.特殊使用场景

根据文本内容的不同设置盒子时,可以直接设置相同的内边距(需要单独去计算)

(4)外边距(margin)

盒子和盒子之间的距离

a.相关属性

外边距简写的方式和padding的一样

b.整个盒子的大小

c.应用

让块级盒子水平居中

1)满足条件

1. 盒子指定了宽度
2. 左右外间距设置为auto

2)写法

d.嵌套块元素垂直外边距的塌陷问题

1)情况

对于两个嵌套关系的块元素,父元素有上外边距,子元素也有,此时父元素会塌陷较大的外边距值

2)解决方法

常用第三种方案,不会增加盒子的大小

e.清楚内外边距

行内元素尽量只设置左右边距,不要设置上下边距,但是转换为块级和行内块元素即可