CSS
关注
分享
扫一扫
文章平均质量分 58
css的一些相关知识与demo
小丁冲鸭！
你若盛开，鲜花自来。
展开
-
css新手引导实现方式总结
新手引导功能一般都是用一个半透明的黑色进行遮罩，蒙层上方对界面进行高亮，旁边配以弹窗进行讲解，样式如下但是由于交互不同，实现方案也不一样，下面就针对不用的交互，总结了不同的实现方法（下文描述时以上面的图片为例）原创 2023-05-11 13:29:59 · 1860 阅读 · 4 评论 -
ios居然不支持transparent
ios中不支持transparent属性原创 2022-09-26 21:03:25 · 573 阅读 · 0 评论 -
如何相对于兄弟元素实现垂直居中
之前遇到的垂直居中大部分都是相对于父元素居中，方法也很多，如flex、margin、absolute等等，之前也总结过了，这里就不多赘述，但是这次的需求是相对于兄弟元素实现垂直居中，还是花费了一些时间才解决的（也可能是由于思维定势，一时半会没想起来）一、需求效果可以看到右侧的按钮，是相对于左侧的文字内容垂直居中的，而且内容的行数可能是一行或者两行二、方法尝试（使用flex）在父元素上加上： display: flex; align-items: center;.原创 2022-05-11 16:59:39 · 918 阅读 · 0 评论 -
移动端页面如何兼容iphone底部的安全区域
正常情况下，当页面充满屏幕时，部分iphone底部黑条会遮挡页面内容，但是在安卓手机上又不会存在这个问题，如下图：但是其实我们想要实现的效果是这样的，不想让它遮挡内容：这个要怎么兼容呢？在样式中加入padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);...原创 2022-03-18 10:12:50 · 1920 阅读 · 2 评论 -
清除浮动的几种方式
三栏布局，都使用了浮动，导致父元素高度塌陷，效果如下：原创 2021-06-03 14:27:09 · 361 阅读 · 1 评论 -
一个css样式优先级问题引起的思考......
一、遇到的问题首先问题是这样的，问背景色是什么？.box { background: red;}.box: first-child { background: yellow;}我的第一直觉认为，应该是yellow，因为red是类选择器和yellow是伪类选择器优先级一样，那么后边写的就会覆盖前边写的吧实际结果也是yellow优先级高，但是：当我把他们交换顺序，改成下面这种时：.box: first-child { background: yello原创 2021-05-18 14:56:06 · 267 阅读 · 0 评论 -
flex布局之多行多列
1、三行三列，边距都是20px，每个box宽高都是200px使用flex布局，给外层盒子宽高都设置成640px(200*3+20*2)，在使用align-content: space-between和justify-content: space-between即可，代码如下：<style> *{ padding:0; margin: 0; } html,body{ width: 100%; height: 100%; } .box{原创 2021-05-17 11:40:19 · 11294 阅读 · 0 评论 -
css动画实例——时钟
最近在学习css的动画属性，所以做了个小练习，用css动画实现了一个表盘时钟，效果如下：可能不是很准，仅供参考~项目源码：见https://github.com/dingzhenyue/css-clock原创 2021-04-19 17:32:01 · 365 阅读 · 0 评论 -
css动画入门总结
css动画原创 2021-04-16 16:50:42 · 355 阅读 · 0 评论 -
css中样式类型及属性的获取方式总结
1原创 2021-03-26 15:20:49 · 1805 阅读 · 0 评论 -
CSS3 的单位vw、vh、px，em，rem
1、pxpx其实就是像素的意思，全称pixel，也就是图像的基本采样单位。对于不同的设备，它的图像基本单位是不同的，比如显示器和打印机。而我们通常所说的显示器分辨率是指桌面设定的分辨率，不是显示器的物理分辨率，但是现在我们的桌面分辨率和物理分辨率几乎是一致的，因为这样显示效果最佳。所以总的来说px就是对应我们显示器的分辨率。这样就会有个问题就是如果使用px的话我们就要根据不同电脑的分辨率来做自...转载 2019-10-24 14:38:48 · 782 阅读 · 0 评论 -
在css中自定义字体
在近期的项目中，需要更改一些不常见的字体，以前很少去设置字体，经常使用默认字体，所以趁此机会做以下总结。（需要下载所需要的字体包）<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" conten...原创 2019-10-21 17:28:08 · 420 阅读 · 0 评论 -
css函数--var()
前言：今天工作闲暇之余，看到了一个css奇怪的写法：:root { --main-bg-color: red;} #div1 { background-color: var(--main-bg-color);}经过一顿度娘查找，发现这是css3用于插入自定义属性值的函数，在多次使用同一个属性值时就非常有用了。使用方法：css：用 --xxx 来定义名字，使用var（）来调用该属性。 js：写入document.body.style.setProperty('--m..原创 2020-12-30 16:32:14 · 1401 阅读 · 0 评论 -
css中.a.b 与 .a .b（中间有空格）的区别
区别：.a.b是获取同时含有a和p的元素 .a .b（中间有空格），是获取.a元素下的所有.b元素demo:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docume原创 2020-12-30 15:54:23 · 3096 阅读 · 0 评论 -
flex column方向时，wrap自动换列后内容不能撑开父元素的大坑
前言：最近在练习中，有一种场景，就是有很多box，排成固定6行，列数可能是3或4，所以想到直接用flex布局，竖直排列，然后6个后自动换列，理想很丰满，但是现实太骨感，一顿操作后，结果是这样的：其实想要的效果是这样的（列数不固定）：代码：html<div class="home-category"> <ul class="home-category-container"> <li class="category-it...原创 2020-10-22 16:47:05 · 4762 阅读 · 5 评论 -
a标签中的图标和文字如何上下对齐
实现效果：主要代码：html:<div class="home-category-detail"> <a :href="item.href" v-for="(item,index) in homeCategoryDetail" :key="'phoneNavList' + index" > <img :src="item.src" :alt="item.name"> <span>{{item.nam原创 2020-10-13 18:24:08 · 3029 阅读 · 0 评论 -
vue中动态设置css的样式
前言：在实际开发时，经常会遇到需要动态更换css样式的情况，比如今天自己在练习时遇到的一个简单的小问题，就是切换tab后动态的修改选中后的字体颜色，没有做成控件，就用a标签做的。...原创 2020-10-10 16:11:21 · 5984 阅读 · 0 评论 -
那些年踩过的calc()的坑
一、+\-符号之间一定要写空格width: calc(100%-50px); // 失效width: calc(100% - 50px); // 正确的写法二、在less中的写法问题calc是css3中增加的一个自动计算长度的方法，而在less中，less的运算方式会和calc发送冲突。可以写成：width: calc(~'100 - 60px');...原创 2020-07-28 18:30:35 · 980 阅读 · 0 评论 -
text-overflow文本省略部分内容
在开发中有时候会遇到文本展示时，内容太多不能全部展示而需要省略的情况，下面是一行和多行的省略方法（其中一种）。一行文本.content { overflow: hidden; text-overflow: ellipsis; /*以省略号的形式省略内容*/ white-space:nowrap; /*不换行*/}实现效果：多行文本 (此方法只适用于web...原创 2020-01-13 11:25:36 · 883 阅读 · 0 评论 -
BFC—块格式化上下文
一、定义MDN中是这样说的：块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是block块盒子的布局过程发生的区域，也是浮动float元素与其他元素交互的区域。是不是看完之后，依然一脸懵逼.....反正我是（苦笑）。简单地说，BFC 就是某个元素的一个 CSS 属性，只不过这个属性不能被开发者显式的修改，拥有这个属性的元素...原创 2019-12-06 22:18:22 · 696 阅读 · 0 评论 -
CSS3新属性精简版
一、边框border-radius（圆角） box-shadow（阴影） border-image（边框图片）二、背景background-image（背景图片） background-size（背景图片大小） background-origin（背景图片的定位区域） background-clip（背景图片的绘制区域--截图）三、 渐变线性渐变（Linear Grad...原创 2019-11-26 22:04:15 · 610 阅读 · 0 评论 -
解决div宽度设置width:100%后再设置padding或margin超出父元素的办法
前言：有时候我们需要子div和父div一样宽（高），但是需要设置一定边距时，如果子元素使用width:100%在设置padding或margin的话，就会出现溢出问题。HTML<div class="parent"> <div class="child"></div></div>CSS使用width:100%加m...原创 2019-11-06 17:52:03 · 17955 阅读 · 0 评论 -
在不知道父子元素的宽高时，怎么水平垂直居中
在面试时经常会问到css布局的问题，尤其是居中问题，于是把想到的方法做以下总结。如有补充，欢迎私聊哦~一、块级元素1、flex方法HTML文件 <body> <div class="father"> <div class="child"></div> </div> </body...原创 2019-11-05 11:59:57 · 1346 阅读 · 0 评论