【每日亿题】HTML&CSS面试题

最新推荐文章于 2024-08-10 16:47:20 发布

AngleCavalier

最新推荐文章于 2024-08-10 16:47:20 发布

阅读量160

点赞数

分类专栏：每日一题文章标签：面试前端 html css

本文链接：https://blog.csdn.net/qq_43464088/article/details/113485306

版权

每日一题专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HTML

1. 如何理解HTML语义化？

让人更容易读懂（增强代码可读性）
让搜索引擎更容易读懂（SE0）

在这里插入图片描述

2. 块状元素和内联元素，空元素？

块元素(block element)
< div > - 最常用块级元素
< h1 >,< h2 >,< h3 >,< h4 >,< h5 >,< h6 > - 标题级别 1-6
< table > - 表格
< ul > - 无序列表
< ol > - 有序列表
< li > - 用于表示列表里的条目
< p > - 行
< dd > - 定义列表中定义条目描述
< dl > - 定义列表
< form > - 表单
< pre > - 预格式化文本
< article > - 文章内容 HTML5
< aside > - 伴随内容 HTML5
< audio > - 音频播放 HTML5
< video > - 视频 HTML5
< canvas > - 绘制图形 HTML5
< header > - 区段头或页头 HTML5
< footer > - 区段尾或页尾 HTML5
< section > - 一个页面区段 HTML5
等
内联元素（行内元素）(inline element)
< span > - 常用内联容器，定义文本内区块
< img > - 图片
< input > - 输入框
< button > - 一个可点击的按钮
< textarea > - 多行文本输入框
< a > - 锚点
< abbr > - 缩写
< acronym > - 首字
< b > - 粗体(不推荐)
< bdo > - bidi override
< big > - 大字体
< br > - 换行
< cite > - 引用
< code > - 计算机代码(在引用源码的时候需要)
< dfn > - 定义字段
< em > - 强调
< font > - 字体设定(不推荐)
< i > - 斜体
< kbd > - 定义键盘文本
< label > - 表格标签
< q > - 短引用
< s > - 中划线(不推荐)
< samp > - 定义范例计算机代码
< select > - 项目选择
< small > - 小字体文本
< strike > - 中划线
< strong > - 粗体强调
< sub > - 下标
< sup > - 上标
< tt > - 电报文本
< u > - 下划线
< var > - 定义变量
空元素（empty element）
< img >、< input >、< meta >、< link >、< area >、< base >、< br >、< col >、< colgroup > 、< command >、< embed >、< hr >、< keygen >、< param >、< source >、< track >、< wbr >

CSS

1. 盒模型

W3C标准盒模型宽度 = （内容宽度content+内边距padding+边框border），无外边距margin
IE怪异盒模型宽度 = 内容宽度content

2. margin纵向重叠问题

  <!-- 如下代码，AAA 和 BBB 之间的距离是多少？ -->
  <style>
    p{
      font-size: 16px;
      line-height: 1px;
      margin-top: 10px;
      margin-bottom: 15px;
    }
  </style>

  <p>AAA</p>
  <p></p>
  <p></p>
  <p></p>
  <p>BBB</p>

相邻元素的 margin-top 和 margin-bottom 会发生重叠
空白内容的 < p > < /p >也会重叠
答案：15px

3. margin负值问题

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

4. BFC了解与应用

什么是BFC

Block format context，块级格式化上下文，页面盒模型布局中的一种 CSS 渲染模式
一块对立的渲染区域，内部元素的渲染不会影响边界以外的元素

形成BFC的常见条件

html 根元素
float 不是 none
position 是 absolute 或 fixed
overflow 不是 visible
display 是 flex inline-block 等

BFC作用

清除浮动
防止同一 BFC 容器中的相邻元素间的外边距重叠问题

4. 圣杯布局和双飞翼布局

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

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

Float法实现圣杯布局

<!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>圣杯布局</title>
    <style type="text/css">
        body {
            min-width: 550px;
        }
        #header {
            text-align: center;
            background-color: #f1f1f1;
        }

        #container {
            padding-left: 200px;
            padding-right: 150px;
        }
        #container .column {
            float: left;
        }

        #center {
            background-color: #ccc;
            width: 100%;
        }
        #left {
            position: relative;
            background-color: yellow;
            width: 200px;
            margin-left: -100%;
            right: 200px;
        }
        #right {
            background-color: red;
            width: 150px;
            margin-right: -150px;
        }

        #footer {
            text-align: center;
            background-color: #f1f1f1;
        }

        /* 手写 clearfix */
        .clearfix:after {
            content: '';
            display: table;
            clear: both;
        }
    </style>
