HHML与CSS面试题

最新推荐文章于 2024-07-26 08:00:00 发布

MaJiFu..

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量401

点赞数 1

分类专栏： css html 文章标签： css html

本文链接：https://blog.csdn.net/weixin_45631453/article/details/119243769

版权

css 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

文章目录

题目概览（知识点汇总）

一、HTML面试题

1、如何理解 HTML 语义化？

2、默认情况下，哪些 HTML 标签是块级元素，那些是内联元素

E、float 布局的问题，以及 clearfix

F、flex 画骰子

2、定位

A、absolute 和 relative分别依据什么定位

题目概览（知识点汇总）

HTML
1、如何理解 HTML 语义化？
2、默认情况下，哪些 HTML 标签是块级元素，那些是内联元素

CSS
知识模块：
a、布局
b、定位
c、图文样式
d、响应式
e、CSS3 （flex、动画）
1、布局
a、盒子模型的宽度如何计算？
b、margin 纵向重叠的问题
c、margin 负值的问题
d、BFC 理解和应用
e、float 布局的问题，以及 clearfix
f、flex 画骰子
2、定位
a、absolute 和 relative分别依据什么定位
b、居中对齐有哪些实现方式
3、图文样式
a、line-height 的继承问题
4、响应式
a、rem 是什么？
b、如何实现响应式？
5、CSS3
a、关于 CSS3 动画

一、HTML面试题

（一般考的很少）

1、如何理解 HTML 语义化？

a、是为了让人更容易读懂（增加代码可读性）

b、是为了搜索引擎更容易读懂（SEO）

2、默认情况下，哪些 HTML 标签是块级元素，那些是内联元素

a、块状元素也就是 disply 为 block/table 的元素，有div，h1，h2，table，ul，ol，p 等

b、内联元素也就是 disply 为 inline/inline-block 的元素，有 span，img，input，button 等

二、CSS面试题

1、布局

A、盒子模型的宽度如何计算？

如下代码，请问 div1 的 offsetWidth 是多大？
<style>
    #div1 {
        width:100px;
        padding: 10px;
        border: 1px solid black;
        margin: 10px;
        /* box-sizing: border-box; */
    }
</style>
<body>
    <div id="div1"></div>
</body>

offsetWidth = (内容宽度 + 内边距 + 边框)，无外边距，因此，答案是122px

补充：如果让 offserWidth 等于 100px ，该如何做？

添加 box-sizing: border-box 意思就是到边框的宽度会等于 width 的宽度

console.log(document.getElementById("div1").offsetWidth)

B、margin 纵向重叠的问题

如下代码，AAA 和 BBB 之间的距离是多少？

<style>
    p {
        font-size: 16px;
        line-height: 1;
        margin-top: 10px;
        margin-bottom: 15px;
    }
</style>
<body>
    <p>AAA</p>
    <p></p>
    <p></p>
    <p></p>
    <p>BBB</p>
</body>

相邻元素的 margin-top 和 margin-bottom 会发生重叠

空白内容的 <p></p> 也会重叠

答案 15px

C、margin 负值的问题

<style>
    body {
        margin :20px;
    }
    .fload-left {
        float: left;
    }
    .clearfix:after { /* 清除浮动 */
        content: "";
        display: table;
        clear: both;
    }
    .container {
        border: 1px solid #ccc;
        padding: 10px;
    }
    .container .item {
        width: 100px;
        height: 100px;
    }
    .container .border-blue {
        border: 1px solid blue;
        margin-top: -10px;
        margin-left: -10px;
        margin-bottom: -10px;
        margin-right: -10px;
    }
    .container .border-red {
        border: 1px solid red
    }
</style>
<body>
    <p>用于测试 margin top bottom 的负数情况</p>
    <div class="container">
        <div class="item border-blue">
            this is item 1
        </div>
        <div class="item border-red">
            this is item 2
        </div>
    </div>
    <p>用于测试 margin left right 的负数情况</p>
    <div class="container clearfix">
        <div class="item border-blue fload-left">
            this is item 3
        </div>
        <div class="item border-red fload-left">
            this is item 4
        </div>
    </div>
</body>

margin-top 和 margin-left 负值，元素向上、向左移动

margin-right 负值，右侧元素左移，自身元素不受影响

margin-bottom 负值，下方元素上移，自身不受影响

D、BFC 理解和应用

<style>
    .container {
        background-color: #f1f1f1;
    }
    .left {
        float: left;
    }
    .bfc {
        overflow: hidden; /* 触发元素 BFC */
    }
    img {
        width: 40px;
        height: 40px;
    }
</style>
<body>
    <div class="container bfc">
        <img src="xxx.jpg" class="left">
        <p class="bfc">某一段文字。。。</p>
    </div>
