《CSS世界》
AlexChiang 2020-03-10
CSS
# ⭕️ 第一章 概述
流体布局
- 块级元素如 div,p,li 可以比作水流
- 内联元素如 span,img 可以比作木头
流体布局对 table 并不适用
# ⭕️ 第二章 基本术语概念
- 相对长度单位:em,ex,vh,vw..
- 绝对长度:px...
- 功能符(以函数形式指定):rgba,url,calc...
CSS 语句的构成:
.class-1 {
border: 1px solid rgba(0, 0, 0, 0);
}
1
2
3
2
3
- 选择器:
.class-1
- 声明块:
{...}
- 声明:
border:1px solid ...
- 属性名:
border
- 属性值:
1px solid rgba
- 属性名:
- 声明:
# ⭕️ 第三章 流、元素与基本尺寸
# 3.1 块级元素
# 为什么 list-item 会出现项目符号?
因为生成了一个附加的盒子,学名标记盒子 marker box,专门用来存放圆点、数字和这些项目符号。
# 3.2 width/height 作用细节
- inline-block 可设置宽高无需换行
- width:0 内部元素遵循 “首选最小宽度”
🔥四层盒子模型 [margin box[border box[padding box[content box]]]]
- content-box:width 作用在 content box 上
- border-box:width 作用在 border box 上
CSS 流体布局下的宽度分离原则(content-box 时):width 不与影响宽度的 padding/border 共存
/* do this */
.father {
width: 180px;
}
.son {
margin: 0 20px;
padding: 20px;
border: 1px solid;
}
/* not this */
.box {
width: 100px;
padding: 20px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 关于 width/height:100%
- width:100%可生效:父元素 width 会自动读取包含元素的宽度
- 🔥height:100%不生效:父元素 height 默认 auto 导致 auto * 100% = NaN
- 设定显示的高度值 - 使用绝对定位
# 3.3 min/max-width/height
min-width/max-width 出现的场景一定是自适应布局或流体布局中
- max-*的初始值为 none
- min-*的初始值为 auto
避免图片在移动端展示过大影响体验:
img {
max-width: 100%;
height: auto !important;
/* 强制height:auto可以确保宽度不超出的同时使图片保存原来的比例 */
}
1
2
3
4
5
2
3
4
5
# 超越!important,超越最大:
- 🔥max-width 权重高于 !important
- min-width > max-width 冲突时 取最大的
# 任意高度元素的展开收起动画技术
从 0px 到 auto 是无法计算的,因此无法形成过渡或动画效果。
推荐方法:
.ele {
max-height: 0;
overflow: hidden;
transition: max-height 0.25s;
}
.ele.active {
max-height: 666px;
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 3.4 内联元素
# 内联盒模型
<!-- 包含盒子 -->
<p>一行文字<em>em</em></p>
<!-- 内容区域 -->
一行文字<em>em</em>
<!-- 内联盒子 -->
<em>em</em>
<!-- 匿名内联盒子 -->
一行文字
<!-- 行框盒子 -->
一行文字<em>em</em>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 幽灵空白节点
span 宽高皆为 0,但 div 的高度有 18px。可以认为 span 前面还有一个宽度为 0 的空白字符。
<div><span></span></div>
1