CSS 知识集锦三

最新推荐文章于 2024-09-26 19:50:45 发布

pickle_tiger

最新推荐文章于 2024-09-26 19:50:45 发布

阅读量91

点赞数

分类专栏： CSS 面试技术笔记文章标签： css css3

本文链接：https://blog.csdn.net/mr_tigger/article/details/115347034

版权

技术笔记同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

面试

6 篇文章 0 订阅

订阅专栏

CSS

3 篇文章 0 订阅

订阅专栏

CSS知识集锦二

文章目录

CSS知识集锦二
一、CSS性能优化
二、层叠上下文
三、div居中
四、浮动

学习计划参考字节飞书的学习计划 - 超清楚（必看）)

部分内容摘自MDN CSS(层叠样式表)

参考文章CSS 性能优化还有哪些方法)

一、CSS性能优化

使用简写

margin-left: 10px;
margin-right: 10px；
/* 直接按下面的写法可以减少css文件的大小 */
margin: 0 10px;

删除没使用的CSS
注意放在<head>的内联样式的大小，放在上面会有阻塞的问题；
避免使用@import，外部的css文件中使用@import会使得页面在加载时增加额外的延迟
合并多个CSS文件
减少CSS嵌套，CSS规则是从右往左查找，嵌套越多，效率越慢
避免在ID选择器嵌套，ID选择器本身就是唯一的，且权重值很大；
继承的属性父级定义好了的话，子级元素无需重复定义；
重复的样式尽量做成公共样式；
减少通配符*的使用，全局样式的查找遍历性能方面影响较大；
CSSsprite 雪碧图，多个icon使用这种方式生成一张图片，减少不必要的请求；
CSS压缩；
gzip压缩；
动画用绝对定位，避免在正常文档流运动时导致浏览器不断重排

二、层叠上下文

摘自MDN 层叠上下文

假定用户正面向（浏览器）视窗或网页，而 HTML 元素沿着其相对于用户的一条虚构的 z 轴排开，层叠上下文就是对这些 HTML 元素的一个三维构想。众 HTML 元素基于其元素属性按照优先级顺序占据这个空间。

形成层叠上下文：

文档根元素（<html>）；
position 值为 absolute（绝对定位）或 relative（相对定位）且 z-index 值不为 auto 的元素；
position 值为 fixed（固定定位）或 sticky（粘性定位）的元素（沾滞定位适配所有移动设备上的浏览器，但老的桌面浏览器不支持）；
flex (flexbox) 容器的子元素，且 z-index 值不为 auto；
grid 容器的子元素，且 z-index 值不为 auto；
opacity 属性值小于 1 的元素）；
mix-blend-mode 属性值不为 normal 的元素；
以下任意属性值不为 none 的元素：
- transform
- filter
- perspective
- clip-path
- mask / mask-image / mask-border
isolation 属性值为 isolate 的元素；
webkit-overflow-scrolling 属性值为 touch 的元素；
will-change 值设定了任一属性而该属性在 non-initial 值时会创建层叠上下文的元素；
contain 属性值为 layout、paint 或包含它们其中之一的合成值（比如 contain: strict、contain: content）的元素。

总结:

层叠上下文可以包含在其他层叠上下文中，并且一起创建一个层叠上下文的层级。
每个层叠上下文都完全独立于它的兄弟元素：当处理层叠时只考虑子元素。
每个层叠上下文都是自包含的：当一个元素的内容发生层叠后，该元素将被作为整体在父级层叠上下文中按顺序进行层叠。

三、div居中

具体效果查看CodePen链接

<div class="flexbox">
  <div class="child1"></div>
</div>

<div class="positionbox">
  <div class="child2"></div>
</div>

<div class="tablecell">
  <div class="child3"></div>
</div>

.flexbox, .positionbox, .tablecell {
  width: 200px;
  height: 200px;
  margin-bottom: 10px;
}

.child1, .child2, .child3 {
  height: 50px;
  width: 50px;
  background: #f3f3f3;
}

/* flex 布局 */
.flexbox {
  display: flex;
  align-items: center;
  justify-content: center;
  background: yellow;
}
/* 定位 */
.positionbox {
  position: relative;
  background: pink;
}
.child2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* table-cell布局 */
.tablecell {
  display: table-cell;
  background: blue;
  vertical-align: middle;
}

.child3 {
  margin: auto;
}

四、浮动

当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出

清除浮动的方式：

方法一：在浮动元素后使用带clear属性的空元素

.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

.clear {
  clear: both;
  }

<div class="news">
    <img src="news-pic.jpg" />
    <p>some text</p>
    <div class="clear"></div>
</div>

方法二：浮动元素的容器元素触发BFC
方法三: 使用CSS的:after伪元素,和方法一类似只是用伪元素实现；
浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。

.news img {
  float: left;
  }

.news p {
  float: right;
  }

.clearfix:after{
  content: "020"; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;  
  }

<div class="news">
	<img src="news-pic.jpg" />
	<p>some text</p>
</div>

pickle_tiger

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录