CSS三大特性

层叠性

• 基本概念：给相同的选择器设置了相同的样式，则此时一个样式就会覆盖（层叠）另一个冲突的样式。此时，层叠性就是为了解决样式冲突的问题。
• 层叠性原则：样式属性冲突的情况下，CSS遵循就近原则，即哪个样式离结构近，就执行哪个样式中的属性值；对于没有发生冲突的样式属性，则不会发生重叠。

继承性

• 基本概念：子标签会继承父标签的某些样式（并非全部样式），如文本的颜色和字体大小等。
• 使用优点：恰当地使用继承可以简化CSS代码，降低样式的复杂性。
• 根据文字大小自动调整行高：如果设置某个标签元素的font属性的字体/行高属性值类似于12px/1.5，表示父元素的文本的行高为字体大小的1.5倍；此时，该标签的子标签中的元素可以设置不同的字体，但是可以继承父元素的行高，即各自的文本行高都是各自的字体大小的1.5倍。这是实际开发过程中常用的一种方法。

优先级

• 基本概念：为同一个标签的某个属性设置了多个样式，则优先执行哪一个样式。
• 基本原则：
  • 选择器相同：如果设置不同样式的选择器都相同（例如都是类选择器），则变为层叠性的情况。
  • 选择器不同：根据选择器的权重进行执行，其实就是不同类型选择器的优先级。
    • 优先级顺序：通配符选择器 < 标签选择器 < 类选择器和伪类选择器 < ID选择器 < 行内样式表。
    • !important：在某个选择器的后面添加一个!important（例如 div {color: pink !important; }），则会默认此选择器具有最高的权重（优先级）。
    • 继承后的权重：继承得到的权重为0，子元素都会优先执行为自己定义的样式。
    • 复合选择器的权重：对于复合选择器，其权重是构成该复合选择器的多个选择器的权重之和。
    • 记忆方法：作用域越小，权重（优先级）越大。

CSS盒子模型

网页布局的核心和过程

• 网页布局的三大核心：盒子模型、浮动和定位。
• 网页布局过程：
  • 先准备好相关的网页元素，这些元素基本上都是盒子元素；
  • 接下来，利用CSS设置好盒子的样式，然后摆到相应的位置；
  • 最后，向盒子里面添加内容。

盒子模型的组成

• 基本概念：盒子模型就是把HTML界面中的布局元素视为一个矩形的盒子，也就是一个用来装内容的容器。
• 盒子模型的组成：包括边框、外边距、内边距和实际内容四个部分。
  • 边框：盒子的区域边缘构成一个边框；
  • 实际内容：盒子中的所有东西都属于盒子模型的内容；
  • 内边距：盒子中的内容离盒子边框的距离；
  • 外边距：盒子与其他盒子之间的距离。

盒子模型的边框

• 边框的三部分组成：边框宽度、边框样式、边框颜色。
• 设置语法：分别用border-width、border-style和border-color属性设置边框的宽度、样式和颜色。
  • border-width：一般将属性值设置为...px，即多少个像素宽；
  • border-style：常用的属性值包括solid（实线）、dashed（虚线）、dotted（点线）、none（无边框）等。
  • border-color：常用的属性值即各种各样的颜色字符串。
• 边框属性简写语法：使用border：边框宽度属性值、边框样式属性值、边框颜色属性值即可通过一个属性同时设置边框的三个特征，并且这几个特征之间没有先后顺序。
• 单独修改盒子的某一条边框：基于边框属性的简写，将其中的border属性修改为border-top、border-bottom、border-left和border-right即可单独修改盒子的某一条边框。
• border-collapse属性：如果将该样式的属性值设置为collapse，则会自动合并相邻的盒子的边框。
• 注意事项：边框的粗细会修改盒子模型的实际大小。

盒子模型的内边距

• 设置语法：使用padding属性设置盒子模型的内边距，即边框与内容之间的距离，属性值也是以像素px为单位的。
• 设置某一边的边距：分别使用padding-top、padding-bottom、padding-left、padding-right四个属性即可完成设置。
• 使用padding属性设置内边距：
  • 只接一个属性值：表示与四条边的内边距都等于该属性值。
  • 接两个属性值：前面的值表示与盒子模型的上下内边距，后面的值表示与盒子模型的左右内边距。
  • 接三个属性值：第一个值表示与上边的内边距，第二个值表示与盒子模型左右的内边距，第三个值表示与盒子模型下边的内边距。
  • 接四个属性值：分别按照顺时针表示上、右、下、左四条边的内边距。
• 注意事项： 修改内边距也会修改盒子模型的大小。这一个特点有时候不太好，但是有时候是可以利用的。另外，如果没有给盒子模型设置宽度属性weight，则使用padding设置内边距不会撑大盒子模型。

盒子模型的外边距

• 基本作用：设置盒子模型之间的距离。
• 使用语法：分别设置属性margin-left、margin-right、margin-top和margin-bottom即可设置盒子模型四条边的外边距。
• 简单写法：可以采用与padding类似的方式对盒子模型的外边距进行设置。
• 通过外边距设置盒子水平居中：将盒子模型的样式margin属性的属性值设置为auto即可。如果想要将行内元素或行内块元素设置水平居中，只需要给它们的父元素设置text-align:center样式即可。
• 塌陷问题：对于两个嵌套关系（父子关系）的块元素，父元素有上外边距的同时子元素也有上外边距，则此时父元素会塌陷较大的外边距值。此时，可以给父元素设置一种样式：overflow: hidden来避免这种情况。
• 清除内外边距：对于一些自带内外边距的网页元素标签，且一个一个设置去除内外边距的样式很麻烦，则此时可以使用通配符选择器，创建一个padding和margin属性值都为零的样式来清除所有标签的内外边距。
• 注意事项：对于行内标签元素，尽量只设置左右外边距而不要设置上下外边距，这是出于兼容性的考虑。如果一定要设置，应该优先考虑将行内标签元素转换为块标签元素或行内块标签元素。

CSS圆角边框

• 注意事项：该特性是CSS3才能使用的特性，如果浏览器的版本较低可能不能兼容。
• 使用语法：对需要采用圆角边框的HTML标签元素，只需要设置其border-radius属性的值即可。该属性的属性值也是以像素px为单位，是指当一个指定半径的圆与矩形边框的一个角的两条边相切的时候所产生的弧度。
• 另外一种属性值：可以用百分数作为该属性的属性值，该百分数表示圆的半径和长方形长的比。
• 只设置某个角为圆角：可以分别使用border-top-left、border-top-right、border-bottom-left和border-bottom-right属性设置该边框的某一个角为圆角。

CSS盒子阴影

• 基本作用：设置盒子模型的背后阴影；
• 使用语法：通过样式中的box-shadow属性即可为盒子模型添加阴影。其属性值如下：
  • h-shadow：必须参数。指定水平阴影相对于盒子向右平移的位置（允许负值）；
  • v-shadow：必须参数。指定垂直阴影相对于盒子向下平移的位置（允许负值）；
  • blur：可选参数。指定模糊距离；
  • spread：可选参数。指定阴影的尺寸；
  • color：可选参数。指定阴影的颜色；
  • inset：可选参数。将外部阴影修改为内部阴影。

CSS文字阴影

• 基本作用：为指定区域的文字设置阴影效果。
• 使用语法：使用text-shadow属性进行设置即可。
  • h-shadow：必须参数。指定水平阴影相对于文字向右平移的位置（允许负值）；
  • v-shadow：必须参数。指定垂直阴影相对于文字向下平移的位置（允许负值）；
  • blur：可选参数。指定模糊距离；
  • color：可选参数。指定阴影的颜色；