CSS 笔记

teGay8.jpg

!DOCTYPE (文档声明)

加入该语法(标准模式), 让浏览器以 标准模式(HTML 5) 识别代码

不加入, 则让浏览器以 怪异模式 识别代码

CSS 权重

选择器权重值(256进制)
!importantInfinity
行间样式1000
id100
class、属性、伪类10
标签、伪元素1
通配符0

注意: Infinity 并非数学意义上的 “Infinity”, 这里的 Infinity 就比 Infinity + 1 小

inherit 和 initial

inherit: 手动(强制)继承
initial: 初始值, 将该属性设置为默认值

img (object-fit 样式)

object-fit:

  • contain 在内容区内根据图片满比例缩放, 不溢出
  • fill 等比例铺满整个内容区, 不能保证图片比例
  • cover 铺满整个内容区, 并且保持比例正常, 但会有溢出隐藏

display 和 visibility 的区别

displye: none;

  • 不生成盒子, 可能会影响到后边元素的排列

visibility: hidden;

  • 生成盒子, 只是从视觉上移除盒子, 盒子仍然占据空间

常见伪类

:link

  • a标签未访问过触发

:visited

  • a标签访问过后触发

:hover

  • 鼠标进入区域触发

:active

  • 鼠标左键单击触发

:focus

  • 聚集

:checked

  • 单选框或多选框被选中

E:first-child

  • 第一个子元素, 第一个元素必须是 E 元素

E:first-of-type

  • 选中子元素中第一个指定的元素, 第一个 E 元素

E:last-child

  • 最后一个子元素, 最后一个元素必须是 E

E:last-of-type

  • 选中子元素中最后一个指定的元素, 最后一个 E 元素

E:nth-child(n)

  • n 填数值: 选中第n个元素, 并且必须是 E 元素
    n 填变量: n 从 0 开始递增, 选中第 n 个元素, 并且必须是 E 元素

E:nth-of-type

  • 选中指定的子元素中第几个 E 类型的元素

伪类的“爱恨”原则

如果以下四个伪类都出现, 则按照“爱恨原则”(love hate)的顺序进行渲染
:link
:visited
:hover
:active

常见伪元素

::before

  • 选择标签的第一个子元素

::after

  • 选择标签的最后一个子元素

::first-letter

  • 选中元素中的第一个文字

::first-line

  • 选中元素中的第一行文字

::selection

  • 选中被用户框选的文字

盒模型

  1. 标准盒模型
    • 总宽度 = width + padding(左右) + border(左右) + margin(左右)
    • 总高度 = height + padding(上下) + border(上下) + margin(上下)
  2. IE盒模型(怪异盒模型 box-sizing: border-box)
    • 总宽度 = width + margin(左右)
      • 其中 width = width(内容区) + padding(左右) + border(左右)
    • 总高度 = height + margin(上下)
      • 其中 height = height(内容区) + padding(上下) + border(上下)
    • 总宽高不受 padding, border 影响

背景颜色展示区域到底是 padding-box 还是 border-box ?

teGdOS.png

从上图中可以很清楚的看到, 背景默认展示到 border 区域

注意: 背景图片的显示区域默认是 padding-box, 不要和背景颜色混淆

行级元素 (inline)

行级元素也称: 内联元素、行内元素

特点

  • 内容决定元素宽高(宽高自适应)
  • 不能通过 CSS 改变宽高
  • 盒模型左右有效, 上下只会影响背景(不会实际影响占据空间)

常见行级元素

  • a
  • b
  • em
  • del
  • span
  • strong

块级元素 (block)

特点

  • 独占一行
  • 可以通过 CSS 改变宽高
  • 盒模型有效

常见块级元素

  • p
  • h(1~6)
  • ul
  • ol
  • li
  • div
  • form
  • address

行级块元素 (inline-block)

行级块元素也称: 行内块元素

特点

  • 内容决定元素宽高
  • 可以通过 CSS 改变宽高
  • 盒模型有效

如: img(可替换元素, 类似行级块元素)

可替换元素

特点

  • 可以通过 CSS 改变宽高
  • 盒模型有效

img、表单元素(input、form、select、iframe等)

弹性盒模型 (flex)

CSS3 新特性, IE10+ 兼容

特点

  • 默认水平从左至右为主轴, 垂直从上至下为交叉轴
  • 设为 flex 布局以后, 子元素的 float、clear、vertical-align 等属性将失效
  • margin: auto 自动吃满剩余空间

弹性容器规则

flex-flow: wrap direction (速写属性)

  • flex-wrap: wrap
    • 当子元素溢出时, 换行显示
  • flex-direction: row / column / row-reverse / column-reverse
    • 水平排列 / 垂直排列 / 水平倒转排列(主轴也会倒转) / 垂直倒转排列(主轴也会倒转)

