649浏览

0评论

水平垂直居中的实现

利用绝对定位，先将元素的左上角通过 top:50%和 left:50%定位到页 面的中心，然后再通过 translate 来调整元素的中心点到页面的中心。 该方法需要考虑浏览器兼容问题。利用绝对定位，设置四个方向的值都为 0，并将 marg...

•    热门
• 空空 / htmlcss / 2023-02-07

713浏览

0评论

常见的 CSS 布局单位

常用的布局单位包括像素（px），百分比（%），em，rem，vw/vh。（1）像素（px）是页面布局的基础，一个像素表示终端（电脑、手 机、平板等）屏幕所能显示的最小的区域，像素分为两种类型：CSS 像素和物理像素：CSS 像素：为 web...

•    热门
• 空空 / htmlcss / 2023-02-07

740浏览

0评论

对 CSS 工程化的理解

CSS 工程化是为了解决以下问题：1.宏观设计：CSS 代码如何组织、如何拆分、模块结构怎样设计？2.编码优化：怎样写出更好的 CSS？3.构建：如何处理我的 CSS，才能让它的打包结果最优？...

•    热门
• 空空 / htmlcss / 2023-02-07

733浏览

0评论

CSS 优化和提高性能的方法有哪些？

加载性能：（1）css 压缩：将写好的 css 进行打包压缩，可以减小文件体积。（2）css 单一样式：当需要下边距和左边距的时候，很多时候会选 择 使 用 margin:top 0 bottom 0 ； 但 mar...

•    热门
• 空空 / htmlcss / 2023-02-07

615浏览

0评论

对 CSSSprites 的理解

CSSSprites（精灵图），将一个页面涉及到的所有图片都包含到一张 大图中去，然后利用 CSS 的 background-image，background-repeat， background-position 属性的组合进行背景定位。...

•    热门
• 空空 / htmlcss / 2023-02-07

791浏览

0评论

CSS3 中有哪些新特性

新增各种 CSS 选择器 （: not(.input)：所有 class 不是“input” 的节点）圆角 （border-radius:8px）多列布局 （multi-column layout）阴影和反射 （Shadowef...

•    热门
• 空空 / htmlcss / 2023-02-06

649浏览

0评论

link 和@import 的区别

两者都是外部引用 CSS 的方式，它们的区别如下：link 是 XHTML 标签，除了加载 CSS 外，还可以定义 RSS 等其他事务； @import 属于 CSS 范畴，只能加载 CSS。link 引用 CSS 时，在页面载入时同时加载...

•    热门
• 空空 / htmlcss / 2023-02-06

669浏览

0评论

display 的 block、inline 和 inline-block 的区别

（1）block：会独占一行，多个元素会另起一行，可以设置 width、 height、margin 和 padding 属性；（2）inline：元素不会独占一行，设置 width、height 属性无效。 但可以设置水平方向...

•    热门
• 空空 / htmlcss / 2023-02-06

616浏览

0评论

说一下 HTML5 drag API

dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。dr...

•    热门
• 空空 / htmlcss / 2023-02-06

674浏览

0评论

Canvas 和 SVG 的区别

（1）SVG：SVG 可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标 记语言 XML 描述的 2D 图形的语言，SVG 基于 XML 就意味着 SVG DOM 中的每个元素都是可用的，可以为某个元素附加 J...

•    热门
• 空空 / htmlcss / 2023-02-06