深入CSS (上)

先来一段代码回顾一下知识吧

<article>
  <h1 class="title">拉森火山国家公园</h1> 
</article>

<style>
  .title{
    color:blue;
  }
  article h1{
    color:red;
  }
</style>
复制代码

📌 那么，h1中的文本内容是呈现什么颜色呢？
=> 越特殊的选择器，优先级越高👇

特异度

1.id > (伪)类 > 标签

2.有多个类名的元素可以通过叠加类选择器提高优先级

举例说明:

<button class="btn">1</button>
<button class="btn primary">2</button>

<style>
.btn{}
// 第二个button的样式将会覆盖.btn
.btn .primary{}
复制代码

样式继承

某些属性会自动继承其父元素的计算值，除非显式指定一个值 eg.  此时strong标签内的内容也会呈现蓝色

<p>test<strong>inherit</strong></p>

<style>
p{ color: blue}

复制代码

显式继承：

📌可以通过*选择对应的属性设置inherit，那么都会从父元素继承

布局

1.确定内容的大小和位置的算法
2.依据元素、容器、兄弟节点和内容等信息计算

布局相关技术

• 常规流布局

  1. 行级
  2. 块级
  3. 表格布局
  4. FlexBox
  5. Grid布局

• 浮动

• 绝对定位

• 宽高

• padding

  1. 指定元素四个方向的内边距 => 把内容往里面挤
  2. 百分数相对于容器宽度

• margin

  1. 指定元素四个方向的外边距 => 盒子向外扩展
  2. 取值可以是长度、百分数、auto(可以实现水平居中)
  3. 百分数相对于容器宽度
  4. 📌margin collapse