CSS
关注
分享
扫一扫
CaseyWei
感激每个遇见的人
展开
-
(转)css实现盒子高度随宽度等比例缩放的四种方式
前提：先去下margin,padding,方便看效果*{ margin:0; padding:0}方法一：定位css.container { background-color: silver; width: 100%; position: relative; display: inline-block;}.dummy { margin-top: 100%;}.content { position: absolut...原创 2024-03-15 15:23:32 · 1118 阅读 · 0 评论 -
(转)Chrome的最小字体12px限制解决办法
相信不少做网站的用户会有这样一个问题，Chrome默认最小字体是12px（最新版英文也有此问题），这个是 Chrome 为了更好显示中文设计的，但是这样一来就会出现某些上标、下标字体过大，影响用户体验。原创 2023-01-17 11:29:35 · 5596 阅读 · 5 评论 -
CSS图片居中显示不变形，只显示中间部分
平时图片直接上下左右平铺了，今天产品和UI要求图片不能变形，居中显示，记录一下。原创 2022-12-13 14:33:47 · 2240 阅读 · 0 评论 -
css怎样设置文本格式两端对齐
在css中，使用text-align属性设置为justify，同时设置标签的宽度为100%。场景：经常做一些app的时候发现文字两端不对齐，长时间不用容易忘记，记录一下。原创 2022-11-24 17:49:25 · 286 阅读 · 0 评论 -
flex-direction为column时设置水平居中
flex-direction为column时设置水平居中原创 2022-11-24 17:26:49 · 497 阅读 · 0 评论 -
html5实现移动端抢红包雨
html5实现移动端抢红包雨原创 2022-07-29 15:12:47 · 1333 阅读 · 0 评论 -
（转）css3中的@media用法总结
1、head标签中引入//语法： @media mediatype and | not | only (media feature) { css-code; }//也可以针对不同的媒体使用不同的stylesheets:<!--<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">--><link rel="stylesheet" ..原创 2022-04-20 14:55:06 · 1647 阅读 · 0 评论 -
（转）css怎么一个DIV盒子同时插多张张背景图片
在使用多个背景图时，首先把background-image属性的值用逗号隔开，列出需要用的图像；然后用background-repeat定义重复属性；最后用background-position定义每张小图的位置即可。在使用多个背景图时，只需把 background-image 属性的值用逗号隔开，列出想用的图像，然后用 background-repeat 定义重复属性，最后用 background-position 定义每张小图的位置。HTML代码：<div></div.原创 2022-04-16 08:31:51 · 7102 阅读 · 0 评论 -
（转）CSS width fit-content 等属性详解
1.width: fit-content根据内容自适应宽度 可以结合margin-auto 来实现居中2.width: min-content使用子元素中宽度最小的。（无论子元素是inline,还是 block，都会使用最小的宽度）3.width:max-content使用子元素中最大的。无论是inline还是block链接：with fit-content 等属性详解 - 菜鸟木易 - 博客园...原创 2022-04-01 11:03:43 · 2459 阅读 · 0 评论 -
（转）点击按钮向左侧滑动效果（Drawer 抽屉）
平时都是使用ui组件库里的轮子实现动效，古老项目需要原生实现一下，记录一下。<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>向左侧滑动效果</title><script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>&..原创 2022-04-01 10:48:02 · 1662 阅读 · 0 评论 -
fixed定位——定宽高盒子垂直水平居中
1.通过transform实现：<style type="text/css"> .center { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }</style>2.通过设置margin实现：<style type="text/css"> .center {原创 2022-03-25 16:28:00 · 1149 阅读 · 0 评论 -
移动端rem适配方案
适配方案有很多，rem方案使用了很久了，一直没有记录，今天记录一下。原理：通过根据屏幕尺寸，成比例改变html的font-size实现适配。优化：1.大家好多使用媒体查询改变html的font-size比较死板，遇到一些屏幕不能完美的适配有一点偏差，通过获取设备屏幕尺寸，精准计算，精准适配。2.平时UI以iphone6为尺寸出设计稿，通过下边方案，1rem即代表设计稿的10px，便于计算编写页面。代码：//动态为根元素设置字体大小function init () ...原创 2021-12-22 15:56:37 · 583 阅读 · 0 评论 -
CSS实现抽奖大转盘
1.转盘效果：2.代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>幸运大转盘</title> <style> * { /* 重置默认样式 */ margin: 0; padding: 0; border: none; outlin..原创 2021-08-05 15:01:26 · 1620 阅读 · 1 评论 -
css自定义弹出框（不使用任何框架样式）
1.效果图如下：该效果完全手写css，不引用外部框架css2.html代码：<!-- 底部透明灰色层 --><div class='mask' style="position:fixed;top:0;left:0;z-index:998;width:100%;height:100%;display:none;background-color:#000;opacity:0.5;overflow:hidden;"></div><!-- 提示层 -.原创 2021-08-05 14:52:43 · 1060 阅读 · 0 评论 -
css实现盒子内容可滚动但滚动条隐藏
<div class="sidebar"></div>谷歌浏览器隐藏方式： .sidebar::-webkit-scrollbar{ width: 0!important; }但是会发现火狐浏览器还是会显示滚动条：火狐浏览器隐藏解决办法如下：.sidebar { overflow-y: scroll; scrollbar-color: transparent transparent; scrollbar-track-co.原创 2021-08-04 16:25:38 · 1177 阅读 · 0 评论 -
vue——项目打包之后background-image引用都用相对路径（../../）图片无法显示404的解决办法
问题：项目中图片都放在src/img文件夹，img和background-image引用都用相对路径，即../../这种形式在打包build的设置路径assetsPublicPath: ‘./‘，然后那些没有转成base64的背景图都失效了，图片都404了。比如：<div :style="{background-image:'url('assets/img/common/bg.png')'}"></div><span :style="{background-原创 2021-04-25 18:38:05 · 2306 阅读 · 0 评论 -
（转）vue自动添加浏览器兼容前后缀
1.安装loader 安装postcss-loader 和 autoprefixer 下载：cnpm install postcss-loader autoprefixer --save-dev2.在webpack.config.js里面设置以下代码：test:/\.css$/,use: ['style-loader','css-loader',{ loader: "postcss-loader", options:{ plugins:[...原创 2021-04-23 10:59:29 · 526 阅读 · 0 评论 -
vue中app.vue中设置height:100%无效的问题及解决方法
设置height: 100%;是无效的，在chrome的Elements中发现height仍然是0px.设置高度100%时，div的高度会等同于其父元素的高度。而上面中id为app的div（vue挂载的div）的父节点是body标签，body标签的父节点是html标签。在默认情况下html和body标签的高度为auto，而浏览器是不会自动给标签添加高度的，所以html和body标签就为0，自然子div的高度设置为100%就不起作用了。此时应该在App.vue文件style中添加如下代码： ht原创 2021-04-23 10:50:03 · 2246 阅读 · 1 评论 -
（转）element 的dialog嵌套问题，第二次弹出的会被遮住的解决办法
今日在做项目的时候，遇到一个小问题，在同一页面，使用Element的弹框组件，却发现第二次弹框得鼠标点击之后才会显示变亮，似乎被遮住了！（如图效果）;才发现，element 的dialog嵌套问题，之所以第二次弹出的会被遮住，是因为没有给定 append-to-body正常情况下，我们不建议使用嵌套的 Dialog，如果需要在页面上同时显示多个 Dialog，可以将它们平级放置。对于确实需要嵌套 Dialog 的场景，我们提供了append-to-body属性。将内层 Dialog 的该属性.原创 2020-11-15 18:01:16 · 2017 阅读 · 0 评论 -
（转）巧用transform实现HTML5 video标签视频比例拉伸
前言原文地址曾几何时，项目中有碰到视频比例拉伸的需求，但是发现这个看似再普通不过的一个需求，找遍全网至今都没有找到解决方法。因为强制给video标签设置width和height的话只会将video的显示区域拉伸，但是里面的视频还是保持原始比例，怎么调都没用：因为当我横向拉伸时：当我纵向拉伸时：2016-09-21 11:15:40 更新：感谢 @RileyRen 提醒，原来还有object-fit这一属性，把它设置为fill就满足需求了，泪奔~，这篇文章就当看个笑话吧，哎，不原创 2020-10-14 15:59:29 · 2171 阅读 · 0 评论 -
（转）flex布局换行后间隙问题
问题描述今天遇到flex布局换行后产生间隙的问题，本来预期得到以下结果 pre.PNG具体实现如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia...原创 2020-10-14 15:54:15 · 8736 阅读 · 0 评论 -
在Vue中输入框自动获取焦点的三种方式
场景：为了更好的用户体验，用户未填写数据做校验时候直接获取焦点，减少用户点击操作原生JS操作DOM实现使用mounted钩子函数，它表示页面一加载进来就执行函数里面的内容（和window.onload类似）//html部分编号:<input type="text" v-model='newId' id='inputId'>//vue对象var vm = new Vue({el: '#app',data: {newId: '',},// 注意：mounted钩子函.原创 2020-09-03 17:57:35 · 6166 阅读 · 0 评论 -
（转）vue——图片懒加载v-lazy
vue v-lazy官方API：https://www.npmjs.com/package/vue-lazyload1.安装插件npm install vue-lazyload --save-dev2.在入口文件main.js中引入并使用import VueLazyload from 'vue-lazyload'Vue.use(VueLazyload, { loading: require('img/loading.png'),//加载中图片，一定要有，不然会一直...原创 2020-08-24 09:31:50 · 1262 阅读 · 0 评论 -
火狐浏览器css深度选择器/deep/失效问题解决办法
问题：父级用了/deep/，之后的子级不能用，否则会失效。chrome不会有问题解决办法：复制粘贴一份样式，子级不再使用/deep/深度选择器，从而兼容火狐浏览器实例：<style lang="scss" scoped>.dialog-index /deep/ .el-dialog { height: 100% !important; & /deep/ .el-dialog__body { height: calc(100% - 120px);原创 2020-08-18 10:37:10 · 2628 阅读 · 0 评论 -
css 行内元素排列，并顶部对齐
display: inline-block;vertical-align: top;原创 2020-07-23 19:15:26 · 2405 阅读 · 0 评论 -
flex布局justify-content:space-between最后一排数量不够自动向两端排列问题解决办法
flex 布局两端对齐当最后一排数量不够时，会出现以下布局情况如图所示排布情况这时，我们可以下面after伪类，解决最后一排数量不够两端分布的情况.tem-flex{ display: flex; flex-wrap: wrap; justify-content:space-between; text-align: justify; } <!--加上after伪类，解决最后一排数量不够两端分布的情况--> .tem-...原创 2020-05-27 20:30:47 · 1775 阅读 · 2 评论 -
tr，td设置高度不生效
功能：表格内容较长，但是页面高度有限，超出显示滚动条阻碍：给tr或者td加高度都不生效，不显示滚动条解决方案：td中加div，设置高度和内容溢出时的样式<table border='1' width='300'> <tr> <th>繁华之处</th> </tr> <tr> <...原创 2020-03-02 09:05:10 · 4899 阅读 · 0 评论 -
(转)CSS百分比padding实现比例固定图片自适应布局
一、CSS百分比padding都是相对宽度计算的在默认的水平文档流方向下，CSSmargin和padding属性的垂直方向的百分比值都是相对于宽度计算的，这个和top,bottom等属性的百分比值不一样。这么设计的原因在我的新书（应该不出几个月就要出版了）中会有说明，这里不展开。对于padding属性而言，任意方向的百分比padding都现对于宽度计算可以让我们轻松实现固定比例的块...原创 2019-12-06 19:04:37 · 398 阅读 · 0 评论 -
同一DIV内，两个行内块元素不对齐的解决办法
这个跟基线对齐有关系，如果你给写文字的那个span设置一个vertical-align:top,就可以对齐，具体原因如下：从CSS2的可视化格式模型文档中可以看到：inline-block的基线是正常流中最后一个line box的基线，除非这个line box里面既没有line boxes或者本身overflow属性的计算值不是visible，这种情况下基线是margin底边缘。举例：&...原创 2019-12-02 19:04:17 · 1839 阅读 · 0 评论 -
CSS3动态计算公式——calc()
calc() 函数用于动态计算长度值。需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；任何长度值都可以使用calc()函数进行计算；calc()函数支持 "+", "-", "*", "/" 运算；calc()函数使用标准的数学运算优先级规则；注意：width:calc(100%-100px);——无法起作用width:calc...原创 2019-11-26 10:30:58 · 1680 阅读 · 0 评论 -
CSS伪类实现加号
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...原创 2019-11-15 14:21:56 · 978 阅读 · 0 评论 -
行内元素在div中水平垂直居中
第1种：flex布局(推荐)<div class="method1"> <span class="expFont">flex布局</span> <img class="expImg" src="expImg.png"/></div><style> .method1{ width...原创 2019-11-15 14:20:01 · 307 阅读 · 0 评论 -
CSS清除浮动
CSS清除浮动很多方式，可以使用:before和:after伪类来清除浮动，优点是不会增加页面dom元素，缺点是IE浏览器只支持IE8及其以上。案例：<!DOCTYPE html><html><head><meta charset="utf-8" /><title>使用伪类清除浮动</title><!...原创 2019-11-04 20:39:18 · 125 阅读 · 0 评论 -
line-height和height设置一样，line-height属性在安卓手机有偏移不垂直居中的解决办法
第一种首先设置line-height:normal;然后用padding去把文字行高撑开第二种、把文字根据大小设置宽高放在标签里面如若用div标签，那么把这个div做垂直居中（不会垂直居中的自行百度）临时加的（都不行用这个）text-align: center;vertical-align: middle;border: 1px solid tran...原创 2019-10-28 10:00:03 · 861 阅读 · 0 评论 -
css table去掉表格中单元格之间的间距
表格单元格之间出现间距：去掉单元格之间的间隔是：table{border-collapse:collapse;}正常效果原创 2019-09-27 17:51:56 · 10342 阅读 · 0 评论 -
css布局 三个按钮一排显示如何居中对齐
将div的css设置为text-align:center;就可以了<div style="width: 100%;height: 100px;background-color: darkblue;text-align:center;"> <button style="width: 200px;">1</button> <button s...原创 2019-09-24 11:52:13 · 5401 阅读 · 0 评论 -
行内元素设置margin:0 auto无效的问题
行内元素指的是可在同一行内排列的元素，列举几个常用行内元素：img、input、span、label、a、textarea、button。通常要给元素设置居中得效果的话，很多人会先想到margin: 0 auto;可当用这种方法给行内元素设置时，行内元素没有呈现我们想要得居中效果，以下为解决方案（行内元素宽度给不给都可以）。方法一：最笨得方法就是将行内元素的margin四个值或是...原创 2019-09-24 10:00:57 · 1062 阅读 · 0 评论 -
CSS怪异盒模型（li均分ul宽度）
有一个 ul 下面有 5个 li ,前四个 li 右边有 20的边距。最后一个 li 没有边距。求均分？效果图如下 ：方法如下：方法一： <html><head> <style type="text/css"> ul { width: 100%; hei...原创 2019-09-18 17:47:15 · 3291 阅读 · 0 评论 -
同级元素和父子间元素margin重叠问题和解决方案
场景一：两个同级元素上边元素的margin-bottom和下边元素margin-top会产生重叠。如下边html，id为one的div和id为two的div之间距离应该是50px，但真实效果是40px，因为margin重叠了，margin值取他们之间的最大值。<html><head> <style type="text/css"> ...原创 2019-09-17 16:47:33 · 2453 阅读 · 0 评论 -
Vue style 深度作用选择器 >>> 与 /deep/（sass/less）的区别
传送门：https://vue-loader-v14.vuejs.org/zh-cn/features/scoped-css.html你很可能会遇到的问题vue组件编译后，会将 template 中的每个元素加入 [data-v-xxxx] 属性来确保 style scoped 仅本组件的元素而不会污染全局，但如果你引用了第三方组件：默认只会对组件的最外层（div）加入这个 ...原创 2019-08-21 14:22:35 · 6242 阅读 · 3 评论