2020前端面试题--css

最新推荐文章于 2024-05-16 15:24:52 发布

小胖仔yo

最新推荐文章于 2024-05-16 15:24:52 发布

阅读量890

点赞数

分类专栏：随笔文章标签： css 面试

本文链接：https://blog.csdn.net/qq_42204414/article/details/107914581

版权

随笔专栏收录该内容

19 篇文章 0 订阅

订阅专栏

漫漫前端路~~~，话不多说上题

6.怎么让Chrome支持10px 的文字？

1.绝对定位+top+right+margin-left+margin-top


.parent {
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        position: relative;
}
.son {
        width: 100px;
        height: 100px;
        border: 1px solid #000;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -50px;
        margin-top: -50px;

}

2.flex布局

.parent {
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        display: flex;
        justify-content: center;
        align-items: center;
}
.son {
        width: 100px;
        height: 100px;
        border: 1px solid #000;
}

3.绝对定位+transform

.parent {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    position: relative;
}
.son {
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

4.绝对定位+margin:auto

.parent {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    position: relative;
}
.son {
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

2.同学请介绍一下'盒子模型'呗

说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

标准盒模型：设置的宽度就等于内容的宽度 (content-box)

怪异盒模型：内容的宽度 = 设置的宽度 - border的宽度 - padding的宽度 (border-box)

设置：

box-sizing:border-box/content-box;

3.display有哪些值

值描述
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row 此元素会作为一个表格行显示（类似 <tr>）。
table-column-group 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column 此元素会作为一个单元格列显示（类似 <col>）
table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption 此元素会作为一个表格标题显示（类似 <caption>）
inherit 规定应该从父元素继承 display 属性的值。

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
compact	CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker	CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table	此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table	此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group	此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group	此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group	此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row	此元素会作为一个表格行显示（类似 <tr>）。
table-column-group	此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column	此元素会作为一个单元格列显示（类似 <col>）
table-cell	此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption	此元素会作为一个表格标题显示（类似 <caption>）
inherit	规定应该从父元素继承 display 属性的值。

4.position的值？

static（默认）：按照正常文档流进行排列；
relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；
absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；
fixed(固定定位)：所固定的参照对像是可视窗口。

5.css优化有哪些？

css压缩：将写好的css进行打包压缩，可以减少很多的体积；
减少使用 @import, 而建议使用link, 因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载；
尽量少的去对标签进行选择，而是用class
......

6.怎么让Chrome支持10px 的文字？

p {
    font-size: 20px;
    -webkit-transform: scale(.5); // 缩放50%就等于10px
}

小胖仔yo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020前端面试题--css

漫漫前端路~~~，话不多说上题1.元素水平垂直居中<html><body><div> <div class="parent"> <div class="son"></div> </div></div></body></html>1.绝对定位+top+right+margin-left+margin-top.parent { ...
复制链接

扫一扫

专栏目录