Menu

css

img元素srcset属性含义及作用

HTML img元素中有一个很少用的 srcset 属性,用于浏览器根据宽、高和像素密度来加载相应的图片资源。 属性格式:图片地址 宽度描述w 像素密度描述x,多个资源之间用逗号分隔。例如: <img src="small.jpg " srcset="big.jpg 1440w, middle.jpg 800w, small.jpg 1x" /> 上面的例子表示浏览器宽度达到 800px 则加载 ...

网站动态换肤

各位如果为自己的网站动态的换肤是怎么操作的? 一般动态更新<style>标签内的样式字符串,使用CSS变量实现全局控制。<style>标签中只传入变量,在具体的样式中使用var(--aaa)引入。 今天看到一个挺好的方法,到时可以试试。 这个方法是借助rel属性的alternate值(候补属性)实现。 <link href="reset.cs...

如何优化CSS阻塞

默认情况下,CSS 被视为阻塞渲染的资源,这意味着浏览器将不会渲染任何已处理的内容,直至 CSSOM 构建完毕。所以要精简 CSS,尽快提供它,并利用媒体类型和查询来解除对渲染的阻塞。 总而言之,记住下面这几条: 默认情况下,CSS 被视为阻塞渲染的资源。 我们可以通过媒体类型和媒体查询将一些 CSS 资源标记为不阻塞渲...

CSS重点知识总结—flex布局

1.理解flex Flex 是 Flexible Box 的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。可以随着页面大小的改变自适应页面布局。 块级元素 .box{ display:flex; } 行内元素也可以设置成flex布局 .box{ display:inline-flex; } 设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。 2....

纯CSS+HTML制作饼图和条形图

使用html+css制作的图案或图形化内容响应速度最快,如下贴出我在开发过程中使用CSS+HTML制作的饼图和条形图,有需要的可以拿去。

html、js、css渲染顺序

浏览器通过http或者本地文件收到http响应数据报文后,根据主体中content-type字段值,判断是否为html文档。为html文档时,新建渲染进程,网络进程和渲染进程通过管道通信共享数据。渲染进程一边从管道获取数据一边进行解析(HtmlParse)。 如果此时遇到外部资源,会再次启动网络接口(http)获取外部资源,对于相应的外部...

前端重点知识总结—CSS3

1.CSS3有哪些新属性,举例 边框属性:border-radius、box-shadow 背景属性:background-size、background-origin 2D、3D转换:transform 动画属性:animation 2.nth-child和:nth-of-type的区别 ele:nth-of-type(n)是指父元素下第n个ele元素, ele:nth-child(n)是指父元素下第n个元素且这个元素为ele,若不是,则选择...

CSS clip:rect 矩形剪裁功能,截取图片某一块

最近我在制作一款主题的时候,在自适应css设计中,为了调整图片大小,又不愿意改变图片比例的情况下,用到了CSS剪裁功能。 说实话,这个功能在国内运用的比较少。CSS中有一个属性叫做clip,为修剪,剪裁之意。配合其属性关键字rect可以实现元素的矩形裁剪效果。此属性安安稳稳地存在于CSS2.1中,且使用上基本上没有类似...

前端重点知识总结—CSS基础

1.什么是盒子模型? 在网页中,一个元素所占空间类似于一个盒子,包括元素的内容(content),元素的内边距(padding),元素的边框(border),元素的外边距(margin)四个部分。4个部分一起构成了元素的盒模型。 box-sizing 属性控制盒模型的尺寸。默认情况下,box-sizing的值为content-box。代表一个盒子的整体宽高由设置的wid...