CSS 知识总结

pun
166 阅读7分钟

文档流（normal flow）

inline，block 和 inline-block

文档流包含 inline 元素，block 元素和 inline-block 元素。

  • inline 元素（行内元素）

流动方式：inline 元素的流动方式从左到右，到达最右边才会换行

宽度：inline 宽度是内部的inline 元素的和，不能用width 指定

高度：inline 高度由 line-height 间接决定，与 height 无关

  • block 元素（块级元素）

流动方式：block 元素的流动方式是从上到下，每一个都会另起一行

宽度：block 默认自动计算宽度，可以用width 指定

高度：block 高度由内部文档流元素决定，可以设height

  • inline-block （行内块元素）

流动方式：inline-block 的流动方式也是从左到右，但是是以块形式存在，当剩下的位置不够装下一块，则会另起一行

宽度：inline-block 结合前两者特点，可用 width 指定

高度：inline-block 跟block 类似，可以设置height

overflow 溢出

当内容大于容器 overflow 溢出

overflow: hidden; 溢出部分隐藏

overflow: visible; 溢出部分可见，但是会显示在容器外

overflow: scroll;容器会出现滚动条，无论内容是否大于容器

overflow: auto;内容大于容器的时候，会自动显示滚动条，但是内容小于容器的时候，隐藏滚动条

overflow 可以分为 overflow-x 和 overflow-y

脱离文档流

可以脱离文档流的元素有：

  • float 浮动
  • position: absolute/ fixed 定位

不使用上述属性就不会脱离文档了

盒模型

盒模型的组成部分有： content（内容），padding（内边距），border（边框） 和 margin（外边距）。

盒模型分为两种： content-box 和 border-box 。

  • content-box 意为内容盒，内容就是盒子的边界， content-box width= 内容宽度，content-box height= 内容高度

  • border-box 意为边框盒，边框才是盒子的边界，border-box width = 内容宽度 + padding + border，border-box height = 内容高度 + padding + border

CSS布局

float 布局

.child{
    float: left | right;
}

float 可以让一个盒子浮动，脱离文档流。

但是，如果该盒子脱离了文档流，该盒子的实际的高度为0，这个时候需要给父级盒子清除浮动的操作，父级盒子需要引用以下这个 类 来清除浮动。

.clearfix:after{
content: '';
display: block;
clear: both;
}

当需要平均布局的时候，在盒子的最前面添加一个空的 div ，然后给这个 div 添加一个负的 margin-left 值。

flex 布局

让 container 变成 flex container 两种：

.container {
display: flex | inline-flex;
}

改变 items 方向（主轴）的方法 ：

.container {
flex-direction: row; 是默认值，items会从左往右依次排列
flex-direction: row-reverse; items会从右往左依次排列
flex-direction: column; items会从从上往下依次排列
flex-direction:column-reverse; items会从下往上依次排列
}

控制是否换行:

.container {
flex-wrap: nowrap; 不换行
flex-wrap: wrap; 换行
flex-wrap: wrap-reverse; 
}

主轴的对齐方式：

.container {
justify-content : flex-start; 往左对齐
justify-content : flex-end; 往右对齐
justify-content : center; 全部居中
justify-content : space-between; 平均
}

内容的排列方式：

container {
align-items: flex-start; 往上靠拢
align-items: flex-end; 往下靠拢
align-items: center; 居中
align-items: stretch; 全部items拉伸到跟最长的item一样高
}

当内容有多行的时候，每一行怎么排列：

container {
align-content: flex-start; 往前靠拢
align-content: flex-end; 往后靠拢
align-content: center; 居中
align-content: stretch; 拉伸
align-content: space-between; 
align-content: space-around; 
}

order 属性

.item:first-child{
order: 1; order的数字越大，该item排列的位置约靠后，默认的order是0
}

flex-grow 属性

.item:first-child{
flex-grow: 2; 2代表该item占父盒子总份数的2份，不写默认是0，不占空间
}

flex-shrink 属性

.item:first-child{
flex-shrink: 2; 2代表当空间缩小时，该item缩小的速度，数值越大，缩小的越多。默认是1，如果该数值是0，代表不会缩小
}

对齐方式：

.item:first-child{
align-self: flex-end ; align-self的属性值跟align-items一致
}

grid 布局

让 container 变成 grid container 两种：

.container {
display: gird | inline-gird;
}

设定行和列，表达方式有多种：

.container {
grid-template-columns: 40px 20px auto 50px 40px; 设定列的数量，并且每一列的宽度
grid-template-columns: 1fr 20px 1fr; fr 是 free space 份的意思
grid-template-rows: 20% 20% 20% 20% 20% 设置行的数量，并且每一行的高度
}

设定盒子的开始位置和结束位置：

item {
grid-column-start: 2; 设定item的行的开始位置
grid-column-end: 4;设定item的行的结束位置
grid-row-start: 3;设定item的列的开始位置
grid-row-end : 5;设定item的列的结束位置
}

