【CSS】笔试题精讲

原创

szlsay 2022-09-17 08:23:19 ©著作权

文章标签 css 块级元素块元素取值 文章分类 虚拟化云计算

©著作权归作者所有：来自51CTO博客作者szlsay的原创作品，请联系作者获取转载授权，否则将追究法律责任

1、防止高度坍塌

问题描述：父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷（造成父元素高度为 0）
问题解决

1.1 给父元素添加声明overflow：hidden

优点：代码少、简单
缺点: 不能和position定位配合使用，超出的尺寸会被隐藏

其实display:table也行
因为BFC

1.2 在浮动元素下方添加空div，并给元素声明 clear：both

保险起见，再加height:0。清除个别块元素可能自带的height:16px;
缺点：需要添加多余的空标签并添加属性

1.3 万能方式:

box::after{
    content: "";
    display: block;
    clear: both;
    height: 0; /*为了清楚个别块元素自带的16px高度*/
}

1.4 父元素添加浮动

缺点: 可能产生新的浮动问题

因为BFC
其实，父元素定义display:table也行

2、BFC

2.1 BFC定义

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有块级元素参与，它规定了内部的块级元素如何布局，并且与这个区域外部毫不相干。外部元素也不会影响这个渲染区域内的元素。
简单说：BFC就是页面上的一个隔离的独立渲染区域，区域里面的子元素不会影响到外面的元素。外面的元素也不会影响到区域里面的子元素。
Box，盒子，是 CSS 布局的对象和基本单位，直观点说，就是一个页面是由很多个盒子区域组成。元素的类型和 display 属性，决定了这个盒子区域的类型。

不同类型的盒子区域内的子元素，会以不同的 Formatting Context（一个决定如何渲染文档的容器）方式渲染。
块级元素盒子，display 属性为 block, list-item, table 的元素，会生成块级元素渲染区域。并且以BFC( block fomatting context)方式渲染；
行级元素盒子，display 属性为 inline, inline-table 的元素，会生成行级元素渲染区域。并且以IFC( inline formatting context)方式渲染；
所以，CSS中最常见的渲染方式有两大类：BFC和IFC

2.2 BFC的布局规则

默认，内部的块元素会在垂直方向，一个接一个地放置。每个块元素独占一行
块元素垂直方向的总距离由margin决定。属于同一个BFC的两个相邻块元素在垂直方向上的margin会发生重叠/合并。但水平方向的margin不会
左侧BFC渲染区域的margin，必须与右侧BFC渲染区域的margin相衔接，不能出现重叠
BFC渲染区域不会与float浮动定义的元素区域重叠。
BFC就是页面上的一个隔离的独立渲染区域，渲染区域里面的子元素不会影响到外面的元素。反之外面的元素也不会影响到渲染区域里边的子元素。
计算父元素BFC渲染区域的高度时，内部浮动元素的高度，都必须算在内。

2.3 如何创建BFC

float的值不是none
position的值不是static或者relative。
display的值是inline-block、table-cell、flex、table-caption或者inline-flex
overflow的值不是visible

2.4 可以解决哪些问题?

避免垂直方向margin合并
问题: 垂直方向上，两个元素上下margin相遇，两元素的间的距离并不等于两个margin的和。而是等于最大的margin。小的margin会被大的margin吞并。
解决:

用一个外围块元素包裹下方元素
设置新外层元素overflow:hidden
变成一个BFC方式的渲染区域

结果：下方元素的margin-top受到新外层元素BFC渲染区域的阻隔，不会影响外部上方的元素的margin-bottom了。同理，外部上方元素的margin-bottom，因为在BFC渲染区域之外，所以，也无法影响其内部元素的margin-top了。

避免垂直方向margin溢出
问题：子元素设置margin-top，会超出父元素上边的范围，变成父元素的margin-top。而实际上，子元素与父元素之间，依然是没有margin-top的——效果不是想要的。
解决:

设置新外层元素overflow:hidden
变成一个BFC方式的渲染区域
结果：子元素的margin-top受到外层父元素BFC渲染区域的阻隔，不会影响父元素以外的区域了。子元素的margin-top，才真正成为子元素与父元素上边的间距

