![](https://img-blog.csdnimg.cn/20200720225449641.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS3
CSS3文章专栏
小草莓蹦蹦跳
一枚努力奋斗的程序莓,喜欢记录和学习。本博客主要涵盖前端技术积累和工作积累。just do it,家人们加油加油油
展开
-
flex 布局和 grid 布局的区别
综上所述,Flexbox 适用于一维布局的场景,用于构建自适应和灵活的布局;而 Grid 适用于二维布局的场景,用于构建复杂的网格结构和定位布局。在实际开发中,可以根据具体需求选择合适的布局模型。原创 2024-01-23 22:53:53 · 1066 阅读 · 0 评论 -
画一条0.5px的线、设置小于12px的字体、解决 1px 问题
这里针对像素比为2的页面,把整个页面缩放为了原来的1/2大小。这样,本来占用2个物理像素的 1px 样式,现在占用的就是标准的一个物理像素。此时,伪元素的宽高刚好可以和原有的目标元素对齐,而 border 也缩小为了 1px 的二分之一,间接地实现了 0.5px 的效果。使用 Webkit 的内核的 -webkit-text-size-adjust 的私有CSS属性来解决。的值,然后把这个值通过 JSX 或者模板语法给到 CSS 的 data 里,然后就可以在 CSS 中用。原创 2023-10-17 17:10:36 · 315 阅读 · 0 评论 -
实现一个三角形、扇形、宽高自适应的正方形
当一个盒子的宽高都为0时,那么盒子的展现形式是由边框 border 的粗细和颜色决定的。:例如元素 width 设置为10%,overflow 设置为 hidden,伪元素的 margin-top 设置为100%利用元素的 margin/padding 百分比是相对父元素 width 的性质来实现。:例如宽度设置为10%,height 为0,padding-top 也设置为10%利用伪元素的 margin-top 的值来实现。:例如宽度设置为10%,高度设置为10vw。在实现三角形的逻辑基础上,加上。原创 2023-10-17 14:03:15 · 228 阅读 · 0 评论 -
transition 和 animation 的区别
Transition 主要用于在元素状态发生变化时实现平滑的过渡效果。Transition 可以定义元素的属性变化过程中的动画效果。Transition 可以应用于任何 CSS 属性,并且可以指定不同的持续时间、延迟时间、过渡函数和重复次数等参数。Transition 的实现是通过在属性值发生变化时逐步改变属性值,从而创建平滑的过渡效果。Transition 可以通过:hover、:focus、:active 等伪类选择器或 JavaScript 控制元素状态来触发。原创 2023-10-07 17:44:46 · 712 阅读 · 0 评论 -
弹窗遮罩层交互开发/阻止弹窗滚动
【代码】弹窗遮罩层交互开发/阻止弹窗滚动。原创 2019-07-12 15:21:02 · 179 阅读 · 0 评论 -
CSS3 弹窗动效交互
/* 动效 */.anim { animation-duration: .8s; animation-fill-mode: both;}.anim.bounceIn { animation-duration: 0.5s;}.bounceIn { animation-name: bounceIn;}@keyframes bounceIn { from, 5...原创 2019-03-20 10:14:11 · 1020 阅读 · 0 评论 -
使用字体图标的好处
好处:01. 字体图标操作比较灵活,可以使用样式对字体图标地进行修改。02. 字体图标是矢量图,怎么放大都不会失真。03. 使用字体图标可以减少对应的http请求,图片不好处理,所以使用字体图标比较方便...原创 2019-01-03 10:19:06 · 247 阅读 · 0 评论 -
移动端 -- 常用初始化样式
/* 全局样式 */body,html { padding: 0; margin: 0; overflow-x: hidden;}/* 禁止ios出现灰色背景 */* { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;}#app { font-family: "...原创 2019-07-12 14:52:34 · 173 阅读 · 0 评论 -
移动端 -- 微信浏览器用户调整字体大小后页面矬了,怎么阻止用户调整?
Anroid:复写了 layoutinflater 对 textview 做了统一处理。ios:修改了 body.style.webkitTextSizeAdjust 值。整个页面用rem或者百分比布局。android:暂无方案。原创 2019-03-19 11:14:29 · 628 阅读 · 1 评论 -
移动端 -- webkit 如何更改表单元素(input、select、radio、checkbox )的默认外观(placeholder、下拉箭头、清除按钮)?特殊操作?消除transition闪屏
1、如何重置默认外观?2、改变输入框placeholder的颜色值?3、placeholder的文字能换行么?4、修改select 默认下拉箭头5、禁用 radio 和 checkbox 默认样式6、禁用PC端表单输入框默认清除按钮7、禁止ios和android用户选中文字8、禁止ios 长按时不触发系统的菜单,禁止ios&android长按时下载图片9、打电话10、发短信11、如何阻止windows Phone的默认触摸事件12、android 去掉语音输入按钮原创 2019-03-19 11:13:58 · 751 阅读 · 1 评论 -
移动端 -- 如何去掉元素被触摸时产生的半透明灰色遮罩?
android用户点击一个链接,会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来的效果不一样,可设置。设置 -webkit-tap-highlight-color 的 alpha 值为0。-webkit-user-modify有个副作用,就是输入法不再能够输入多个字符。-webkit-tap-highlight-color的alpha值为0。对于按钮类还有个办法,不使用a或者input标签,直接用div标签。也就是属性值的最后一位设置为0,就可以去除半透明灰色遮罩。另外,有些机型去除不了,如小米2。原创 2019-03-19 10:44:11 · 1703 阅读 · 1 评论 -
移动端 -- 屏幕旋转的事件和样式
0和180 表现为竖屏模式;正负90 表示横屏模式;原创 2019-03-19 11:13:41 · 1195 阅读 · 1 评论 -
移动端 --- 解决ios上fixed失效的问题
原创 2019-03-19 09:32:26 · 2355 阅读 · 1 评论 -
安卓手机1px显示不出来的问题
安卓手机1px显示不出来的问题,将其写在行内样式就能显示出来原创 2018-09-30 11:39:52 · 2710 阅读 · 0 评论 -
移动端 --- 解决苹果手机滑动卡顿的问题
移动端 --- 解决苹果手机滑动卡顿的问题,在滑动的页面上加上该样式:-webkit-overflow-scrolling : touch;原创 2018-09-30 11:39:03 · 8861 阅读 · 4 评论 -
css的属性content有什么作用呢?有哪些场景可以用到?
该属性用于定义元素之前或之后放置的生成内容。,不过该内容创建的盒子类型可以用属性 display 控制。在元素头或尾部来插入生成内容。属性的话,也是没有效果的。原创 2023-05-11 14:16:24 · 229 阅读 · 0 评论 -
要让Chrome支持小于12px的文字怎么做?
即使进行了缩放,原来元素还是会占据对应的位置。因此需要做调整,最好是在外面再包一层元素,以免影响其他元素。最好的办法还是进行切图,或者就不要使用小于 12px 的字体。当需要小于 12px 字体的时候,有以下几个方法可以使用。原因是 Chrome 认为小于这个字号会影响阅读。Chrome 中有最小字号的限制,一般为 12px。这个属性在高版本的 Chrome 中已经被废除。对行内元素无效,因此要么使用。原创 2020-07-22 23:27:22 · 741 阅读 · 1 评论 -
请描述css的权重计算规则
当权重相同时,靠后的样式会覆盖靠前的样式(这里的靠后是 CSS 文件中的顺序,不是 class 中的顺序)伪类和属性选择器([type='xxx']) 的权重与 class 相同;权重从左往右进行比较,只有前一级相等时才会向后比较。伪元素的权重与 tag 相同。原创 2023-05-05 09:55:27 · 89 阅读 · 0 评论 -
让网页的字体变得清晰,变细用CSS怎么做?
第一个反应是想到简单测试了下,是有效的,不过没有多平台测试。第二个想到的是设置偏细的字体第三个是在重置样式里见过,针对MAC,IOS平台,有个样式。原创 2023-05-04 16:56:52 · 690 阅读 · 0 评论 -
什么是FOUC?如何避免FOUC的?
如果使用import方法对css进行导入,会导致某些页面在Windows下的Internet Explorer浏览器出现一些奇怪的现象:以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效简称为FOUC。原创 2020-07-22 23:42:47 · 167 阅读 · 2 评论 -
你有用过CSS预处理器吗?喜欢用哪个?原理是什么?
它能让你的CSS具备更加简洁、适应性更强、可读性更强、层级关系更加明显、更易于代码的维护等诸多好处。CSS预处理器种类繁多,目前Sass、Less、用的比较多。3、Extend 和 Mixin 代码片段 (用的少)5、import css 文件模块化。4、循环:适用于复杂有规律的样式。2、变量和计算: 减少重复代码。1、嵌套:反映层级和约束。原创 2023-04-28 14:54:24 · 130 阅读 · 0 评论 -
怎样修改chrome记住密码后自动填充表单的黄色背景?
除了chrome默认定义的 background-color、background-image、color不能用!important 提升其优先级以外,其他的属性均可使用!important 提升其优先级。1、Chrome有默认样式。原创 2019-11-07 18:02:51 · 315 阅读 · 1 评论 -
在页面上隐藏元素的方式有哪些,分别应用在哪些场景?display:none 与 visibility:hidden 的区别
点击链接时,会产生一个虚线框,对于IE还好,没什么问题,虚线框只是在背影图片大小。,子孙节点消失是由于继承了 hidden,通过修改子孙节点的属性visibility:visible 可以让子孙节点显示;IE采用的遍历方法(HTC,css表达式)有些耗系统资源,正好我们只需要隐藏FF下的虚线框就行了,IE就不管了,说一下。将文字甩到屏幕看不到的地方。,子孙节点会随着父节点从渲染树消失,通过修改子孙节点的属性也无法显示;,子孙节点会随着父节点从渲染树消失,通过修改子孙节点的属性也无法显示;原创 2020-07-21 10:50:33 · 384 阅读 · 1 评论 -
解释下 CSS sprites的原理和优缺点分别是什么?
将许多小图标或者小图拼成一张大图,然后利用background-position + 固定的宽高来显示对应的图标。更新一部分的时候,需要重新加载整个图片。原创 2023-04-28 10:57:00 · 135 阅读 · 0 评论 -
HTML5 和 CSS3 的兼容问题
Vue2.x 和 jQuery2.x 适配兼容 IE9+总结_vue2 兼容ie9_小草莓蹦蹦跳的博客-CSDN博客。原创 2020-07-27 23:46:38 · 1077 阅读 · 0 评论 -
css常用的布局方式有哪些?
bootstrap 用的布局,把页面分为 24 分,通过 row 和 col 进行布局。最初用来解决多栏布局的问题。比如圣杯、双飞燕的布局都可以用。最基本的布局,就是顺着 html 像流水一样流下来。css3 的布局可以非常灵活地进行布局和排版。原创 2020-07-21 10:53:38 · 36 阅读 · 0 评论 -
rgba()和opacity这两个的透明效果有什么区别呢?
的透明效果是作用整个元素以及其子元素上的。不会影响元素中的其他内容以及子元素内容。上的话,只对背景颜色有影响。只对当前自己的颜色有影响。原创 2023-04-25 17:32:58 · 44 阅读 · 0 评论 -
圣杯布局和双飞翼布局的理解和区别,并用代码实现
采用的是父级div给 padding-left 和 padding-right 限制,让字不会被左边和右边挡住;设置margin左值为左栏宽度,右值为右栏宽度;放在文档流前面,使其优先渲染;设置相对定位且left值为宽度的负值;具体实现:三栏都设置成左浮动,中间栏100%宽度,左右栏设置具体宽度。是采用给中间的div添加一个小div,这个小div使用外边距;设置相对定位且left值为宽度的正值;margin-left: 宽度负值;放在文档流前面,使其优先渲染;:设置 padding 给两边侧栏腾空间;原创 2020-07-20 14:47:18 · 465 阅读 · 1 评论 -
浏览器是怎样判断元素是否和某个CSS选择器匹配?
浏览器先产生一个元素集合,这个集合往往由最后一个部分的索引产生(如果没有索引就是所有元素的集合)。然后向上匹配,如果不符合上一个部分,就把元素从集合中删除,直到真个选择器都匹配完,还在集合中的元素就匹配这个选择器了。,一个元素只要确定了这个元素在文档流之前出现过的所有元素,就能确定他的匹配情况;没有载入完成,浏览器也能根据已经载入的这一部分信息完全确定出现过的元素的属性。则把元素从集合中删去。的元素拿出来组成一个集合,然后上一层,对每一个集合中的元素,如果元素的。的元素,就把原来的元素从集合中删去。原创 2019-11-27 16:11:59 · 224 阅读 · 2 评论 -
用css创建一个三角形,并简述原理
【代码】用css创建一个三角形,并简述原理。原创 2023-04-23 10:47:15 · 116 阅读 · 0 评论 -
对CSS盒子模型的理解?
1、盒子模型的类型2、标准盒子模型3、IE盒子模型4、如何互相转换5、浏览器兼容性及其他原创 2020-07-13 23:01:45 · 365 阅读 · 0 评论 -
如何解决<a>标签点击后hover事件失效的问题?
改变a标签css属性的排列顺序,只需要记住。正确的做法是将两个事件的位置调整一下。未访问时的样式,一般省略成a。原创 2023-04-20 10:51:14 · 529 阅读 · 0 评论 -
DIV+CSS布局的好处
缺点: 不同浏览器对web标准默认值不同,所以更容易出现对浏览器的兼容性问题。原创 2023-04-20 10:46:48 · 143 阅读 · 0 评论 -
使用动画(js实现动画,css3实现动画)时两者的区别?
js实现的是帧动画、css实现的是补间动画(transition animation) 帧动画:使用定时器,每隔一段时间,更改当前的元素 补间动画:过渡(加过渡只要状态发生改变产生动画)动画(多个节点来控制动画)性能会更好 在支持css3的浏览器尽可能的使用css3动画(适用于移动端开发)原创 2023-04-20 10:40:58 · 138 阅读 · 0 评论 -
在移动端适配中,1 像素边框高清如何实现?
圆角无法实现,实现4条边框比较麻烦,并且只能单独实现。如果嵌套,会对包含的效果产生不想要的效果,所以此方案配合:after和before独立使用较多。颜色不好处理, 黑色 rgba(0,0,0,1) 最深的情况了。有阴影出现,不好用。② 渐变 linear-gradient (50%有颜色,50%透明)基本所有场景都能满足,包含圆角的button,单条,多条线。利用CSS对阴影处理的方式实现0.5px的效果。大量使用box-shadow可能会导致性能瓶颈。可以设置单条,多条边框;四条边框实现效果不理想。原创 2020-06-18 10:45:29 · 133 阅读 · 0 评论 -
link 和 @import 有什么区别?
link 支持使用 Javascript 控制 DOM 去改变样式 (document.styleSheets),由于 DOM 方法是基于文档的,所以无法使用 @import 方式改变样式;当页面加载的时候,link 标签会同时被加载;而 @import 引入的 CSS 会等页面加载完成之后再加载;link 除了加载CSS,还可以定义RSS等,而@import就只能加载CSS。由于 DOM 方法是基于文档的,所以无法使用@import方式改变样式;页面加载时,link 会同时被加载;原创 2020-07-21 10:55:25 · 217 阅读 · 0 评论 -
CSS 如何使用媒体查询
也就是用来排除符合表达式的设备。换句话说,not 关键词表示对后面的表达式执行取反操作,如:样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中。同样的,对于屏幕设备同样可以使用“min/max”对应参数,如“min-device-width”或者“max-device-width”。only用来指定某种特定的媒体类型,可以用来排除不支持媒体查询的浏览器。是用来排除某种制定的媒体类型。"将多个媒体特性结合在一起。在智能设备上,例如 i。原创 2023-04-21 14:33:20 · 126 阅读 · 0 评论 -
水平居中、垂直居中的几种方法
CSS 垂直居中有哪些实现方式?- 题目详情 - 前端面试题宝典4、水平垂直居中的实现① 绝对定位 +translate利用绝对定位,先将元素的左上角通过 top:50%和 left:50%定位到页面的中心,然后再通过 translate 来调整元素的中心点到页面的中心。该方法需要考虑浏览器兼容问题。top: 50%;② 绝对定位 +利用绝对定位,设置四个方向的值都为 0,并将 margin 设置为 auto。原创 2023-04-19 18:20:56 · 415 阅读 · 0 评论 -
PC端页面适配不同的分辨率的方法
② 在同一个css样式表中,根据不同的分辨率,写不同的css样式。① 根据不同的分辨率,引入不同的css样式表。原创 2023-04-19 17:02:55 · 1083 阅读 · 0 评论 -
使用flex实现三栏布局,两边固定,中间自适应
使用flex实现三栏布局,两边固定,中间自适应。两边设置宽度固定;中间不设置宽度,设置样式:flex:1;原创 2023-04-19 15:23:34 · 207 阅读 · 0 评论