js改变css样式_CSS 知识总结

最新推荐文章于 2024-02-29 12:39:55 发布

weixin_39637545

最新推荐文章于 2024-02-29 12:39:55 发布

阅读量302

点赞数

文章标签： js改变css样式

css基本概念

css的历史

css的发明者：发明html的李爵士的同时赖先生 Hakon Wium Lie

CSS2.1 是使用最广泛的版本（IE支持）

CSS 3 现代版本，分模块（IE8部分支持）

css层叠样式表

可以多次对已有的样式进行覆盖

样式层叠

可以多次对同一选择器进行样式声明

2. 选择器层叠

可以用不同选择器对同一元素进行样式声明

3.文件层叠

可以用多个文件进行层叠

所以css极度的灵活，后面写的样式可以覆盖前面的

css语法

css基本语法

语法一

选择器{
          属性名：属性值；    /*  注释   */
      }注意事项

css语法二

@charset “UTF-8”
@import url（2.css）
@media (min-width:100px) and (max-width:200px){
语法一
}

语法二用来进行声明字符编码，导入样式表文件，进行媒体查询

css调试方法

border调试法，写元素的怀疑某个元素有问题，可以给这个元素加border 。border没出现？说明选择器错了或者语法错了。border出现了，就看看边界是否符合预期

css文档流

文档流：即文档的流动方向

inline元素从左到右，到达最右边才会换行
block元素从上到下，每一个都另起一行
lnline-block 也是从左到右

宽度

inline宽度为内部，lnline元素的和，不能用width指定。
block默认自动计算宽度，可用width指定。
inline-block结合前两者特点，可用width。

高度

inline高度由line-height(行高)间接确定，跟height无关。
block高度由内部文档流元素决定，可以设height.
inline-block跟block类似,可以设置height.

要纠正自己关于内联元素与块级元素的想法

因为任何元素都可以通过display：block/inline/inline-block来进行转换

注意：不要在inline元素里面加block元素，会出现各种问题

溢出overflow

如果对块级元素设置的高度比内容小，那就会超出

如果在x轴方向上超出了内容，且设置了overflow：scroll

那么内容其实只会在第一屏中显示

overflow的属性：

  overflow:visible;           /*溢出内容什么都不管就那样放着*/
  overflow:hidden;           /* 隐藏溢出部分*/
  overflow:scroll;           /* 溢出部分滚动,但是没有溢出也会有下拉滚动框  */
  overflow:auto;             /*滚动 ,不超出不滚动,溢出才会有下拉滚动条*/
overflow可以分为overflow-x和overflow-y

脱离文档流

哪些元素可以不在文档流中

float 浮动元素

position：absolute/fixed 绝对定位于固定定位

盒模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距(padding)，边框(border)，内边距(margin)，和实际内容(content)。
css盒子模型分为两种，一种是content-box,一种是border-box,在css中可以使用

```
box-sizing：content-box; // 标准盒模型
box-sizing：border-box; // IE盒模型
```

来更改盒模型
其中标准盒模型：width与height按照content宽高计算
而IE模型-width与height则按照content+padding+border计算

关于外边距合并

1.孩子和孩子之间会合并他们中间的margin

图片取自w3c school

2.第一个孩子和最后一个孩子会跟他们父母的margin合并，并按照大的margin进行合并

图片取自w3c school

如何消除外边距合并的问题？

1,inline-block可以取消外边距合并

2,取消孩子和父母的外边距合并，给父母加border，padding，overflow:hidden都可以

css布局方法

css布局的两种思路

1、从大到小

先定下大局

然后完善每个部分的小布局

2，从小到大

先完成小布局

然后组合成大布局

布局一图流

这三种布局我们一一来说一下

float布局

步骤

在子元素上加float:left和width
在父元素上加.clearfix 清除浮动

为什么要清除浮动？

因为浮动元素是脱离文档流的，所以会导致父元素的高度不会被子元素撑开

清除浮动的方法

1.额外标签法（在最后一个浮动标签后，新加一个标签）

这个方法的原理相当于在浮动父元素里面加上一个额外标签，让这个标签的高度和浮动的元素高度一样，这样吧浮动父元素给撑开。

不推荐使用，会多出很多的额外标签出来

2.使用BFC，给父盒子添加overflow：hidden属性

优点：代码简洁（慎重使用，若该父盒子里还有position定位会引起麻烦）

缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

3.使用after伪元素清除浮动：：after方式为空元素的升级版，好处是不用单独加标签了。（较常用）

优点：符合闭合浮动思想，结构语义化正确

缺点：由于IE6-7不支持：after，使用zoom：1，触发hasLayout。

4. 使用before和after双伪元素清除浮动：（较常用）

(清除浮动的原理和方法转自：清除浮动的几种方法 - 槿-_- - 博客园)

flex布局

flex弹性布局的原理，相当于在一个容器里面，可以指定容器内部元素的排列方式，比如排列顺序，对齐方式等

其中具体属性有

flex container的样式

display:flex;  变为弹性盒模型
flex-direction:column/row/row-reverse/columu-reverse;  设置弹性盒中的排列方向

改变折行 flex-wrap:wrap/nowrap/wrap-reverse; //是否折行  wrap-reverse从下往上折行

主轴对齐方式 justify-content:flex-start/flex-end/center/space-between/space-around/space-evenly;  space-evenly平均的围绕 
次轴对齐方式 align-items:center/flex-start/flex-end/stretch  stretch拉倒最高

flex item 有哪些属性？

order:100  item的顺序
flex-grow：1      长胖  
flex-shrink:0   默认是1，0防止变瘦  在空间不够的时候，控制元素缩的快慢
flex-basis:100px    控制基准宽度 默认是auto
align-self:flex-end  控制自己的排列方式

grid布局

二维布局用grid 一维布局用flex

成为grid
display:grid

行和列 container中

grid-template-columns:40px 50px auto 50px 40px;
grid-template-rows:25% 100px auto;

相当于吧一块画布按照行列上的规则分成了不同的区域

item中的属性

.a{
	grid-row-start:1
	grid-row-end:4;
	gird-columu-start:1;
	grid-column-end:5;
}

这样class为a的盒子就占了坐标从（0,0）到（4，5）的范围

fr space巧记：份 fr使用份数的方式将容器进行划分

两行三列的容器

grid-template-columns:1fr 1fr 1fr;
grid-template-rows:1fr 1fr;

分区 grid-template-areas

grid-template-areas:
'header header header'
'aside main ad'
'footer footer footer'

直接使用grid分区将容器分为了我们想要的布局

如何设置每个区中间的空隙？

gap

.container{
grid-template-columns:1fr 1fr 1fr;
grid-template-rows:1fr 1fr 1fr;
grid-column-gap:10px;
grid-row-gap:15px;
}

grid尤其适合不规则的布局

浏览器渲染原理

步骤：

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

三棵树

由此带来的思考，浏览器渲染一个页面要构建三颗树，那如果页面产生了变更，也需要再次构建三棵树吗

更新样式的方法

使用js指定样式
div.style.background=‘red’
使用js添加类
div.classList.add('red')
删除节点
div.remove() 删除节点

那么这些方法会有不同吗

三种更新方式

1。remove删除节点，会全走一遍

2。改变背景色会跳过对布局的操作

3。跳过layout和paint

改变transform 只需要composite

关于CSS动画优化

JS优化：使用requestAnimationFrame代替定时器

CSS优化：使用will-change或translate

没错，不要使用left来让元素移动，使用transform移动性能更高哦

CSS动画实现的两种方式（transition和animation）

transition过渡

作用

补充中间帧

语法

transition: 属性名时长过渡方式延迟
transition: left 200ms linear
transition: left 200ms, top 400ms 可以用逗号分隔两个不同的属性
transition: all 200ms 可以用 all 代表所有属性
过渡方式有：linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier | step-start | step-end | steps

注意

并不是所有属性都能过渡

display: none => block 没法过渡
一般改成 visibility: hidden => visible

总结：要能找到过渡的逻辑的变化就能实现过渡了，比如display：none 突然消失，浏览器实现不了这个过渡效果

transiton虽然简单，但是实现复杂动画（元素变化形态多的）比较麻烦

animation动画

使用@keyframe

@keyframes xxx{
    from{
        transform: translateX(0%);
    }
    to{
        transform: translateX(100%);
    }
}
如果中间有其他形态 可以使用百分数
@keyframes xxx{
    0%{
        transform: none;
    }
    66.66%{
        transform: translateX(200px);
    }
    100%{
        transform: translateX(200px) translateY(100px);
    }
}

animation 缩写语法

animation: 时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 | 动画名;