CSS 总结

一、CSS三大特性：层叠性、继承性、优先级

层叠性

层叠性：就近原则。
分两种情况：

1. 同类选择器，第二个选择器样式会覆盖第一个选择器样式。
2. 在同一个选择器中，相同的属性会以最后一个为准。

继承性

继承性：子承父业
特殊：a标签不受影响因为它又自己的特性

优先级

优先级选择器：

• ！important > 行内样式 > id选择器 > 类名选择器 > 标签 >通配符选择器
• 本身选择器样式 >继承过来的样式
• 本身的样式 > 子代或后代
• ! important 可以直接把优先级提升至最高级。

权重

权重跟优先级类似。

• div ul li ------> 0,0,0,3
• .nav ul li ------> 0,0,1,2
• a:hover -----—> 0,0,1,1
• .nav a ------> 0,0,1,1
• #nav p -----> 0,1,0,1

二、CSS背景：背景透明度、背景位置

背景透明度

背景透明度有两种：

1. background-color：rgba;最后的这个a就代表的透明度。取值为0-1。0代表完全透明，1代表完全不透明。
2. opacity: ;也代表透明度，取值0-1。0代表完全透明，1代表完全不透明。

背景尺寸和位置

1、背景尺寸：background-size：；有两个值分别是x轴、y轴。
有两种书写方式：

• background-size:200px 200px;
• background-size:50% 40%;

2、背景位置：background-position：；默认是左上角
有两种书写方式：

• background-position：right top;
• background-position: 70% 20%;

注意：这两种都建议用百分比的方式。0

行高的测量

line-height: ;

• 属性值跟盒子的高度相同，则垂直居中。
• 属性值大于盒子的高度，则垂直靠下。
• 属性值小于盒子的高度，则垂直靠上。

三、CSS三大重点：盒子模型、浮动、定位

盒子模型

盒子模型：内容、边框、内外边距
网页布局本质：拼接盒子的过程，也就是div+css
1、给盒子添加边框：
border:1px solid red;

• 实线:solid
• 虚线：dashed
• 圆点线：dotted
• 双实线：double
  2、去掉边框
  border:none;
  去掉input的text输入框的时候也用这个，再加上outline:none,完全去掉轮廓。
  3、圆角边框属性
  border-radius: ；

前提：

• 盒子必须是正方形
• border-radius的属性值必须是盒子边长或者50%

注意：盒子不是正方形用border-radius就会出现非正常圆。

盒子的内边距

内边距：盒子中的内容跟盒子边框之间的距离
padding-top、paading-right、padding-bottom、padding-left
分别代表各个方向的内边距。
padding：上 右 下 左；

盒子的外边距

1、外边距：盒子边框跟其它元素或浏览器的距离
注意：

1. div盒子默认是8px的外边框，只是距离浏览器的。
2. 盒子的外边距不会影响盒子的尺寸
3. 盒子的水平居中是margin:auto。text-align：center可以让文本内容水平居中。

margin:上 右 左 下

注意：无论margin还是padding都有四个值，分别都是顺时针走的。同时都可以缩写。

2、外边距合并
分两种情况：外边距合并（外边距塌陷）、嵌套合并
第一种：两个独立的盒子外边距合并。如：上边一个盒子margin-bottom是20px，下面一个盒子margin-top是50px，那么他们之间的距离不是70px而是50px。
第二种：子元素在父元素上的外边距合并。
避免方法：

1. 给父元素添加边框

2. 给父元素添加内边框padding

3. 使用overflow：hidden;

      .