分区grid-template-areas:

.container {
display: grid;
grid-template-columns: 50px 50px 50px 50 px;
grid-template-rows: auto; 
gird-template-areas: 分区
"header header header"
"main main . sidebar"
"footer footer footer footer"
}

item-a{ 
grid-area: header; 
}  分区里面的header则会全部分配给item-a；

item-b{ 
grid-area: main; 
}
分区里面的main则会全部分配给item-b；

item-c{ 
grid-area: sidebar; 
}
分区里面的sidebar则会全部分配给item-c；

item-d{ 
grid-area: footer; 
}
分区里面的footer则会全部分配给item-d；

空隙 gap

.container {
grid-template-columns: 100px 20px 100px;
grid-template-rows: 88px auto 20px;
grid-column-gap: 10px; 每一列之间的间隙为10px
grid-row-gap: 15px; 每一行之间的间隙为15px
}

层叠上下文

此内容太多而且复杂，不做赘述，可以参考 层叠上下文文档。

CSS定位

position 定位

.demo{
   positon: static | relative | absolute | sticky; 
}
  • static 是默认值，内容会待在文档流里
  • relative 相对定位，内容会升起来，但是不脱离文档流
  • absolute 绝对定位，定位基准是祖先里面的非 static
  • fixed 固定定位，定位的基准是 viewport 视口
  • sticky 粘滞定位，如果该滚动到该内容，内容不会滑出视口，而是会粘滞在视口的边缘，如果将此内容滑回来，该内容会恢复到正常位置上。

transform（变形）

常用功能：

位移 translate

缩放 scale

旋转 rotate

倾斜 skew

一般都需用配合 transiton （过渡）来使用

inline 元素不支持 transform， 需要先变成 block

位移 translate

transform: translateX(200px); 正数为往右移动，负数为左

ransform: translateY(50%); 百分比为移动自身长度的百分比，正数为往下，负数为往下

transform: translateZ(100px); Z方向为垂直于屏幕的方向，看不出变化，为了能看出变化，需要给屏幕加上一个原点

.wrapper{
perspective: 100px; 原点的添加方法：在父级盒子添加一个 类 wrapper ， wrapper 的位置是位于盒子的正中心
}

perspective: 100px; 给了原点到屏幕的距离，

translateZ: 100px; 根据原点的距离来移动，如果没有原点，移动则没有意义，没有变化

两种缩写方法：

transform: translate(50px, 100px)  元素往右移动50px，往下移动100px

transform: translate3d(50px,100px,200px) 元素往右移动50px，往下移动100px，往Z方向向前移动200px

经典用法：可以让一个盒子在父盒子中绝对居中

.box {
positon: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

scale （缩放）

transform: scale(1.5); 变大1.5倍
transform: scaleX(1.5); X方向变宽1.5倍
transform: scaleY(1.5); Y方向边长1.5倍

缩写:

transform: scale(1.5, 0.5);

scale 不常用，缩放会导致模糊

rotate （旋转）

transform: rotate(100deg); 沿着Z轴方向旋转
transform: rotateX(100deg); 沿着X轴方向旋转，视觉效果是变窄了
ransform: rotateY(100deg); 沿着X轴方向旋转，视觉效果是变短了
transform: rotate3d(20deg,30deg,40deg) X,Y,Z三个方向都旋转

skew （倾斜）

transform: skewX(15deg); 
transform: skewY(15deg);
transform: skewZ(15deg);
transform: skew3d(15deg);

transiton （过渡）

transition: 属性名 时长 过渡方式 延迟（谁做过渡给谁加）

过渡方式有：lineae / ease / ease-in / ease-out / ease-in-out 等等

annimation （动画）

  1. 添加关键帧 keyframes
@keyframes xxx {
0% {
transform: none;
}
30% {
transform: translateX(200px);
}
100% {
transform: translateX(200px) translateY(200px);
}
}
  1. 然后在需要做动画的盒子上添加animation属性
.box {
animation: xxx 1.5s;
}

animation 语法 animation: 时长/过渡方式/延迟/次数/方向/填充模式/是否暂停/动画名；

时长： 1s或者1000ms

过渡方式：跟transition 一样，如linear

次数：3次 或者 2.4次 或者 infinite 无限次

方向：reverse/ alternate/alternate-reverse

填充模式：none/ forwards/ backwards/ both

是否暂停： paused / running

浏览器渲染原理

渲染原理

  1. 根据HTML构建HTML树 （DOM树）
  2. 根据CSS构建CSS树（CSSOM）
  3. 将两棵树合并成一颗渲染树（render tree）
  4. Layout 布局 （文档流，盒模型，计算大小和位置）
  5. Print 绘制（把边框颜色，文字颜色，阴影等画出来）
  6. 合成（根据层叠关系展示画面）

三种不同的渲染方式

avatar
文章
阅读
粉丝