![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
HDdgut
这个作者很懒,什么都没留下…
展开
-
css如何去掉重叠部分的边框,CSS中nth-child不生效
不生效,造成这样的原因是因为父选择器没选择正确。原创 2024-04-28 20:30:00 · 464 阅读 · 0 评论 -
overflow-y没有超出高度,依然显示出滚动条
即使内容不超过高度,也会出现右边的滚动条(max-height与height出现的滚动条长短不一样,渲染数据有时多有时少,使用max-height)。原创 2024-03-26 21:00:00 · 355 阅读 · 0 评论 -
flex布局换行后出现间隙问题
align-content是Flex布局中用于控制多行子项在交叉轴上的对齐方式的属性。它仅在有多行子项时才会生效,如果子项只有一行,则align-content属性不会产生任何效果。align-self 是Flex布局中用于单个子项控制其在交叉轴上的对齐方式的属性。通过为单个子项设置 align-self 属性,可以覆盖容器的 align-items 属性,从而针对该子项进行个别的对齐方式设置。问题:换行后,行间出现空白间隔,如果没有设置父容器的高度,不会出现这个问题,父容器高度会随子项增多,而变大。原创 2023-12-21 10:26:17 · 1571 阅读 · 0 评论 -
elementui 修改 el_table 表格颜色,表格下方多了一条线问题
如果使用了scoped,需要加上stylus /deep/ (其他的css语言有不一样的写法)其他背景色,表格边框颜色修改。原创 2023-10-23 21:00:00 · 1208 阅读 · 1 评论 -
CSS中一个冒号和两个冒号有什么区别(css中:和::的区别)
与伪类针对特殊状态的元素不同的是,伪元素是对元素中的特定内容进行操作,它所操作的层次比伪类更深了一层,也因此它的动态性比伪类要低得多。它控制的内容实际上和元素是相同的,但是它本身只是基于元素的抽象,并不存在于文档中,所以叫伪元素。伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id、class、属性等静态的标志。伪元素所控制的内容和一个元素控制的内容一样,但是伪元素不存在于文档树中,不是真正的元素,所以叫伪元素。伪类将应用于被激活的元素,如被点击的链接、被按下的按钮等。转载 2023-08-30 17:44:27 · 188 阅读 · 0 评论 -
css利用flex分配剩余高度出现子组件溢出问题
是一个CSS属性,用于指定弹性容器内弹性项目的伸缩能力和分配比例。情景:父组件高度一定,子组件中,其他子组件高度固定,一个子组件高度不确定(页面滚动列表)多重嵌套的时候,父组件中也有flex:1,同样需要使用overflow属性控制溢出;当子组件的内容超出了容器的高度(父组件)时候,(推荐),或是限制子组件的最大高度。1.利用flex分配剩余高度/宽度。原创 2023-08-29 21:00:00 · 2620 阅读 · 0 评论 -
flex布局失效的场景和子元素失效的属性,常见flex的应用场景
父元素是flex布局,子元素的float、clear和vertical-align,width,height属性将会失效左右布局,flex:1,宽度溢出问题;垂直居中,子元素超出容器范围;使用display:flex等分间距排列,子元素等距离排列原创 2021-04-15 13:49:24 · 7469 阅读 · 0 评论 -
css实现 边框border渐变色
border-style: solid;border-width: 2px;border-radius: 1px;border-image-source: linear-gradient(0deg, #106bad 4%, #4297d4 100%);原创 2021-03-29 14:11:13 · 665 阅读 · 0 评论 -
页面导入样式时,使用link和@import有什么区别?
1.link属于XHTML标签,除了加载CSS外,还能用于定义RSS,定义rel连接属性等作用;而@import是css提供的,只能加载css2.页面被加载时,link会同时加载,而@import引用的css会等到页面被加载完再加载3.@import是css2.1提出的,只在IE5以上才能被识别,而link是xhtml标签,无兼容性问题4.link支持用js控制DOM去改变样式,而...原创 2019-09-25 00:00:08 · 80 阅读 · 0 评论 -
PC端浏览器滚动条样式改变
/滚动条的宽度/* { scrollbar-width: thin; /* 滚动条宽度有三种:thin、auto、none(可改变火狐scrollBar) */ -ms-overflow-style:none;/*隐藏滚动条,当IE下溢出,仍然可以滚动*/}参考链接:https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar待补充。...原创 2021-01-12 11:16:32 · 315 阅读 · 0 评论 -
阻断mix-blend-mode的方法,包括isolation:isolation
1. isolation:isolation。isolation:定义该元素是否必须创建一个新的层叠上下文(stacking context),主要作用和background-blend-mode一起使用,允许使一组元素从它们后面的背景独立出来,只混合这组元素的背景。默认值(初始值)auto,语法:formal syntax: auto|isolate。**2. 阻断mix-blend-mode,**当元素使用混合模式时,会混合Z轴上所有层叠顺序比其低的层叠元素,只要元素可以创建层叠上下文,就可以阻断原创 2020-09-04 10:52:34 · 435 阅读 · 0 评论 -
css3学习总结与记录
大纲csss实用属性text-text-transformcss混合模式mix-blend-mode 属性背景混合:background-blend-modeCSS函数cubic-bezier() 函数csss实用属性text-text-transformtext-transform:uppercase/capitalize/lowercase /none/inherit (大写/首字母大写/小写/默认/继承)css混合模式mix-blend-mode 属性描述了元素的内容应该与元素的直系父元素原创 2020-09-03 11:10:08 · 95 阅读 · 0 评论 -
手机屏幕自适应,谷歌最小字体12px
@media screen and (min-width:320px) { body{font-size:75%;}}@media screen and (min-width:375px) { body{font-size:87.5%;}}@media screen and (min-width:480px) { body{font-size:87.5%;}}@...原创 2020-07-15 16:37:56 · 566 阅读 · 0 评论 -
去除button的默认样式
//去掉边框线button::after {border: none;}//重新定义默认值,可以自己定义,也可以自己写一个特定的类覆盖掉默认样式button { background-color: #fff;border-radius:0; line-height:inherit;}原创 2020-06-26 11:51:41 · 1755 阅读 · 0 评论 -
div自适应文字宽度
width:fit-content;width:-webkit-fit-content;width:-moz-fit-content;原创 2020-04-19 11:49:27 · 200 阅读 · 0 评论 -
css用伪类改写 li 前面的圆圈默认样式
li{position: relative;list-style: none;}li:before{ content: ""; width: 6px; height: 6px; color: #373983; border-radius: 50%; display:block; background-color: #37398...原创 2020-03-19 18:40:22 · 754 阅读 · 0 评论 -
web常见的屏幕尺寸
设计图是1920X1080的.要在常见屏上显示正常(比例正确可) 1280X720 1366X768 1440X900 1920X1080原创 2020-03-10 11:45:35 · 3217 阅读 · 0 评论 -
CSS+DIV实现鼠标经过背景变色 [onmouseover; onmouseout]
css:.ani li{ position:relative; width:100px; height:100px; overflow: hidden; float: left; display: flex; justify-content: center; ...原创 2020-03-10 11:42:26 · 633 阅读 · 0 评论 -
html隐藏滚动条
::-webkit-scrollbar {display: none;}原创 2020-03-10 11:35:44 · 573 阅读 · 0 评论 -
css单行文本省略或多行文本省略
1.单行文本省略 overflow: hidden; text-overflow: ellipsis; white-space: nowrap;2.多行文本省略overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-li...原创 2020-03-10 11:31:42 · 364 阅读 · 0 评论 -
input的复选框修改默认样式 删除type=“number“ 末尾的箭头
input[type="checkbox"]{width:20px;height:20px;display: inline-block;text-align: center;vertical-align: middle; line-height: 18px;position: relative;}input[type="checkbox"]::before{content: "";po...原创 2020-03-04 12:02:03 · 668 阅读 · 0 评论 -
小程序switch开关按钮和单选radio按钮自定义样式
1.switch/*switch整体的大小以及背景色(选中时候的颜色 true)*/switch .wx-switch-input{}/*未选中时的颜色(false)*/switch .wx-switch-input::before{}/*中间的小圆球样式,可以设置border-radius变成小方块*/switch .wx-switch-input::after{}注:如果...原创 2019-10-21 00:11:22 · 1245 阅读 · 0 评论 -
用css实现水平居中和垂直居中
1.行内元素(inline性质)可以使用:text-align: center;2.单个块级元素:margin-left和margin-right为auto;( margin: 0 auto;)3.多个块级元素:设置不同的display属性,设置为inline-block, 一个是设置为flexbox(或margin: auto).inline-block-cent...原创 2019-08-21 11:51:21 · 95 阅读 · 0 评论 -
box-sizing:border-box
box-sizing:border-box; 但指定的width或height等于100%的时候,需要加边距的时候可以使用box-sizing: border-box;指定宽度和高度(最小/最大属性)确定元素边框。也就是说,对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。也就是:height=pa...原创 2019-08-16 11:10:46 · 255 阅读 · 0 评论 -
Flex布局01
备注:水平的主轴(main axis)和垂直的交叉轴(cross axis)1.设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。2.flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap;flex-flow: <flex-direction> <flex-...原创 2019-09-05 15:23:39 · 180 阅读 · 0 评论 -
Flex 布局02
1.order属性(父类定义的了flex,子类定义order属性)order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。如果数值相同,那么按原来html里面的排序方式排。也就是前面还在前面.item { order: <integer>;}2.flex-grow属性flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。...原创 2019-09-05 15:57:20 · 106 阅读 · 0 评论 -
box-shadow
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]box-shadow:h-shadow v-shadow blur spread colorinset;h-shadow 必需的。水平阴影的位置。允许负值 v-shadow 必需的。垂直阴影的位置。允许负值 blur 可选。模糊距离 spread...原创 2019-09-17 18:10:32 · 72 阅读 · 0 评论 -
css渐变
linear-gradient(线性),Radial Gradients(径向)原创 2019-09-17 18:17:06 · 130 阅读 · 0 评论 -
鼠标移入的时候表格纵向的正一列边框改变颜色
table使用了border-collapse:collapse;.ana table tr td{ border-bottom:1px #E9E9E9 solid;border-left: 1px #E9E9E9 solid;}而不是.ana table tr td{ border:1px #E9E9E9 solid; }添加样式.selected{ border: 1px #...原创 2019-09-18 10:26:20 · 297 阅读 · 0 评论 -
背景剪裁:background-clip,背景图像的位置:background-Origin,background-position,background-attachment
使用前提定义了background-image,background:yellow;也是有效的boder-box,默认值,背景绘制在边框方框内,也就是从边框往里面padding-box,背景绘制在衬距边框内,也就是从内边距往里面context-box,背景绘制在内容方框内注意:是背景图像,background:yellow;是无效的background-Origin属性指定了背...原创 2019-09-25 10:07:09 · 395 阅读 · 0 评论 -
用css实现绝对居中和怎么更简洁居中一个img,解决img留白
第一种: 伸缩盒子,要定义在父类 display: flex; justify-content: center; //水平居中 align-items: center;//垂直居中注意:不能加margin,否则无效,padding(是否能加?)第二种:不知道盒子长宽:(比较好)垂直水平居中:top、right、...原创 2019-08-15 23:47:20 · 1628 阅读 · 0 评论