阅读 71

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 ;
复制代码
  1. (上下)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
文章分类
前端
文章标签