第六届360前端星计划_深入CSS

主讲人

• 赵文博
• 360前端技术专家
• 奇舞团

一、选择器的特异度(Specificity)

1. 提出问题：哪条规则生效？

  
拉森火山国家公园

2. 解决问题：选择器的特异度(Specificity)
   
   可以看成 122 > 22，所以第一个选择器的优先级更高。
   高优先级选择器会覆盖低优先级选择器相同属性的值，可以利用此特性实现CSS代码的复用。
   公共的样式复用，特殊的样式覆盖。
   例：

普通按钮
主要按钮

运行效果：

3. 继承：某些属性会自动继承其父元素的计算值，除非显式指定一个值。
举例：p元素、em元素、strong元素继承了body元素的字体大小，strong元素继承了p元素的颜色。

  This is a test of
  inherit

运行效果：

有些属性（比如：字体系列属性）可以继承，有些属性是不可以直接继承的（除text-indent、text-align之外的文本系列属性），此时需要inheit属性使它能够继承。
4. 显式继承inherit

* {
  box-sizing: inherit;    /*从父级获取*/
}

html {
  box-sizing: border-box;
}

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

5. 初始值

• CSS 中，每个属性都有一个初始值
  1）background-color 的初始值为 transparent（透明）
  2）margin-left 的初始值为 0
• 可以使用 initial 关键字显式重置为初始值
  background-color: initial （强迫设置初始值：透明）

二、CSS 求值过程

1. 布局（Layout）是什么?

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

2. 布局相关技术

• 常规流：行级、块级、表格布局、Flexbox、Grid 布局
• 浮动
• 绝对定位

3. 盒模型
   

1）width

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

2）height

• 指定 content box 高度
• 取值为长度(px、em)、百分数、auto
• auto 取值由内容计算得来（依赖子元素高度）
• 百分数相对于容器的 content box 高度
• 容器有指定的高度时，百分数才生效

3）padding

• 指定元素四个方向的内边距
• 百分数相对于容器宽度
  
  padding有1个值的时候：上下左右都是一个值。
  padding有2个值的时候：上下是第一个值，左右是第二个值
  padding有2个值的时候：依次表示上右下（左=右）的值
  padding有4个值的时候：依次表示上右下左的值
  

4） border：指定容器边框样式、粗细和颜色​​​​​​​

• 边框

• 三种属性
  border-width：边框粗细
  border-style：边框样式，none（无样式）、solid（实线）、dashed（虚线）、dotted（点状线）
  border-color：边框颜色

• 四个方向
  border-top
  boder-right
  border-bottom
  border-left

例子：

border: 1px solid #ccc;

border-left: 1px solid #ccc;
border-right: 2px dotted red;

border-width: 1px 2px 3px 4px;
border-style: solid;
border-color: green blue;

border-left-width: 3px;
border-top-color: #f00;

可以使用border画三角形
5）margin

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

使用 margin:auto 水平居中

• margin collapse
  上下相邻的margin会叠加，取较大值，相同时，取相同值。
  只会发生在垂直方向上，不会发生在水平方向上。
  在下边例子中，margin-bottom: 100px;margin-top:100px; 最后间距是100px。

运行结果

6）box-sizing

• 默认值：content+padding+boder的width和height。
• 设置border-box：包含boder在内的高度和宽度。
  

4. overflow

• 设置固定高度时，内容溢出时的处理
• 属性：visible（默认值）：显示超出的文字 ，hidden：超出的文字不可见，scroll：有滚动条 ，auto：超出时有滚动条，不超出时没有滚动条

5. 块级 vs. 行级
   块级元素有：div ul ol li dl dt dd h1 h2 h3 h4… p
   行内元素有：a b span img input select strong
   空元素：
   

   ---

   
   块级元素会生成块级的盒子：Block Level Box
   行级元素会生成行级的盒子：Inline Level Box，不能设置宽度和高度，由内容计算得到。
   
6. 块级元素与行级元素
   display: block：设置成块级元素
   display: inline：设置成行级元素
   
7. display

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

三、常规流 Normal Flow

流：按照某种流向摆放。

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

1. 行级排版上下文

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

  This is a paragraph of text with long word Honorificabilitudinitatibus. Here is an image
  
  And Inline Block

2. 块级排版上下文

• Block Formatting Context (BFC)
• 某些容器会创建一个BFC
  根元素
  浮动、绝对定位、inline-block
  Flex子项和Grid子项
  overflow 值不是 visible 的块盒

