CSS基础——day5
一、css三大特性
1.层叠性
- 一个标签的同一个属性被多次重复设置，最后设置的一次会生效，其他的都会被层叠覆盖；
- 遵循--就近原则；
- 以上代码生效为
width： 100px；，将前面的 width： 300px；覆盖掉了。
2.继承性
- 有一些css属性子级元素或继承父级元素的样式，不需要单独设置，控制文字的相关属性（text-，font-，line-，color）几乎都可以被继承；
- 注意：
- 01、超链接a元素不会继承父级盒子的color颜色，因为浏览器默认给a设置默认的颜色样式，我们需要单独设置a的color颜色；
- 02、标题标签h1,h2,h3,h5,h6不会直接继承父级盒子的文字大小font-size，因为他们本身自己有默认的文字大小并且是em相对单位，我们得到的结果是我们设置父级文字大小乘以这个倍数；所以我们需要单独设置；
3.权重优先级
- 不同的选择器选择元素的时候权重大小不同，我们以基础选择器为参照，计算出我们自己选择器权重大小；
- 权重计算：
- 继承性是没有权重的，如果当前元素自己有样式，就不会继承父级的样式，所以继承没有优先级最低；
- 通配符选择器, （0,0,0,0）；
- 标签选择器，伪元素，的权重为1 （0,0,0,1）；
- 类选择器，伪类选择器，属性选择器的权重为10 （0,0,1,0）；
- id选择器的权重为100 （0,1,0,0）；
- 行内样式的权重为1000 （1,0,0,0）；
- 可以给样式设置 !important 提高权重 ，权重是无限大；
- 选择器优先级：继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
- 可以理解为：谁选择的范围越大，谁的优先级就越低；
权重叠加
- 实际开发中我们往往是按照复合选择器书写样式，所以我们就会将一些权重进行叠加计算,比如以下代码就可以计算出不同的权重值；
- .box li a 的权重值（1个类选择器，2个标签选择器） = 0,0,1,2 = 12
- .box li a:hover的权重值（2个类选择器，2个标签选择器） = 0,0,2,2 = 22
- 注意:权重叠加是不会有进位的，每一类基础选择器只能在自己的位置叠加，如果超过10也不能向前进位；
二、盒子模型
- 网页布局就是利用 CSS 摆放盒子，我们需要设置盒子的占位大小，设置盒子不同的摆放位置；
1.盒子模型组成的部分
- 一个完整的布局盒子主要包括内容content，边框border，外边距margin，内边距padding；
1.内容content：
2.边框border：
- 盒子的边框设置，border是有三个要素组成的：边框样式border-style，边框粗细border-width，边框颜色border-color
- 注意：边框样式border-style取值常见的有实线solid，虚线dashed，点线dotted；
- border的综合写法 ： 语法：border: 线条样式 线条粗细 线条颜色;（空格隔开）。
- 设置不同方向的边框 ：语法 ：
border-**方位名词**：线条样式 线条粗细 线条颜色；
- 设置单独某个方向的某个属性 ： 语法：
border-方位名词-属性：属性值；
3.外边距
- 作用： 设置两个盒子之间的距离；
- 设置不同方向的外边距 ： 语法：
margin-方位名词：值；
4.内边距
- 作用： 设置内容距离盒子边缘的距离；
- 设置不同方向的内边距 ：
padding-方位名词： 值;
