• 笔记_前端基础试题：HTML+CSS

    启动本地服务：http-server

    先安装node，然后安装http-server

    1. // 安装http-server
    2. $ npm install -g http-server

    启动本地服务

    1. // 启动http-server
    2. $ http-server -p 8888
    即可访问：http://localhost:8888/

    HTML试题

    如何理解HTML语义化？

    ·让人更容易读懂，增加代码可读性

    ·让搜索引擎更容易读懂，SEO（Search Engine Optimization，搜索引擎优化）

    1. <h1>标题h1>
    2. <div>
    3.     <p>文字p>
    4.     <ul>
    5.         <li>列表li>
    6.         <li>列表li>
    7.     ul>
    8. div>

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

    ·块状元素，display:block/table; 独占一行，有 div、h1、h2、table、ul、ol、p等

    ·内联元素，display:inline/inline-block; 在一行往后挤，有 span、img、input、button等

    CSS试题

    布局：盒模型的宽度如何计算？

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>盒模型的宽度title>
    8.     <style type="text/css">
    9.         #div1 {
    10.             width: 100px;
    11.             padding: 10px;
    12.             border: 1px solid red;
    13.             margin: 10px;
    14.         }
    15.         #div2 {
    16.             width: 100px;
    17.             padding: 10px;
    18.             border: 1px solid red;
    19.             margin: 10px;
    20.             box-sizing: border-box; 
    21.         }
    22.     style>
    23. head>
    24. <body>
    25.     <div id="div1">
    26.         this is div1
    27.     div>
    28.     <div id="div2">
    29.         this is div2
    30.     div>
    31. body>
    32. <script>
    33.     // offsetWidth = 内容宽度 + 内边距 + 边框，无外边距
    34.     console.log(document.getElementById('div1').offsetWidth); // 122
    35.     // 设了box-sizing: border-box 后，offsetWidth = width = 100px，内容宽度为78
    36.     console.log(document.getElementById('div2').offsetWidth); // 100
    37. script>
    38. html>

    布局：margin纵向重叠的问题

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

    ·空白内容的

    也会重叠

    1. html>
    2. <html>
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7.     <title>margin 纵向重叠title>
    8.     
    9.     
    10.     <style type="text/css">
    11.         p {
    12.             font-size: 16px;
    13.             line-height: 1;
    14.             margin-top: 10px;
    15.             margin-bottom: 15px;
    16.         }
    17.     style>
    18. head>
    19. <body>
    20.     <p>AAAp>
    21.     <p>p>
    22.     <p>p>
    23.     <p>p>
    24.     <p>BBBp>
    25. body>
    26. html>

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

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

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

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

    布局：BFC的理解和应用

    什么是BFC

    ·Bloc

  • 相关阅读:
    SWAT-MODFLOW地表水与地下水耦合
    电气工程及其自动化
    【2022.12.06】备战春招Day1——每日一题 + 49.字母异位词分组
    hive从入门到放弃(三)——DML数据操作
    torch.manual_seed()解析
    Spring Cloud Alibaba微服务第11章之MyBatis-plus
    前端调取摄像头并实现拍照功能
    Spring framework Day22:Aware接口
    kafka基础介绍
    设备安全——入侵检测IDS
  • 原文地址：https://blog.csdn.net/html5_mylove/article/details/126415382