前端HTML和CSS相关面试题

陌^O^

于 2023-06-18 08:16:00 发布

阅读量70

点赞数

文章标签：前端 html css

本文链接：https://blog.csdn.net/qq_56597325/article/details/131268064

版权

1.两个块元素如何实现子元素在父元素中水平居中

（1）通过绝对定位（宽高已知）

子元素开启绝对定位，父元素开启相对定位

同时通过margin-left =（父元素宽度-子元素宽度）/2

margin-top =（父元素高度-子元素高度）/2 调整子元素位置

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #father{
            background-color: aqua;
            width: 200px;
            height: 200px;
           position: relative;   
        }
        #son{
            background-color: aquamarine;
            width: 100px;
            height: 100px;
            position: absolute;
            margin-top: 50px;
            margin-left: 50px;
           
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="son">
            居中示例
        </div>
    </div>
</body>
</html>

（2）通过定位（宽高已知）

子元素设置margin:auto，实现水平居中

设置子元素绝对定位，父元素相对定位（top，bottom,right,left调整子元素位置）

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #father{
            background-color: aqua;
            width: 200px;
            height: 200px;
           /* position: relative;    */
        }
        #son{
            background-color: aquamarine;
            width: 100px;
            height: 100px;
            /* position: absolute; */
            margin-top: 50px;  
            margin-right: 50px;
             

           
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="son">
            居中示例
        </div>
    </div>
</body>
</html>

（3）通过弹性盒子进行调整

设置父元素display = flex;

设置主轴对齐方式justify-content:center

设置侧轴对齐方式align-items:center

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #father{
            background-color: aqua;
            width: 200px;
            height: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #son{
            background-color: aquamarine;
            width: 100px;
            height: 100px;    
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="son">
            居中示例
        </div>
    </div>
</body>
</html>

2.相对定位、绝对定位、固定定位、粘滞定位、分别有哪些特点？

相对定位：display:positioning

特点：相对自身原来位置定位，不脱离文档流

绝对定位：display:absolute

特点：脱离文档流，相对包含块定位

固定定位：display:fixed

特点：不脱离文档流，相对于浏览器的视口进行定位

粘滞定位：display:sticky

特点：不脱离文档流，相对于离它最近的一个拥有“滚动机制”的祖先元素

3.简述盒模型

盒模型分为为两种，标准盒模型和怪异盒模型两种

标准盒模型：box-sizing = content-box

width 和 height 设置的是盒子内容区的大小及content。

盒子的宽

width+padding（左右）+border（左右）+margin(左右)

盒子的高

height+padding（上下）+border（上下）+margin(上下)

怪异盒模型：box-sizing = border-box

width 和 height 设置的是盒子总大小及margin+border+padding+content

盒子内容区宽

wide-padding（左右）-border（左右）-margin(左右)

盒子内容区高

wide-padding（上下）-border（上下）-margin(上下)

4.px、em、rem、%

px ：像素。

em ：相对元素 font - size 的倍数。

rem ：相对根字体大小， html 标签就是根。

% ：相对父元素计算。

5. 说出你知道的HTML5新增特性

（1）新增语义化标签（2）h5新增表单控件

（3）音视频标签（4）画布

（5）web存储本地离线存储

6.举例行内元素和块元素

行内元素：span a b i em strong sub sup

块元素：div footer header nav aside p h1~h6

陌^O^

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
前端HTML和CSS相关面试题

margin-top =（父元素高度-子元素高度）/2 调整子元素位置。height+padding（上下）+border（上下）+margin(上下)设置子元素绝对定位，父元素相对定位（top，bottom,right,left调整子元素位置）width+padding（左右）+border（左右）+margin(左右)padding（左右）-border（左右）-margin(左右)padding（上下）-border（上下）-margin(上下)特点：不脱离文档流，相对于浏览器的视口进行定位。
复制链接

扫一扫