1）BFC 内的排版规则

• 盒子从上到下摆放
• 垂直 margin 合并
• BFC 内盒子的margin不会与外面的合并
• BFC 不会和浮动元素重叠

  This is a text and
  
block
  and other text. 

3. Flex Box 是什么？

• 一种新的排版上下文:Flex 排版上下文
• 它可以控制子级盒子的：
  摆放的流向 ( → ← ↑ ↓ )单向布局
  摆放顺序
  盒子宽度和高度
  水平和垂直方向的对齐
  是否允许折行

1）display: flex

• display: flex 使元素生成一个块级的 Flex 容器
• display: inline-flex 使元素生成一个行级的 Flex 容器

  
A
  
B
  
C

2）flex-direction
控制元素流向，默认从左到右。
flex-direction：row（默认值）从左到右
flex-direction：row-reverse 从右到左
flex-direction：colum 从上到下
flex-direction：colum-reverse 从下到上

3）Flexibility

• 可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩。
• flex-grow 有剩余空间时的伸展能力，默认值：0（不可伸展）
• flex-shrink 容器空间不足时收缩的能力，默认值：1（可收缩），0：不可收缩
• flex-basis 没有伸展或收缩时的基础长度，关键字：content（内容的宽度）
• flex可表示以上3个属性
  例：flex:1 1 auto
• flex-wrap：控制是否换行
  flex-wrap:nowrap（默认不换行）
  flex-wrap:wrap（换行）
  
  主轴：flex-direction，元素的流向
  侧轴：与主轴垂直
  
  主轴对齐：justify-content
  flex-start：左对齐
  flex-end：右对齐
  center：居中
  space-between：第一个元素和最后一个元素分别在两端，中间元素通过空白平分
  space-around：在首位元素的两边都加一些空白
  space-evenly：用相等的空白把元素分割开
  
  侧轴对齐：align-items
  属性
  flex-start：元素位于容器的开头。
  flex-end：元素位于容器的结尾。
  center：元素位于容器的中心。
  stretch：（默认值）元素被拉伸以适应容器。
  baseline：元素位于容器的基线上。
  
  自己特殊对齐：align-self
  属性
  auto：默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch”。
  flex-start：元素位于容器的开头。
  flex-end：元素位于容器的结尾。
  center：元素位于容器的中心。
  stretch：（默认值）元素被拉伸以适应容器。
  baseline：元素位于容器的基线上。
  

order：控制摆放顺序
默认值为0

4. Grid 布局（二维布局方式）

1）display: gird

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

第一步：划分网格：
grid-template-colums（列的划分），grid-template-rows（行的划分）
3种写法：
grid-template-colums: 100px 100px 200px；grid-template-rows: 100px 100px;
grid-template-colums: 30% 30% auto；grid-template-rows: 100px auto;
grid-template-colums: 100px 1fr 1fr；grid-template-rows: 100px 1fr;

第二步：指定区域
按照网格编号划分
Grid line 网格线

Grid area 网格区域 ：编号
属性
grid-row-start：指定开始显示项目的行。
grid-column-start：指定开始显示项目的列。
grid-row-end：指定停止显示项目的行线或要跨越的行数。
grid-column-end：指定停止显示项目的行线或要跨越的列数。
简写：grid-area: 1/1/3/3

四、浮动

文字环绕图片时：左浮动、右浮动。
例：

  
  
莫哈韦沙漠不仅...

1. position 属性

• static：默认值，非定位元素
• relative：相对自身原本位置偏移，不脱离文档流（相对定位）
• absolute：绝对定位，相对非 static 祖先元素定位
• fixed：相对于视口绝对定位

1）position: relative

• 在常规流里面布局
• 相对于自己本应该在的位置进行偏移
• 使用 top、left、bottom、right 设置偏移长度
• 流内其它元素当它没有偏移一样布局
  
  2）position: absolute
• 脱离常规流
• 相对于最近的非 static 祖先定位
• 不会对流内元素布局造成影响
  

页面标题

  

  
段落内容段落内容 1
  
段落内容段落内容 2
  
段落内容段落内容 3
  
段落内容段落内容 4

运行结果：box相对于根元素定位

3）position: fixed

• 相对于 Viewport 定位
• 不会随面滚动发生位置变化

  首页
  导航1
  导航2


  
1
  
2
  
3
  
4
  
5

返回顶部