其实还可以

为父元素添加上边框，颜色设置为透明
用父元素的padding-top代替第一个子元素的margin-top
在父元素内第一个子元素之前添加一个空的

用平级BFC渲染区域阻隔下方元素的margin-top

父元素::before{ content:“”; display:table; }

用平级BFC渲染区域阻隔下方元素的margin-top
自适应两栏布局

左固定，右自适应

.left{ float:left; width:固定宽 }
.right{overflow:hidden; …}

变成BFC渲染区域，就不会与float:left的左侧元素发生重叠了
防止高度坍塌

3、弹性布局

网页内容要可以随显示设备的大小而动态调整布局
float属性，的确可以实现根据显示设备大小，自动换行显示。但是，浮动定位float提供的可控制的属性太少了，以至于难于随心所欲的控制布局。

比如：多个元素浮动在一行中时，无法保证屏幕变小时，一行中的每个元素都自动等比例缩小。而是每个元素依然保持固定的宽度。就会导致，原本处在一行的元素，被挤压换行。

弹性布局就很好的解决了多种设备下自适应和灵活定制布局的目的

弹性布局主要定义父元素中子元素的布局方式，让布局能适用多种情况提供最大灵活性

概念：

容器

父元素

项目

多个子元素

主轴

子元素排列方向上的轴

默认从左向右

交叉轴

与主轴方向垂直的轴

默认从上到下

父元素上设置的属性

display:flex

父元素变成弹性布局渲染区域

flex-direction

指定容器主轴的排列方向

默认从左向右

row-reverse

从右向左

column

从上到下

column-reverse

从下到上

flex-wrap

当主轴排列不下所有元素时，是否自动换行

默认nowrap

父元素空间不够，也不换行！所有子元素项目自动等比缩小。

wrap

当内容放不下时，自动换行，不缩小

flex-flow

flex-direction + flow-wrap的简写形式
语法: flex-flow: flex-direction flex-wrap

justify-content

定义项目在主轴上的对齐方式
取值

flex-start

以主轴起点对齐

默认左对齐，从左向右排列

flex-end

以主轴终点对齐

默认右对齐，从右向左排列

center

在主轴上居中对齐

space-between，表示两端对齐

第一个元素紧贴最左边，最后元素紧贴最右边。中间多个元素在剩余空间中等间距排列

space-around，表示每个项目两端间距相同

所有元素均分空白间距，包括第一个元素左边间距和最后一个元素右边间距，均是等距离分布

align-items

定义所有子元素在交叉轴上的对齐方式
取值

flex-start，表示让项目以交叉轴的起点方向对齐

默认置顶对齐

flex-end，表示让项目以交叉轴的终点方向对齐

默认置底对齐

center，表示让项目以交叉轴的中线居中对齐

垂直方向居中对齐

baseline，表示让项目以交叉轴的基线对齐

以内容文字的基线对齐

stretch，表示如果项目未设置尺寸，就让项目在交叉轴上占满所有空间

所有子元素项，垂直方向拉伸，默认沾满高度

每个子元素项目可单独设置的属性

order

专门定义项目在主轴上的排列顺序
其值为整数数字，无需单位。
值越小，越靠近起点；值越大，越靠近结尾，默认值都是0。

flex-grow

专门定义项目的放大比例
如果容器有足够的空间，项目可以放大
其值为整数数字，无需单位。
默认情况，项目不放大。

默认值都是0

取值越大，占据剩余的空间越多。
取值都一样，则占据空间始终一样大

flex-shrink

专门定义项目的缩小比例
如果容器空间不足时，项目可以缩小。
缩小的比例取决于flex-shrink的值。
其默认值为1，表示空间不足时，则等比缩小。
可改为0，表示不缩小。

align-self

专门单独定义某一个项目在交叉轴上的对齐方式
与align-items属性对比

align-items定义在父容器上约束所有项目的统一对齐方式
align-self定义在项目上，只约束当前所在的一个项目。

其取值和align-items完全一样。只是多了一个auto值，表示继承父元素的align-items效果。

4、水平居中和垂直居中的总结

水平居中

前提

父元素必须是块级盒子容器