</body>

Block format context，块级格式化上下文：一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素，

也就是说不会脱离文档流

形成 BFC 的常见条件：

float 不是 none

position 是 absolute 或 fixed

overflow 不是 visible

display 是 flex inline-block 等

E、float 布局的问题，以及 clearfix

圣杯布局

<style>
    body {
        min-width: 550px;
    }
    #header {
        text-align: center;
        background-color: #f1f1f1;
    }
    #container {
        padding-left: 200px;
        padding-right: 150px;
    }
    #container .column {
        float: left;
    }
    #left {
        background-color: yellow;
        width: 200px;
        margin-left: -200px;
    }
    #center {
        background-color: #ccc;
        width: 100%;
    }
    #right {
        background-color: red;
        width: 150px;
        margin-right: -150px;
    }
    #footer {
        /* clear: both; 清除浮动 */
        text-align: center;
        background-color: #f1f1f1;
    }
    /* 手写clearfix */
    .clearfix:after {
        content: "";
        display: table;
        clear: both;
    }

</style>
<body>
    <div id="header">this is header</div>
    <div id="container" class="clearfix">
        <div id="left" class="column">this is left</div>
        <div id="center" class="column">this is center</div>
        <div id="right" class="column">this is right</div>
    </div>
    <div id="footer">this is footer</div>
</body>

双飞翼布局

<style>
    body {
        min-width: 550px;
    }
    .col {
        float: left;
    }
    #main {
        width: 100%;
        height: 200px;
        background-color: #ccc;
    }
    #main-wrap {
        margin: 0 190px 0 190px;
    }
    #left {
        width: 190px;
        height: 200px;
        background-color: #0000FF;
        margin-left: -100%;
    }
    #right {
        width: 190px;
        height: 200px;
        background-color: #FF0000;
        margin-left: -190px;
    }
</style>
<body>
    <div id="main" class="col">
        <div id="main-wrap">
            this is main
        </div>
    </div>
    <div id="left" class="col">
        this is left
    </div>
    <div id="right" class="col">
        this is right
    </div>
</body>

圣杯布局和双飞翼布局的目的：

三栏布局，中间一栏最先加载和渲染（内容最重要）

两侧内容固定，中间内容随着宽度自适应

一般用于 PC 网页

圣杯布局和双飞翼布局的技术总结：

使用 float 布局

两侧使用 margin 负值，以便和中间内容横向重叠

防止中间内容被两侧覆盖，圣杯布局用 padding 双飞翼布局用 margin

使用float浮动后，浮动元素脱离文档流,其他盒子会无视这个元素
如果浮动元素后面紧邻的是普通块级元素，浮动元素就会和文档流发生重叠

F、flex 画骰子

<style>
    .box {
        width: 200px;
        height: 200px;
        border: 1px solid #ccc;
        border-radius: 10px;
        padding: 20px;

        display: flex;
        justify-content: space-between;
    }
    .item {
        display: block;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #666;
    }
    .item:nth-child(2) {
        align-self: center;
    }
    .item:nth-child(3) {
        align-self: flex-end;
    }
</style>
<body>
    <div class="box">
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
    </div>
</body>

常用语法回顾：

flex-direction：规定灵活项目方向

justify-content: 设置元素在主轴方向上的对齐方式

align-items：定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

flex-wrap：属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向

align-self：定义flex子项单独在侧轴（纵轴）方向上的对齐方式。

2、定位

A、absolute 和 relative分别依据什么定位

<style>
    body {
        margin: 20px;
    }
    .relative {
        position: relative;
        width: 400px;
        height: 200px;
        border: 1px solid black;

        top: 20px;
        left: 40px;
    }
    .absolute {
        position: absolute;
        width: 200px;
        height: 100px;
        border: 1px solid red;

        top: 20px;
        left: 30px;
    }
</style>
<body>
    <p>absolute 和 relative 定位问题</p>
    <div class="relative">
        <div class="absolute">
            this is absolute
        </div>
    </div>
</body>

relative 依据自身定位，不会对外界元素造成影响

absolute依据最近一层的定位元素定位（absolute，relative，fixed，body）

B、居中对齐有哪些实现方式

（水平对齐）

<style>
    .container {
        border: 1px solid #ccc;
        margin: 10px;
        padding: 10px;
    }
    .item {
        background-color: #ccc;
    }
    .container-1 {
        text-align: center; /* 行内居中对齐 */
    }
    .container-2 .item{
        width: 500px;
        margin: auto; /* 左右两边自动填充 */
    }
    .container-3 {
        position: relative;
        height: 100px;
    }
    .container-3 .item {
        width: 300px;
        height: 100px;
        position: absolute;
        left: 50%;
        margin-left: -150px;
    }
