![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
Akimoto Hiroshi
这个作者很懒,什么都没留下…
展开
-
css实现骨架屏
<div class="card"> <div class="image"> <img src="https://images.unsplash.com/photo-1642623883157-cd5b06ae6c45?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0NTA2MDIwMw&ixlib=rb-1.2.1&q=85"原创 2022-02-17 14:01:38 · 649 阅读 · 0 评论 -
css隐藏滚动条(横向,坚向)
在里加入style=“overflow-x:hidden”,可隐藏水平滚动条;加入style=“overflow-y:hidden”,可隐藏垂直滚动条。原创 2021-11-28 11:35:31 · 892 阅读 · 0 评论 -
Element.clientWidth属性
内联元素以及没有 CSS 样式的元素的 clientWidth 属性值为 0。Element.clientWidth 属性表示元素的内部宽度,以像素计。该属性包括内边距 padding,但不包括边框 border、外边距 margin 和垂直滚动条(如果有的话)。intElemClientWidth 是一个整数,表示元素的 clientWidth。clientWidth 是一个只读属性。...原创 2021-03-19 23:11:13 · 607 阅读 · 0 评论 -
响应式页面flex实现三栏自适应布局中间栏自适应以及@media媒体查询
<body> <div class="box"> <div>1</div> <div>2</div> <div>3</div> </div></body>使用flex实现三栏布局,两侧固定宽度,中间栏自适应 <style> html { font-size: 10px; } .box {原创 2021-03-19 22:22:58 · 932 阅读 · 0 评论 -
sass常用语法之&和>
项目中,对于这种class=“el-submenu is-opened” 类名里面有多个类名想要选中的话,可以这样操作:&.is-opened表示和el-submenu同一级的is-opened类:而子组合选择器 >选择一个元素的直接子元素,如下图,选择class="el-submenu is-opened"下面直接的一个子元素class=“el-submenu_title”:知识点:子组合选择器>: 择一个元素的直接子元素同层相邻组合选择器+:选择header元素后原创 2021-03-05 22:49:00 · 1036 阅读 · 0 评论 -
svg修改不了颜色解决办法
今天自定义一个svg组件时候发现无论如何都无法通过css修改svg的颜色:后来发现是因为svg文件里面的fill=xxx这段代码的原因解决方法:找到对应的svg文件,把这段代码删掉:保存,就可以修改颜色了:...原创 2021-03-05 14:34:37 · 10857 阅读 · 2 评论 -
BFC小结 什么是BFC 如何触发BFC BFC的应用
一个元素触发BFC以后,这个元素可以被看做是一个独立的容器。容器里面的元素不会在布局上影响到外部的元素如何触发BFCBFC有什么特性以及应用1. 避免外边距重叠理论上两个div的上下间距应该是200px,实际上只有100px,因为块级元素的margin-bottom和下面的块级元素的margin-top会合并,值取其中的最大值解决方法:我们给每个div外面套上一个container,然后每个container加上overflow:hidden触发BFC,这样处于两个BFC中的d.原创 2021-03-04 00:13:36 · 213 阅读 · 1 评论 -
canvas绘制圆形简明教程
画直线图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>canvas原创 2021-03-01 10:56:59 · 1425 阅读 · 2 评论 -
CSS实现酷炫动态下划线效果
先上效果: <div class="words">兔几????你好鸭</div> *{ margin: 0; padding: 0; } .words { width: 200px; height: 50px; line-height: 50px; text-align: center; position: absolute; left: 50%; t原创 2021-02-20 23:33:41 · 908 阅读 · 0 评论 -
CSS预处理 Less和Sass总结
less基于nodejs编写sass用ruby写的,用node-sass包解决编译问题less中变量用@less中定义mixin.block使用:lessc命令编译less文件方法:mixin”属性只能基于现在已有的样式规则!你可以在mixin中使用类选择器和id选择器:.a,#b{ color: rebeccapurple;}.mixin-class{ .a();}.mixin-id{ #b();}输出:.a,#b { color:..原创 2021-02-19 23:21:02 · 334 阅读 · 0 评论 -
sass插值写法 #{}
@mixin webkit($type, $value){ -webkit-#{$type}: $value; -moz-#{$type}: $value; -ms-#{$type}: $value; -o-#{$type}: $value;}原创 2021-02-14 15:16:51 · 184 阅读 · 0 评论 -
background-size:cover和background-size: contain的区别
对于这样的一个div:<div class="item-del"></div>.item-del{ width: 14px; height: 12px; background: url(/imgs/icon-close.png) no-repeat center; background-size: cover; flex: 1; }如果我们设置background-size:cover:就相当于这个背景图片在所在div的宽高范围内伸展到div的边原创 2021-02-01 21:43:58 · 317 阅读 · 0 评论 -
vue-awesome-swiper爬坑记录之修改pagination中bullet小圆点的颜色---样式穿透写法
修改项目时候发现pagination默认的小圆点颜色蓝色怎么也修改不了,css覆写也没用,尝试了一下sass的穿透覆写css,成功了:要注意头部要写 /deep/关键字原创 2021-01-28 16:32:58 · 986 阅读 · 0 评论 -
添加分隔符|的几种方法
要给每个a标签(除了最后一个)后面添加分隔线| ,可以这样做:方法一:在每个a后面加上span标签方法二:使用伪类:注意:最后一个伪类不想要可以这样:&:last-child:after{ display: none; }一定要注意顺序,是&:last-child:after,不是&:after:last-childlast-child和after还有&通过:连接对于高度相等的文字和分割线|,我们还可以使用border原创 2021-01-28 10:48:36 · 1767 阅读 · 0 评论 -
sass定义mixin样式
写样式的时候经常遇到样式重复出现的情况,为了减少代码量并且方便管理,我们使用mixin先定义一个mixin:// flex样式复用@mixin flex ($horizontal:space-between, $vertical:center) { display: flex; justify-content: $horizontal; align-items: $vertical;}接着在项目中引入mixin.csss:<style lang="scss" scoped&g原创 2021-01-27 09:49:11 · 431 阅读 · 0 评论 -
a标签伪类的顺序
原创 2021-01-26 19:59:05 · 343 阅读 · 1 评论 -
超出文字不换行用...隐藏
//超出文字隐藏------ 需要和这个结合使用overflow: hidden;//当文本溢出,省略号代替text-overflow:ellipsis;//文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。white-space: nowrap;原创 2021-01-11 23:57:02 · 438 阅读 · 0 评论 -
css盒模型
外边距塌陷:上面的margin-bottom和下面的margin-top合并了解决:flex布局没有这个问题,或则使用BFC----->父元素没有设置position,默认position就是static,当父元素是static时,子元素positon为absolute就以body为参照系:--->如果把父元素的position设置为relative:--->...原创 2020-12-10 23:59:31 · 70 阅读 · 3 评论 -
原生js练手小项目-图片拖拽
实现原理是html5的draggable属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &...原创 2020-03-31 12:37:59 · 119 阅读 · 0 评论 -
原生js练手小项目-鼠标跟随调色板
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet...原创 2020-03-30 22:24:17 · 166 阅读 · 0 评论