day05

一、css三大特性

1、继承性（嵌套）

后代元素会默认继承部分父级的样式 ​ 能够继承的样式 ​ color ​ font系列 ​ text-indent 文本缩进 ​ line-height 行高 ​ line-style:none; 清楚li默认样式 ​ 继承的应用 ​ 某些情况下简化代码 ​ 给body设置文字颜色和文字大小 ​ 继承失效的情况 ​ a 不能继承颜色 ​ h 系列不能继承 文字大小 font-size

2、层叠性

div {
    color: red;
}
div {
    color: green;
}

此时div标签的颜色是绿色。

同样的选择器 选择相同的标签 设置相同的属性，此时样式覆盖，后写的样式生效 设置不同的样式，此时样式叠加，同时作用在标签上

3.优先级

特性：不同的选择器具有不同的优先级，优先级高的会覆盖优先级低的样式 优先级公式:继承<通配符先择期<标签选择器<类选择器<id选择器<行内样式<!important 注意点：继承的优先级最低，加上!important也没用 。 在开发中不建议!important

3.2权重的计算（了解）

 

比较规则：一级一级的比较，权重可以叠加但不能进位。

二、盒子模型

1、盒子模型的介绍

盒子模型分为：内容区域（content）、边框区域（border）、内边距区域（padding）、外边距区域（margin）

2、内容区域的宽度和高度（数字+px）

如果设置了width和height那么如果盒子内容超出宽高，也不会撑大盒子

3、边框（border）

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

连写设置 简写： bd + 回车 border: 1px solid #000; border: 宽度 样式 颜色; 注意：边框样式是必须写的 单独设置 简写：bdt bdr bdl bdb border-top: 1px solid #000; 边框样式：solid 实线 dashed 虚线 dotted 点线 注意：边框相连接的部分是斜边 应用： 三角形 单个属性 border-width 边框宽度 border-style 边框样式 border-color 边框颜色 边框会撑大盒子 手动内减

4、内边距（padding）

盒子内容距离盒子边界的距离 ​ 复合写法 ​ padding: 20px; 上右下左 全是 20px ​ padding: 20px 30px; 上下20px 左右30px ​ padding: 20px 30px 40px; 上20px 左右30px 下40px ​ padding: 20px 30px 40px 50px; 上右下左顺时针赋值 ​ 单方向设置 ​ padding-left pl ​ padding-right pr ​ padding-top pt ​ padding-bottom pb ​ padding会撑大盒子 ​ 手动内减 ​ CSS3盒子 模型：内减盒子模型 ​ box-sizing: border-box; ​ 不会撑大盒子的情况 ​ 块级元素嵌套，子元素没有设置宽度的时候，此时给子元素增加左右的padding和border不会撑大盒子

5、外边距（margin）

三、思维导图