提要:
- CSS简介
- 文档流
- 盒模型
- CSS布局
- CSS定位
- CSS动画
- 其他
一. CSS简介
层叠样式表 (Cascading Style Sheets,缩写为 CSS),是一种样式表语言,用来描述 HTML 或 XML文档的样式呈现。
CSS 2.1为当前使用最广泛版本。
查询各浏览器是否支持某特性 → caniuse.com
调试代码 → border调试法 / webstorm
查询CSS资料 → MDN / CSS tricks
二. 文档流 (Normal Flow)
默认自动从左往右,从上往下的流式排列方式。
1. html元素类型
inline元素、block元素、inline-block元素,取决于display属性。
1) 流动方向
- inline元素:从左到右,到达最右才会换行
- block元素:从上到下,每一个独占一行
- inline-block元素:从左到右,但不会断开内容跨两行
2) 宽度
- inline元素:尽量窄,不接受设置width (不要在inline元素里放block元素)
- block元素:尽量宽,可以设置width (不要设置
width:100%;
) - inline-block元素:尽量窄,可以设置width
3) 高度
- inline元素:由行高 (line-height)间接确定,不接受设置height
- block元素:由内部所有文档流元素确定,可以设置height
- inline-block元素:可以设置height
2. 溢出 (overflow)
内容超出容器,超出部分的展示可用overflow设置。
overflow:visible;
直接显示超出部分overflow:hidden;
隐藏超出部分overflow:scroll;
显示上下、左右两个滚动条 (即使没有溢出)overflow:auto;
溢出时显示必要的滚动条
3. 脱离文档流
元素脱离文档流,它所在容器就不把它的高度算入容器高度了。
脱离文档流两种方式:
1)position:absolute;
或position:fixed;
2)float:left;
三. 盒模型
详见:CSS笔记-简述盒模型
- 概念:所有的元素都被一个个的“盒子”包着,我们通过这些“盒子”来实现布局。完整的盒模型概念应用于块级盒子 (block box)。
- 构成:margin、border、padding、content
- 两类盒模型:
box-sizing:border-box | content-box ;
- (上下)margin合并:盒子与盒子margin间无阻隔会发生合并。
1) 消除“兄弟”margin合并的方法:display:inline-block;
2) 消除“父子”margin合并的方法:① margin之间添加border,② margin之间添加padding,③display:flex;
四. CSS布局
布局思路
- 需要兼容IE 9吗?→ 需要 → 用【float布局】
- 需要兼容IE 9吗?→ 不需要 → 需要兼容老版本浏览器吗?→ 需要 → 用【flex布局】
- 需要兼容IE 9吗?→ 不需要 → 需要兼容老版本浏览器吗?→ 不需要,只需兼容最新浏览器 → 用【grid布局】
1. float布局
① CSS:子元素里加float:left;
(脱离文档流,可使block元素从上到下排列变为从左到右排列)
② HTML:父元素加class="clearfix"
③ CSS:加三句话
.clearfix:after{
content:'';
display:block;
clear:both;
}
2. flex布局 (最多用)
Flex Flow区别于文档流 (Normal Flow)。
1)container (父元素) 样式
① display 定义 container
.container{
display:flex | inline-flex ;
}
② flex-direction 控制主轴方向
.container{
flex-direction:column | column-reverse | row | row-reverse ;
}
③ flex-wrap 控制换行
.container{
flex-wrap:nowrap (默认) | wrap | wrap-reverse ;
}
④ justify-content 控制主轴对齐方式
container{
justify-content:flex-start (默认) | flex-end | center | space-between | space-around | space-evenly ;
}
⑤ align-items 控制次轴对齐方式
.container{
align-items:flex-start | flex-end | center | stretch (两头对齐) ;
}
⑥ align-content 多行内容对齐
.container{
align-content:flex-start | flex-end | center | space-between | space-around | stretch ;
}
2)items (子元素) 样式
① order 改变items间的顺序
order取值可为 0 (默认) ,1,2,-1,-2,…… ,取值越小排列越靠前。
.item:first-child{
order:5;
}
.item:nth-child(2){
order:2;
}
.item:last-child{
order:-1;
}
② flex-grow 控制items“长胖”
flex-grow默认值为0。
.item:first-child{
flex-grow:1;
}
.item:nth-child(2){
flex-grow:2;
}
.item:last-child{
flex-grow:1;
}
表示多余空间分成4份,分别“长胖”1,2,1份。
③ flex-shrink 控制items“变瘦”
flex-shrink默认值为1,常赋值0用来防止“变瘦”。
.item:first-child{
flex-shrink:1;
}
.item:nth-child(2){
flex-shrink:2;
}
.item:last-child{
flex-shrink:1;
}
表示窗口不足container宽度时,items开始“变瘦”,且分别“变瘦”1,2,1份。
④ flex-basis 控制基准宽度
flex-basis默认值为auto,相当于width。
⑤ align-self 控制单独item对齐方式
.item:last-child{
height:50px;
align-self:flex-start | flex-end | center ;
}
3. grid布局 (功能最强大)
① display定义container
.container{
display:grid | inline-grid ;
}
② grid-template-rows、grid-template-columns 设置行列
.container{
grid-template-rows:25% 100px (行高);
grid-template-columns:40px 50px auto (列宽);
/* 可缩写为gird-template:25% 100px/40px 50px auto; */
}
或
.container{
grid-template-rows:1fr 3fr (份);
grid-template-columns:1fr 2fr 1fr;
}
表示2行3列 (3条行线4条列线) 的表格。
③ grid-template-areas 进行分区
<div class="container">
<header>导航</header>
<aside>边栏</aside>
<main>内容</main>
<div class="ad">广告</div>
<footer>页脚</footer>
</div>
.container {
min-height: 100vh; /*占满整个屏幕*/
display: grid;
grid-template-rows: 60px auto 60px;
grid-template-columns: 100px auto 100px;
grid-column-gap: 5px;
grid-template-areas:
"header header header"
"aside main ad"
". footer footer";
}
.container>* {
border: 1px solid red;
}
.container>header {
grid-area: header;
}
.container>aside {
grid-area: aside;
}
.container>main {
grid-area: main;
}
.container>.ad {
grid-area: ad;
}
.container>footer {
grid-area: footer;
}
④ 规定items的区域范围
.item{
gird-row-start:1 (线号,可为负数);
gird-row-end:2;
/* 这两句可缩写为 gird-row:1/2; */
gird-column-start:1;
grid-column-end:4;
/* 这四句可缩写为 grid-area:1/1/2/4; */
}
或
.item{
gird-column-start:1;
grid-column-end:span 3(仅正值);
}
⑤ grid-gap 设置空隙
.container{
grid-row-gap:5px;
grid-column-gap:5px;
grid-gap:5px;
}
五. CSS定位
1. 一个div的分层
上层→底层:文字内容 → float元素(脱离文档流) → block子元素 → border → background
注:除了float元素中的文字内容跟随float元素定位,其他文字内容符合“后来居上”的原则。
2. position属性
1)取值
- static:默认值,元素在文档流中
- relative:相对定位,定位依据为自身,升起来但不脱离文档流
- absolute:绝对定位,定位依据为选定的父定位元素
- fixed:定位依据为视口
- sticky:正常状态在于文档流中,当滚动到该元素即将移出视口时,该元素会粘滞,不再随文档流继续滚动
2)经验
- 使用absolute一般要补写一个relative (给选定的父定位元素)
- 使用absolute或fixed,一定要补写top/bottom和left/right (有些浏览器上若不写会导致位置错乱)
left:100%; 置于最右
bottom:100%; 置于最上
- sticky兼容性差,很少用
3. 层叠上下文
1)理解
- z-index属性,只在定位元素(带position属性且为非默认值的元素)上有效果
- 普通元素的层叠水平优先由其所在的层叠上下文决定
- 层叠水平的比较只有在当前层叠上下文元素中才有意义
2)z-index属性
- 取值:z-index:auto (默认) /0/1/2/-1/-2/……
- z-index属性,只在定位元素(带position属性且为非默认值的元素)上有效果
- 数值越大越在上层
- 学会管理数值,不要直接写如
z-index:9999;
这样的
3)一个层叠上下文内的层叠顺序 (规则)
上层→底层依次为:
- z-index > 0 的子定位元素
- z-index = 0 或 z-index = auto 的子定位元素
- inline 或 inline-block 子元素
- float 子元素
- block 子元素
- z-index < 0 的子定位元素
- 此层叠上下文的border
- 此层叠上下文的background
分析示例
4)一个元素如何成为层叠上下文元素
①<html>
元素本身就是一个层叠上下文
②
position:relative 或 absolute;
z-index:非auto;
③
position:fixed;
更多查看 MDN文档
六. CSS动画
1. 浏览器渲染原理
1)第一次渲染的渲染步骤
① 根据html构造html树 (DOM)
② 根据CSS构建CSS树 (CSSOM)
③ 两树合并为渲染树 (Render Tree)
④ 根据渲染树布局 (Layout)
⑤ 绘制 (Paint)
⑥ 合成 (Composite)
2)更新渲染的渲染步骤
三种方式:
① 更改布局,全走:JS/CSS → 样式 → 布局 → 绘制 → 合成 (如div.remove()
)
② 没有更改布局:JS/CSS → 样式 → 绘制 → 合成 (如只改变background)
③ 没有更改布局、绘制:JS/CSS → 样式 → 合成 (如更改transform)
浏览器渲染查看 CSS Triggers
2. transform属性
1)四个常用功能
① translate 位移
transform:translateX(20px);
transform:translateY(50px);
transform:translateZ(100px);
transform:translate(20px,50px);
transform:translate3d(20px,50px,100px);
绝对定位元素(position:absolute;
)的居中常用:
transform:translate(-50% -50%);
② scale 缩放
transform:scaleX(1.5);
transform:scaleY(1.5);
transform:scale(1.5);
transform:scale(1.5,0.5);
③ rotate 旋转
默认以z轴转动,顺时针
transform:rotate(45deg); 即 transform:rotateZ(45deg);
transform:rotateX(45deg);
transform:rotateY(45deg);
④ skew 倾斜
transform:skew(15deg); 即 transform:skewX(15deg);
transform:skewY(30deg);
transform:skew(15deg,30deg);
组合使用时,用空格隔开
3. transition属性
1)作用
已知始态、终态,补充中间帧
2)语法
transition:属性名 时长 过渡方式 延迟;
过渡方式:ease (默认) | linear | ease-in |ease-out 等
更多查看 MDN文档
注:不是所有属性都能用transition过渡,display:none;
→ display:block;
无法过渡 (可用visibility:hidden;
→ visibility:visible;
实现过渡)
4. animation属性
1)作用
使用多次transform可改为使用animation
2)使用步骤
① 声明关键帧
② 添加动画
3)语法
① 声明关键帧
法一:用百分数
@keyframes xxx{
0%{
transform:none;
}
66.66%{
transform:translateX(100px);
}
100%{
transform:translateX(100px) translateY(200px);
}
}
法二:from to
@keyframes xxx{
from{
transform:none;
}
to{
transform:translateX(100px);
}
}
② 添加动画
#demo.start{
animation:动画名 时长 过渡方式 延迟 次数 方向 填充模式 是否暂停;
}
方向:reverse | alternate |alternate-reverse
次数:1/2/…… | infinite
填充模式:none | forwards (可使动画停时展示最后一帧) | backwards | both
是否暂停:paused | running
七. 其他常用知识
vertical-align:top;
或vertical-align:middle;
用于消除图片border下面多余的部分white-space:nowrap;
文字内容不换行border-radius:10% 30% 20% 70%;
设置元素的外边框圆角 (`border-radius:50%; 是圆)- 负margin