CSS笔记 - 知识点补充

知识点补充

目录

• 知识点补充
  • 1. 概念
    • 1.1 继承
    • 1.2 选择器权重
    • 1.3 长度单位
    • 1.4 外边距的折叠
    • 1.5 简写属性中的上下左右
  • 2. 属性
    • 2.1 display和visibility
    • 2.2 box-sizing
    • 2.3 轮廓，阴影和圆角
    • 2.4 元素层级
    • 2.5 行高
    • 2.6 文本的水平和垂直对齐
    • 2.7 文本修饰

1. 概念

1.1 继承

• 为一个元素设置的样式同时也会应用到它的后代元素上，这种特性称之为样式的继承

  继承发生在祖先和后代之间，利用继承可以将一些通用的样式统一设置到共同的祖先元素上

• 并不是所有的样式都会被继承，如背景样式，布局样式等都不会被继承

1.2 选择器权重

• 当通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时便发生了样式的冲突。此时就需要根据"选择器权重"判断使用哪个样式

  选择器种类	权重
  内联样式	1000
  id选择器	100
  类和伪类选择器	10
  元素选择器	1
  通配选择器	0
  继承的样式	没有优先级

• 比较优先级时，需要将所有的选择器的优先级进行相加计算，最后显示优先级高的

  选择器的累加不会超过其最大的数量级，如类选择器的优先级再高也不会比id选择器高

  如果优先级计算后相同，则此时优先使用靠下的样式

1.3 长度单位

• 像素：不同屏幕的像素大小不同，像素越小越高清的屏幕显示的效果越清晰

• 百分比：设定百分比可以使子元素跟随父元素的改变而改变

• em：em是相对于元素的字体大小来计算的(1em = 1font-size)，em的大小随字体大小改变

• rem：rem是相对于根元素的字体大小来计算

1.4 外边距的折叠

• 相邻的垂直方向外边距会发生重叠现象

• 兄弟元素：兄弟元素间的相邻垂直外边距会取两者之间的较大值（无需处理）

  父子元素：父子元素相邻外边距，子元素的外边距会传递给父元素（需要处理）

1.5 简写属性中的上下左右

• 本质是按顺时针方向设置的

  • 一个值：上下左右

  • 两个值：上下 左右

  • 三个值：上 左右 下

  • 四个值：上 右 下 左

2. 属性

2.1 display和visibility

• display用来设置元素的显示类型

  • inline 将元素设置为行内元素

  • block 将元素设置为块元素

  • inline-block 将元素设置为行内块元素，既可以设置宽度和高度又不会独占一行

  • table 将元素设置为一个表格

  • none 元素不在页面中显示

• visibility用来设置元素的显示状态

  • visible 默认值，元素在页面中正常显示
  • hidden 元素在页面中隐藏不显示，但是依然占据页面的位置

2.2 box-sizing

• box-sizing用来设置盒子尺寸的计算方式。盒子的可见框大小由内容区，内边距和边框共同决定
• 语法：
  • box-sizing: content-box：width和height用来设置内容区的大小
  • box-sizing: border-box：width和height用来设置整个盒子可见框的大小

2.3 轮廓，阴影和圆角

轮廓

• 用来设置元素的轮廓线，用法和border类似，但轮廓不会影响到可见框的大小
• 语法：outline: [粗度] [颜色] [样式]

阴影

• 用来设置元素的阴影效果，阴影效果不会影响页面布局
• 语法：box-shadow: [水平偏移量] [垂直偏移量] [阴影的模糊半径] [阴影的颜色]

圆角

• 用来设置圆角
• 语法：
  • 设定圆角：border-radius: [px/%]
  • 设定指定圆角：border-(top-left/top-right/bottom-left/bottom-right)-radius: [px/%]

2.4 元素层级

• 对于开启了定位的元素，可以通过z-index属性来指定元素的层级
  • z-index值越大，元素的层级越高，元素越优先显示
  • 若层级一样，则优先显示靠下的元素
  • 祖先元素的层级再高也无法覆盖后代元素

2.5 行高

• 行高是指文字占有的实际高度，它会在字体框的上下平均分配

• 可以通过line-height来设置行高。行高可以指定一个具体大小（px em）

  也可以直接为行高设置一个整数，行高将会是字体的指定的倍数

• 行高还经常用来设置文字的行间距，行间距=行高-字体大小

• 可以将行高设置为和高度一样的值，使单行文字在一个元素中垂直居中

2.6 文本的水平和垂直对齐

• text-align 设置文本的水平对齐方式
  • text-align:left 左侧对齐
  • text-align:right 右侧对齐
  • text-align:center 居中对齐
  • text-align:justify 两端对齐
• vertical-align 设置文本的垂直对齐方式
  • vertical-align:baseline 默认值，基线对齐
  • vertical-align:top顶部对齐
  • vertical-align:bottom底部对齐
  • vertical-align:middle居中对齐

2.7 文本修饰

• text-decoration设置文本修饰
  • text-decoration:none 什么都没有
  • text-decoration:underline 下划线
  • text-decoration:line-through 删除线
  • text-decoration:overline 上划线