</head>
<body>
    <div id="header">this is header</div>
    <div id="container" class="clearfix">
        <div id="center" class="column">this is center</div>
        <div id="left" class="column">this is left</div>
        <div id="right" class="column">this is right</div>
    </div>
    <div id="footer">this is footer</div>
</body>
</html>

Float法实现双飞翼布局

<!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>双飞翼布局</title>
    <style type="text/css">
        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>
</head>
<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>
</html>

Flex法实现圣杯布局

5. flex实现三点骰子布局

<!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>flex 画骰子</title>
    <style type="text/css">
        .box {
            width: 200px;
            height: 200px;
            border: 2px 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>
</head>
<body>
    <div class="box">
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
    </div>
</body>
</html>

6. absolute和relative定位

relative 依据自身定位
absolute 依据最近一层的定位元素定位
定位元素：absolute、relative、fixed 或者< body >

7. 水平居中和垂直居中

水平居中

inline元素：text-align：center
block元素：margin：auto
absolute元素：left:50% + margin-left 负值

垂直居中

inline元素：line-height 的值等于 height 值
absolute元素：top：50% + margin-top 负值 (需要知道子元素宽高)
absolute元素：transform: translate(-50%,-50%)
absolute元素：top, left, bottom, right = 0 + margin: auto

8. line-height如何继承

   <!--如下代码，p 标签的行高将会是多少？ -->
    <style type="text/css">
        body {
            font-size: 20px;
            line-height: 200%;
        }
        p {
            background-color: #ccc;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <p>这是一行文字</p>
</body>

写具体数字，如30px，则继承该值
写比例，如 2/1.5，则继承该比例
写百分比，如200%，则继承计算出来的值（考点）
所以本题答案是40px

9. display: none、visibility: hidden、和opacity: 0具体的区别

1.display: none

DOM 结构：浏览器不会渲染 display 属性为 none 的元素，会让元素完全从渲染树中消失，渲染的时候不占据任何空间；
事件监听：无法进行 DOM 事件监听，不能点击；
性能：修改元素会造成文档回流（reflow 与 repaint）,读屏器不会读取display: none元素内容，性能消耗较大；
继承：是非继承属性，由于元素从渲染树消失，造成子孙节点消失，即使修改子孙节点属性子孙节点也无法显示，毕竟子类也不会被渲染；
场景：显示出原来这里不存在的结构；
transition：transition 不支持 display。

2.visibility: hidden

DOM 结构：不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见；
事件监听：无法进行 DOM 事件监听，不能点击；
性能：修改元素只会造成本元素的重绘（repaint），是重回操作，比回流操作性能高一些，性能消耗较少；读屏器读取visibility: hidden元素内容；
继承：是继承属性，子孙节点消失是由于继承了visibility: hidden，子元素可以通过设置 visibility: visible 来取消隐藏；
场景：显示不会导致页面结构发生变动，不会撑开；
transition：transition 支持 visibility，visibility 会立即显示，隐藏时会延时。

3.opacity: 0

DOM 结构：透明度为 100%，不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见；
事件监听：可以进行 DOM 事件监听，可以点击；
性能：提升为合成层，是重建图层，不和动画属性一起则不会产生repaint（不脱离文档流，不会触发重绘），性能消耗较少；
继承：会被子元素继承，且子元素并不能通过 opacity: 1 来取消隐藏；
场景：可以跟transition搭配；
transition：transition 支持 opacity，opacity 可以延时显示和隐藏。

AngleCavalier

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【每日亿题】HTML&CSS面试题

HTML1.如何理解HTML语义化？让人更容易读懂（增强代码可读性）让搜索引擎更容易读懂（SE0）2.块状元素和内联元素，空元素？块元素(block element)< div > - 最常用块级元素< h1 >,< h2 >,< h3 >,< h4 >,< h5 >,< h6 > - 标题级别 1-6< table > - 表格< ul > - 无序列表< ol &g
复制链接

扫一扫

专栏目录