原子类CSS：不就是最原始的CSS设计模式嘛？
前段时间在面试的时候，被问到原子类CSS，鉴于自己这个老前端已经几年没有关注前端最新的技术了，对于“原子类”这一名词有些困扰。 事后一查，这不就是“bootstrap”的样式类的新名词嘛？老旧的东西又拿出来说。其实这都是最原始的CSS设计模式了了。 原子类CSS（Atomic CSS）是一种CSS设计模式，它将样式属性拆分为独立的、...
前段时间在面试的时候，被问到原子类CSS，鉴于自己这个老前端已经几年没有关注前端最新的技术了，对于“原子类”这一名词有些困扰。 事后一查，这不就是“bootstrap”的样式类的新名词嘛？老旧的东西又拿出来说。其实这都是最原始的CSS设计模式了了。 原子类CSS（Atomic CSS）是一种CSS设计模式，它将样式属性拆分为独立的、...
CSS变量简介 CSS变量的定义及使用如下，可定义的类型非常广泛。 /* 声明 */ --VAR_NAME: <声明值>; /* 使用 */ var(--VAR_NAME) /* 根元素选择器（全局作用域），例如 <html> */ :root { /* CSS 变量声明 */ --main-color: #ff00ff; --main-bg: rgb(200, 255, 255); --logo-border-color...
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 资源标记为不阻塞渲...
1.理解flex Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。可以随着页面大小的改变自适应页面布局。 块级元素 .box{ display:flex; } 行内元素也可以设置成flex布局 .box{ display:inline-flex; } 设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 2.justify-cont...
使用html+css制作的图案或图形化内容响应速度最快，如下贴出我在开发过程中使用CSS+HTML制作的饼图和条形图，有需要的可以拿去。
浏览器通过http或者本地文件收到http响应数据报文后，根据主体中content-type字段值，判断是否为html文档。为html文档时，新建渲染进程，网络进程和渲染进程通过管道通信共享数据。渲染进程一边从管道获取数据一边进行解析(HtmlParse)。 如果此时遇到外部资源，会再次启动网络接口（http）获取外部资源，对于相应的外部...
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，若不是，则选择...