【前端基础】CSS相关

阅读数: 2024-05-11

如何设置CSS盒模型？

通过 box-sizing, 切换标准盒模型和 IE 盒模型

标准盒模型 box-sizing: content-box
width = content width;
height = content height

IE盒模型 box-sizing: border-box
width = border + padding + content width
heigth = border + padding + content heigth

有哪些选择器？

选择器决定将样式应用在哪个或哪些元素身上。

元素选择器：例如 div{…} p{…}

id 选择器：例如 #box{…}

类选择器：例如 .box{…}

属性选择器：*[href=”#”]{…}*

通配：*{…}

组合（并集）选择器：div,p,a,.main{…}

交集选择器：input[type=”text”]{…}

后代选择器：header nav{…}

子级选择器： ul>li{…}

伪类选择器：

:nth-child(num){…}

:nth-child(odd){…}

:nth-child(even){…}

:nth-of-type{…}

:first-child{…}

:last-child{…}

only-child{…}

a:link{…}

a:visited{…}

:hover{…}

a:active{…}

伪元素选择器：

::before{…}

::after{…}

::first-letter{…}

::first-line{…}

css选择器优先级：

选择器优先级由高到低分别为：
!important > 内联样式 > id选择器 > 类选择器 > 伪类选择器 > 属性选择器 > 标签选择器 > 通配符选择器 > 浏览器自定义；

当比较多个相同级别的CSS选择器优先级时，它们定义的位置将决定一切。

位于标签里的中所定义的CSS拥有最高级的优先权。

第二级的优先属性由位于标签中的 @import 引入样式表所定义。

第三级的优先属性由标签所引入的样式表定义。

第四级的优先属性由标签所引入的样式表内的 @import 导入样式表定义。

第五级优先的样式有用户设定。

最低级的优先权由浏览器默认。

如何避免重绘或者重排？

集中改变样式

我们往往通过改变 class 的方式来集中改变样式
1
2
3
4
5
// 判断是否是黑色系样式
const theme = isDark ? 'dark' : 'light'

// 根据判断来设置不同的class
ele.setAttribute('className', theme)
使用 DocumentFragment

我们可以通过 createDocumentFragment 创建一个游离于DOM树之外的节点，然后在此节点上批量操作，最后插入DOM树中，因此只触发一次重排
1
2
3
4
5
6
7
8
9
var fragment = document.createDocumentFragment();

for (let i = 0; i < 10; i++){
  let node = document.createElement("p");
  node.innerHTML = i;
  fragment.appendChild(node);
}

document.body.appendChild(fragment);
提升为合成层

将元素提升为合成层有以下优点：

合成层的位图，会交由 GPU 合成，比 CPU 处理要快

当需要 repaint 时，只需要 repaint 本身，不会影响到其他的层

对于 transform 和 opacity 效果，不会触发 layout 和 paint

提升合成层的最好方式是使用 CSS 的 will-change 属性：
1
2
3
#target {
  will-change: transform;
}

如何触发重排和重绘？

任何改变用来构建渲染树的信息都会导致一次重排或重绘：

添加、删除、更新DOM节点

通过display: none隐藏一个DOM节点-触发重排和重绘

通过visibility: hidden隐藏一个DOM节点-只触发重绘，因为没有几何变化

移动或者给页面中的DOM节点添加动画

添加一个样式表，调整样式属性

用户行为，例如调整窗口大小，改变字号，或者滚动。

重绘与重排的区别？

重排: 部分渲染树（或者整个渲染树）需要重新分析并且节点尺寸需要重新计算，表现为重新生成布局，重新排列元素

重绘: 由于节点的几何属性发生改变或者由于样式发生改变，例如改变元素背景色时，屏幕上的部分内容需要更新，表现为某些元素的外观被改变

单单改变元素的外观，肯定不会引起网页重新生成布局，但当浏览器完成重排之后，将会重新绘制受到此次重排影响的部分

重排和重绘代价是高昂的，它们会破坏用户体验，并且让UI展示非常迟缓，而相比之下重排的性能影响更大，在两者无法避免的情况下，一般我们宁可选择代价更小的重绘。

『重绘』不一定会出现『重排』，『重排』必然会出现『重绘』。

css reset 和 normalize.css 有什么区别？

两者都是通过重置样式，保持浏览器样式的一致性

前者几乎为所有标签添加了样式，后者保持了许多浏览器样式，保持尽可能的一致

后者修复了常见的桌面端和移动端浏览器的 bug：包含了 HTML5 元素的显示设置、预格式化文字的 font-size 问题、在 IE9 中 SVG 的溢出、许多出现在各浏览器和操作系统中的与表单相关的 bug。

前者中含有大段的继承链

后者模块化，文档较前者来说丰富

如何用 CSS 实现一个三角形

利用盒模型的 border 属性上下左右边框交界处会呈现出平滑的斜线这个特点，通过设置不同的上下左右边框宽度或者颜色即可得到三角形或者梯形。

如果想实现其中的任一个三角形，把其他方向上的 border-color 都设置成透明即可。

示例代码如下：
1
<div></div>
1
2
3
4
5
6
7
8
div{
 width: 0;
 height: 0;
 border: 10px solid red;
 border-top-color: transparent;
 border-left-color: transparent;
 border-right-color: transparent;
}
在线生成地址：https://www.jiangweishan.com/tool/sanjx/index.html

实现一根只有 1px 的长线怎么实现?

实现的方式很多，下面是一种参考方案：

>.line {
>width: 100%;
>height: 1px;
>overflow: hidden;
>font-size: 0px; 
>border-bottom: dashed 1px #ccc;
>}

1	><div class="line"></div>

本文作者： ionluo
本文链接： http://www.ionluo.cn/blog/posts/a7fee0cd.html
版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！