随笔分类 - css3
摘要：css 新单位 vmin 表示 获取视口的最长边或者最短边 vmax shape-outside:circle(50% as 50% 50%) 这个表示文字的环绕方式， 比如浮动后，文字会环绕浮动元素排列， 但是如果浮动元素形状变成圆形，默认的环绕方式还是会是方正的， 使用这个属性就可以实现弧形的环
阅读全文
摘要：记录一下看到过的，没见过的不知道就算了; inline-size: 60px block-size:30px padding-block:10px 这三个文字属性 和 writing-mode: 有关， writing-mode 设置文字是从左往右排列还是从上往下 关于 nth-child!!! M
阅读全文
摘要：前言：目前最流行的验证方式就是滑块验证了，虽然有很多UI库都有整个组件，但是思路方法还是值得学习的。 CSS方面： ①：首先是一个大的背景图 ②③：这里可以通过实际的两个元素通过定位方式去布局，还是通过给①添加两个伪元素都OK。 然后通过继承背景图的一些属性。 操作： 将验证滑块②（before）通
阅读全文
摘要：虚线： css 自带的dashed 虚线样式非常的有限。往往是不满足UI设计稿的需求的，这里可以使用渐变的方式实现： /**使用渐变来自定义虚线 */ background: linear-gradient(to right, transparent 0%, transparent 50%, rgb
阅读全文
摘要：原因是： 根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。 解决办法有 给父盒子加内边距，边框的，最简单的就是 设置溢出隐藏： overflow：hidden。
阅读全文
摘要：我所知道的 有两种方式会导致 这种情况 1 .js 添加css 属性 2.父容器 内 子元素 发生变动 ，比如 增加兄弟元素 我这里就是这种情况 这两种情况目前已知 都可以 通过 !important 提高 优先级解决。其他不知道还有没有方法！！！
阅读全文
摘要：结构为： 想去修改 黄色荧光笔位置时，一直不生效，就想到是不是权限不够，仔细一想应该是这样，父组件中修改子组件的样式的话，需要用到深度选择器 /deep/，加上这个前缀就ok了
阅读全文
摘要：div{ /*实现了宽度为父容器宽度减去固定的300像素*/ width:-webkit-calc(100% - 200px); width:-moz-calc(100% - 200px); width:calc(100% - 200px); }
阅读全文
摘要：产生原因：元素设置 行内块后，元素与元素之间的空白【回车 、换行】都会被浏览器处理，由于 whitt-space：normal 这个默认项，空白会被忽略，但是换行会被解析为一个空白符（类似于 ，当字体大小 font-size 不为0时，就导致产生间隙！！！ 解决办法： 1. 父元素设置 f
阅读全文
摘要：<div class="parent"> <div class="child"></div> </div> <!-- 1 --> div.parent { display: flex; justify-content: center; align-items: center; } <!-- 2 --
阅读全文
摘要：{ display:-webkit-box; // 有区别于 display：flex 详细：【https://www.zhihu.com/question/22991944】 ，flex 有时候也会加上浏览器前缀 text-overflow:ellipsis; overflow:hidden; w
阅读全文
摘要：stylus stylus个人通俗一点认为就是css的框架，可以简化css代码的书写，和支持一些模块化的使用方式！ base.stylu文件中： RemoveDefault() appearance: none border:none outline: none$red = rgb(255,69,0
阅读全文
