css面试汇总题

原创已于 2023-01-11 11:33:56 修改 · 124 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

于 2023-01-11 11:21:51 首次发布

文章探讨了在移动端实现1px边框的技巧，包括使用zoom和box-shadow。同时，解释了px、em、rem、vh和vw等长度单位的含义和用法。此外，还介绍了利用浮动和Flexbox实现等高布局的方法。

边框0.5px（ zoom: 0.5;）
画一个三角形
.triangle{
width: 0;
height: 0;
border: 100px solid transparent;
border-left-color: red;
}

移动端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;
}
在这里插入图片描述

px、em、rem、vh、vw分别是什么
px物理像素，绝对单位；em相对于自身字体大小，如果自身没有大小则相对于父级字体大小，如果父级也没有则一层一层向上查找，直到找到html为止，相对单位；rem相对于html的字体大小，相对单位；vh相对于屏幕高度的大小，相对单位；vw相对于屏幕宽度的大小，相对单位。
如何实现6px字体
.font{
font-size: 12px;
transform: scale(.5);
}
浮动 float的考题

.column{ float: left; } #left{ width: 100px; } #right{ width: 200px; } #center{ width: calc(100% - 100px - 200px); }

等高布局（真等高）弹性盒子
.parent{
display: flex;
}
.child{
flex: 1;
}
等高布局（假等高）互补的内外边距跟据内容自动撑开
如何水平垂直居中一个元素

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: 负的高度的一半/
}

如何实现左边固定宽，右边自适应布局

#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、双飞翼布局

#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;
}