HTML、CSS面试题

孑立的老章鱼
104 阅读6分钟

HTML

DOCTYPE的作用

html结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

行内元素、块级元素、行内块级元素的区别

特例：

  • html5的doctype声明下a标签可以嵌套div。此外，a标签嵌套div块级元素还与a的父元素有关，当a的父元素是div时，可以嵌套，若父元素为p标签，则无法嵌套
  • 块级元素不能放在p里面。还有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt

如何只使用html实现页面延迟5s跳转？

如何理解html语义化？

语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化） 。通俗来讲就是用正确的标签做正确的事情。

语义化的优点如下：

  • 对机器友好，更适合搜索引擎的爬虫爬取有效信息，有利于SEO。除此之外，语义类还支持读屏软件，根据文章可以自动生成目录；
  • 对开发者友好，使用语义类标签增强了可读性，结构更加清晰，开发者能清晰的看出网页的结构，便于团队的开发与维护。

常见的语义化标签：

<header></header>  头部

<nav></nav>  导航栏

<section></section>  区块（有语义化的div）

<main></main>  主要区域

<article></article>  主要内容

<aside></aside>  侧边栏

<footer></footer>  底部

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

  • display: block/table，有div、h1-h6、table、ul、ol、p等
  • display: inline/inline-block，有span、img、input、button等

CSS

布局

盒模型的宽度如何计算？

image.png

offsetWidth = （内容宽度width + 内边距padding + 边框border），无外边距。

因此答案是122px。可以使用document.getElementById().offsetWidth查看。

补充：如果让offsetWidth等于100px，应该怎么做？

image.png

设置box-sizing: border-box后，width就是包括内容宽度、内边距和边框的offsetWidth。

margin纵向重叠的问题

image.png

  • 相邻元素的margin-top和margin-bottom会发生重叠
  • 空白内容的<p></p>也会重叠。

因此答案为15px。

外边距塌陷的解决方法

对margin的top、left、right、bottom设置负值，有何效果？

  • margin-top和margin-left负值，元素向上、向左移动。
  • margin-right负值，右侧元素左移，自身不受影响。
  • margin-bottom负值，下方元素上移，自身不受影响。

BFC的理解和应用

什么是BFC？如何应用？

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

形成BFC的常见条件：

  • float不是none
  • position是absolute或fixed
  • overflow不是visible
  • display是flex、inline-block等

BFC的常见应用：

  • 清除浮动

举个🌰：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        .container {
            background-color: #f1f1f1;
        }
        .left {
            float: left;
        }
        .bfc {
            overflow: hidden; /* 触发元素 BFC */
        }
    </style>
</head>
<body>
    <div class="container bfc">
        <img src="https://www.imooc.com/static/img/index/logo.png" class="left" style="magin-right: 10px;"/>
        <p class="bfc">某一段文字……</p>
    </div>
</body>
</html>

未添加bfc： image.png

添加bfc： image.png

float布局

如何实现圣杯布局和双飞翼布局？

难点但非重点，使用flex更好。

特点：

  • 三栏布局，中间一栏最先加载和渲染（内容最重要）
  • 两侧内容固定，中间内容随宽度自适应
  • 一般用于PC网页

技术总结：

  • 使用float布局
  • 两侧使用margin负值，以便和中间内容横向重叠
  • 防止中间内容被两侧覆盖，一个用padding一个用margin

手写clearfix

flex布局

常用语法回顾(需熟练掌握)：

  • flex-direction
  • justify-content
  • align-items
  • flex-wrap
  • align-self(子元素)

flex实现一个三点的色子

image.png

flex:2代表的是什么？

flex 属性是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。后两个属性可选。

flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

flex 属性属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

所以flex:1表示的含义是等分剩余空间，flex:2表示该项目所占空间为flex:1的项目的2倍。

参考链接：juejin.cn/post/706382…

定位

absolute和relative分别依据什么定位？

  • relative依据自身定位
  • absolute依据最近一层的定位元素定位

不设置position的话，top、left、right、bottom不生效。

定位元素：

  • absolute、relative、fixed
  • body

居中对齐有哪些实现方式？

水平居中：

  • inline元素：父元素text-align: center
  • block元素：子元素margin: auto
  • absolute元素：子元素left: 50% + margin-left负值（必须要知道子元素宽度）

垂直居中：

  • inline元素：父元素line-height的值等于height的值
  • absolute元素：子元素top: 50% + margin-top负值（必须要知道子元素高度）
  • absolute元素：top: 50% + left: 50% + transform: translate(-50%, -50%)（CSS3，老浏览器兼容性可能有问题）
  • absolute元素：top, left, bottom, right = 0 + margin: auto

图文样式

line-height如何继承

image.png

  • 写具体数值，如30px，则继承该值
  • 写比例，如2、1.5，则继承该比例
  • 写百分比，如200%，则继承计算出来的值（考点）

因此答案为40px。若body的line-height为1.5，则p的line-height为16 * 1.5=24px。

z-index什么时候会失效？

  • 父元素position为relative时，子元素的z-index失效。解决：父元素position改为absolute或static；

  • 元素没有设置position属性为非static属性。解决：设置该元素的position属性为relative，absolute或是fixed中的一种；

  • 元素在设置z-index的同时还设置了float浮动。解决：float去除，改为display：inline-block；

响应式

rem是什么？

rem是一个长度单位

  • px是绝对长度单位，最常用
  • em是相对长度单位，相对于父元素，不常用
  • rem是相对长度单位，相对于根元素（一般是html），常用
html {
    font-size: 100px;
}
body {
    font-size: 0.16rem;
}
.box {
    width: 1rem;
}

如何实现响应式？

  • media-query，根据不同的屏幕宽度设置根元素font-size
  • 再使用rem，基于根元素的相对单位

vw/vh

rem的弊端：“阶梯”性

image.png

网页视口尺寸

  • window.screen.height 屏幕高度
  • window.innerHeight 网页视口高度，即浏览器中显示网页内容的高度，浏览器中获取的值是不对的，因为模拟没有状态栏、地址栏、工具栏等。
  • document.body.clientHeight body高度

image.png

  • vh：网页视口高度的1/100，因此 window.innerHeight === 100vh
  • vw：网页视口宽度的1/100，因此 window.innerWidth === 100vw
  • vmax/vmin：取两者最大/小值

其他

CSS画三角形、扇形

CSS画圆形、椭圆、三角形、平行四边形、菱形、梯形、扇形 - 掘金 (juejin.cn)

avatar
文章
阅读
粉丝