发布时间:2024-04-12 17:01
1、display:none; 和visibility:hidden;的区别是什么?
display:none; 彻底消失,释放空间。能引发页面的reflow回流(重排)。
visibility:hidden; 就是隐藏,但是位置没释放,好比opacity:0; 不引发页面回流。
2、CSS 优先级和权重值如何计算
内嵌样式>内部样式>外部样式>导入式
!important > 内嵌 1000 >Id 100 > class=[]=伪类 10 > tag=伪元素 1 > ( * + > ~) 0
3、如何触发BFC,以及BFC的作用
BFC:块级格式化上下文block formatting context,是一个独立渲染区域。规定了内部box如何布局,并且与这个区域外部毫不相干。
触发:float的值不是none;position的值不是static或者relative;display的值是inline-block、block、table-cell、flex、table-caption或者inline-flex;overflow的值不是visible。
作用:避免margin重叠;自适应两栏布局;清除浮动。
4、CSS盒模型
盒模型由:外边距margin、边框border、内边距padding、内容content四个部分组成
标准盒模型大小=border+padding+content
怪异盒模型大小=content
转怪异盒模型:box-sizing:border-box;
转标准盒模型:box-sizing:content-box;
5、如何水平垂直居中一个元素
5.1、弹性盒子
.box{ display: flex; justify-content: center; align-items: center; }
5.2、定位
.box{ position: relative; } .box .sub{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /*margin-left: 负的宽度的一半*/ /*margin-top: 负的高度的一半*/ }
6、css实现一个三角形
.triangle{ width: 0; height: 0; border: 100px solid transparent; border-left-color: red; }
7、如何实现左边固定宽,右边自适应布局
7.1、圣杯布局
<div id="container"> <div id="center" class="column"></div> <div id="left" class="column"></div> <div id="right" class="column"></div> </div> #container { padding-left: 200px; padding-right: 150px; } #container .column { float: left; } #center { width: 100%; } #left { width: 200px; margin-left: -100%; position: relative; right: 200px; } #right { width: 150px; margin-right: -150px; }
7.2、双飞翼布局
<div id="container" class="column"> <div id="center"></div> </div> <div id="left" class="column"></div> <div id="right" class="column"></div> #container { width: 100%; } .column { float: left; } #center { margin-left: 200px; margin-right: 150px; } #left { width: 200px; margin-left: -100%; } #right { width: 150px; margin-left: -150px; }
7.3、等高布局(假等高)互补的内外边距
.parent{ overflow: hidden; } .left, .right{ margin-bottom: -10000px; padding-bottom: 10000px; }
7.4、等高布局(真等高)弹性盒子
.parent{ display: flex; } .child{ flex: 1; }
7.5、calc
<div id="left" class="column"></div> <div id="center" class="column"></div> <div id="right" class="column"></div> .column{ float: left; } #left{ width: 100px; } #right{ width: 200px; } #center{ width: calc(100% - 100px - 200px); }
7.6、浮动
<div id="left" class="column"></div> <div id="right" class="column"></div> <div id="center"></div> #left{ float: left; width: 100px; } #right{ float: right; width: 200px; } #center{ margin-left: 100px; margin-right: 200px; }
8、如何实现6px字体
.font{ font-size: 12px; transform: scale(.5); }
9、移动端1px边框怎么设置
/* 方法1 */ .border{ width: 100%; height: 1px; background: red; } /* 方法2 */ .border{ border-image: url(border.png) } /* 方法3 */ .border{ box-shadow: 0 0 0 1px #000; }
10、px、em、rem、vh、vw分别是什么
px物理像素,绝对单位;em相对于自身字体大小,如果自身没有大小则相对于父级字体大小,如果父级也没有则一层一层向上查找,直到找到html为止,相对单位;rem相对于html的字体大小,相对单位;vh相对于屏幕高度的大小,相对单位;vw相对于屏幕宽度的大小,相对单位。
11、css可继承的属性有哪些
可继承的属性:文本类:text-indent、text-align、line-height、word-spacing、letter-spacing、text-transform、direction、color;
字体类:font、font-family、font-weight、font-size、font-style、font-variant、font-stretch、font-size-adjust;
其它类:visibility、caption-side、border-collapse、border-spacing、empty-cells、table-layout、list-style-type、list-style-image、list-style-position、list-style、quotes、cursor、page、page-break-inside、windows、orphans等
springsecurity + jwt + vue后端笔记
巧妙使用Vue.extend继承组件实现el-table双击可编辑(不使用v-if和v-else)
【一种利用插值验证的FL隐私保护框架】VFL: A Verifiable Federated Learning
山东大学软件学院项目实训-创新实训-山大软院网络攻防靶场实验平台(五)-docker容器的动态管理
Java笔记整理五(Iterator接口,泛型,常见数据结构(栈,队列,数组,链表,红黑树,集合),jdk新特性,异常,多线程,Lambda表达式)
【极市任务——安全帽检测|yolov5】一文带你快速通过任务|使用yolov5[6.0]|和极市说明文档不一样的yolov5内容|python