</style>
<body>
    <div class="container container-1">
        <span>一段文字</span>
    </div>
    <div class="container container-2">
        <div class="item">
            this is item
        </div>
    </div>
    <div class="container container-3">
        <div class="item">
            this is item
        </div>
    </div>
</body>

inline 元素：text-align：center

block 元素：margin：auto

absolute 元素：left：50% + margin-left 负值

（垂直对齐）

<style>
    .container {
        border: 1px solid #ccc;
        margin: 10px;
        padding: 10px;
        height: 200px;
    }
    .item {
        background-color: #ccc;
    }
    .container-1 {
        text-align: center; /* 行内居中对齐 */
        line-height: 200px;/* line-height 与 height 保持一致，就会垂直对齐 */
        height: 200px;
    }
    .container-2 {
        position: relative;
    }
    .container-2 .item{
        width: 300px;
        height: 100px;
        position: absolute;
        left: 50%;
        margin-left: -150px;
        top: 50%;
        margin-top: -50px;
    }
    .container-3 {
        position: relative;
    }
    .container-3 .item {
        width: 200px;
        height: 80px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
    .container-4 {
        position: relative;
    }
    .container-4 .item {
        width: 100px;
        height: 40px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
</style>
<body>
    <div class="container container-1">
        <span>一段文字</span>
    </div>
    <div class="container container-2">
        <div class="item">
            this is item
        </div>
    </div>
    <div class="container container-3">
        <div class="item">
            this is item
        </div>
    </div>
    <div class="container container-4">
        <div class="item">
            this is item
        </div>
    </div>
</body>

inline 元素：line-height 的值等于 height 值

absolute 元素：top：50% + margin-top 负值

absolute 元素：transfrom（-50%，-50%）

absolute 元素：top，left，bottom，right = 0 + margin：auto

3、图文样式

A、line-height 的继承问题

<style>
        body {
            font-size: 20px;
            line-height: 200%;
            /* line-height: 1.5;
            line-height: 15px; */
        }
        p {
            font-size: 16px;
        }
    </style>
    <body>
        <p>这是一段文字</p>
    </body>

a、写具体数值，如 30px ，则继承该值

b、写比例，如 2/1.5，则继承该比例

c、写百分比，如200%，则继承计算出来的值（考点）

4、响应式

A、rem 是什么？

<style>
    html {
        font-size: 100px;
    }
    div {
        background-color: #ccc;
        margin-top: 10px;
        font-size: 0.16rem;
    }
</style>
<body>
    <p style="font-size: 0.1rem">rem 1</p>
    <p style="font-size: 0.2rem;">rem 1</p>
    <p style="font-size: 0.3rem;">rem 1</p>
    <div style="width: 1.2rem;">
        this is div1
    </div>
    <div style="width: 1.3rem;">
        this is div2
    </div>
    <div style="width: 1.4rem;">
        this is div3
    </div>
</body>

是一个长度单位

px，绝对长度单位，最常用

em，相对长度单位，相对于父元素，不常用

rem，相对长度单位，相对于根元素，常用于响应式布局

B、如何实现响应式？

<style>
    @media only screen and (min-width: 375px) and (max-width:413px){
        html {
            font-size: 100px;
        }
    }
    body {
        font-size: 0.1rem;
    }
    p {
        width: 1rem;
    }
</style>
<body>
    <p>chenizhao</p>
</body>

C、网页视口尺寸

<style>
    #container {
        background-color: red;
        /* width: 10vmax;
        height: 10vmax; */ /* 以高作为参考，因为高更大一些 */
        width: 10vmin;
        height: 10vmin;
    }
</style>
<body>
     vw vh 调试
     <div id="container"></div>
</body>

window.screen.height //屏幕高度

window.innerHeight // 网页视口高度

document.body.clientHeight // body 高度

window.screen.width

window.innerWidth

document.body.clientWidth

vh 网页视口高度的 1/100

vw 网页视口宽度的 1/100

vmax 取两者最大值；vmin 取两者最小值（两者指的是视口的宽度和高度）

5、CSS3

A、关于 CSS3 动画

（不常考，除非公司专门做动画，所以略。）

MaJiFu..

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HHML与CSS面试题

文章目录目录题目概览（知识点汇总）一、HTML面试题1、如何理解 HTML 语义化？ 2、默认情况下，哪些 HTML 标签是块级元素，那些是内联元素二、CSS面试题1、布局 A、盒子模型的宽度如何计算？ B、margin 纵向重叠的问题 C、margin 负值的问题 D、BFC 理解和应用 ...
复制链接

扫一扫

专栏目录