不可自由嵌套的元素就是里面只能放内联元素的，它们包括有：标题标记的

、

、；段落标记的

；分隔线

和一个特别的元素 (它只存在于列表元素的子一级)。

父元素宽度必须已经被设定好

场景1: 子元素是块级元素且宽度没有设定

不存在水平居中一说，因为子元素是块级元素没有设定宽度，那么它会充满整个父级元素的宽度，即在水平位置上宽度和父元素一致

场景2：子元素是行内元素，子元素宽度是由其内容撑开的

这种情况下解决方案是给父元素设定text-align:center;

场景3：子元素是块级元素且宽度已经设定

给子元素添加margin:0 auto;
通过计算指定父元素的padding-left或padding-right

给父元素和子元素都设定了box-sizing:border-box
(父宽-子宽)/2

计算得到子元素的margin-left或margin-right

给父元素和子元素都设定了box-sizing:border-box
(父宽-子宽)/2

通过子元素相对父元素绝对定位

父相子绝

子：left:50%; margin-left: -子宽一半
子: left:50%; transform:translateX(-50%)

弹性布局

display:flex;
flex-direction: row;
justify-content:center;

垂直居中

前提:

父元素是盒子容器

场景1：子元素是行内元素，高度是由其内容撑开的

单行

设定父元素的line-height为其高度来使得子元素垂直居中

多行

通过给父元素设定display:inline/inline-block/table-cell;vertical-align:middle来解决

场景2：子元素是块级元素但是子元素高度没有设定

解法1：通过给父元素设定display:inline/inline-block/table-cell; vertical-align:middle来解决
解法2：flexbox

父元素

display: flex;
flex-direction: column;
justify-content: center;

场景3：子元素是块级元素且高度已经设定

解法1：计算子元素的margin-top或margin-bottom

给父元素和子元素都设定了box-sizing:border-box
(父高-子高)/2

解法2：计算父元素的padding-top或padding-bottom

给父元素和子元素都设定了box-sizing:border-box
(父高-子高)/2

解法3：利用绝对定位，让子元素相对于父元素绝对定位

父相子绝

子元素宽已知

子：top:50%; margin-top: -子高一半

子元素宽未知

子: top:50%; transform:translateY(-50%)

解法4：利用flexbox

父元素

display: flex;
flex-direction: column;
justify-content: center;

总结：垂直和水平方向同时居中

父相子绝

已知子元素宽高

top:50%; left:50%; margin-left:-子宽一半; margin-top:-子高一半

未知子元素宽高

top:50%; left:50%; transform:translate(-50%, -50%)

弹性布局

.son{
display: flex;
justify-content: center;
align-items: center;
}

5、简述 rpx、px、em、rem、%、vh、vw的区别

设备物理像素

屏幕宽/分辨率，其中每一小份就是1pt

css像素

pc机大屏幕显示器，1px约等于0.76个物理像素
手机小屏幕

以iPhone6为标准，物理像素750，分辨率375
1px=2pt

所以，px也是一个相对单位
px是为了平衡一个元素在PC上显示的大小与在手机上显示的大小尽量一致而制定的。
但是，因为手机屏幕大小不一，差异较大，所以，反而不希望一个元素在所有手机上显示一样大。而是希望能够自动等比缩放。所以，移动端不要用px
通常PC端大屏浏览器的网页，使用px单位较多
移动端少用，因为px的长度相对固定，无法根据大小不一的移动端设备自适应改变大小

以网页根元素元素上设置的默认字体大小为1rem

默认1rem=16px

用的多
好处

可以实现响应式布局了！
响应式布局指的是元素大小能根据屏幕大小随时变化。
因为所有以rem为单位的位置、大小都跟着根元素字体大小而变化。
所以只要在屏幕大小变化的时候改变根元素font-size就行了。

用的不多

小程序专用

以iPhone6为标准，物理像素750，分辨率375
无论屏幕大小，都将屏幕分成750份，每份就是1rpx。
1rpx=0.5px=1pt
优点

通过 rpx 设置元素和字体的大小，小程序在不同尺寸的屏幕下，可以实现自动适配

vw/vh

