今天的知识点如下：1、CSS的三大特性 2、盒子模型 3、其他知识补充
一、CSS的三大特性
1、继承性：后代元素可以继承祖先元素的属性，和文字相关的属性都可以继承，如font-系列、text-系列、line-height 、color
注意：1、一个元素自己有对应的属性，那么就不会去继承祖先的元素
2、a标签的颜色需要单独设置
2、层叠性：在权重相同的情况下后渲染的CSS会覆盖先前渲染的CSS
3、优先级：优先级：一个标签可以被多个选择器选中，那么最终谁起作用，这个选择器的权重就最高
优先级的鄙视链：继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<! important
！important 只是针对单条属性 而不是选择器 尽量少用
权重叠加：当出现复合选择器的时候，会出现权重叠加
4、权重叠加
关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity，我们称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准 具体规范入如下：
二、盒子模型
1、边框：给盒子的周围添加一个边框
边框的组成：1、边框的宽度border-width 单位是px
2、边框的样式border-style 常用的值 solid实线 dashed虚线 dotted点状 double双实线
3、边框的颜色border-color 默认值是黑色
一般我们使用简写的方式如：border:1px solid red;
单一方向的边框写法：border-方位名字 border-left border-right border-top border-bottom
如border-left:1px solid red
特殊值：none 去除边框
单一方向单一属性写法：border-top-width:1px;
border-top-style:solid;
border-top-color:red;
2、内边距：介乎于内容和外边框之间
取值方式如下：（1）一个值 表示上下左右都是一样的
（2）两个值 第一个代表上下 第二个代表左右
（3）三个值 第一个代表上 第二个代表左右 第三个代表下
（4）四个值 上右下左 顺时针
单一方向的的写法：padding-方向值 如padding-top:10px padding-left:10px
注意：行内标签只能只设置 padding-left和padding-right
3、外边距：（1）不是用来修改盒子大小的，而是用来移动盒子的 （2）控制的是盒子与盒子之间的距离
属性值： 1、一个值 上下左右 如margin:10px;
2、两个值 上下 左右 如margin:10px 10px;
3、三个值 上 左右 下 如margin:10px 20px 10px;
4、四个值 上 右 下 左 顺时针方向 如margin:10px 20px 20px 10px;
单一方向属性：1、margin-top 使盒子向下移动
2、margin-right 使右边的盒子向右移动
3、margin-bottom 使下面的盒子向下移动
4、margin-left 使盒子向右边移动
特殊值：margin:0 auto; 使上下为0，左右自动，在页面的中的显示效果是水平方向居中
3、其他知识点补充
1、页面布局的套路：（1）划分盒子 （2）写结构 （3）初始化盒子（就是给盒子设置宽高背景颜色） （4）摆放盒子 （5）细节优化
2、进行布局的时候需要给所有的标签去除内外边距，使用方式如下：
* {
padding:0;
maring:0;
}
3、使用box-sizing进行自动缩减、使用list-style-type去除列表格式 使用格式如下:
（1）box-sizing:border-box;
（2）list-style-type:none;
嗯，今天就这么多，再接再厉。
网友评论