css x轴不滚动_CSS知识总结

1、CSS文档流

• inline

inline元素从左至右,位置不够时,可能会将元素分为两块 宽度由内部的inline元素的和决定不能指定宽度 高度由line-height间接决定,与height无关

• block

宽度默认自动计算,可以用width指定 高度由内部文档流元素决定,可以设置height决定

• inline-block

从左至右,位置不够时,不会将元素分为两块 结合两者的特点,可以用width指定宽度,也可以用height设置高度

注意:

1. 现在不再区分内联元素和块级元素,而是由display决定.
2. 千万不要在 inline元素中加block元素。

overflow

当内容的宽度或者高度大于容器的宽度或高度时,会产生溢出现象.
可用overflow属性设置:

• visible:默认值,内容不会被改变,显示在容器外部
• hidden:内容会被裁剪,适应容器的大小,没有滚动条
• scroll:内容会被裁剪,适应容器大小,显示滚动条(无论内容是否超出容器,都会显示滚动条)
• auto:内容会被裁剪,适应容器大小,显示滚动条(判断内容是否超出容器,超出容器就显示滚动条,否则不显示)

脱离文档流

当元素使用float和position属性,都会使元素脱离文档流,脱离文档流后,父元素将不再计算其高度

2、CSS布局

float布局

写法：float：left float：right

父元素中加入clearfix::after,是为了清除由于子元素进行浮动,导致父元素的高度塌陷的问题

flex 布局（重要）

在父元素中声明 display:flex

flex-direction 主轴流动方向

row:默认值,从左至右
column:从上至下
row-reserve:从右至左
column-reserve:从下至上

flex-wrap 换行方式

nowrap:默认值,不换行
wrap:换行(常用)
wrap-reserve:头尾交换的换行(基本不用)

justify-content 主轴对齐方式

flex-start:默认值,起点对齐
flex-end:终点对齐
center:居中对其
space-between:两端对齐,并使各个 item之间间隔相等
space-around:在行内平均分配,各个 item之间的间隔的一半等于第一个和最后一个 item到行首和行尾的间隔

align-items 侧轴多行对齐方式

flex-start:起点对齐
flex-end:终点对齐
center:居中对齐
stretch:默认值,如果项目未设置高度或设为auto,则占满容器高度

align-content 多行对齐方式

flex-start:起点对齐
flex-end:终点对齐
center:居中对齐
stretch:默认值,占满整个容器
space-between:两端对齐,并使各个 item之间间隔相等
space-around:在行内平均分配,各个 item之间的间隔的一半等于第一个和最后一个 item到行首和行尾的间隔

item 的属性

order 排列顺序

默认为0,按照值的大小排列item的顺序

.items {
order: 1;
}

flex-grow 增长系数

默认值为0,负值没有效,值数越大,行内占的比例越大.

.items { flex-grow: 1; }

flex-shrink 收缩系数

默认值为1,负值没有效,值数越大,在宽度大于容器宽度时,在行内占据的比例越小,为0时,不收缩

.items { flex-shrink: 2; }

align-self 某个item的布局

• flex-start:起点对齐
• flex-end:终点对齐
• center:居中对齐

.items { align-self: flex-start | flex-end | center; }

grid布局

怎么声明？

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

grid使用。比如：创建了一个三行五列的grid表格.

.container{ grid-template-rows: 200px 400px 200px; grid-template-columns: 40px 50px auto 50px 40px; }

选取grid表格中的从上至下第一条线到第三条线中的格子,并把它们的背景色改为红色

.item { grid-row-start: 1;
grid-row-end: 3;
background-color: red; }

类似于flex中的flex-grow.可以指定占据的比例

.container { grid-template-columns: 1fr 1fr 40px 10% 10em; }

grid-gap 间隙 指定格与格之间的间隙

.container { grid-column-gap:12px; }

grid-template-area 分区

.container { grid-template-areas: "header header header" "aside main ad" "footer footer footer" }

3、CSS定位

• static

默认值,在文档流中

• relative

相对定位,比文档流要高一层,但不脱离文档流.

作用:

1. 用于做位移(很少用)
2. 用来做absolute的父元素
3. 配合z-index

• absolute
  绝对定位,脱离原来的位置,另起一层,定位基准是祖先中第一个不是static的元素
  作用:

1. 关闭对话框按钮
2. 鼠标提示文字
3. 配合z-index

注意:

1. 某些浏览器不写上top,left会导致位置错乱
2. 善用left:50%,加-margin:width/2或者transform:translateX(-50%)
3. 一般用了absolute都要在父元素中补一个relative

• fixed

固定定位,定位的基准是 viewport(视口),但当父元素中使用了 transform:scale属性,将会出错.
作用:
1. 边栏广告 2. 返回顶部按钮 3. 配合`z-index` 复制代码
注意: 手机上尽量不要使用,很多bug

• ticky

粘滞定位

作用: 滑动到顶部时,粘滞在顶部的导航栏

注意: 兼容性很差

4、CSS动画

transform

• translate(translateX,translateY) 沿X轴和Y轴上位移
  • translateX:沿X轴上位移
  • translateY:沿Y轴上位移
  • translateZ:沿Z轴上位移
  • translate3d(translateX,translateY,translateZ):沿X轴,Y轴和Z轴上位移
• scale(scaleX,scaleY) 沿X轴和Y轴上缩放
  • scaleX:沿X轴上缩放
  • scaleY:沿Y轴上缩放
  • scaleZ:沿Z轴上缩放
  • scale3d(scaleX,scaleY,scaleZ):沿X轴,Y轴和Z轴上缩放

• rotate(rotateX,rotateY) 沿X轴和Y轴上旋转
  • rotateX:沿X轴上旋转
  • rotateY:沿Y轴上旋转
  • rotateZ:沿Z轴上旋转
  • rotate3d(rotateX,rotateY,rotateZ):沿X轴,Y轴和Z轴上旋转
• skew(skewX,skewY) 沿X轴和Y轴上倾斜
  • skewX:沿X轴上倾斜
  • skewY:沿Y轴上倾斜
  • skewZ:沿Z轴上倾斜
  • skew3d(skewX,skewY,skewZ):沿X轴,Y轴和Z轴上倾斜

transition

基本语法：

transition:property duration timing-function delay;

• 可以使用 all 代替所有属性
• display:none => block 没法过渡,一般改为visibility:hidden => visible

animation

基本语法：

animation: duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name

常用属性：

5、层叠上下文

定位元素(z-index=1) > 文字(内联子元素) > 浮动元素 > 块级元素 > 边框(border) > 背景(background) > 定位元素(z-index=-1) > html
注意:每一个层叠上下文就是一个小世界,只有同一个小世界才能够进行比较,小世界里的z-index与小世界外的z-index无关
哪些属性可以创建层叠上下文: z-index部位auto,并有 relative/absolute/fixed opacity transform html 元素

6、浏览器渲染原理

1、根据HTML,构建一个HTML树(DOM)
2、 根据CSS,构建一个CSS树(CSSOM)
3、将两根树合并,成为一棵渲染树(render tree)
4、Layout 布局(文档流,盒模型,计算大小和位置)
5、Paint 绘制(把边框颜色,文字颜色,阴影等绘制)
6、Compose 合成(根据层叠关系展示画面)