css笔记
关注
分享
扫一扫
css3笔记
诗水人间
要想走的更远，就需要思考更深层次的问题。冷静、智慧、深沉是我所向往的
展开
-
stylus的使用和基础知识
安装stylusnpm install stylus stylus-loader -sstylus是主流的css预编译器LessSassStylus使用方法<style lang="stylus" rel="stylessheet/stylus"></style>语法中文文档语法结构：完全通过缩进控制，不需要 大括号和 分号，冒号可选。.tab display:flex height 40px line-height 40px .tab-i原创 2020-06-08 14:51:48 · 105914 阅读 · 0 评论
-
CSS中的position中的static、absolute、relative、fixed、sticky
static的取值有static、absolute、relative、fixed、stickyhtml中元素的默认position的值为static，static（html默认的定位方式）会随着html的排版（flow）移动。static元素对top、left、right、bottom设定值不会生效absolute（绝对定位）absolute元素不会随着html排版的流程移动，但是会随着滚动条移动。absolute元素会根据外部的元素进行定位top、left、right、bottom设定值作为原创 2020-06-24 22:38:20 · 161994 阅读 · 0 评论 -
CSS的声明优先级
优先级由高到低（高优先级则决定最终css显示的效果）用户的重要声明(最大)：!important，程序员写的重要声明： !important，内联(标签中的style直接写的那种)，id选择器，类选择器、属性选择器、伪类，元素选择器和伪元素(例如:div{color:red})，通配符选择器，例如：*{width:200px}，继承父元素嵌套div这种，里面的可以继承外面标签的css样式css声明的优先级 选择器的特殊性 选择器的特殊性由选择器本身的组件确定，特殊性值表述为4个原创 2020-06-17 00:23:55 · 160589 阅读 · 0 评论 -
css选择器
css常见的选择器选择器的作用是选中标签，所以下面的选择器都是指标签* /*通配符选择器*/# /*id选择器*/. /*类选择器*/, /*分组选择器*/空格 /*后代选择器*/> /*直接后代选择器*/+ /*相邻兄弟选择器*/~ /*通用兄弟选择器*/属性选择器/*属性存在选择器*/[attr] /*选择包含attr属性的所有元素，不论attr的值*//*需要注意的是属性值val是字符串需要用引号引起来*/[attr=val] /*选原创 2020-06-15 14:21:45 · 157290 阅读 · 0 评论 -
css美化滚动条，以vue-markdown为例
github：vue-markdown下面是vue组件化中使用stylus语法其中>>> 是为了让组件内也生效vue组件化开发>>> * /* 设置滚动条的样式 */ ::-webkit-scrollbar height 5px /*设置横向滚动条的高度*/ width 5px /*设置纵向向滚动条宽带*/ background-color: rgba(0, 0, 0, .3) ::-webkit-scrollbar-tra原创 2021-02-22 20:59:05 · 1058 阅读 · 0 评论 -
Syntax Error: ValidationError: Invalid options object. Stylus Loader has been initialized using an
报错信息如下：Syntax Error: ValidationError: Invalid options object. Stylus Loader has been initialized using an options object that does not match the API schema. - options has an unknown property 'preferPathResolver'. These properties are valid: object { s原创 2021-01-03 03:39:55 · 3388 阅读 · 0 评论 -
css中使用自定义字体 和 自定义字体图标
下载并安装Adobe Illustrator CC 2019简称AI下载并安装FontLab7简称AI软件安装包:链接: https://pan.baidu.com/s/1C8d44Y2z4ro7hKg9amt86g 提取码: tvng自定义字体 为什么要使用自定义字体？浏览器对于字体的支持力度不一样，概括的说：不是所有的字体浏览器都支持!换而言之：要使用浏览器不支持的字体，就得通过其它方法解决解决方案：css3中使用@font-face可以支持浏览器不支持得字体第一步、需要将字体文原创 2020-09-15 16:11:02 · 121847 阅读 · 0 评论 -
stylus语法中将一个或多个变量传入calc等方法中
如果是传入一个变量需要安装下面这种形式传参即可headHeight=50px /*stylus语法中定义一个变量*/height 'calc(100% - %s)' % headHeight如果再stylus语法中直接使用是没有问题的！出现问题地方就在于使用内置函数，或者自定义的函数，然后将这个变量传入是如果按照下面的写法是错误的，因为他会认为headHeight是值，而不是变量，需要按上面的方法传参即可，这样在进行stylus编译后就会将变量值传入替换headHeight=50px /原创 2020-09-05 01:03:22 · 117673 阅读 · 0 评论 -
ElementUI自定义CSS样式不生效的解决方案
例如有一个输入框<el-input ref="mySearch" class="mySearch" size="small" placeholder="请输入内容" suffix-icon="el-icon-search" v-model="input1"></el-input>如果没有加自定义样式则输入框大概是这样的我希望是这样的通过谷歌浏览器的开发者工具，找到对应样原创 2020-09-02 15:26:18 · 140690 阅读 · 2 评论 -
js实现可调侧栏
html<div class="scalable"> <div class="content"> <img src="https://codingstartup.com/images/logo.svg" alt=""> </div> <div class="separator"> <i></i><i></i> </div></div><转载 2020-06-25 01:16:10 · 149549 阅读 · 0 评论 -
CSS绝对定位模拟固定定位(absolute模拟fixed)
滚动条的产生滚动条在谁身上初始包含块<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } html{ height: 100%; overflow: hidden;原创 2020-06-21 02:05:13 · 150888 阅读 · 0 评论 -
CSS对话框案例
用到了伪元素before和after<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } html,body{ height: 100%; overflow: hidden;原创 2020-06-20 01:36:43 · 138592 阅读 · 0 评论 -
CSS禁止系统滚动条
先将html和body元素的height都设置为100%,然后将其overflow设置为hidden即可html,body{ height:100%; overflow:hidden;}原创 2020-06-20 01:16:09 · 152053 阅读 · 3 评论 -
CSS文字描边和倒影
描边： 主流浏览器都支持-webkit-text-stroke:<length> <color>;-webkit-text-stroke:4px pink;/*描边宽度4px，字体颜色粉红*/倒影：谷歌、safari、opera支持，火狐不支持-webkit-box-reflect:<left|right|top|bottom> <length>;-webkit-box-reflect:left 4px;/*倒影方向座 和倒影间距4px*/.原创 2020-06-18 10:34:03 · 133272 阅读 · 0 评论 -
CSS图片垂直水平居中
方案一、性能比方案二好/*将最外层元素都撑开到100%屏幕*/html,body{ width:100%; height:100%;}body{ text-align:center;}body:after{ content:""; display:inline-block; height:100%; vertical-align:middle;}/*选中的图片元素*/img{ vertical-align:middle;}方案二、img{ position:abs原创 2020-06-17 23:34:16 · 152258 阅读 · 0 评论 -
CSS中的box-shadow
box-shadow与box-shadow多了一个参数，用来控制阴影大小，就是这里的0px第一个和第二个参数是控制阴影的偏移量，第三个是模糊程度，第四个是控制阴影大小，第5个是控制阴影颜色可以使用rgba()box-shadow:10px 10px 10px 0px black;...原创 2020-06-17 20:29:27 · 136150 阅读 · 0 评论 -
CSS文字不换行
white-space:nowrap原创 2020-06-17 19:48:28 · 126960 阅读 · 1 评论 -
CSS将div居中
通过margin 将div居中margin:0 auto;原创 2020-06-17 19:46:32 · 148237 阅读 · 0 评论 -
css文字阴影----渐渐模糊效果
text-shadow为文字添加阴影。可以为文字与 text-decorations 添加多个阴影，阴影值之间用逗号隔开。每个阴影值由元素在X和Y方向的偏移量、模糊半径和颜色值组成。text-shadow: 10px 10px 20px pink;/*x轴偏移10px,y轴偏移10px，模糊程度，粉红色*/transition:1s;渐变效果1秒，起到慢慢渐变得效果<style type="text/css"> h1:hover{ color:rgba(0,0,0,0);原创 2020-06-17 19:03:02 · 150438 阅读 · 0 评论 -
css隐藏多于文字并且显示省略号
overflow:hiddentext-overflow:ellipsiswhite-space:nowrap不换行原创 2020-06-17 17:02:23 · 143774 阅读 · 0 评论 -
Vue.js中对css的操作
原文链接：https://blog.youkuaiyun.com/tan1071923745/article/details/81162667此篇博客为转载内容，做个记录，方便自己日后查找使用总结下面的内容，最简单的方式是给需要操作的dom元素添加ref="refName"属性，然后通过this.$refs.refName.style.要修改的样式=修改的值 即可完成修改css使用v-bind：class或者v-bind:style或者直接通过操作dom来对其样式进行更改；1.v-bind:class .原创 2020-06-17 01:08:32 · 150069 阅读 · 0 评论 -
CSS背景虚化背景
background-repeat: no-repeat; background-size: cover; background-position: 50%; -webkit-filter: blur(20px); filter: blur(20px); -webkit-transform: scale(1.5); -ms-transform: scale(1.5);...原创 2020-01-08 18:58:59 · 143788 阅读 · 0 评论 -
CSS将div超过2行省略号显示、一维数组拆成2维数组
overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;一维数组变成二维数组 let arr = [1,2,3,4,5,6] let result=[] ...原创 2020-01-07 22:15:20 · 122019 阅读 · 0 评论 -
css水平方向 居中，css调整背景图片位置，css画三角形
水平方向调整元素位置width: 300px;margin: auto;position: absolute;left: 0;right: 0;水平方向调整背景图片background-position-x: -600px;//水平方向，同理垂直y也可以调整#triangle03{ width: 0; height: 0; borde...原创 2019-12-21 01:21:17 · 150201 阅读 · 0 评论 -
css固定底栏
绝对固定 .footer { z-index: 9999; position: fixed; bottom: 0px; width: 100%; }原创 2019-12-19 05:28:29 · 115840 阅读 · 0 评论