css
Triumph-light
在校大学生 学习前端
展开
-
【css】实现禁止点击并置灰效果
【代码】【css】实现禁止点击并置灰效果。原创 2024-03-02 11:06:27 · 310 阅读 · 0 评论 -
【CSS】display:flex和display: inline-flex区别
此处虽然木有给父元素设置宽度,但是父元素默认会根据子元素的宽高去自适应。inline-flex:将对象作为内联块级弹性伸缩盒显示。此时没有为父元素main设置宽度,默认为100%;flex:将对象作为弹性伸缩盒显示。导致这个效果的根本原理还是。原创 2024-02-19 21:35:34 · 484 阅读 · 0 评论 -
【css】深入理解flex属性
flex-grow生效公式如下:可用空间 = 父元素width - 子元素flex-basis总和单位扩展空间 = 可用空间/子元素flex-grow总和元素的实际大小 = flex-basis + flex-grow*单位扩展空间flex-shrink生效公式如下:理想空间 = 所有子元素的(flex-basisflex-shrink)之和溢出空间 = 父元素容器的宽度 - 所有子元素的(flex-basis)之和。原创 2023-09-10 10:51:05 · 286 阅读 · 0 评论 -
【css】margin:auot什么情况下失效
上面说了在正常的文档流当中w3c默认规定margin-top和margin-right为0,所以实现不了垂直居中,只有绝对定位的元素才可以,意思就是绝对定位之后如果设置了margin:auto,那么margin-top和margin-right不再为0,而是auto,同时需要设置top,bottom,left,right为0来找到父元素的位置,然后margin:auto会找到父元素的位置开始自动计算,并分配好上下左右外边距,从而实现水平垂直居中!原创 2023-09-09 17:51:08 · 592 阅读 · 0 评论 -
【css】z-index与层叠上下文
z-index属性用来设置元素的堆叠顺序,使用z-index有一个大的前提:z-index所作用元素的样式列表中必须有position属性并且属性值为absolute、relative或fixed中的一个,否则z-index无效。原创 2023-09-01 11:59:55 · 475 阅读 · 0 评论 -
【CSS】em单位的理解
它是相对于父元素的字体大小的一个单位。例如:父元素font-size:16px;子元素的font-size:2em(也就是32px)注:有一个误区,虽然他是一个相对单位,并且官方对它的解释是相对于父元素字体大小的一个单位,但是它是放在了文字属性里面,也就说只有子元素的font-size是起作用的,子元素的其他的属性是不相对于父元素的,而是相对于本身的font-size大小。原创 2023-08-27 17:03:33 · 525 阅读 · 0 评论