justify-content: (主轴)

  • flex-start:
    • 从主轴的开始进行排列
  • flex-end:
    • 从主轴的结束进行排列
  • center:
    • 居中排列
  • space-between:
    • 分散排列
  • space-around:
    • 平均分布, 每个元素左右两边间距一致
  • space-evenly:
    • 平均分布, 每个元素之间和元素距离父元素边界之间平均分布

align-items: (交叉轴, 设置整个容器的对齐方式)

  • flex-start:
    • 对齐到交叉轴的起点
  • flex-end:
    • 对齐到交叉轴的结束
  • center:
    • 对齐到中心
  • stretch:
    • 内容(高度或宽度)填满交叉轴

align-content: (交叉轴, 设置多行容器的对齐方式)

  • flex-start:
    • 对齐到交叉轴的起点
  • flex-end:
    • 对齐到交叉轴的结束
  • center:
    • 对齐到中心
  • stretch:
    • 内容(高度或宽度)填满交叉轴
  • space-between:
    • 分散排列
  • space-around:
    • 平均分布, 每个元素左右两边间距一致
  • space-evenly:
    • 平均分布, 每个元素之间和元素距离父元素边界之间平均分布

弹性元素规则

align-self:

  • 单个元素交叉轴设置

flex: (速写属性)

  • flex-grow
    • 放大比例, 把主轴上剩余空间按比例分配(多栏布局)
  • flex-shrink
    • 根据弹性盒子元素所设置的收缩因子作为比率来收缩空间
  • flex-basis
    • 如果所有子元素的基准值之和大于剩余空间, 则会根据每项设置的基准值, 按比率伸缩剩余空间, 且优先级大于 width, height

order:

  • 设置在主轴在排列的先后, 默认都是 0, 数值越大离主轴越远

行级元素和块级元素嵌套关系

行级元素只能嵌套行级元素 (a 标签除外, 它几乎可以嵌套任何元素)

块级元素可以嵌套任何元素 (p 标签除外, 会被块级元素截断成两个 p 标签)

单行文本溢出打点展示三件套

  1. white-space: nowrap;
    • 强制性不换行
  2. overflow: hidden;
    • 溢出 border 隐藏
  3. text-overflow: ellipsis;
    • 溢出用…展示

常规流

行盒一定是常规流

float、absolute、fixed 都会让盒模型变成 block

注: 以下都是常规流块盒的内容, 行盒没什么好说的

每个块盒的总宽度, 必须刚好等于父级块盒的宽度

  • 宽度的默认值是 auto
  • width、margin 的取值可以是 auto
  • auto: 将剩余空间吸收掉
    • width 吸收能力强于 margin
      若 width + border + padding + margin 计算后, 仍有剩余空间, 则剩余空间被 margin-right 全部吸收
    • 设置固定的 width, 把 margin-left, margin-right 设置 auto 后可实现水平居中

块盒垂直方向上的 auto 值

  • height: auto, 适应内容的高度, 由内容撑开
  • margin: auto 表示 0

百分比取值

  • padding、width、margin 可以取值为百分比 (百分比相对于父级块盒的 width)
  • 高度 height 百分比:
    • 父级块盒的 height 没有设置, 子元素的 height 百分比无效
    • 父级块盒的 height 不取决于子元素的 height (如父级块盒定高), 子元素的 height 百分比有效

上下外边距合并 (margin 合并)

两个常规流块盒, 上下外边距相邻, 会进行合并, 两个外边距取最大值合并

解决方案

  • 兄弟元素: 直接改变其中一个外边距的值
  • 父子元素:
    • 给父级添加一个 border 或 padding
    • 创建 BFC

float (浮动)

特点

  • 当一个元素浮动后, 元素必为块盒(自动更改 display: block)
  • margin 不会发生合并

auto 尺寸

  • width 为 auto时, 适应内容宽度
  • height 为 auto时, 与常规流一致, 适应内容的高度
  • margin 为 auto时, 为 0

排列

  • 浮动盒子在排列时, 会避开常规流块盒
  • 常规流块盒在排列时, 无视浮动盒子
  • 行盒在排列时, 会避开浮动盒子(如文字环绕图片效果)
    • 如果文本没有被行盒包裹, 则浏览器会自动生成一个行盒包裹文本, 该行盒叫做匿名行盒

高度坍塌 (浮动流)

浮动盒子脱离了常规流, 常规流盒子的 auto 高度在计算时, 不会考虑浮动盒子

解决方案

  • 清除浮动 clear: both;
  • 创建 BFC

position (定位)

取值

  • static(默认值): 静态定位(不定位)
  • relative: 相对定位
  • absloute: 绝对定位
  • fixed: 固定定位

一个元素, 只要 position 的取值不是static, 则认为该元素是一个定位元素

定位元素会脱离文档流(相对定位除外)

脱离了文档流的元素

