css
css
monstkl
小白
展开
-
css终极方案PostCSS
所有的css框架都在一样的事,那就是由一个css生成一个新的css,那么postcss就来做了一个抽离:1、将原有的css解析成抽象语法树2、中间经过若干个插件3、重新文本化,形成新的css。原创 2023-07-24 22:06:52 · 586 阅读 · 0 评论 -
箭头标题样式
<div class="arrow-head">xx</div><style lang='less'>.arrow-head{ width:200px; height: 30px; background: #abc; &:before{ content:''; float:left; border-top: 15px solid #abc; border-bottom: 15px solid #abc; border-left: .原创 2022-03-03 23:05:26 · 80 阅读 · 0 评论 -
css-背景
一、将背景色调淡,调背景的透明度// 错误,因为opacity同时作用于内容和背景opacity: .5;// 正确,此时rgba只作用于背景background: rgba();原创 2022-05-18 23:49:36 · 64 阅读 · 0 评论 -
某些特殊样式的修改
svg小图标的修改.abc svg{ fill: #fff;}原创 2022-03-28 22:00:39 · 116 阅读 · 0 评论 -
css自适应
一、元素预留高度自适应父容器高度height:calc(100% - 20px);原创 2022-03-14 16:09:36 · 308 阅读 · 0 评论 -
flex项目属性
一、order默认0,用于决定项目排列顺序,数值越小,项目排列越靠前二、flex-grow1、用于决定项目在有剩余空间的情况下是否放大,默认0,默认不放大;注意,即便设置了固定宽度,也会放大2、假设只有第一个项目默认为0,后面两个项目flex-grow均为1,那么后两个项目平分剩余空间3、假设第一个项目默认为0,第二个项目为flex-grow:2,最后一个项目为1,则第二个项目在放大时所占空间是最后项目的两倍三、flex-shrink1、用于决定项目在空间不足时是否缩小;默认项目原创 2021-11-17 22:29:13 · 357 阅读 · 0 评论 -
滚动条样式修改
一、使用场景对于webkit内核的浏览器,可以使用伪类来改变滚动条的默认样式二、我的使用总结1、::-webkit-scrollbar 滚动条整体部分。给width、height,分别对应竖横滚动的宽度2、::-webkit-scrollbar-track 滚动条的轨道(里面装有Thumb)给background、border-radius3、::-webkit-scrollbar-thumb 滚动条里面的小方块,能向上向下移动(或向左向右移动)给background、b原创 2021-11-24 23:44:11 · 130 阅读 · 0 评论 -
PC端页面适配
完成目标:1、不同分辨率的电脑显示正常2、放大或者缩小屏幕显示正常放大和缩小屏幕、放大和缩小浏览器的区别:前者是改变屏幕宽高所占的像素;后者只是改变浏览器可视窗口的宽高所占的像素,浏览器的标签栏,地址栏都不会发生变化;所以在一台机器上模拟其他屏幕时,应该放大和缩小屏幕,而不是浏览器视口(contrl+鼠标滚轮)对于宽度的适配:主页面一般分为背景层和内容层,背景层用(background:100%)解决;内容层要么是定宽的,要么是随屏幕宽度自适应的-----定宽(wid原创 2020-10-22 23:41:22 · 1098 阅读 · 0 评论 -
元素字体设置
元素显示某个字体的必要条件:首先,计算机系统里要有这种字体(在控制面板-字体中查找看有没有这种字体)其次,浏览器要识别这种字体写法示例:font-family: Arial, "Microsoft YaHei";含义:从左向右,浏览器会显示出它认识的第一种字体的样式结论:无法使你需要的字体在每一个用户的每一种浏览器上显示出来一样的字体效果...原创 2020-10-21 01:10:30 · 258 阅读 · 0 评论 -
浮动布局
正常文档流:从左到右,从上到下核心概要:浮动元素只对其后面的元素产生影响--1、后面元素不浮动的情况,浮动元素脱离文档流,后面元素占据浮动元素原有的位置2、后面元素浮动的情况,两个元素都是左浮动,两元素都脱离文档流,浮动后,后面浮动元素靠在前面浮动元素右边浮动元素在父元素的内边距里--清除浮动:1、写在被影响的元素上(浮动元素后面的元素)2、css属性--clear:right、left、both3、含义--清除右浮动对它的影响,清除左浮动对它的影响,清除两边浮动对它原创 2020-10-09 22:43:38 · 102 阅读 · 0 评论 -
对话框样式
外层:position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,.4)内层:position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);background-color: #fff;原创 2020-06-19 00:09:35 · 226 阅读 · 1 评论 -
元素不见了
元素不见了的可能情况:(颜色、透明度、层级、位置、隐藏)1、内容颜色和背景颜色一样,如字体和背景颜色都是白色2、opacity:03、z-index比较小4、定位的位置不在预想的位置5、display:none...原创 2020-11-24 23:06:19 · 96 阅读 · 0 评论