CSS世界
找到Web
专注于w3c标准,先定一个小目标,日更一篇,近期主要关于前端性能优化方面
展开
-
CSS background 属性
background-color与 background设置背景颜色的区别background-color设置的只是背景色,background设置的是整个背景。当元素本身设置了background-image属性时,如果设置了background-color,图片不会被覆盖,background-color会在image底层;如果设置的是background,那么图片会被颜色给覆盖掉。如下图所示,是分别设置了background-image和background-color的效果。如果设置的back原创 2020-11-07 16:05:55 · 304 阅读 · 0 评论 -
CSS position 定位
CSS positionCSS position属性用于指定一个元素在文档中的定位方式。top,right,bottom 和 left 属性则决定了该元素的最终位置。常用语法position: static | relative | absolute | sticky | fixed默认值:static,没有继承性。static: 表示指定元素使用正常的布局行为。此时 top, right, bottom, left 和 z-index 属性无效。relative: 相对定位的元素是在文档中的正原创 2020-10-18 00:32:08 · 205 阅读 · 0 评论 -
聊一聊CSS overflow
聊一聊CSS overflowoverflow定义内容溢出框的处理方法,主要有以下几个值:属性值描述visible默认值,元素的内容在元素框之外也可见hidden元素的内容会在边界处被裁减,超出裁剪区域的内容不可见clip完全禁止通过任何机制滚动,此时元素框不属于滚动容器scroll元素的内容会在边界处被裁减,并显示滚动条来适应内容auto如果内容被裁减,则会显示滚动条来适应内容overflow-x 和 overflow-y可以使用over原创 2020-09-15 01:08:56 · 140 阅读 · 0 评论 -
CSS 优化策略之webpack插件压缩CSS体积
CSS 优化策略之webpack插件压缩CSS体积对于CSS文件中包含的不必要的字符,例如注释、空白和缩进,我们可以在生产环境中将其删除,以达到减小文件大小的目的,这种技术也叫minification。而这些可以利用webpack构建工具进行实现。mini-css-extract-plugin提取CSS安装插件:npm install --save-dev mini-css-extract-pluginwebpack.config.js 配置 const MiniCssExtractPl原创 2020-09-06 00:08:53 · 1617 阅读 · 0 评论 -
CSS 优化策略之延迟加载非关键CSS
CSS 优化策略之延迟加载非关键CSSCSS文件是render-blocking resources,必须在浏览器呈现页面之前加载和处理它们,包含不必要的大样式的网页需要更长的时间才能呈现。本文将介绍如何同步加载关键样式,而其他样式则以非阻塞方式加载。如何检测你的网站在Chrome上打开你的网页调出控制台选择 Performance 项在 Performance 页面点击 Reload 分析在分析结果中,浏览器需要等待所有CSS加载并得到处理,然后才能在屏幕上绘制一个像素。你可以通原创 2020-09-01 23:39:02 · 2242 阅读 · 0 评论 -
CSS 高效优化策略之编写风格
CSS 高效优化策略之编写风格一般谈论到效率、性能问题,我们都很少想到CSS在请求回来之后,在浏览器进行CSS渲染的效率是怎样的。本文来介绍一下对于CSS的一些高效优化策略,可以提高我们页面的CSS渲染效率.从右到左值得注意的是,渲染引擎解析 CSS 选择器时是从右往左解析的,这样做是为了减少无效匹配次数,从而匹配快、性能更优。所以,我们在书写 CSS Selector 时,从右向左的 Selector Term 匹配节点越少越好。因此在编写CSS时就要避免深层次的DOM结构,还有一般不要超过3层的原创 2020-08-29 23:54:35 · 141 阅读 · 0 评论 -
CSS display的多种写法
CSS display的多种写法本文将介绍如何通过定义display属性创建一个 CSS formatting boxdisplay属性值先来看标准文档是怎么描述的吧从大的分类来讲,display可以分为6个大类:display-outside所谓display-outside,就是说这些值只会直接影响一个元素的外部表现,而不影响元素里面的儿子级孙子级元素的表现。display: block:定义最基本的block-leveldisplay: inline:定义最基本的的inline-l原创 2020-08-24 08:49:47 · 465 阅读 · 0 评论 -
CSS的inline、inline-block
CSS inline、inline-block本文将介绍内联布局中,内容的布局方式及相关原理。inline box 与 line box对于行框、内联框,标准文档中有个很经典的图。附上自己的一段代码,方便理解。<div style="width: 200px; margin: auto;"> 这是一段代码,又长又好看的代码。 <span style="color: red">这是inline box</span> 这又是一段代码,又长又好看的代码。&l原创 2020-08-15 21:57:34 · 386 阅读 · 0 评论 -
CSS 媒体查询any-hover any-pointer
CSS 媒体查询媒体查询为不同设备之间做样式的适配提供了很好的解决方式,也能够提供一些识别不同设备的方式。常规使用媒体查询可以有以下三种使用方式:1、 <link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css">2、 @import url(example.css) screen and (color);3、 @media screen { * { font-family: sans原创 2020-08-05 23:50:39 · 324 阅读 · 0 评论 -
CSS 列表模型之counter计数器
CSS 列表模型之counter计数器计数器是一种特殊的数字跟踪器,通常用于为CSS列表项自动编号。你可以在项目中通过counter-increment、counter-set、counter-reset来创建一个计数器,并在counter()/counters()中使用。在CSS语法中,需要定义一个counter-name作为计数器的唯一标识,这是必不可少的。解析计数器一般有以下几个步骤:当前计数器从父元素继承而来,遵循父元素的计数规则通过counter-reset实例化一个新的计数器通过原创 2020-07-23 08:25:13 · 511 阅读 · 0 评论 -
CSS 列表模型之marker标记
CSS 列表模型之marker标记本文主要对::master伪元素、list-item下的list-style-image、list-style-type样式属性进行介绍,并介绍了在实际中如何使用。list-item下还有其他不常用的样式属性这里不做介绍。感兴趣的可以自行移步CSS 标准文档::marker 是什么::marker是一个标记伪元素,能够定义内容填充在list-item上代表列表项的标志,先附上一个例子,就能很清楚地看出它的作用。<style>li::marker {原创 2020-07-22 22:35:54 · 4796 阅读 · 0 评论