css
笑望灬星辰
这个作者很懒,什么都没留下…
展开
-
node 升级 PostCSS received undefined instead of CSS string
解决node 升级 node 升级 PostCSS received undefined instead of CSS string// 一般node 升级 css 预编译期都要重新更新npm rebuild node-sassnpm i或者删除后重新 install以 sass 预编译器为例,less 同理,这里就先暂时略过,本人主要使用sass预编译器...原创 2022-01-19 10:17:51 · 1298 阅读 · 0 评论 -
两种以上方式实现已知或者未知宽度的垂直水平居中
两种以上方式实现已知或者未知宽度的垂直水平居中/** 1 **/.wraper { position: relative; .box { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin: -50px 0 0 -50px; } }/** 2 **/.wraper { position: relative; .box { positio原创 2021-04-12 13:57:15 · 126 阅读 · 0 评论 -
左边宽度固定,右边自适应布局
左边宽度固定,右边自适应布局html结构<div class="outer"> <div class="left">固定宽度</div> <div class="right">⾃适应宽度</div></div>在外层 div (类名为 outer )的 div 中,有两个⼦ div ,类名分别为left 和 right ,其中 left 为固定宽度,⽽ right 为⾃适应宽度方法1:左侧div设置成浮动:floa原创 2021-04-12 13:49:42 · 397 阅读 · 0 评论 -
css3的animation
css3的animationcss3的 animation 是css3新增的动画属性,这个css3动画的每⼀帧是通过 @keyframes来声明的, keyframes 声明了动画的名称,通过 from 、 to 或者是百分⽐来定义 每⼀帧动画元素的状态,通过 animation-name 来引⽤这个动画,同时css3动画也可以定 义动画运⾏的时⻓、动画开始时间、动画播放⽅向、动画循环次数、动画播放的⽅式这些相关的动画⼦属性有: animation-name 定义动画名、 animation-d原创 2021-04-12 13:42:50 · 149 阅读 · 0 评论 -
垂直居中的方法
垂直居中的方法将显示⽅式设置为表格, display:table-cell ,同时设置 vertial-align:middle使⽤ flex 布局,设置为 align-item:center绝对定位中设置 bottom:0,top:0 ,并设置 margin:auto绝对定位中固定⾼度时设置 top:50%,margin-top 值为⾼度⼀半的负值 ⽂本垂直居中设置 line-height 为 height 值...原创 2021-04-08 23:19:51 · 67 阅读 · 0 评论 -
水平居中的方法
水平居中的方法元素为⾏内元素,设置⽗元素 text-align:center如果元素宽度固定,可以设置左右 margin 为 auto ; 如果元素为绝对定位,设置⽗元素 position 为 relative ,元素设left:0;right:0;margin:auto;使⽤ flex-box 布局,指定 justify-content 属性为centerdisplay 设置为 tabel-cell...原创 2021-04-08 23:18:41 · 214 阅读 · 0 评论 -
css的content属性有什么作用
css的content属性有什么作用css的 content 属性专⻔应⽤在 before/after 伪元素上,⽤于来插⼊⽣成 内容。最常⻅的应⽤是利⽤伪类清除浮动。/**⼀种常⻅利⽤伪类清除浮动的代码**/.clearfix:after { content:"."; //这⾥利⽤到了content属性 display:block; height:0; visibility:hidden; clear:both; }.clearfix { *zoom:1; }原创 2021-04-08 23:16:31 · 237 阅读 · 0 评论 -
px和em的区别
px和em的区别px 和 em 都是⻓度单位,区别是, px 的值是固定的,指定是多少就是多少,计算⽐较 容易。 em 得值不是固定的,并且 em 会继承⽗级元素的字体⼤⼩。浏览器的默认字体⾼都是 16px 。所以未经调整的浏览器都符合: 1em=16px 。那么 12px=0.75em , 10px=0.625em 。题外话首行缩进2个字符{ text-indent: 2em}...原创 2021-04-08 23:10:57 · 6758 阅读 · 0 评论 -
如何垂直居中一个浮动元素?
如何垂直居中一个浮动元素?/**⽅法⼀:已知元素的⾼宽**/#div1{ background-color:#6699FF; width:200px; height:200px; position: absolute; //⽗元素需要相对定位 top: 50%; left: 50%; margin-top:-100px ; //⼆分之⼀的height,width margin-left: -100px; } /**⽅法⼆:**/#div1{ width: 200px; heig原创 2021-04-08 23:08:51 · 115 阅读 · 0 评论 -
css中可以让文字在垂直和水平方向上重叠的两个属性是什么
css中可以让文字在垂直和水平方向上重叠的两个属性是什么垂直⽅向: line-height⽔平⽅向: letter-spacing原创 2021-04-08 23:03:00 · 277 阅读 · 0 评论 -
自适应布局
自适应布局思路左侧浮动或者绝对定位,然后右侧 margin 撑开 使⽤ <div> 包含,然后靠负 margin 形成 bfc使⽤ flex原创 2021-04-07 23:01:28 · 81 阅读 · 0 评论 -
stylus/sass/less区别
stylus/sass/less区别均具有“变量”、“混合”、“嵌套”、“继承”、“颜⾊混合”五⼤基本特性Scss 和 less 语法较为严谨, less要求⼀定要使⽤⼤括号“{}”, Scss 和 Stylus 可 以通过缩进表示层次与嵌套关系Scss ⽆全局变量的概念, less和 Stylus 有类似于其它语⾔的作⽤域概念Sass 是基于 Ruby 语⾔的,⽽ less和 Stylus 可以基于 NodeJS NPM 下载相应库后 进⾏编译;...原创 2021-04-07 22:55:36 · 305 阅读 · 0 评论 -
几种常见的CSS布局
几种常见的CSS布局流体布局.left { float: left; width: 100px; height: 200px; background: red; }.right { float: right; width: 200px; height: 200px; background: blue; }.main { margin-left: 120px; margin-right: 220px; height: 200px; background: green;原创 2021-04-07 22:54:06 · 109 阅读 · 0 评论 -
CSS3动画(简单动画的实现,如旋转等)
CSS3动画(简单动画的实现,如旋转等)依靠 CSS3 中提出的三个属性: transition 、 transform 、 animationtransition :定义了元素在变化过程中是怎么样的,包含 transition-property 、transition-duration 、 transition-timing-function 、 transition-delay transform :定义元素的变化结果,包含 rotate 、 scale 、 skew 、 translate原创 2021-04-07 22:41:27 · 222 阅读 · 0 评论 -
CSS合并方法
CSS合并方法避免使⽤ @import 引⼊多个 css ⽂件,可以使⽤ CSS ⼯具将 CSS 合并为⼀个 CSS ⽂ 件,例如使⽤ Sass\Compass 等原创 2021-04-06 23:20:17 · 1034 阅读 · 0 评论 -
position 各属性
position 各属性absolute :⽣成绝对定位的元素,相对于 static 定位以外的第⼀个⽗元素进⾏定位fixed :⽣成绝对定位的元素,相对于浏览器窗⼝进⾏定位relative :⽣成相对定位的元素,相对于其正常位置进⾏定位static 默认值。没有定位,元素出现在正常的流中inherit 规定从⽗元素继承 position 属性的值题外话reactNative 只支持 relative 和 absolute...原创 2021-04-06 22:42:17 · 83 阅读 · 0 评论 -
浮动和清除浮动
浮动和清除浮动浮动的框可以向左或向右移动,直到他的外边缘碰到包含框或另⼀个浮动框的边框为⽌。 由于浮动框不在⽂档的普通流中,所以⽂档的普通流的块框表现得就像浮动框不存在⼀ 样。浮动的块框会漂浮在⽂档普通流的块框上清除浮动戳这里题外话当下的布局都是栅格布局居多 这种布局少之又少 除非是一些老程序员 或者老项目 又或者是后端写的管理后台 超级坑...原创 2021-04-06 22:39:50 · 84 阅读 · 0 评论 -
display有哪些值
display有哪些值block 转换成块状元素inline 转换成⾏内元素none 设置元素不可⻅inline-block 象⾏内元素⼀样显示,但其内容象块类型元素⼀样显示list-item 象块类型元素⼀样显示,并添加样式列表标记table 此元素会作为块级表格来显示table-rowtable-cellinline-tableinherit 规定应该从⽗元素继承 display 属性的值flex 弹性布局inline-flex 行内弹性布局...原创 2021-04-02 23:21:48 · 175 阅读 · 0 评论 -
css3有哪些新特性
css3有哪些新特性新增各种 css 选择器 圆⻆ 多列布局文字特效线性渐变 动画3D转换过渡 等等CSS3新增伪类有那些?p:first-of-type 选择属于其⽗元素的⾸个 <p> 元素p:last-of-type 选择属于其⽗元素的最后 <p> 元素p:only-of-type 选择属于其⽗元素唯⼀的 <p> 元素p:only-child 选择属于其⽗元素的唯⼀⼦元素的 <p> 元素p:nth-child(2) 选原创 2021-04-02 23:15:17 · 219 阅读 · 0 评论 -
css sprite是什么、有什么优缺点
css sprite是什么、有什么优缺点概念:将多个⼩图⽚拼接到⼀个图⽚中。通过 background-position 和元素尺⼨调节需 要显示的背景图案。优点:减少 HTTP 请求数,极⼤地提⾼⻚⾯加载速度 增加图⽚信息重复度,提⾼压缩⽐,减少图⽚⼤⼩更换⻛格⽅便,只需在⼀张或⼏张图⽚上修改颜⾊或样式即可实现缺点:图⽚合并麻烦 维护麻烦,修改⼀个图⽚可能需要从新布局整个图⽚,样式最主要的因素是要ui设计师配合 维护成本高除了一些老旧的项目 或者大厂 追求极限性能的情况下使用原创 2021-04-01 13:17:21 · 382 阅读 · 0 评论 -
css ===== text-decoration
文本修饰 直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>text-decoration</title> <style>原创 2020-12-02 00:54:32 · 145 阅读 · 0 评论 -
css ===== text-transform
直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>text-transform</title> <style> /*原创 2020-11-30 14:06:24 · 94 阅读 · 0 评论 -
css ===== letter-spacing
直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>letter-spacing</title></head> <!--原创 2020-11-30 00:01:42 · 207 阅读 · 0 评论 -
css ===== word-spacing
直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>word-spacing</title></head> <!--原创 2020-11-29 23:52:35 · 205 阅读 · 0 评论 -
css ===== text-align
直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>text-align</title> <style> /* 用在块级元原创 2020-11-29 23:19:52 · 103 阅读 · 0 评论 -
css ===== text-indent 文本缩进
直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>text-indent</title></head><style> /*原创 2020-11-29 22:57:47 · 310 阅读 · 0 评论 -
div内容水平居中加垂直居中
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 导入外部样式 --> <title>div内容水平居中加垂直居中</title> <styl原创 2020-06-09 14:08:09 · 458 阅读 · 0 评论 -
css 内联、外联和外部样式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 导入外部样式 --> <link rel="stylesheet" href="./test.css"> &l原创 2020-06-09 13:37:45 · 956 阅读 · 0 评论