css
文章平均质量分 58
css
老朱.
业余时间喜欢写点技术博客,读点无用之书。想阅读我更多原创的非技术类文章,可以关注我的公众号 老朱的读书随想
展开
-
页面出现不必要的滚动条,怎么调试?
不知道你有没有遇到过这样的情况,明明一个网页上的内容不多,却出现了一个纵向的滚动条。有些强迫症的你,很想找出是哪个地方的height设置错了。如果你遇到过这样的问题,应该明白我在说什么。我今天就遇到了这样的问题。我的解决过程是这样的:按F12进入调试模式,从body下逐个尝试给组件加display: none 这个属性,如果滚动条还存在,那说明跟它没关系,直到找到那个外层的元素,然后不断用这种方法来尝试他的子元素,最终就是它的height有问题。...原创 2021-08-20 21:06:39 · 2565 阅读 · 2 评论 -
在vue项目中使用less
less提供了可编程的css,包括以下机制,可以提高css代码的可维护性和可读性定义变量并多次使用mixins(一个样式中包含另一个样式)格式嵌套(可以形成代码块,有利于提高可读性)@import (可以将样式拆分到不同的文件中,形成组件)本篇主要来讨论如何在vue项目中使用less安装依赖包npm install -D less less-loader@7.3.0由于less-loader和webpack版本适配的问题,下面提供更多版本信息@vue/cli的版本$ vue --v原创 2021-08-20 16:30:08 · 28623 阅读 · 0 评论 -
用css实现header/footer/aside/main布局
对于程序员来讲,布局可把人给难为坏了。他们可能会求助于像element-ui、antd之类的UI框架,也可能会求助于position: absolute;之类的大招。本篇来谈一下如何通过flex实现最常见的那种header/ footer/ aside/ main之类的布局。实例代码html代码:<body> <div id="app"> <div id="header"></div> <div id="content">原创 2021-08-19 19:06:24 · 5513 阅读 · 0 评论 -
熟练使用flex布局
flex是一种功能非常丰富的布局模式,是为了弥补已有的布局手段的短板。作为一种功能丰富的布局模式,它一口气解决以下全部问题:如何支持横向布局和纵向布局百分比模式的动态宽度和动态高度如何实现元素的排列方向和动态间距如何实现自动换行下面我们来逐个实现上面的所有场景。基础用法<div class="container"> <div class="item"></div> <div class="item"></原创 2021-08-20 12:06:41 · 5504 阅读 · 0 评论