css 纵向合并_CSS 知识总结

主要重点：border调试法 不管写什么样式 一定要写border

1.文档流:即文档中元素流动的方向，大致分为一下三种inline-block，inline，block，其中又分为三种：流动方向，高度，宽度流动方向inline：元素从左到右，直到最右边才换行

block：元素从上到下，吗，每一个都另起一行

inline-block：从做到右高度inline：宽度为内部元素的和，width无效

block：宽度默认自动结算，可以用width设置

inline-block：可用width设置宽度inline：高度由line-height决定，跟height无关

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

inline-block：可以用height设置

2.div溢出操作：overflowhidden：隐藏溢出

auto：自动

scroll：滑动

visible：显示溢出

3.div和span的高度差距div：无内容高度为0

span：无内容有高度

4.如何脱离文档流float

position:absolute/fixed

5.盒模型content-box width=contetnborder-box(一般用这个) width=content+border+padding

6.外边距合并父子外边距合并

解决方法：加一个padding/border、overflow：hidden、display：flex兄弟外边距合并

解决方法：inline-block

7.float布局

不管怎么样 先加一个.clearfix ,可以理解为清除浮动 ，因为元素添加float属性后.子元素会浮动(详细了解上下层叠文)，使得父亲(block类型)里面没有了文档流元素，导致了父亲没有高度。

.clearfix::after{

content:"";

display:block;

clear:both;

}

1.添加float属性

display：float；

小知识：

如何解决img中的图片下方有多余部分

vertical-align：top；

8.flex布局

/*父元素变成flex容器*/

.father{

display:flex;

}

/*改变容器里item流动方向*/

.father{

flex-direction:row|column; /*item row横排、column竖排 反响在后面加一个-revesre*/

}

/*换行*/

.father{

flex-wrap:wrap; /* nowrap不换行 wrap-reverse 过来 */

}

/*item 纵向对齐方式*/

.item{

justify-content:flex-start; /* 从头 */

justify-content:flex-end; /*从尾 */

justify-content:center; /* 居中 */

justify-content:space-between; /* 子元素之间有空隙 平分*/

justify-content:space-around; /* 子元素两边都有空隙 */

justify-content:space-between; /* 所有子元素两边的空间空隙相等*/

}

/*item 横向对齐方式*/

.item{

align-items:flex-start; /* 向上 */

align-items:flex-end; /* 向下 */

align-items:center; /* 居中 */

}

/*item 横向空间 */

.item{

align-content:flex-start; /* 布局都放在上面*/

align-content:flex-end; /* 布局都放在下面*/

align-content:center; /* 吧多余的行高上下平分 */

align-content:space-between; /* 子元素之间有空隙 平分*/

align-content:space-around; /* 子元素两边都有空隙 */

align-content:space-between; /* 所有子元素两边的空间空隙相等*/

}

/* 权重 */

.item{

flex-grow:1;

}

9.grid布局

/*父元素变成grid容器*/

.father{

display: grid;/* 或者是inline-flex*/

}

/*行列设置*/

.father{

grid-template-columns:40px 50px auto 50px 50px;/* 列宽40px 50px 自动 50px 40px */

grid-template-rows:25% 100px auto;/* 行宽25% 100px 自动 */

}

/*单元格的间隙*/

.father{

grid-gap:12px /*每个格上下左右之间间隙12px*/

grid-row-gap:12px /*每个格左右之间间隙12px*/

grid-column-gap:12px /*每个格上下之间间隙12px*/

}

/*快速布局 grid-template-areas*/

.father{

/* 相当于区分了 三行三列 第一行一列是A */

grid-template-areas:

"A B C"

"D E F"

"G H I";

}

.item{

grid-area:A/B/C/D; /* item就会占据A,B,C,D的区域位置 */

}

10.定位

层叠上下文：

一个div的分层，从上到下，可以分为：内联子元素

浮动元素

块级子元素

边框

背景哪些不正交的属性可以创建层叠上下文：层叠上下文。需要记忆的有z-index/flex/opacity(包住所有的东西显示为半透明)/transform。

其中z-index只对相同等级的元素有效

11.position

属性static 默认

relative：相对定位，升起来，但是不脱离文档流

absolute：绝对定位 一般跟relative配合使用

fixed：固定定位

sticky：粘滞定位写了absolute，一定要加一个relative

写了absolute或者fixed ，一定要加top或者left

sticky兼容性很差

12.css动画

浏览器的渲染过程根据HTML构建HTML树

根据CSS构建CSS树

将两颗树合并成一颗渲染树

lauout布局(文档流，盒模型，计算大小和位置)

paint绘制(根据边框，文字，阴影...)

compose合成(根据层叠关系展示画面)

13.css动画优化JS优化：使用requestAnimationFrame代替setTimeout或setInterval

CSS优化：使用will-change或translate

14.transform属性translateX(); 向x轴方向移动

translateY(); 向y轴方向移动

trandlateZ(); 向z轴方向移动

translate3d(X,Y,Z);

scale(); 放大

rotate(xdeg)； 旋转

rotateX();

rotateY();

slcew(); 倾斜

slcewY();

sclewX();

15.transition过度:补充中间帧变化位置时间过度方式延迟

width1slinear1s

height...ease...

all.........

16.animation：声明关键帧，添加动画

第一种 方法时长

过渡方式(跟transition取值一样)

延迟

次数(3或2.4或infinite) |

方向(reverse|alternate|alternate-reverse) |

填充模式(none|forwards|backwords|both) |

是否暂停(paused|running) | 动画名；

第二种 方法

animation: 1s infinite forwards xxx;

@keyframes xxx{

0% {

transform:none;

}

66% {

transform:tranlateY(200px);

}

100%{

transform:translateX(200px);

}

本篇图片归饥人谷所有，转载请注明出处