Jesho Ng Docs

Appearance

继承-层叠-元素类型 ​

1、属性继承 ​

  • 如果一个属性具备继承性, 那么在该元素上设置后, 它的后代元素都可以继承这个属性;
  • 当然, 如果后代元素自己有设置该属性, 那么优先使用后代元素自己的属性(不管继承过来的属性权重多高);
  • 常见的font-size/font-family/font-weight/line-height/color/text-align都具有继承性；

image-20240201222422799

2、属性的层叠 ​

  • 对于一个元素来说, 相同一个属性我们可以通过不同的选择器给它进行多次设置；

  • 那么属性会被一层层覆盖上去；

  • 但是最终只有一个会生效；

    • 判断一: 选择器的权重, 权重大的生效, 根据权重可以判断出优先级;
    • 判断二: 先后顺序, 权重相同时, 后面设置的生效;

3、选择器的权重 ​

  • !important：10000
  • 内联样式：1000
  • id 选择器：100
  • 类选择器、属性选择器、伪类：10
  • 元素选择器、伪元素：1
  • 通配符：0

4、HTML 元素的类型 ​

  • 块级元素（block-level elements）: 独占父元素的一行

    • 可以包含其他任何元素（比如块级元素、行内级元素、inline-block 元素）
    • 特殊情况，p 元素不能包含其他块级元素

  • 行内级元素（inline-level elements）: 多个行内级元素可以在父元素的同一行中显示

    • 只能包含行内级元素

5、display 属性 ​

CSS 中有个display属性，能修改元素的显示类型，有 4 个常用值

  • block：让元素显示为块级元素；

    • 独占父元素的一行
    • 可以随意设置宽高
    • 高度默认由内容决定

  • inline：让元素显示为行内级元素；

    • 跟其他行内级元素在同一行显示
    • 不可以随意设置宽高
    • 宽高都由内容决定

  • inline-block：让元素同时具备行内级、块级元素的特征；

    • 跟其他行内级元素在同一行显示
    • 可以随意设置宽高
    • 对外来说，它是一个行内级元素
    • 对内来说，它是一个块级元素

  • none：隐藏元素；

6、元素隐藏方法 ​

方法一: display 设置为 none ​

元素不显示出来, 并且也不占据位置, 不占据任何空间(和不存在一样);

html
<style>
	.box {
		display: none;
	}
</style>

<div class="box">this is a box</div>

方法二: visibility 设置为 hidden ​

设置为 hidden, 虽然元素不可见, 但是会占据元素应该占据的空间;

默认为 visible, 元素是可见的;

html
<style>
	.box {
		visibility: hidden;
	}
</style>

<div class="box">this is a box</div>

image-20240201223040648

方法三: rgba 设置颜色, 将 a 的值设置为 0 ​

rgba的 a 设置的是 alpha 值, 可以设置透明度, 不影响子元素;

html
<style>
	.box {
		color: rgba(0, 0, 0, 0);
	}
</style>

<div class="box">this is a box</div>

image-20240201223128060

方法四: opacity 设置透明度, 设置为 0 ​

设置整个元素的透明度, 会影响所有的子元素；

html
<style>
	.box {
		opacity: 0;
	}
</style>

<div class="box">this is a box</div>

image-20240201223205430

7、overflow 属性 ​

overflow用于控制内容溢出时的行

  • visible：溢出的内容照样可见

  • hidden：溢出的内容直接裁剪

  • scroll：溢出的内容被裁剪，但可以通过滚动机制查看

    • 会一直显示滚动条区域，滚动条区域占用的空间属于 width、height

  • auto：自动根据内容是否溢出来决定是否提供滚动机制