css
小彭努力中
不积跬步,无以至千里
展开
-
对 CSS 工程化的理解
它和预处理器的不同就在于,预处理器处理的是 类CSS,而 PostCss 处理的就是 CSS 本身。PostCss 做的是类似的事情:它可以编译尚未被浏览器广泛支持的先进的 CSS 语法,还可以自动为一些需要额外兼容的语法增加前缀。更强的是,由于 PostCss 有着强大的插件机制,支持各种各样的扩展,极大地强化了 CSS 的能力。若提前插入了未编译的代码,那么 webpack 是无法理解这坨东西的,它会无情报错。这三点是传统 CSS 所做不到的,也正是预处理器所解决掉的问题。原创 2024-03-29 11:38:58 · 1013 阅读 · 0 评论 -
用CSS实现单行、多行文本溢出隐藏
注意:由于上面的三个属性都是 CSS3 的属性,没有浏览器可以兼容,所以要在前面加一个。来兼容一部分浏览器。原创 2024-03-29 11:37:39 · 402 阅读 · 0 评论 -
前端如何判断元素是否到达可视区域
【代码】前端如何判断元素是否到达可视区域。原创 2024-03-28 09:02:35 · 497 阅读 · 0 评论 -
CSS 优化和提高性能的方法有哪些?
(5)尽量少的去使用后代选择器,降低选择器的权重值。后代选择器的开销是最高的,尽量将选择器的深度降到最低,最高不要超过三层,更多的使用类来关联每一个标签元素。(9)css雪碧图,同一页面相近部分的小图标,方便使用,减少页面的请求次数,但是同时图片本身会变大,使用时,优劣考虑清楚,再使用。(10)正确使用display的属性,由于display的作用,某些样式组合会无效,徒增样式体积的同时也影响解析性能。(1)将具有相同属性的样式抽离出来,整合并通过class在页面中进行使用,提高css的可维护性。原创 2024-03-27 09:08:32 · 623 阅读 · 0 评论 -
对Flex布局的理解及其使用场景
flex布局是CSS3新增的一种布局方式,可以通过将一个元素的display属性值设置为flex从而使它成为一个flex容器,它的所有子元素都会成为它的项目。可以使用justify-content来指定元素在主轴上的排列方式,使用align-items来指定元素在交叉轴上的排列方式。对于容器中的项目,可以使用order属性来指定项目的排列顺序,还可以使用flex-grow来指定当排列空间有剩余的时候,项目的放大比例,还可以使用flex-shrink来指定当排列空间不足时,项目的缩小比例。原创 2024-03-27 09:06:16 · 471 阅读 · 0 评论 -
对 CSS Sprites(精灵图) 的理解
CSSSprites(精灵图),将一个页面涉及到的所有图片都包含到一张大图中去,然后利用CSS的 background-image,background-repeat,background-position属性的组合进行背景定位。原创 2024-03-26 09:25:01 · 369 阅读 · 0 评论 -
开发中常见的图片格式及使用场景
PNG是一种比较新的图片格式,PNG-8是非常好的GIF格式替代者,在可能的情况下,应该尽可能的使用PNG-8而不是GIF,因为在相同的图片效果下,PNG-8具有更小的文件体积。JPEG的图片的优点是采用了直接色,得益于更丰富的色彩,JPEG非常适合用来存储照片,与GIF相比,JPEG不适合用来存储企业Logo、线框类的图。文件小,是GIF格式的优点,同时,GIF格式还具有支持动画以及透明的优点。PNG-24的优点在于它压缩了图片的数据,使得同样效果的图片,PNG-24格式的文件大小要比BMP小得多。原创 2024-03-26 09:24:01 · 398 阅读 · 0 评论 -
CSS中水平垂直居中的实现
【代码】CSS中水平垂直居中的实现。原创 2024-03-18 09:04:59 · 488 阅读 · 0 评论 -
CSS中三栏布局的实现
三栏布局一般指的是页面中一共有三栏,原创 2024-03-15 08:57:40 · 553 阅读 · 0 评论 -
CSS中两栏布局的实现
【代码】CSS中两栏布局的实现。原创 2024-03-14 09:30:35 · 539 阅读 · 0 评论 -
CSS中px、em、rem的区别及使用场景
三者的区别:使用场景:原创 2024-03-14 09:27:54 · 509 阅读 · 0 评论 -
常见的CSS布局单位
,当浏览器的宽度或者高度发生变化时,通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化,从而实现响应式的效果。一般认为子元素的百分比相对于直接父元素。是与视图窗口有关的单位,vw表示相对于视图窗口的宽度,vh表示相对于视图窗口高度,除了vw和vh外,还有vmin和vmax两个相关的单位。常用的布局单位包括像素(原创 2024-03-13 10:24:02 · 470 阅读 · 0 评论 -
CSS中display、float、position的关系
总的来说,可以把它看作是一个类似优先级的机制,"position:absolute"和"position:fixed"优先级最高,有它存在的时候,浮动不起作用,'display'的值也需要调整;(3)如果position的值不为absolute或者fixed,则判断float属性的值是否为none,如果不是,则display的值则按上面的规则转换。(4)如果float的值为none,则判断元素是否为根元素,如果是根元素则display属性按照上面的规则转换,如果不是,则保持指定的display属性值不变。原创 2024-03-13 10:18:56 · 507 阅读 · 0 评论 -
CSS中position的属性有哪些,区别是什么
【代码】CSS中position的属性有哪些,区别是什么。原创 2024-03-12 11:12:40 · 629 阅读 · 0 评论 -
CSS中元素的层叠顺序
层叠顺序,英文称作 stacking order,表示元素发生层叠时有着特定的垂直显示顺序。当定位元素z-index:auto,生成盒在当前层叠上下文中的层级为 0,不会建立新的层叠上下文,除非是根元素。(2)负的z-index:当前层叠上下文中,z-index属性值为负的元素。(7)正z-index:z-index属性值为正的定位元素。(1)背景和边框:建立当前层叠上下文元素的背景和边框。(6)z-index:0:层叠级数为0的定位元素。(3)块级盒:文档流内非行内级非定位后代元素。原创 2024-03-09 14:01:23 · 613 阅读 · 0 评论 -
什么是margin重叠问题?如何解决?
两个块级元素的上外边距和下外边距可能会合并(折叠)为一个外边距,其大小会取其中外边距值大的那个,这种行为就是外边距折叠。这种脱离文档流的元素的外边距不会折叠。原创 2024-03-08 09:03:14 · 518 阅读 · 0 评论 -
对BFC的理解以及如何创建BFC
通俗来讲:BFC是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品。如果一个元素符合触发BFC的条件,则BFC中的元素布局不受外部影响。块格式化上下文(Block Formatting Context,BFC)是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域。这样右边就触发了BFC,BFC的区域不会与浮动元素发生重叠,所以两侧就不会发生重叠,实现了自适应两栏布局。原创 2024-03-06 09:10:11 · 604 阅读 · 0 评论 -
CSS浮动详解
非IE浏览器下,容器不设高度且子元素浮动时,容器高度不能被内容撑开。此时,内容会溢出到容器外面而影响布局。这种现象被称为浮动(溢出)。原创 2024-03-05 16:17:31 · 336 阅读 · 0 评论 -
CSS中如何解决 1px 问题?
1px 问题指的是:在一些Retina屏幕的机型上,移动端页面的 1px 会变得很粗,呈现出不止 1px 的效果。原因很简单——CSS 中的 1px 并不能和移动设备上的 1px 划等号。它们之间的比例关系有一个专门的属性来描述:window.devicePixelRatio = 设备的物理像素 / CSS像素。打开 Chrome 浏览器,启动移动端调试模式,在控制台去输出这个的值。原创 2024-03-04 09:35:13 · 715 阅读 · 0 评论 -
CSS中画一条0.5px的线
这样就能缩放到原来的0.5倍,如果是1px那么就会变成0.5px。viewport只针对于移动端,只在移动端上才能看到效果。原创 2024-03-01 09:13:28 · 692 阅读 · 0 评论 -
实现一个宽高自适应的正方形
【代码】实现一个宽高自适应的正方形。原创 2024-02-29 13:36:19 · 378 阅读 · 0 评论 -
用CSS实现一个扇形
【代码】用CSS实现一个扇形。原创 2024-02-28 10:30:30 · 1710 阅读 · 0 评论 -
用CSS实现一个三角形
CSS绘制三角形主要用到的是border属性,也就是边框。平时在给盒子设置边框时,往往都设置很窄,就可能误以为边框是由矩形组成的。实际上,border属性是右三角形组成的,下面看一个例子:div { width: 0; height: 0; border: 100px solid; border-color: orange blue red green;}将元素的长宽都设置为0,显示出来的效果是这样的:所以可以根据border这个特性来绘制三角形:原创 2024-02-27 09:29:27 · 498 阅读 · 0 评论 -
对盒模型的理解
盒模型都是由四个部分组成的,分别是margin、border、padding和content。CSS3中的盒模型有以下两种:标准盒子模型、IE盒子模型。原创 2024-02-21 09:27:41 · 302 阅读 · 0 评论 -
CSS中伪元素和伪类的区别和作用?
伪类是通过在元素选择器上加⼊伪类改变元素状态,⽽伪元素通过对元素的操作进⾏对元素的改变。原创 2024-02-20 10:58:12 · 506 阅读 · 0 评论 -
css中transition和animation的区别
transition是过度属性,强调过度,它的实现需要触发一个事件(比如鼠标移动上去,焦点,点击等)才执行动画。它类似于flash的补间动画,设置一个开始关键帧,一个结束关键帧。 animation是动画属性,它的实现不需要触发事件,设定好时间之后可以自己执行,且可以循环一个动画。它也类似于flash的补间动画,但是它可以设置多个关键帧(用@keyframe定义)完成动画。原创 2024-02-19 09:29:46 · 340 阅读 · 0 评论 -
link和@import的区别
两者都是外部引用CSS的方式,它们的区别如下:原创 2024-02-05 17:30:34 · 423 阅读 · 1 评论 -
隐藏元素的方法有哪些
display: none:渲染树不会包含该渲染对象,因此该元素不会在页面中占据位置,也不会响应绑定的监听事件。 visibility: hidden:元素在页面中仍占据空间,但是不会响应绑定的监听事件。 opacity: 0:将元素的透明度设置为 0,以此来实现元素的隐藏。元素在页面中仍然占据空间,并且能够响应元素绑定的监听事件。 position: absolute:通过使用绝对定位将元素移除可视区域内,以此来实现元素的隐藏。 z-index: 负值:来使其他元素遮盖住该元素,以此来实现隐藏。原创 2024-02-05 08:58:23 · 579 阅读 · 1 评论 -
display的block、inline和inline-block的区别
元素不会独占一行,设置width、height属性无效。但可以设置水平方向的margin和padding属性,不能设置垂直方向的padding和margin;会独占一行,多个元素会另起一行,可以设置width、height、margin和padding属性;将对象设置为inline对象,但对象的内容作为block对象呈现,之后的内联对象会被排列在同一行内。原创 2024-02-05 08:56:37 · 445 阅读 · 1 评论 -
CSS中可继承与不可继承属性有哪些
规定元素应该生成的框的类型。原创 2024-02-04 09:10:50 · 614 阅读 · 0 评论 -
CSS选择器及其优先级
对于选择器的优先级:注意事项:原创 2024-02-04 08:58:17 · 877 阅读 · 1 评论