CSS3 特性 vh 和 vw：
vh ，无论视口高度多少，都将视口高均分为100份，每1小份就是1vh，所以，也是相对单位，可随视口大小变化而自动变化。
vw ，无论视口宽度多少，都将视口宽均分为100份，每1小份就是1vw，所以，也是相对单位，可随视口大小变化而自动变化。
所以vw和vh，本质就是%
这里是视口指的是浏览器内部的可视区域大小

通常认为子元素的百分比完全相对于直接父元素，但是，不总是相对于父元素的对应属性值
子元素的 top 和 bottom 如果设置百分比，则相对于直接非 static 定位(默认定位)的父元素的高度
子元素的 left 和 right 如果设置百分比，则相对于直接非 static 定位(默认定位的)父元素的宽度
但是，绝对定位时，就不一定参照父元素的宽和高了。而是参照最近的定位元素的包含padding的宽和高
因为%不总是相对于父元素的宽高或屏幕大小，所以，有坑，开发少用。

6、响应式布局的方式，几种，媒体查询原理

<meta name=”viewport”content=”width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0”>中每个属性的含义

viewport

视口

显示设备内部，真正实际可用于显示网页的区域大小

width

视口宽

device-width

等于物理设备宽

user-scalable

是否允许用户手工缩放网页

initial-scale=1.0

加载页面时，页面的缩放比例是1，表示不缩放，原网页大小展示

maximum-scale=1.0,minimum-scale=1.0

允许用户缩放网页的最大缩放比例和最小缩放比例
都是1，表示不允许用户使用过程中，中途缩放网页

5种响应式布局方式

flex布局

优点: 代码简单，布局方便
缺点

如果中间有内容，缩到最小就不会在小了
且左右侧的宽度变小了

父相子绝

优点

结合使用media可以实现响应式布局

缺点

代码写法复杂，布局较繁琐
如果不使用media平分屏幕，宽度小于600的情况下，右侧会覆盖左侧

grid布局

Flex布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局，
Grid 布局则是将容器划分成“行"和“列”，产生单元格，然后指定"项目所在”的单元格，可以看作是二维布局
Grid布局远比 Flex布局强大。(不过存在兼容性问题)
知识点比较多, 学习成本相对较高, 目前兼容性不如flex布局!
如何

容器属性

grid-template-columns
grid-template-rows

规定共有几行，几列，每行，每列宽多少？
grid-template-columns:100px 100px 100px; // 显示为三列每一列宽度100px
grid-template-columns:repeat(3,100px); //同上
也可以固定格大小，然后优先占满整个宽度

grid-template-columns: repeat(auto-fill,100px);
.auto-fill，有时，单元格的大小是固定的，但是容器的大小不确定，这个属性就会自动填充

也可以按份数规定列宽

fr，比例关系，fraction ，意为"片段”，表示某一行或列在总宽度和总高度中占的份数
grid-template-columns:repeat(4,1fr); // 宽度平均分成四等份
grid-template-columns:1fr 2fr 3fr; // 列宽这样是分成6份各占 1 2 3 份效果如下图

还可以设置最小和最大的大小范围:

grid-template-columns: 1fr minmax(150px，1fr); // 第一个参数最小值,第二个最大值,表示第二列最小150px，最大1fr。

还可以请浏览器自己决定长度

auto，表示由浏览器自己决定长度
grid-template-columns: 100px auto 100px;

还可以定义网格线

网格线．可以用方括号定义网格线名称，方便以后给盒子定位使用
grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4];

column-gap和row-gap

定义格与格之间的间距
如果column-gap和row-gap间距一致，可简写为: gap:xxx

grid-auto-flow

划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列".即先填满第一行，再开始放入第二行(就是子元素的排放顺序)
grid-auto-flow： row

先行后列

grid-auto-flow： column

先列后行

justify-items(水平方向)/ align-items(垂直方向)

设置单元格内容的水平和垂直的对齐方式
值为:

start | end | center | stretch

同时设置两个属性: 简写

place-items : start end；这是两个属性的简写

justify-content (水平方向)/ align-content(垂直方向)

设置整个内容区域（所有的项目的总和）的水平和垂直的对齐方式
取值: start | end | center | stretch | space-around | space-between | space-evenly;

