![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
鸥总
西安电子科技大学
展开
-
vue3+vite 用lib-flexible适配移动端及大屏方案
lib-flexible是淘宝项目组开源的一个项目,lib-flexible和px2rem-loader一起做适配方案,可以实现自动将css中的px转换成rem。从此段源码中我们不难看出,当屏幕宽度除以dpr(dpr是一个倍数,此处一般为1)大于540这个特定值的时候,那么就不再进行适配了。那么我们如何解决这个问题呢?在上述源码中,进行修改。在build/utils.js中,找到exports.cssLoaders,作出如下修改。在main.js/main.ts中引入lib-flexible。原创 2023-09-23 09:51:17 · 2070 阅读 · 0 评论 -
css页面布局的几种方式
父级元素设置左右的 padding,三列均设置向左浮动,中间一列放在最前面,宽度设置为父级元素的宽度,因此后面两列都被挤到了下一行,通过设置 margin 负值将其移动到上一行,再利用相对定位,定位到两边。双飞翼布局,双飞翼布局相对于圣杯布局来说,左右位置的保留是通过中间列的 margin 值来实现的,而不是通过父元素的 padding 来实现的。三栏布局一般指的是页面中一共有三栏,左右两栏宽度固定,中间自适应的布局,一般两栏布局指的是左边一栏宽度固定,右边一栏宽度自适应。(2) 三栏布局的实现。原创 2023-06-29 16:44:50 · 82 阅读 · 0 评论 -
css对盒模型的理解
IE盒模型的width和height属性的范围包含了border、padding和content。: 分别是margin、border、padding和content。标准盒模型的width和height属性的范围只包含了content,标准盒模型和IE盒模型的区别在于。面试碰到的一个问题,记录一下。:标准盒子模型、IE盒子模型。原创 2023-06-29 15:36:49 · 443 阅读 · 0 评论 -
CSS布局单位px % em rem vw vh的区别
(2)百分比(%),当浏览器的宽度或者高度发生变化时,通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化,从而实现响应式的效果。(4)vw/vh是与视图窗口有关的单位,vw表示相对于视图窗口的宽度,vh表示相对于视图窗口高度,除了vw和vh外,还有vmin和vmax两个相关的单位。(3)em和rem相对于px更具灵活性,它们都是相对长度单位,它们之间的区别:em相对于父元素,rem相对于根元素。vw:相对于视窗的宽度,视窗宽度是100vw;vh:相对于视窗的高度,视窗高度是100vh;原创 2023-06-26 09:32:25 · 416 阅读 · 0 评论 -
css 为什么要清除浮动
清除浮动: 非IE浏览器下,容器不设高度且子元素浮动时,容器高度不能被内容撑开。此时,内容会溢出到容器外面而影响布局。4.使用 :after 伪元素。3.包含浮动元素的父级标签添加overflow:hidden或者overflow:auto。若浮动的元素不是第一个元素,则该元素之前的元素也要浮动,否则会影响页面的显示结构。2.最后一个浮动元素之后添加一个空的div标签,并添加clear:both样式。父元素的高度无法被撑开,影响与父元素同级的元素。与浮动元素同级的非浮动元素会跟随其后。浮动元素引起的问题?原创 2023-06-26 09:23:31 · 61 阅读 · 0 评论