1. 文档流中的元素摆放时, 会忽略脱离了文档流的元素
2. 文档流中元素计算自动高度时, 会忽略脱离了文档流的元素

相对定位

  • 不会导致元素脱离文档流, 只是让元素在原来位置上进行偏移
  • 盒子的偏移不会对其他盒子造成任何影响(视觉偏移, 该盒子实际位置还是在原来的位置)

绝对定位

  1. 宽高为 auto 时, 适应内容
  2. 包含块变化
    • 找祖先中第一个定位元素, 该元素的 填充盒(padding-box) 为其包含块
    • 若找不到, 则它的包含块为整个网页(初始化包含块, 即 body)

固定定位

  • 其他情况和绝对定位完全一样
  • 包含块区别
    • 固定定位的包含块为视口(浏览器的可视窗口)

补充

  1. 绝对定位、固定定位元素一定是块盒
  2. 绝对定位、固定定位元素一定不是浮动
  3. 不会产生外边距合并

浮动元素跟常规流还有一点联系

绝对定位、固定定位完全脱离常规流, 所以不存在外边距合并

定位(绝对定位、固定定位)实现水平垂直居中的三种方案

方案一
不考虑具体宽高, 但必须有值, 不能自适应内容

  1. 定宽高
  2. 上下左右定位距离设置为 0
  3. 上下左右 margin 设置为 auto

方案二
必须知道具体的宽高, 不利于 JS 动态修改

  1. 定宽高
  2. 上、左 定位距离设置为 50%
  3. 上、左 margin 设置为高、宽的一半

方案三
不考虑具体宽高, 可以适应内容宽高, 兼容性差

  1. 上、左 定位距离设置为 50%
  2. 设置 transform: translate(-50%, -50%)

三种方案各有优缺点, 根据实际需求选配相应方案即可

BFC (块级格式化上下文)

以下元素会在内部创建 BFC 区域

  • 根元素
  • 浮动
  • 绝对定位、固定定位
  • overflow 不等于 visible 的块盒
  • inline-block

创建 BFC 的元素, 它的自动高度需要计算浮动元素
创建 BFC 的元素, 它的边框盒(border-box)不会与浮动元素重叠 (避开浮动元素)
创建 BFC 的元素, 不会和它的子元素进行外边距合并 (处在相同的 BFC 中才会外边距合并)

样式补充

display: list-item;

  • 设置为该属性值的盒子, 本质上仍是一个块盒, 但同时该盒子会附带另一个盒子
  • 元素本身生成的盒子叫做主盒子, 附带的盒子称为次盒子, 次盒子和主盒子水平排列
  • list-style-type 设置次盒子内容的类型
  • list-style-position 设置次盒子相对于主盒子的位置

text-align: justify;

  • 除最后一行外, 分散对齐(把空格平均分布)

word-wrap: word-break;

  • 英文单词溢出时强制截断换

border-image:

  • 为 border 引入图片

background-origin: padding-box(默认) / border-box / content-box

  • 图片开始显示位置

background-clip: border-box(默认) / content-box / padding-box

  • 从 background-clip 开始向外裁剪背景

问题和经验

图片底部白边

问题
图片的父元素是一个块盒, 块盒高度自动, 图片的底部和父元素的底边之间往往会出现白边

解决方案

  1. 设置父元素的字体大小为 0 (有副作用, 看不见字体)
  2. 将图片设置为块盒

居中总结

以下代码 “wrapper” 表示父元素, “box” 表示子元素

inline 和 inline-block

单行文本

1
2
3
4
5
.wrapper {
height: 100px;
line-height: 100px;
text-align: center;
}

单/多行文本

1
2
3
4
5
.wrapper {
display: flex;
align-items: center;
text-align: center;
}

block

方案一
不考虑具体宽高, 但必须有值, 不能自适应内容

1
2
3
4
5
6
7
8
9
10
11
.box {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 100px;
height: 100px;
background: lightblue;
}

方案二
必须知道具体的宽高, 不利于 JS 动态修改

1
2
3
4
5
6
7
8
9
10
.box {
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
width: 200px;
height: 200px;
background: lightblue;
}

方案三
不考虑具体宽高, 可以适应内容宽高, 兼容性差

1
2
3
4
5
6
7
8
9
.box {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
background: lightblue;
}

方案四
CSS3 弹性盒模型, 兼容性差

1
2
3
4
5
6
7
8
9
10
11
.wrapper {
display: flex;
justify-content: center;
align-items: center;
}

.box {
width: 200px;
height: 200px;
background: lightblue;
}

图片失效时的宽高问题

问题
如果 img 元素的图片链接失效, img元素的特性和普通行盒一样, 无法设置宽高

解决方案
设置 display 为 blockinline-block

inline 中包含 line-block 或 可替换元素

inline 的高度与它内部的 inline-block 或 可替换元素 的高度无关, 与 font-size 有关

-------------本文结束感谢阅读-------------