css
文章平均质量分 54
前端Jason
做一个能独立思考的人,有话可说,有事可干,歌以咏志。
展开
-
CSS Grid 网格布局-项目属性
代码地址一. 项目的位置<div class="box"> <div class="item item-1">1</div> <div class="item item-2">2</div> <div class="item item-3">3</div> <div class="item item-4">4</div> <div class="item item-5">5&原创 2021-11-11 15:28:24 · 661 阅读 · 0 评论 -
CSS Grid 网格布局-容器属性
代码地址一. display: grid<span>foo</span><div class="box"> <div class="item"><p>1</p></div> <div class="item"><p>2</p></div> <div class="item"><p>3</p></div><原创 2021-11-11 15:17:37 · 832 阅读 · 0 评论 -
CSS Grid 网格布局-基本介绍
概述网格布局(Grid)是最强大的 CSS 布局方案。它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了。上图这样的布局,就是 Grid 布局的拿手好戏。Grid 布局与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置。但是,它们也存在重大区别。Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"原创 2021-11-11 14:10:19 · 475 阅读 · 0 评论 -
修改placeholder样式
核心:input::placeholder如果要细分浏览器,则写法如下:input::-webkit-input-placeholder{ /* Chrome */ color:red; background-color: aqua;}input::-moz-placeholder{ /* Mozilla Firefox 19+ */ color:red; background-color: aqua;}input:-moz-placeholde原创 2021-02-28 14:33:58 · 199 阅读 · 0 评论 -
css自定义鼠标悬停提示
!不需要JS就可以定制化hover效果核心:1. :hover:after2. css的attr()函数举个例子,亲测有效:html:<div title="提示内容">声乐</div>css:div { position: relative;} div:hover:after { position: absolute; margin-left: 10px; padding: 2px 10px; box-shadow: 0 2px 9px原创 2021-02-28 14:23:37 · 2198 阅读 · 0 评论 -
障眼法改变复选框样式
复选框的可操作的样式只有width和height,如何做种定制化的复选框?思路:设置一个假盒子,通过伪类 :checked 规定复选框选中状态时假盒子的样式,达到操作复选框切换加盒子的目的关键:复选框的透明度要为0假盒子和复选框位置重叠,且宽高一样复选框层级必须比假盒子高例:<input type="checkbox" name="" id=""><div></div>input[type="checkbox"] { width: 40px原创 2020-05-16 13:37:34 · 224 阅读 · 0 评论 -
字体模糊问题
封装的抽屉组件需要一个滑入滑出效果,因此在封装的时候使用的css3的transform: translate(),通过插槽的显示插入div,但此时div内的h3和p标签的字体偶尔会出现模糊效果。出现原因:h3和p的margin-bottom默认为奇数解决办法:保证装字体的容器(盒子)宽高为正整数并为偶数<Drawer isArrow :isVisible="isVisibl...原创 2020-04-30 14:37:47 · 898 阅读 · 0 评论 -
拖拽改变鼠标样式
在使用ant-design-vue的tree组件的时候,需要拖拽树的子节点到地图组件上,但是一旦超出tree的盒子范围鼠标样式会不对,是一个圆圈加/的鼠标样式,这个鼠标样式给用户传达的信息是不可拖拽,因此要改变鼠标样式解决办法:在装地图组件的父盒子上使用注册一个@dragover="dragover"事件,并且阻止默认行为。相关知识点:在drag&drop API中提供了...原创 2020-04-30 14:27:46 · 8605 阅读 · 2 评论 -
响应式布局的两种方式
媒体查询/*@media screen and (条件){ html{ font-siz:值px }}*//*实现rem的适配设计图是 750需要适配的设备:750 720 540 480 424 414 400 384 375 360 320 定义函数 */@media screen and (min-width:320px){ h...原创 2020-02-01 11:04:58 · 630 阅读 · 0 评论 -
css超集-less
less是什么less是css的超集,css有的less有,css没有的less也有。比如函数、变量、新书写规则浏览器不认识less 但是可以借助于插件将less 转换成css 浏览器最终还是识别的是css 只是这个css是有less编译过来的vscode插件:easy less注意:安装less的时候需要在setting.json文件中添加"less.compile": {"...原创 2019-11-01 10:15:49 · 277 阅读 · 0 评论 -
响应式布局-bootstrap
响应式什么是响应式布局响应式布局(respond layout)是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端(手机、平板、pc电脑) ——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。为什么要有响应式布局?在移动互联日益成熟的时候,在PC端开发的网页已经无法满足移动设备的要求。通常的做法是针对移动...原创 2019-11-01 10:12:17 · 417 阅读 · 0 评论 -
rem布局
什么是rem ?rem是一个相对单位,思想参考的是em,em相对的是当前文字的font-size大小,但是rem相对的是当前html的font-size的大小。例如当前一个字的大小是16px,当前HTML的font-size:50px,也就是说1em=10px,1rem=50px为什么要用rem目的:实现不同页面宽度和高度都自适应为什么不用em呢?因为em参照的是当前文字的大小 即...原创 2019-11-01 10:04:02 · 111 阅读 · 0 评论