CSS笔记-知识小结

提要：

1. CSS简介
2. 文档流
3. 盒模型
4. CSS布局
5. CSS定位
6. CSS动画
7. 其他

一. 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笔记-简述盒模型

1. 概念：所有的元素都被一个个的“盒子”包着，我们通过这些“盒子”来实现布局。完整的盒模型概念应用于块级盒子 (block box)。
2. 构成：margin、border、padding、content
3. 两类盒模型:

box-sizing:border-box | content-box ;
复制代码

4. (上下)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

七. 其他常用知识

1. vertical-align:top;或vertical-align:middle; 用于消除图片border下面多余的部分
2. white-space:nowrap; 文字内容不换行
3. border-radius:10% 30% 20% 70%; 设置元素的外边框圆角 (`border-radius:50%; 是圆)
4. 负margin