!DOCTYPE (文档声明)

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

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

CSS 权重

选择器	权重值(256进制)
!important	Infinity
行间样式	1000
id	100
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

选中被用户框选的文字

盒模型

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

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

从上图中可以很清楚的看到, 背景默认展示到 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 标签)

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

white-space: nowrap;
- 强制性不换行
overflow: hidden;
- 溢出 border 隐藏
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. 文档流中元素计算自动高度时, 会忽略脱离了文档流的元素

相对定位

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

绝对定位

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

固定定位

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

补充

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

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

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

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

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

定宽高
将上下左右定位距离设置为 0
将上下左右 margin 设置为 auto

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

定宽高
上、左 定位距离设置为 50%
将上、左 margin 设置为高、宽的一半

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

上、左 定位距离设置为 50%
设置 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 开始向外裁剪背景

问题和经验

图片底部白边

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

解决方案

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

居中总结

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

inline 和 inline-block

单行文本

.wrapper {
  height: 100px;
  line-height: 100px;
  text-align: center;
}

单/多行文本

.wrapper {
  display: flex;
  align-items: center;
  text-align: center;
}

block

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

.box {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100px;
  height: 100px;
  background: lightblue;
}

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

.box {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -100px;
  margin-top: -100px;
  width: 200px;
  height: 200px;
  background: lightblue;
}

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

.box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background: lightblue;
}

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

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

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

图片失效时的宽高问题

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

解决方案
设置 display 为 block 或 inline-block

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

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

CSS 笔记

!DOCTYPE (文档声明)

CSS 权重

inherit 和 initial

img (object-fit 样式)

display 和 visibility 的区别

常见伪类

伪类的“爱恨”原则

常见伪元素

盒模型

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

行级元素 (inline)

块级元素 (block)

行级块元素 (inline-block)

可替换元素

弹性盒模型 (flex)

弹性容器规则

弹性元素规则

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

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

常规流

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

float (浮动)

高度坍塌 (浮动流)

position (定位)

补充

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

BFC (块级格式化上下文)

样式补充

问题和经验

图片底部白边

居中总结

inline 和 inline-block

block

图片失效时的宽高问题

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

你可能感兴趣的:(CSS 笔记)

CSS 笔记

!DOCTYPE (文档声明)

CSS 权重

inherit 和 initial

img (object-fit 样式)

display 和 visibility 的区别

常见伪类

伪类的“爱恨”原则

常见伪元素

盒模型

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

行级元素 (inline)

块级元素 (block)

行级块元素 (inline-block)

可替换元素

弹性盒模型 (flex)

弹性容器规则

弹性元素规则

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

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

常规流

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

float (浮动)

高度坍塌 (浮动流)

position (定位)

补充

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

BFC (块级格式化上下文)

样式补充

问题和经验

图片底部白边

居中总结

inline 和 inline-block

block

图片失效时的宽高问题

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

你可能感兴趣的:(CSS 笔记)

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