![](https://img-blog.csdnimg.cn/20190927151043371.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
css
文章平均质量分 69
css内容
Lvan的前端笔记
十年磨一剑
展开
-
css:使用filter和backdrop-filter实现高斯模糊效果
css:使用filter和backdrop-filter实现高斯模糊效果原创 2023-03-08 13:09:18 · 5251 阅读 · 1 评论 -
css:为什么我设置宽高百分比不生效
很多新手朋友写 css 的时候,有时发现设置宽高百分比有用,有时候又没用,到底怎么回事呢?原创 2022-11-16 18:41:37 · 4889 阅读 · 1 评论 -
css:两栏三栏布局
两栏三栏布局。原创 2022-11-09 17:09:33 · 666 阅读 · 0 评论 -
css:居中的几种布局方式
基础知识要记牢~原创 2022-11-09 16:51:57 · 977 阅读 · 0 评论 -
css:清除浮动的n种方式
的时候,因为浮动脱离文档流,父元素高度丢失,变成了一条红线,并且 footer 顶了上来。相当于 1 的升级版,不需要新增标签了,原理都是用的 clear 来清除。当我们给 header-big、header-small 加上。想知道 bfc 清除浮动的原理可以看我这篇文章。利用 clear 来清除。原创 2022-11-09 16:05:31 · 392 阅读 · 0 评论 -
css:详解BFC块级格式化上下文
BFC(Block Formatting Context)块级格式化上下文一个BFC区域包含创建该上下文元素的所有子元素,但是不包括创建了新的BFC的子元素的内部元素,BFC是一块块独立的渲染区域,可以将BFC看成是元素的一种属性,拥有了这种属性的元素就会使他的子元素与世隔绝,不会影响到外部其他元素。BFC 有点像元素的一个属性,是需要设置的,不是生来一个 div 放到那就拥有 BFC 功能设置了 BFC,这个元素就是一个独立的区域了好了,那我们接下来看看如何设置 BFC。原创 2022-11-08 19:03:57 · 409 阅读 · 0 评论 -
css:盒子模型
实际工作中,其实我觉得怪异盒子模型更加实用,比如设计稿给你一个宽度 100px,padding 10px 的一个设计。如果使用标准盒子,我就要去计算这个宽度设置为 80,而不是直接用设计稿给的 100,这样就非常的麻烦。标准盒模型大小 = border + padding + content。转标准盒模型:box-sizing:content-box;转怪异盒模型:box-sizing:border-box;怪异盒模型大小 = content。怪异盒模型也叫 IE 盒子模型。原创 2022-11-08 17:29:05 · 239 阅读 · 0 评论 -
css:currentColor和inherit属性的区别
思考一个问题,给一个 div 加上了如下代码,效果就展示了一个红色的 border,但是我明明没有设置 border 的颜色,这是怎么回事呢?可以看到,currentColor 属性跟随的是他最近的一个 color 值。currentColor 跟随最接近的颜色属性值。inherit 表示使用父级使用的值。原创 2022-11-08 16:32:46 · 567 阅读 · 0 评论 -
css:属性的继承
CSS属性的继承就是给父级设定了属性,这个父级和它的子级都具有这个属性。除了可继承的就是不可继承的,只要把可继承的那些记清楚就行。原创 2022-11-08 15:57:55 · 409 阅读 · 0 评论 -
css:flex布局子元素宽度被压缩问题
如题,父元素设置 flex 布局后,子元素如果超出长度则会被压缩,如图:子元素设置 ,默认值为 1flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。负值对该属性无效。...原创 2022-07-14 17:04:05 · 2059 阅读 · 0 评论 -
css:详解transform属性
概念移动旋转缩放倾斜特点:transform不会触发回流,和重绘。我们一个一个看实践所有操作的默认的基点都在中心位置,可以使用 transform-origin: (x,y) 来改变元素基点,一般基本不会用到。移动2Dtranslate(x,y)translateX(x)translateY(y)3Dtranslate3d(x,y,z)translateZ(z)旋转2Drotate(angle)3Drotate3d(x,y,z,angle)rotate原创 2022-05-21 21:26:36 · 4529 阅读 · 1 评论 -
css:一文讲清楚媒介查询
背景媒介查询是 css3 的一个新语法,用来对不同尺寸大小的设备来写不同的css样式。语法@media not|only mediatype and (mediafeature and|or|not mediafeature) { // css代码}not:否only:仅当and:将多个媒体查询规则组合成单条媒体查询逗号:分隔多个媒体查询,将它们组合为一个规则。媒体类型mediatype说明all用于所有设备print用于打印机和打印预览scr原创 2022-05-01 15:03:30 · 411 阅读 · 0 评论 -
css:网格布局
<!DOCTYPE html><html><head> <title>网格布局</title> <style type="text/css"> .grid-container { display: grid; /*有几行/列,每行/列的宽度*/ /*有三列,每列宽度分别是:*/ /*grid-template-columns: auto auto auto;*/ .原创 2022-02-17 22:46:42 · 457 阅读 · 0 评论 -
css:ios底部安全距离适配
背景我们做在 ios 的 web 页面时候,需要适配底部的黑边,加上安全距离。IOS新特性iOS11 新增特性,苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展,用于设置网页在可视窗口的布局方式,可设置三个值:contain: 可视窗口完全包含网页内容cover:网页内容完全覆盖可视窗口auto:默认值,跟 contain 表现一致注意:网页默认不添加扩展的表现是 viewport-fit=contain,需要适配 iPhoneX 必须设置 viewp原创 2021-11-05 17:03:05 · 8007 阅读 · 0 评论 -
css:使用tailwindcss抽象常用的css样式
背景我们一般写 css 的时候,比如要居中,要写三段 css,如果能合为一个就好了,tailwindcss 就是做了这样一件事情。你可能会问了,那岂不是又要记一套 API,确实,所以你只要记个大概,配合 vscode 插件,效率会高的飞起。实践稍后更新...原创 2021-08-25 16:20:36 · 468 阅读 · 0 评论 -
px、pt、dpi、dip、分辨率、屏幕尺寸等等概念
文章目录基本概念屏幕尺寸屏幕比例像素pxpt/point分辨率DPI(点每英寸)PPI(像素每英寸)DIP/DPdensityandroid最后参考资料基本概念屏幕尺寸屏幕的对角线长度,一般讲的大小单位都是英寸。比如我们说 iphone6 是6.7英寸,就是屏幕对角线为 6.7英寸。屏幕比例只确定了对角线长,2边长度还不一定。所以有了4:3、16:9这种,这样就可以算出屏幕边长了。像素pxpx 不是自然界的长度单位,而是一个抽象的单位,比如:windows桌面属性里的“设置”看到,如果是10原创 2021-08-15 21:28:37 · 7756 阅读 · 11 评论 -
css:对BEM的看法以及自己创立的一个CSS命名规范EToE
文章目录BEM基本介绍优点&缺点相关资料EToEBEM基本介绍BEM的意思就是块(block)、元素(element)、修饰符(modifier),是由Yandex团队提出的一种CSS Class 命名方法。类似于:.block{}.block__element{}.block--modifier{}优点&缺点相关资料https://www.smashingmagazine.com/2012/04/a-new-front-end-methodology-bem/htt原创 2021-06-28 00:33:32 · 94 阅读 · 0 评论 -
css:顶部按钮固定,上面内容滑动
这种需求我们平时见到很多的,实现方法也多的参差不齐,下面我说一种简单的。如图:可以看到只有红线部分滚动,底下按钮是固定的。代码<div class="second-level"> <div>滑动部分内容</div> <div class="level-bottom"> <button class="bottom-btn">开始评分</button> </div></div><sty原创 2020-10-18 16:28:06 · 1628 阅读 · 0 评论 -
css变量系列(5):vue3在css中调用js变量
vue3出正式版了再更吧原创 2020-08-20 14:25:14 · 1499 阅读 · 3 评论 -
css变量系列(4):js中使用sass的变量
以后再更原创 2020-08-20 14:21:42 · 699 阅读 · 3 评论 -
css变量系列(3):使用css动态修改图片的颜色(兼容小程序)
方案一使用CSS3滤镜filter中的drop-shadow<section> <div> <img src="" /> </div></section>section { img { position: relative; left: 0; margin-bottom: .1rem; filter: drop-shadow(#ffffff 80px原创 2020-08-19 17:46:07 · 2018 阅读 · 0 评论 -
css变量系列(2):小程序中使用css变量实现改变主题颜色
基础用法web开发中顶层变量的key名是:root,小程序使用pagepage { --themeColor: red;}使用js控制// 在js中设置css变量let myStyle = `--bg-color:red; --border-radius:50%;--wid:200px;--hgt:200px;`let chageStyle = `--bg-color:red; --border-radius:50%;--wid:300px;--hgt:300px;原创 2020-08-18 20:02:40 · 2908 阅读 · 0 评论 -
css变量系列(1):变量的基本使用
- - 和 var 和 :root--使用 -- 前缀声明的属性被称之为CSS的自定义属性var()通过var()函数引用的自定义属性又被称之为CSS的变量!:root这是伪类选择器,代表根元素 html一般我们会定义一些全局变量,如主题颜色:root { --themeColor: red;}html { background-color: var(--themeColor); // 找不到 --themeColor 的话就用 blue color: var(--theme原创 2020-08-18 19:56:28 · 521 阅读 · 0 评论 -
css:使用deep和」」」修改组件库的样式
在vue中如果加上scoped,样式会自动添加一个hash值比如:.title { color: #f00 }变为 .title[data-v-211e4c4a] { color: #f00 }这就会产生一个问题:当你在vue中引入了一个第三方库,那么这个库里的样式也会被转为 hash 这种形式,那么你想要改一下库里的样式就很难改了,有以下几种方式方法一.page-index 是我的页面最大的类名,这样的话在 vue 的 scoped 里也可以用哦~.page-index /deep/ .va原创 2020-07-06 17:21:16 · 976 阅读 · 0 评论 -
css:使用postcss-pxtorem自动将px转化为rem
我们平时做移动端适配的时候都是用 rem,需要把设计稿的 px 转换为 rem,我一般是用 pxcook 可以自动转换。今天介绍另一种方法,原理还是把 px 转化为 rem,但是我们是用一个 webpack 插件 postcss-pxtorem自动将px转化为rem,这样我们在css里就可以直接按照设计稿写px了。安装npm install postcss-pxtorem -D在项目根目录建一个文件叫 postcss.config.js,里面写module.exports = { plugi原创 2020-07-04 22:16:25 · 1547 阅读 · 1 评论 -
css:子元素设置display:inline-block出现的问题
问题一<!DOCTYPE html><html><head> <title>测试</title> <style type="text/css"> #div { width: 300px; height: 300px; background: burlywood; } #div1 { width: 150px; height: 150px; display: in原创 2020-06-23 20:27:51 · 812 阅读 · 0 评论 -
css:阅读知情同意书的勾选效果没法填满解决办法
效果代码如下,可以看到没有填充满,如何改呢?代码<div class="book-agree"> <input type="checkbox" id="agree"> <label for="agree"> <i></i> <p> <span>我已阅读《</span> <a href="javascript::">知情同意书</a>原创 2020-05-26 15:46:39 · 997 阅读 · 0 评论 -
css:使用label控制checkbox不生效的原因
今天有个简单的需求,就是实现表单底部的勾选知情同意书的效果,如图:我想着玩意做了百八十遍岂不是手到擒来,于是我写下了这样的代码:<!DOCTYPE html><html><head> <title>测试</title> <style type="text/css"> label { display: block; width: 20px; height: 20px; border原创 2020-05-21 10:32:11 · 1950 阅读 · 0 评论 -
css:头像处理之将长方形的图片放在圆形框里居中
需求有一批头像数据本来都是长方形的,现在要放在一个圆形的头像框内,然后就会只显示左边一半,我想要的是显示居中。代码<div class="top-photo" :style="'background-image:url(' + avatar + ')'">.top-photo { width: 1.2rem; height: 1.2rem; border...原创 2019-12-13 16:14:21 · 2132 阅读 · 0 评论 -
css:列表效果(文字过长自适应)
效果这种列表难点是文字过长需要居中自适应,据我所知解决办法有两种:表格布局flex代码<div class="table"> <table> <tr class="rank-item" v-for="(item, index) in studyRankList" :key="index"> <t...原创 2019-11-27 18:40:50 · 800 阅读 · 0 评论 -
css:图文效果(左图右文字)
效果代码<view class="before-item"> <view class="item-left"> <image class="item-left" src="图片url" /> </view> <view class="item-right"> <view cla...原创 2019-11-27 16:32:57 · 6834 阅读 · 1 评论 -
css:图文效果(上面图片下面文字)
效果代码<div> <i></i> <p>学习计划</p></div>div { display: flex; flex-direction: column; align-items: center; width: 1.2rem; i { width: 0.48rem; ...原创 2019-11-27 16:26:10 · 6451 阅读 · 0 评论 -
css:文字中间加上“|”的效果
效果代码<div class="care-circle"> <p>关爱圈</p> <p> <em>20</em> <span>获得的赞</span> <i></i> <em>245</em> <span>...原创 2019-11-27 16:08:41 · 395 阅读 · 0 评论 -
css:教你来画三角形
这个老哥写的太好了,很详细,我直接转载了https://www.jianshu.com/p/9a463d50e441原创 2019-09-04 12:02:42 · 351 阅读 · 0 评论 -
css:详解rem
基本概念rem是CSS3新增的相对长度单位,是指相对于根元素html的font-size计算值的大小。简单可理解为屏幕宽度的百分比。原理计算方法:(html的font-size) * (设置的rem的值) = (实际的px)屏幕widthhtml的font-size(都填100为了方便,这样的话要多少px就填(多少/100)的rem就好了)实际rem实际px7...原创 2019-08-01 12:25:22 · 1964 阅读 · 0 评论