随笔分类 - css进阶
摘要：Flex 意为 “弹性布局”，是一种在开发静态页面过程中常用的布局模式。 开发购物车使用flex布局的时候遇到的一种场景：子元素被挤压 具体如图所示， 当商品名称超出两行文字时显示省略号， 是使用flex布局的。 占位较多的子元素会去挤压别的子元素。 解决方法很简单， 就是使用flex-shrink
阅读全文
摘要：visible: 默认值.内容不会被修剪,会呈现在元素框之外。 hidden: 内容会被修剪,并且其余内容是不可见的。 scroll: 内容会被修剪,总是显示滚动条。 auto: 内容被修剪,超出浏览器会显示滚动条以便查看其余内容， 没有超出则不显示滚动条。 overlay:它的行为与auto相同的
阅读全文
摘要：前言 大家都听说过变量，我们学习的任何语言都有变量的存在。 css中是否也存在变量呢？ 也许很多小伙伴也是通过less,scss中来使用css变量 其实在css中也是有变量的，今天我们也来学习一下。 为什么要使用变量 变量有一个很大的作用就是降低维护成本。 不仅如此，还可以提高我们的开发效率。 实现
阅读全文
摘要：元素水平居中的第一种方式 子元素不需要宽度也可以 <div class="box"> <div class="son"> 我是内容 </div> </div> .box { width: 500px; height: 300px; background: pink; } .son { width:
阅读全文
摘要：CSS使用伪类给表单添加星号 <style type="text/css"> .form-item label::before { content: '*'; color: #e54d42; } </style> <form> <div class="form-item"> <label for="
阅读全文
摘要：1.visibility: hidden/visible与dispaly：none 有些人简单的认为display: none;和visibility: hidden; 这两个属性的区别在于前者隐藏后不占据文档空间。 后者隐藏后会占据文档空间。 其实visibility: hidden并不是你想的这
阅读全文
摘要：1.display的常见现象 我们很多人都知道，display可以让元素实现隐藏或者显示。 或者让行级元素变成块级元素。 对它的认识也是比较准确的。 如果一个元素使用了display:none; 那么该元素将会隐藏，无法进行点击，屏幕设置将会无法访问。 但是今天我的意外发现， display: no
阅读全文
摘要：vue不同的类型绑定不同的类名 第一种 <div v-for="(item, index) in list" :key="index" > <div class="item-tag" :class="addclassName(item)"> {{ item.cont}} </div> </div>
阅读全文
摘要：一、提出问题 在浏览器中，图片有一个下间隙问题，有人也称之为图片3像素BUG 1.这并不是什么浏览器bug，而只是英文字母书写时有个基线的问题，基线决定了图片的对其方式。这才是造成浏览器中图片下间隙的本质。 那么，什么是基线？ 我们小时候学英文， 一开始都是用的四线本写英文字母，就是那个长的跟五线谱
阅读全文
摘要：大家都知道，web端的字体在正常情况下，最小只能够是12px; 但是有些时候，可能需要字体小于12px 那么如何解决这个办法了 可以使用css3的缩放属性scale 如果字体的大小是10px; 那么我们将字体大小设置成20px,使用-webkit-transform: scale(0.5); 这样字
阅读全文
摘要：我们想设计一个w=180px；h=100px的div; .demo1 { width: 180px; height: 100px; background: pink; padding: 10px; border: 1px solid #c1c1cc; margin: 5px; } <div clas
阅读全文
摘要：在hover时，i元素变成了块级元素； 导致这两个元素各自占了一行； 最终导致样式错乱； <div class="demo"> <!-- 添加图标 和 编辑图标 --> <i class="iconfont add-icon"></i> <i class="iconfont add-icon"></
阅读全文
摘要：<view class="person-cont">{{cont}}</view> cont:"大家好！值此2020年中国国际服务贸易交易会举办之际， 我谨代表中国政府和中国人民，并以我个人的名义， 对参与本次大会的线上线下所有嘉宾，表示热烈的欢迎！ 对世界各地的新老朋友们，表示诚挚的问候和美好的祝
阅读全文
摘要：有时，你需要修改第三方组件的CSS; 然而你直接修改是不可以的， 但是我们非要去修改第三方的组件； 此时可以使用==》深层选择器 >>> /deep/ ::v-deep 可以帮助你。 这样就可以修改第三方组件样式了， 然而有写时候，你是按照这样的方法去修改的吗，那为什么还不对了？ 因为你的结构层级不
阅读全文
摘要：在添加边框的时候，有边框的元素会挤压四周的元素，形成挤压；从而造成了；页面区域的变化(抖动) 解决办法：==》 有边框的时候；添加边框； 没有边框的时候；也添加一个边框；边框的颜色和四周的颜色相融就可以了； 这样就不会造成；页面的抖动
阅读全文
摘要：去除 i 标签的倾斜样式 i{ font-style:normal; } 如何引入本地的阿里字体图标 将代码下载下来 当然你将下载下载来的资源有用的放在静态资源中 然后在 main.js 引入； main.js import '@/assets/icon/iconfont.js' import '@
阅读全文
摘要：``` 今天遇见一个问题。 在鼠标放上 图片上的时候。 删除图标一直不停的闪烁。 我当时觉得很奇怪，父子关系的结构 不应该闪烁呀。 看了下html和css，发现子元素（要hover）的元素是绝对定位了的 于是我就给 子元素添加了一css样似 pointer-events: none; 于是就解决了闪烁问题。 后来我去看了一下， pointer-events: none; 很多人这样解释 如果为某个
阅读全文
摘要：``` 今天产品提出一个需求就是。限制input框中的的值。 当用户超过10个字符时，用户再次输入的时，就不能够输入了。 （最后就能够输入10个字符） maxlength=10 ``` ``` 此时用户最后就只能够输入10个字符了 ```
阅读全文
摘要：重绘:当元素的一部分属性发生改变， 如背景、颜色等不会引起布局变化， 只需要浏览器根据元素的新属性重新绘制， 使元素呈现新的外观叫做重绘。 重排（回流）:当render树中的一部分或者全部因为大小边距等问题发生改变而需要DOM树重新计算的过程 所以简单的来说就是。不会引起布局的变化，叫做重绘。 会引
阅读全文
