前端CSS基础学习笔记3

#博学谷IT学习技术支持#

一、CSS三大特性

1.继承性

2.层叠性

3.优先级

        优先级公式：继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式< !important

注： !important写在属性值的后面，分号的前面； !important不能提升继承的优先级，只要是继承，优先级最低！！

权重计算：（0,0,0,0），从左往右（1、行内样式的个数；2、id选择器的个数；3、类选择器的个数；4、标签选择器的个数；注意点：如果 !important不是继承，优先级最高！！！）

比较的规则：从左往右一个一个的比较，如果某一位比较出来了，此时后面的统统不看！！！如果发现比较到最后权重是相同的，此时比较层叠性

权重计算题的步骤：1、判断选择器是否可以直接选中标签（如果不能直接选中 → 继承，优先级最低 → pass）；2、通过权重计算公式比较即可。

二、 PxCook的基本使用

1、量尺寸

2、吸颜色

3、psd文件在开发中直接获取数据

三、盒子模型

1.内容：content：width和height默认设置的是内容部分的宽高

2.边框：border：

        边框的粗细：border-width；边框的样式：border-style；边框的颜色：border-color

        连写：属性名border 属性值width style color 快捷键bd + tab

        border的单方向设置：border-方位名词（top，right，bottom，left）

        盒子大小初级计算公式：盒子实际大小 = 内容（content）+ 边框（border）

3.内边距：padding

作用：控制边框与内容之间的距离

取值：上右下左

padding的单方向设置：padding-方位名词

盒子大小的终极计算公式：盒子实际大小 = 内容（content）+ 边框（border）+ 内边距 （padding）

css3的盒模型：自动内减，box-sizing:border-box

4.外边距：margin

作用：控制边框以外盒子与盒子之间的距离