深入CSS

深入CSS

360前端星计划-第三课
主讲：赵文博老师

选择器的优先级=》特异度(Specificity)

<button class="btn">普通按钮</button>
<button class="btn primary">主要按钮</button>
<style>
  .btn {
    display: inline-block;
    padding: .36em .8em;
    margin-right: .5em;
    line-height: 1.5;
    text-align: center;
    cursor: pointer;
    border-radius: .3em;
    border: none;
    background: #e6e6e6;
    color: #333;
  }
  .btn.primary {
    color: #fff;
    background: #218de6;
  }
</style>

继承

某些属性会自动继承其父元素的计算值，除非显式指定一个值

<p>
  This is a <em>test</em> of
  <strong>inherit</strong>
</p>

<style>
  body {
    font-size: 20px;
  }
  p {
    color: blue;
  }
  em {
    color: red;
  }
</style>

显式继承

* {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

.some-widget {
  box-sizing: content-box;
}

初始值

• CSS 中，每个属性都有一个初始值
  background-color 的初始值为 transparent
  margin-left 的初始值为 0
• 可以使用 initial 关键字显式重置为初始值
  background-color: initial

CSS 求值过程

布局（Layout）

布局相关技术

盒模型

width

• 指定 content box 宽度
• 取值为长度、百分数、auto
• auto 由浏览器根据其它属性确定
• 百分数相对于容器的 content box 宽度

height

• 指定 content box 高度
• 取值为长度、百分数、auto
• auto 取值由内容计算得来
• 百分数相对于容器的 content box 高度
• 容器有指定的高度时，百分数才生效

padding

• 指定元素四个方向的内边距
• 百分数相对于容器宽度

border

• 指定容器边框样式、粗细和颜色​​​​​​​

margin

• 指定元素四个方向的外边距
• 取值可以是长度、百分数、auto
• 百分数相对于容器宽度

块级 vs. 行级

块级元素与行级元素

display

• block 块级盒子
• inline 行级盒子
• inline-block 本身是行级，可以放在行盒中；可以设置宽高；作为 一个整体不会被拆散成多行
• none 排版时完全被忽略

常规流 Normal Flow

• 根元素、浮动和绝对定位的元素会脱离常规流
• 其它元素都在常规流之内（in-flow）
• 常规流中的盒子，在某种排版上下文中参与布局
  

行级排版上下文

• Inline Formatting Context (IFC)
• 只包含行级盒子的容器会创建一个IFC
• IFC 内的排版规则
  盒子在一行内水平摆放
  一行放不下时，换行显示
  text-align 决定一行内盒子的水平对齐
  vertical-align 决定一个盒子在行内的垂直对齐
  避开浮动(float)元素

块级排版上下文

• Block Formatting Context (BFC)
• 某些容器会创建一个BFC
  根元素
  浮动、绝对定位、inline-block
  Flex子项和Grid子项
  overflow 值不是 visible 的块盒
• BFC 内的排版规则
• 盒子从上到下摆放
• 垂直 margin 合并 BFC 内盒子的margin不会与外面的合并
• BFC 不会和浮动元素重叠

Flex Box

• 一种新的排版上下文
• 它可以控制子级盒子的：
  摆放的流向 ( → ← ↑ ↓ )
  摆放顺序
  盒子宽度和高度
  水平和垂直方向的对齐
  是否允许折行
• display: flex
  display: flex 使元素生成一个块级的 Flex 容器
  display: inline-flex 使元素生成一个行级的 Flex 容器

Grid 布局

• display: grid 使元素生成一个块级的 Grid 容器
• 使用 grid-template 相关属性将容器划分为网格
• 设置每一个子项占哪些行/列

浮动

position 属性

• static 默认值，非定位元素
• relative 相对自身原本位置偏移，不脱离文档流
  在常规流里面布局
  相对于自己本应该在的位置进行偏移
  使用 top、left、bottom、right 设置偏移长度
  流内其它元素当它没有偏移一样布局
• absolute 绝对定位，相对非 static 祖先元素定位
  脱离常规流
  相对于最近的非 static 祖先定位
  不会对流内元素布局造成影响
• fixed 相对于视口绝对定位
  相对于 Viewport 定位
  不会随面滚动发生位置变化