前端第五天学习CSS

1.CSS的三大特性

​ （1）继承性 子元素默认继承父元素的特点

​ color、文字类（font-size、font-style、font-weigth、font-family）、文本类（text-indent、text-align）、line-height可以继承

​ 特殊：a不能继承颜色 默认浏览器的颜色 蓝色加下划线

​ h系列不能继承字体大小

​ （2）层叠性

​ 给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上

​ 给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效​ 注意：

​ 当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

​ （3）优先级

​ 从小到大：继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

​ 权重叠加：复合选择器：行内，id选择器，类选择器，标签选择器（0,0,0,0）

​ 比较的时候一定是从左到右比较 如果相同的话就比较下一个，如果不同的话看谁的权重高，谁高用谁的 样式

​ 注意： :hover 伪类选择器也是（0,0,1,0） 权重是10

2.盒子模型

​ 组成部分： 内容（content）、边框（border）、内边距（padding）、外边距(margin)

​ （1）内容

​ （2）边框

​ border-width：边框粗细 取值：数字+px

​ border-style：边框样式 实线：soild 虚线：dashed 点线：dotted

​ border-color：边框的颜色

​ （3）内边距 从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！！

​ 一个取值 padding：10px; 只有一个值的话就是上下左右都是10px

​ 两个取值 padding：10px 20px; 两个值的话就是前边是上下 后边是左右的取值

​ 三个取值 padding：10px 20px 30px; 三个值的话就是第一个是上，第二个是右左，第三个是下

​ 四个取值 padding：10px 20px 30px 20px; 四个取值的话就是上、右、下、左。

​ 如果只想让单方向设置的话就是padding-left：10px; 就是左内边距是10px

​ padding不会撑开盒子的情况：块级盒子不设置宽度就是不会被撑开

​ 给盒子设置左右的padding或左右的border不会撑大盒子

​ （4）盒模型自动内减

​ 用box-sizing：boder-box； 浏览器自动计算多余的大小，自动的就会减去

​ （5）清除默认内外边距

​ 目的是清除浏览器默认的内外边距 保证盒子的正常情况，不影响布局