欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

2020前端面试题--css

程序员文章站 2022-06-09 11:18:02
...
漫漫前端路~~~，话不多说上题

目录

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

3.display有哪些值  

4.position的值？ 

5.css优化有哪些？

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

<html>
<body>
<div>
    <div class="parent">
        <div class="son"></div>
    </div>
</div>
</body>
</html>

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.同学请介绍一下'盒子模型'呗

2020前端面试题--css

说明：

  • 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 属性的值。

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
}

 

相关标签： WEB前端 css 面试

上一篇： Quartz定时器使用示例

下一篇： spring boot 定时器 Scheduled 不执行

推荐阅读