css
Gavi曦
这个作者很懒,什么都没留下…
展开
-
微信小程序button按钮设置宽度无效
在开发小程序的过程中,遇到了button按钮设置宽度无效的问题。微信客户端 7.0 开始,UI 界面进行了大改版。小程序也进行了基础组件的样式升级,涉及的组件有 button,icon,radio,checkbox,switch,slider。app.json 中配置 “style”: “v2” 表明启用新版的组件样式。因此我们的button是有默认样式的。当我们想要自定义按钮样式时,需要在wxss中编写按钮的样式来覆盖默认样式。先贴原来的代码原创 2023-05-26 13:54:29 · 797 阅读 · 0 评论 -
让input元素输入的文字距离左边框一定距离 (css属性:text-indent)
想让input元素输入的文字距离左边框一定距离,可以使用CSS中的text-indent属性,对文本内容进行缩进。在MDN官网中,text-indent属性是这么解释的:text-indent属性能定义一个块元素首行文本内容之前的缩进量。<input type="text" placeholder="首行缩进"/>input{text-indent:2rem;}//首行缩进input{text-indent:10%;}//百分比取决于其包含块(cont...原创 2022-03-31 09:03:08 · 7154 阅读 · 0 评论 -
关于照片(img)的水平居中和垂直居中
本文主要是讲述照片(img)的水平居中和垂直居中,但是其他元素的水平居中和垂直居中也可借鉴此文。原创 2022-03-06 21:25:07 · 16575 阅读 · 0 评论 -
CSS标准盒子模型详解
CSS标准盒子模型原创 2022-01-16 22:30:44 · 456 阅读 · 0 评论 -
如何让flex布局中的一个子元素单独右侧对齐
flex布局中的一个子元素单独右侧对齐我们可能会在 `Flexbox`容器中使用 `justify-self` 属性来实现子元素的水平对齐。但是,需要注意的是,`justify-self` 在 `Flex`布局中是无效的。那么常见的做法是将子元素的 `margin-left` 设置为 `auto`。原创 2023-04-30 13:13:21 · 5376 阅读 · 6 评论 -
::v-deep
当我们需要覆盖组件库中的样式时大多数情况只能通过深度作用选择器,::v-deep就是其中一种深度作用选择器。,vuetify等,虽然配好了样式但是有时候我们仍然需要根据需求更改样式。vue样式穿透 ::v-deep的具体使用。所以接下来主要介绍::v-deep的使用。在用到很多vue的组件库如vant,原创 2022-11-19 22:27:54 · 1403 阅读 · 0 评论 -
元素下划线效果
通过伪类选择器实现下划线效果,使用绝对定位,将下划线占满元素宽度的100%。tip:要注意设置background的颜色,如果颜色和父级元素的背景颜色相同的话将无法正常显示(实际有,但是无法看到) content属性必须要设置,否则无法显示出下划线.active::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; b原创 2022-04-09 16:49:09 · 270 阅读 · 0 评论 -
:checked选择器应用 自定义单/多选框选中时的样式
在MDN官网,:checked选择器有如下定义::checkedCSS伪类选择器表示任何处于选中状态的radio(<input type="radio">),checkbox(<input type="checkbox">) 或("select")元素中的optionHTML元素("option")。用户通过勾选/选中元素或取消勾选/取消选中,来改变该元素的 :checked 状态。基础示例该实例有以下几个需求:将两个input标签隐藏,自定义选中/...原创 2022-04-09 15:35:48 · 897 阅读 · 0 评论 -
设置input输入框内占位文本的样式 ::placeholder选择器
如果你想设置输入框里面的占位文本的样式,可以通过::placeholder选择器来对其进行设置。::placeholder选择器允许自定义占位文本的样式,但是在该选择器中只有小一部分CSS属性可以使用:所有和字体有关的属性:font,font-kerning,font-style,font-variant,font-variant-numeric,font-variant-position,font-variant-east-asian(en-US),font-variant-ca...原创 2022-04-09 12:58:36 · 1890 阅读 · 0 评论 -
使某个css属性失效 property:unset
在开发过程中,一个元素可能被多次设置了css样式,一般来说,最后一次的css样式会覆盖之前设置的相同css属性,同时会继承之前其他css属性。如果想该元素不继承之前设置的css属性,则可设置继承的属性值为unset。(特别是在引入了多个css文件的情况下)如下图中的left属性,此时我们将继承的left属性设置为unset,同时设置right属性来改变元素的水平位置。.swiper-pagination-fraction { position: absolute; left: 5原创 2022-04-09 11:09:24 · 2593 阅读 · 0 评论