项目属性

grid-column-start / grid-column-end grid-row-start / grid-row-end

一句话解释，用来指定item的具体位置，根据在哪根网格线
grid-column-start:1;
grid-column-end:3;

表示从第一个网格线，跨到第三个网格线之前，也就是横跨1、2两列
grid-column: span 2;
grid-column-end:3;
简写: grid-column: 1 / 3;

grid-column-start:1;
grid-column-end:3;
grid-row-start:1;
grid-row-end:3;

跨两行，跨两列的方形区域
简写: grid-area: 1 / 1 / 3 / 3

justify-self / align-self

当前单元格内容的水平和垂直对齐方向
place-self

同时设置一个单元格内容的水平和垂直方向对齐方式

https://www.jianshu.com/p/3762f214cd6f

float布局

容易被挤压换行

使用rem作单位，等比缩放

首先，给根元素html设置一个字体大小
然后，其他尺寸单位全部用 rem
然后，监听屏幕的大小
然后，根据屏幕的大小按比例改变根节点字体的大小
因为 rem 的特性，其他的尺寸都是根据根节点字体的大小设定的，所以，根节点字体大小一变，其他所有尺寸都会按比例变大、或小。
大部分浏览器的字体有个最小值：12px。也就是缩小到 12px 后，字体不会继续缩小。

媒体查询

通过媒体查询来设置样式(Media Queries)是响应式设计的核心。
它根据条件告诉浏览器如何为指定视图宽度渲染页面
媒体类型

print（打印机）
screen（所有屏幕设备的统称：各种电脑屏幕、各种手机屏幕、各种平板屏幕，主要使用的就是这个）
all（所有媒体设备，默认值）
speech（应用于屏幕阅读器等发声设备）

style

在 style 标签中通过 media属性可以设置样式使用的媒体设备。

  - 在 css文件/less文件 里也可以使用

多设备支持（，分隔）

可以用逗号分隔同时支持多个媒体设备。
@import url(screen.css) screen,print;
@media screen,print {…}

设备方向（orientation 属性）

使用 orientation 属性可以定义设备的方向
orientation: landscape

横屏，宽度>高度

orientation: portrait

竖屏，高度>宽度

查询条件

可以使用不同条件限制使用的样式，条件表达式需要放在扩号中
比如

横屏显示
宽度不能超过600px

@media screen and (orientation: landscape) and (max-width: 600px) {
body {
background: #8e44ad;
}
h1 {
font-size: 3em;
color: white;
}
}

横屏显示或宽度不超过600px

@media screen and (orientation: landscape),
screen and (max-width: 600px) {
body {
background: #8e44ad;
}
h1 {
font-size: 3em;
color: white;
}
}

既不是横屏，宽度又不小于600时，才使用

@media not screen and (orientation: landscape) and (max-width:600px) {
body {
background: #8e44ad;
}
h1 {
font-size: 3em;
color: white;
}
}
not必须写在开头，表示后续条件都不满足，才能应用

引入顺序

@import url(big.css) only screen and (min-width:1200px);
@import url(medium.css) only screen and (min-width:900px);

永远后一个
因为后一个范围包含前一个范围，而且后一个样式会覆盖前一个的样式

设备的划分情况：

小于768的为超小屏幕（手机）
768~992之间的为小屏设备（平板）
992~1200的中等屏幕（桌面显示器）
大于1200的宽屏设备（大桌面显示器）

父容器版心的尺寸划分

超小屏幕（手机，小于 768px）：设置宽度为 100%
小屏幕（平板，大于等于 768px）：设置宽度为 750px
中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px
大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px

响应式字体

rem是相对于根元素的，不要忘记重置根元素字体大小：
html{font-size:100%;}
完成后，你可以定义响应式字体：
@media (min-width:640px){body{font-size:1rem;}}
@media (min-width:960px){body{font-size:1.2rem;}}
@media (min-width:1200px){body{font-size:1.5rem;}}
一个响应式的字体应关联它的父容器的宽度，这样才能适应客户端屏幕。

7、sass的常用功能

变量

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
font: 100% $font-stack;
color: $primary-color;
}

嵌套

nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}

li { display: inline-block; }

a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}

引用父级选择器"&"

a {
font-weight: bold;
text-decoration: none;
&:hover { text-decoration: underline; }
body.firefox & { font-weight: normal; }
}
无论CSS规则嵌套的深度怎样，关键字"&"都会使用父级选择器级联替换全部其出现的位置：

/===== SCSS =====/
#main {
color: black;
a {
font-weight: bold;
&:hover { color: red; }
}
}

/===== CSS =====/
#main {
color: black; }
#main a {
font-weight: bold; }
#main a:hover {
color: red;
}

  - "&"必须出现在复合选择器开头的位置，后面再连接自定义的后缀

    - /*===== SCSS =====*/

#main {
color: black;
&-sidebar { border: 1px solid; }
}

/===== CSS =====/
#main {
color: black; }
#main-sidebar {
border: 1px solid;
}

- 嵌套属性

  - /*===== SCSS =====*/

.demo {
// 命令空间后带有冒号:
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}

/===== CSS =====/
.demo {
font-family: fantasy;
font-size: 30em;
font-weight: bold; }

引入

// _reset.scss
html, body, ul, ol {
margin: 0;
padding: 0;
}

// base.scss
@import ‘reset’;
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}

混合

混合（Mixin）用来分组那些需要在页面中复用的CSS声明，开发人员可以通过向Mixin传递变量参数来让代码更加灵活，
该特性在添加浏览器兼容性前缀的时候非常有用，
SASS目前使用@mixin name指令来进行混合操作。
@mixin border-radius($radius) {
border-radius: $radius;
-ms-border-radius: $radius;
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
}

.box {
@include border-radius(10px);
}

继承

// 这段代码不会被输出到最终生成的CSS文件，因为它没有被任何代码所继承。
%other-styles {
display: flex;
flex-wrap: wrap;
}

// 下面代码会正常输出到生成的CSS文件，因为它被其接下来的代码所继承。
%message-common {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}

.message {
@extend %message-common;
}

.success {
@extend %message-common;
border-color: green;
}

.error {
@extend %message-common;
border-color: red;
}

.warning {
@extend %message-common;
border-color: yellow;
}

算术运算符

.container { width: 100%; }

article[role=“main”] {
float: left;
width: 600px / 960px * 100%;
}

aside[role=“complementary”] {
float: right;
width: 300px / 960px * 100%;
}

8、利用css构建三角形（正三角，倒三角，左/右三角）

上三角

#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}

下三角

#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}

左三角

#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}

右三角

#triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}

左上三角

#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}

右上三角

#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
}

左下三角

#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}

右下三角

#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}

9、缩放

如何实现<12px的字

display:inline-block; /scale只能缩放行内块或块元素/
-webkit-transform: scale(0.5); /定义2D缩放/
-webkit-transform-origin:left top; /定义缩放源点为左上角/

0.5px的线如何实现

问题:

.hr.half-px {
height: 0.5px;
}

不同设备，不同浏览器差异较大

解决:

.hr.scale-half {
height: 1px;
transform: scaleY(0.5);
transform-origin: 50% 100%; /为了防止线模糊/
}

更好的解决: svg

.hr.svg {
background: none;
height: 1px;
background: url(“data:image/svg+xml;utf-8, ”);
}
其中: svg图片是

- 使用svg的line元素画线，stroke表示描边颜色，默认描边宽度stroke-width=“1”，由于svg的描边等属性的1px是物理像素的1px，相当于高清屏的0.5px，另外还可以使用svg的rect等元素进行绘制。

  - 但是在firefox挂了
  - 解决: 把svg转为base64

    - .hr.svg {

background: url(“data:image/svg+xml;utf-8, ”);
background: url(“data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzFweCc+PGxpbmUgeDE9JzAnIHkxPScwJyB4Mj0nMTAwJScgeTI9JzAnIHN0cm9rZT0nIzAwMCc+PC9saW5lPjwvc3ZnPg==”);
}

  - 优点，可以利用svg画出各种图形的0.5px线条

上一篇：【CSS】头部尾部固定中间滚动

下一篇：【Vue3】图标处理方案SvgIcon

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