表单类型

请依次写出以下类型的输入框。

1. 类型为密码，默认值为"nowcoder"
2. 类型为复选框，且状态为已勾选

    <input type="password" value="nowcoder"></input>
    <input type="checkbox" checked></input>

补充

    <!-- 按钮 -->
    <input type="button" name="button" value="button里面显示的内容"></input>
    <!-- 复选框 -->
    <input type="checkbox">复选框</html>
    <!-- 颜色框 -->
    <input type="color" value='#ffffff'/>
    <!-- 日期 -->
    <input type="date"/>
    <!-- 日期加时间 -->
    <input type="datetime-local"/>
    <!-- 邮箱 -->
    <input type="email"/>
    <!-- 文件 -->
    <input type="file" accept="image/*, text/*" multiple>
    <!-- 隐藏输入框 -->
    <input type="hidden" value="123">
    <!-- 图片输入框-->
    <input type="image"  alt="Login" src="https://interactive-examples.mdn.mozilla.net/media/examples/login-button.png"/>
    <!-- 年月输入框 -->
    <input type="month"/>
    <!-- 数字输入框 -->
    <input type="number"/>
    <!-- 密码框 -->
    <input type="password" value="123456"/>
    <!-- 单选框 -->
    <input type="radio" checked="true" value="选周后的内容">单选框</input>
    <!-- 数值范围 -->
    <input type="range" min="0" max="100" value="90" step="10"/>
    <!-- 重置，放在form里面，会充值form表单里面的内容 -->
    <input type="reset" value="重置按钮">
    <!-- 搜索功能 -->
    <input type="search" name="search"/>
    <!-- 提示功能 -->
    <input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice">

    <datalist id="ice-cream-flavors">
        <option value="Chocolate">
        <option value="Coconut">
        <option value="Mint">
        <option value="Strawberry">
        <option value="Vanilla">
    </datalist>

    <!-- 提交功能 -->
    <input type="submit" value="提交"/>
    <!-- 电话 -->
    <input type="tel"  pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required/>
    <!-- 时间 -->
    <input type="time"  min="09:00" max="18:00" value="13:00" required/>
    <!-- url -->
    <input type="url" name="url" id="url"
       placeholder="https://example.com"
       pattern="https://.*" size="30"
       required>
    <!-- week -->
    <input type="week" name="week" id="camp-week"
       min="2018-W18" max="2018-W26" required>

表格结构

请写出具有表格标题为"nowcoder"的2行3列表格结构。

    <table>
        <caption>nowcoder</caption>
        <!-- <thead>
            <tr>
                <th colspan="3">nowcoder</th>
            </tr>
        </thead> -->
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
        </tbody>
    </table>

表格补充

• 含有表头的表格

<p>含有表头的表格</p>
<table>
  <tr>
    <th>姓</th>
    <th>名</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

• 含有表头、表尾和表格主体的表格

    <p>含有表头、表尾和表格主体的表格</p>
    <table>
        <thead>
            <tr>
                <th>表头内容 1</th>
                <th>表头内容 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>表格主体内容 1</td>
                <td>表格主体内容 2</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>表尾内容 1</td>
                <td>表尾内容 2</td>
            </tr>
        </tfoot>
    </table>

   <p>有列组的表格</p>
    <table>
        <colgroup span="4"></colgroup>
        <tr>
            <th>国家</th>
            <th>首都</th>
            <th>人口数量</th>
            <th>语言</th>
        </tr>
        <tr>
            <td>美国</td>
            <td>华盛顿</td>
            <td>3.09 亿</td>
            <td>英语</td>
        </tr>
        <tr>
            <td>瑞典</td>
            <td>斯德哥尔摩</td>
            <td>900 万</td>
            <td>瑞典语</td>
        </tr>
    </table>

    <p>有列组和列的表格</p>
    <table>
        <colgroup>
            <col style="background-color: #0f0" />
            <col span="2" />
        </colgroup>
        <tr>
            <th>青柠</th>
            <th>柠檬</th>
            <th>橘子</th>
        </tr>
        <tr>
            <td>绿色</td>
            <td>黄色</td>
            <td>橙色</td>
        </tr>
    </table>

图像标签属性

请写出具有标题属性和代替文本属性的图片标签。

<img src="https://img0.baidu.com/it/u=3835402344,2783912834&fm=253&fmt=auto&app=138&f=JPEG?w=762&h=500" alt="图片" title="标题">

• src 属性是必须的，它包含了你想嵌入的图片的路径。
• alt 属性包含一条对图像的文本描述，这不是强制性的，但对无障碍而言，它难以置信地有用——屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义。如果由于某种原因无法加载图像，普通浏览器也会在页面上显示 alt 属性中的备用文本：例如，网络错误、内容被屏蔽或链接过期。

新窗口打开文档

请写出可以在新窗口打开文档的a标签。

<a href="http://www.baidu.com" target="_blank">新窗口打开文档</a>

a标签详解

参考链接 (opens new window)

download

导致浏览器将链接的 URL 视为下载资源。可以使用或不使用 filename 值：

• 如果没有指定值，浏览器会从多个来源决定文件名和扩展名：
  • Content-Disposition (opens new window) HTTP 标头。
  • URL 路径 (opens new window)的最后一段。
  • 媒体类型 (opens new window)。来自 Content-Type (opens new window) 标头，data: URL (opens new window) 的开头，或 blob: URL (opens new window) 的 Blob.type (opens new window)。
• filename：决定文件名的值。/ 和 \ 被转化为下划线（_）。文件系统可能会阻止文件名中其他的字符，因此浏览器会在必要时适当调整文件名。

• download 只在同源 URL (opens new window) 或 blob:、data: 协议起作用。
• 浏览器对待下载的方式因浏览器、用户设置和其他因素而异。在下载开始之前，可能会提示用户，或者自动保存文件，或者自动打开。自动打开要么在外部应用程序中，要么在浏览器本身中。
• 如果Content-Disposition标头的信息与download属性不同，产生的行为可能不同：
  • 如果文件头指定了一个 filename，它将优先于 download 属性中指定的文件名。
  • 如果标头指定了 inline 的处置方式，Chrome 和 Firefox 会优先考虑该属性并将其视为下载资源。旧的 Firefox 浏览器（版本 82 之前）优先考虑该标头，并将内联显示内容。

<a href="/js刷题/牛客html/images/test.png" download="默认文件名">下载文件</a>

href

超链接所指向的 URL。链接不限于基于 HTTP 的 URL——它们可以使用浏览器支持的任何 URL 协议：

• 使用文档片段链接到页面的某一段
• 使用文本片段 (opens new window)链接到某一段文字
• 使用媒体片段链接到某个媒体文件
• 使用 tel: URL 链接到一个电话号码
• 使用 mailto: URL 链接到一个邮箱地址
• 如果 web 浏览器不能支持其他 URL 协议，网站可以使用 registerProtocolHandler() (opens new window)

    <!-- 链接到绝对地址 -->
    <a href="https://www.mozilla.com"> Mozilla </a>

    <!-- 链接到相对地址 -->
    <a href="//example.com">相对于协议的 URL</a>
    <a href="/zh-CN/docs/Web/HTML">相对于源的 URL</a>
    <a href="./p">相对于路径的 URL</a>

    <!-- 链接到相同页面的元素上 -->
    <!-- <a> 元素链接到下面部分 -->
    <p><a href="#Section_further_down"> 跳转到下方标题 </a></p>
    <!-- 要链接到的标题 -->
    <h2 id="Section_further_down">更下面的部分</h2>

    <!-- 链接到 email 地址 -->
    <a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>

    <!-- 链接到电话号码 -->
    <a href="tel:+49.157.0156">+49 157 0156</a>
    <a href="tel:+1(800)555-0123">(800) 555-0123</a>

target

该属性指定在何处显示链接的 URL，作为浏览上下文的名称（标签、窗口或 `` (opens new window)）。以下关键词对加载 URL 的位置有特殊含义：

• _self：当前页面加载。（默认）
• _blank：通常在新标签页打开，但用户可以通过配置选择在新窗口打开。
• _parent：当前浏览环境的父级浏览上下文。如果没有父级框架，行为与 _self 相同。
• _top：最顶级的浏览上下文（当前浏览上下文中最“高”的祖先）。如果没有祖先，行为与 _self 相同。

自定义列表

参考链接 (opens new window)

• dl是自定义列表的整体，用于包裹dt和dd

• dt是表示自定义列表的主题

• dd是表示针对自定义列表主题的每一项内容

    <dl>
        <dt>nowcoder</dt>
        <dd>nowcoder</dd>
    </dl>

加粗文字

使用一个标签将“牛客网”三个字加粗显示

    <!-- 填写标签 -->
    <p>牛客网，程序员必备求职神器</p>
    <script type="text/javascript">
            // 填写JavaScript
        const p = document.querySelector('p')
        let content = p.innerHTML
        content = content.replaceAll('牛客网', '<strong>牛客网</strong>')
        p.innerHTML = content
    </script>

语义化标签

请使用语义化标签创建头部标签且包含导航标签。 注意：只需在html模块填写标签结构，有且仅有一个头部标签和一个导航标签。

    <header>
        <nav>导航</nav>
    </header>

语义化标签

语义化标签，就是让标签有语义的含义，让浏览器或搜索引擎直观的认识这个标签所传达的信息，是干什么的有什么作用。

过去采用的DIV+CSS的方式布局的页面，让DIV标签没有独特意义，就会让文档结构不清晰，也不会利于浏览器对页面的读取。所以HTML5 新增的很多语义化标签，使文档更具可读性，页面结构更清晰。

常用的语义化标签：

<header></header>：头部标签

<nav></nav>：导航栏

<section></section>：区块

<aside></aside>：侧边栏

<footer></footer>：底部标签

①在去掉CSS样式时，也能合理的展示出来页面的结构。它的优点就在于能更好的读取页面结构，也利于开发和维护。

②代码结构清晰，可读性高，便于团队开发和修改。

③对搜索引擎良好，良好的语义和结构，有助于爬虫获取更多有效的信息。

音频媒体标签属性

参考链接 (opens new window)

请写出具有控件功能的音频媒体标签。

    <audio src="" controls></audio>

audio标签

<audio> HTML 元素用于在文档中嵌入音频内容。<audio> 元素可以包含一个或多个音频资源，这些音频资源可以使用 src 属性或者 <source> 元素来进行描述：浏览器将会选择最合适的一个来使用。也可以使用 MediaStream 将这个元素用于流式媒体。

    <audio controls src="http://music.163.com/song/media/outer/url?id=447925558.mp3">
        <a href="http://music.163.com/song/media/outer/url?id=447925558.mp3"> Download audio </a>
    </audio>

• autoplay

  布尔值属性；声明该属性，音频会尽快自动播放，不会等待整个音频文件下载完成。

• controls

  如果声明了该属性，浏览器将提供一个包含声音，播放进度，播放暂停的控制面板，让用户可以控制音频的播放。

• loop

  布尔属性；如果声明该属性，将循环播放音频。

• muted

  表示是否静音的布尔值。默认值为 false，表示有声音。

• preload

  枚举属性，让开发者自行思考来示意浏览器使用何种加载方式以达到最好的用户体验。可以是以下属性之一：

  • none: 示意用户可能不会播放该音频，或者服务器希望节省带宽；换句话说，该音频不会被缓存；
  • metadata: 示意即使用户可能不会播放该音频，但获取元数据 (例如音频长度) 还是有必要的。
  • auto: 示意用户可能会播放音频；换句话说，如果有必要，整个音频都将被加载，即使用户不期望使用。
  • 空字符串 : 等效于auto属性。不同浏览器会有自己的默认值，规范建议的默认值为 metadata。

  备注： autoplay 属性的优先级高于 preload。如果 autoplay 被指定，浏览器将显式地开始下载媒体以供播放。

  • 浏览器并不被强制遵循该属性的规范，该属性只是一个建议与提示。

• src

  嵌入的音频的 URL。该 URL 应遵从 HTTP access controls (en-US) (opens new window). 这是一个可选属性；你可以在 audio 元素中使用 `` (opens new window) 元素来替代该属性指定嵌入的音频。

浏览器对 文件类型 (opens new window) 和 音频编码 (en-US) (opens new window) 的支持各有不同，你可以使用内嵌的 `` (opens new window) 元素提供不同的播放源。浏览器会使用第一个它支持的播放源：

    <audio controls>
      <source src="myAudio.mp3" type="audio/mpeg" />
      <source src="myAudio.ogg" type="audio/ogg" />
      <p>
        Your browser doesn't support HTML5 audio. Here is a
        <a href="myAudio.mp4">link to the audio</a> instead.
      </p>
    </audio>

视频媒体标签属性

请写出具有当视频的媒体数据加载期间发生错误时执行某个方法事件的视频媒体标签。

<video src="http://vjs.zencdn.net/v/oceans.mp4" poster="https://t9.baidu.com/it/u=1045059810,292566620&fm=193" onerror="fn()" controls></video>

video标签

HTML <video> 元素 用于在 HTML 或者 XHTML 文档中嵌入媒体播放器，用于支持文档内的视频播放。你也可以将 <video> 标签用于音频内容，但是 `` (opens new window) 元素可能在用户体验上更合适。

• autoplay

  布尔属性；声明该属性后，视频会尽快自动开始播放，不会停下来等待数据全部加载完成。

• controls

  加上这个属性，浏览器会在视频底部提供一个控制面板，允许用户控制视频的播放，包括音量，跨帧，暂停/恢复播放。

• controlslist 实验性非标准

  当浏览器显示视频底部的播放控制面板（例如，指定了 controls 属性）时，controlslist (opens new window) 属性会帮助浏览器选择在控制面板上显示哪些控件。

  允许的值有 nodownload、nofullscreen 和 noremoteplayback。

  如果要禁用画中画模式（和控件），请使用 disablePictureInPicture (opens new window) 属性。

• height

  视频显示区域的高度，单位是 CSS 像素 (opens new window)（仅限绝对值；不支持百分比 (opens new window)）。

• loop

  布尔属性；指定后，会在视频播放结束的时候，自动返回视频开始的地方，继续播放。

• muted

  布尔属性，指明在视频中音频的默认设置。设置后，音频会初始化为静音。默认值是 false, 意味着视频播放的时候音频也会播放。

• playsinline

  布尔属性，指明视频将内联（inline）播放，即在元素的播放区域内。请注意，没有此属性并不意味着视频始终是全屏播放的。

• poster

  海报帧图片 URL，用于在视频处于下载中的状态时显示。如果未指定该属性，则在视频第一帧可用之前不会显示任何内容，然后将视频的第一帧会作为海报（poster）帧来显示。

• preload

  该枚举属性旨在提示浏览器，作者认为在播放视频之前，加载哪些内容会达到最佳的用户体验。可能是下列值之一：

  • none: 表示不应该预加载视频。
  • metadata: 表示仅预先获取视频的元数据（例如长度）。
  • auto: 表示可以下载整个视频文件，即使用户不希望使用它。
  • 空字符串: 和值为 auto 一致。每个浏览器的默认值都不相同，即使规范建议设置为 metadata。

  autoplay 属性的优先级比 preload 高。如果制定了 autopaly属性，浏览器显然需要开始下载视频以便回放。规范没有强制浏览器去遵循该属性的值，这仅仅只是个提示。

• src

  要嵌到页面的视频的 URL。可选；你也可以使用 video 块内的 `` (opens new window) 元素来指定需要嵌到页面的视频。

• width

  视频显示区域的宽度，单位是 CSS 像素 (opens new window)（仅限绝对值；不支持百分比 (opens new window)）。

CSS选择器——标签、类、ID选择器

请将html模块中字体内容是"红色"的字体颜色设置为"rgb(255, 0, 0)"，"绿色"设置为"rgb(0, 128, 0)"，"黑色"设置为"rgb(0, 0, 0)"，且字体大小都为20px。

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            /*补全代码*/
            div {
                color: rgb(255, 0, 0);
                font-size: 20px;
            }
            .green {
                color: rgb(0, 128, 0)
            }
            #black {
                color: rgb(0, 0, 0)
            }
        </style>
    </head>
    <body>
        <div>红色</div>
        <div class='green'>绿色</div>
        <div id='black'>黑色</div>
    </body>
</html>

CSS选择器——伪类选择器

请将html模块中ul列表的第2个li标签和第4个li标签的背景颜色设置成"rgb(255, 0, 0)"。

<!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>
    <style>
        ul > li:nth-child(2), ul > li:nth-child(4) {
            background-color: rgb(255, 0, 0);
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</body>
</html>

CSS选择器——伪元素

请给html模块的div元素加一个后伪元素，且后伪元素的宽度和高度都是20px，背景颜色为"rgb(255, 0, 0)"。

• div::after表示在div元素后插入内容。
• 在元素上，content 的初始值为 ‘normal’。在:before和:after上，如果指定了content 的初始值为 ‘normal’，则计算为 ‘none’ 。content 的值设置为 ‘none’ 不会生成伪元素。所以:before和:after才需要指定一个看似无意义的 content: ""; 来初始化content的值。
• 题目规定了宽高，为了使宽高设置有效又必须显式定义该伪元素为块级元素，也就是语句 display:block

<!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>
    <style>
        div::after {
            content: '';
            display: block;
            width: 20px;
            height: 20px;
            background-color: rgb(255, 0, 0);
        }
    </style>
</head>
<body>
    <div>123</div>
</body>
</html>

伪类和伪元素的区别

参考文章 (opens new window)

content属性

参考链接 (opens new window)

CSS 的 content CSS 属性用于在元素的 ::before (opens new window) 和 ::after (opens new window) 伪元素中插入内容。使用 content 属性插入的内容都是匿名的可替换元素 (opens new window)。

• none

  不会产生伪类元素

• normal(默认值) :before和:after伪类元素中会被视为none

• <string>

  文本内容

• <uri> url()

  URI 值会指定一个外部资源（比如图片）。如果该资源或图片不能显示，它就会被忽略或显示一些占位（比如无图片标志）。

          a::before {
              content: url(http://www.mozilla.org/favicon.ico) "还可以在前面插入内容，";
          }
  

  

• <counter>

  计数器可以指定两种不同的函数：counter() 或 counters()。前面一个有两种形式：counter(name)或counter(name,style) 。产生的内容是该伪类元素指定名称的最小范围的计数；格式由 style 指定（默认是'decimal'——十进制数字）。后一个函数同样也有两种形式：counters(name,string) 或 counters(name,string,style) 。The generated text is the value of all counters with the given name in scope at this pseudo-element, from outermost to innermost separated by the specified string. The counters are rendered in the indicated style ('decimal' by default). See the section on automatic counters and numbering for more information. The name must not be 'none', 'inherit' or 'initial'. Such a name causes the declaration to be ignored.

• attr(X)

  将元素的 X 属性以字符串形式返回。如果该元素没有 X 属性，则返回一个空字符串。区分大小写的属性返回值依赖文挡的语言设定。

          span::after {
              content: " (" attr(id) ")";
          }
  

  

• open-quote | close-quote

  这些值会被 quotes (opens new window) 中定义的字符串替换。

          p::before {
              content: open-quote;
          }
          p::after {
              content: close-quote;
          }
  

  

• no-open-quote | no-close-quote

  不会生产任何内容，但是会改变（增加或降低）引号层级。

按要求写一个圆

请将html模块的div元素设置为一个半径是50px的圆，且边框为1px的黑色实线。 要求：

1. 圆角属性仅设置一个值
2. 圆角属性单位请使用px 注意：由于圆角属性设置广泛且都可以实现题目效果，所以请按照要求规范书写。

<!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>
    <style>
        div{
            width: 100px;
            height: 100px;
            border-radius: 50px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

设置盒子宽高

请将html模块类为"box"的div元素宽度和高度都设置为100px，且内间距为20px、外间距为10px。

<!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>
    <style>
        .box {
            width: 100px;
            height: 100px;
            padding: 20px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="box">
    </div>
</body>
</html>

段落标识

请将下面这句话以段落的形式展示在浏览器中——“牛客网是一个专注于程序员的学习和成长的专业平台。”

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
       /* 填写样式 */
    </style>
</head>

<body>
    <!-- 填写标签 -->
    牛客网是一个专注于程序员的学习和成长的专业平台。
    <script type="text/javascript">
        // 填写JavaScript
        let p = document.createElement('p')
        //2. 创建文本节点
        let text = document.createTextNode('牛客网是一个专注于程序员的学习和成长的专业平台。');
        p.appendChild(text)
        document.body.appendChild(p)
    </script>
</body>

</html>

设置文字颜色

请使用嵌入样式将所有p标签设置为红色文字

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
        /* 填写样式 */
    </style>
</head>

<body>
    <!-- 填写标签 -->
    <p>欢迎来到牛客网</p>
    <p>在这里，我们为你提供了IT名企的笔试面试题库</p>
    <p>在这里，我们以题会友</p>
    <script type="text/javascript">
        // 填写JavaScript
        let p = document.querySelectorAll('p')
        Array.from(p).forEach(item => {
            item.style.color = 'red'
        })
    </script>
</body>

</html>

圣诞树

圣诞节来啦！请用CSS给你的朋友们制作一颗圣诞树吧~这颗圣诞树描述起来是这样的：

1. "topbranch"是圣诞树的上枝叶，该上枝叶仅通过边框属性、左浮动、左外边距即可实现。边框的属性依次是：宽度为100px、是直线、颜色为green（未显示的边框颜色都为透明）

2. "middleBranch"是圣诞树的中枝叶，该上枝叶仅通过边框属性即可实现。边框的属性依次是：宽度为200px、是直线、颜色为green（未显示的边框颜色都为透明）

3. "base"是圣诞树的树干，该树干仅通过左外边距实现居中于中枝叶。树干的宽度、高度分别为70px、200px，颜色为gray。 注意：

   1. 上枝叶、树干的居中都是通过左外边距实现的

   2. 没有显示的边框，其属性都是透明（属性）

   3. 仅通过border属性完成边框的所有属性设置

      

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            .topbranch {
                width: 0;
                height: 0;
                float: left;
                margin-left: 100px;
                border: 100px solid green;
                border-top-color: transparent;
                border-left-color: transparent;
                border-right-color: transparent;
                 
            }
            .middleBranch {
                width: 0;
                height: 0;
                /* margin-top: -200px; */
                border: 200px solid green;
                border-top-color: transparent;
                border-left-color: transparent;
                border-right-color: transparent; 
            }
            .base {
                width: 70px;
                height: 200px;
                float: left;
                background-color: gray;
                margin-left: 165px;
            }
        </style>
    </head>
    <body>
    	<section class="topbranch"></section>
        <section class="middleBranch"></section>
        <section class="base"></section>
    </body>
</html>

css画三角形

参考链接 (opens new window)

浮动和清除浮动

请将类为"left"的div元素和类为"right"的div元素在同一行上向左浮动，且清除类为"wrap"的父级div元素内部的浮动。

<!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>
    <style>
        .wrap {
            overflow: hidden;
        }

        .left {
            width: 100px;
            height: 100px;
            float: left;
        }

        .right {
            width: 100px;
            height: 100px;
            float: left;
        }
    </style>
</head>

<body>
    <div class='wrap'>
        <div class='left'></div>
        <div class='right'></div>
    </div>
</body>

</html>

清除浮动

参考文章 (opens new window)

清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题

额外标签法： 给谁清除浮动，就在其后额外添加一个空白标签 。

优点： 通俗易懂，书写方便。（不推荐使用） 缺点： 添加许多无意义的标签，结构化比较差。

给元素right清除浮动（在right后添加一个空白标签clear(类名可以随意），设置clear:both;即可）

       .clean {
            clear: both;
        }  
<div class='wrap'>
        <div class='left'></div>
        <div class='right'></div>
        <div class="clean"></div>
    </div>

父级添加overflow方法

可以通过触发BFC (opens new window)的方式，实现清楚浮动效果。必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度

优点： 简单、代码少、浏览器支持好

缺点： 内容增多时候容易造成不会自动换行 (opens new window)导致内容被隐藏掉，无法显示需要溢出的元素。不能和position配合使用，因为超出的尺寸的会被隐藏。

使用after伪元素清除浮动

:after方式为空元素的升级版，好处是不用单独加标签了。IE8以上和非IE浏览器才支持:after，，zoom(IE专有属性)可解决ie6,ie7浮动问题（较常用推荐） 优点： 符合闭合浮动思想，结构语义化正确，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）

缺点： 由于IE6-7不支持：after，使用zoom：1

使用before和after双伪元素清除浮动：（较常用推荐）

固定定位

请将html模块类为"box"的div元素固定在视口的左上角。

<!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>
    <style>
        .box {
            width: 100px;
            height: 100px;
            position: fixed;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <div class='box'></div>
</body>

</html>

CSS单位（一）

请将html模块中类为"box"的div元素的宽度和高度设置为自身字体大小的4倍。

<!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>
    <style>
        .box {
            width: 4em;
            height: 4em;
        }
    </style>
</head>
<body>
    <div class='box'></div>
</body>
</html>

知识点

• em:描述相对于应用在当前元素的字体尺寸,若当前尺寸为10px,即1em=10px,则2em=20px;

• 是一个相对单位。相对于当前对象内文本的font-size，如果当前文本的字体尺寸没有设置，则相对于浏览器的默认字体尺寸。即1em=16px

• em会继承父元素的字体大小

• rem:相对于根元素来讲,相对于是对当前字体大小的比较;而如果不是根元素,则是相对于当前根元素进行比较;

  • rem为元素设定字体大小的时候，是相对于根元素进行计算的。

基本数据类型检测

请补全JavaScript函数，要求以字符串的形式返回参数的类型。 注意：只需检测基本数据类型。

        function _typeof(value) {
            console.log(Object.prototype.toString.call(value))
            // 检测所有数据类型
            // [object number] 从第8位截取到最后一位
            return Object.prototype.toString.call(value).slice(8, -1).toLowerCase();
            // 检测基本数据类型
            // return typeof(value);
        }

检测复杂数据类型

请补全JavaScript函数，要求以Boolean的形式返回第一个参数是否属于第二个参数对象的实例。

        // 检测复杂数据类型
        function _instanceof(left, right) {
            // 补全代码
            return (left instanceof right)
        }
        // 基本数据类型检测
        function _instanceof2(left, right) {
            left = Object.getPrototypeOf(left)
            while(left) {
                if(left == right.prototype) return true
                left = Object.getPrototypeOf(left)
            }
            return false
        }

数据类型转换

请补全JavaScript函数，要求以字符串的形式返回两个数字参数的拼接结果。 示例：

1. _splice(223,233) -> "223233"
2. _splice(-223,-233) -> "-223-233"

        function _splice(left, right) {
            // 补全代码
            // return '' + left + right
            // return left.toString() + right.toString()
            // return String(left) + String(right)
            return `${left}${right}`
        }

平方根

function _sqrt(number) {
    if (number == 1 || number == 0) return number;
    let low = 0,
        high = number;
    while (low < high) {
        let mid = (low + high) / 2;
        if (mid * mid == number) {
            return mid;
        } else if (mid * mid < number) {
            low = mid;
        } else {
            high = mid;
        }
    }
}

数组求和

计算并返回给定数组 arr 中所有元素的总和

输入描述：

[ 1, 2, 3, 4 ]

输出描述：

10

输入：

[ 1, 2, 3, 4 ]

复制

输出：

10

      // 填写JavaScript
        function sum(arr) {
            return arr.reduce((prev, cur) => {
                console.log(prev, cur)
                return prev + cur
            }, 0)
        }
        let arr = [ 1, 2, 3, 4 ]
        console.log(sum(arr))

完全等同

判断 val1 和 val2 是否完全等同

• 利用 === 判断，不进行类型转换，判断完全相等

function identity(val1, val2) {
    return val1 === val2
}

• 利用ES6 Object.is()方法进行判断

function identity(val1, val2) {
    return Object.is(val1,val2)
}

字符串字符统计

统计字符串中每个字符的出现频率，返回一个 Object，key 为统计字符，value 为出现频率

1. 不限制 key 的顺序
2. 输入的字符串参数不会为空
3. 忽略空白字符

输入描述：

'hello world'

输出描述：

{h: 1, e: 1, l: 3, o: 2, w: 1, r: 1, d: 1}

输入：

'hello world'

复制

输出：

{h: 1, e: 1, l: 3, o: 2, w: 1, r: 1, d: 1}

        function count(str) {
            let obj = {}
            for(let item of str) {
                if(item === " ") continue
                // obj.hasOwnProperty(item)
                if(item in obj) {
                    obj[item] += 1
                } else {
                    obj[item] = 1
                }
            }
            return obj
        }

返回星期数

请补全JavaScript函数，要求以字符串的形式返回数字参数所对应的星期。 示例：

1. _getday(1) -> "星期一"
2. _getday(7) -> "星期天"

        function _getday(value) {
            // 补全代码
            let arr = ['一', '二', '三', '四', '五', '六', '天']
            return '星期' + arr[value - 1] 
        }

对象属性键名

请补全JavaScript函数，要求以数组的形式输出对象各个属性的键名。 示例：

1. _keys({name:'nowcoder',age:7}) -> ['name','age'] 注意：只需考虑对象属性均为原始数据类型的情况。

• 使用Object.keys(obj)即可拿到obj对象的所有属性名。

          function _keys(object){
              return Object.keys(object)
          }
  

• 使用for...in遍历对象的每一个属性，并创建一个数组将其推进去

          function _keys(object) {
              // 补全代码
              let arr = []
              for (let key in object) {
                  arr.push(key)
              }
              return arr
          }
  

对象数字

请补全JavaScript函数，要求将数字参数转换为对象的形式返回。 示例：

1. typeof number === 'number' -> typeof _numbertoobject(number) === 'object'

function _numbertoobject(number) {
    // 补全代码
    // return {number}
    // return new Object(number)
    return new Number(number)
}

输出日期

请补全JavaScript函数，要求以字符串的形式输出时间戳参数所对应的"年-月-日"。 示例：

1. _date(1631159776311) -> '2021-9-9'

        function _date(number) {
            // 补全代码
            let date = new Date(number)
            return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
        }

搜索数字

请补全JavaScript函数，要求以boolean的形式返回字符串参数中是否包含数字。

        function _search(string) {
            let reg = /\d/
            return  string.search(reg) != -1  
        }
        function _search2(string) {
            return Array.from(string).some(item => isNaN(item) === false )
        }

头部插入元素

请补全JavaScript函数，要求将第二个参数插入第一个参数数组的头部，并且以数组的形式返回。

1.通过循环将数组中的元素往后移一位

function _unshift(array, value) {
    let len = array.length;
    for (let i = len - 1; i >= 0; i--) {
        array[i + 1] = array[i];
    }
    array[0] = value;
}

2.ES6的展开运算符,本题是要求用ES5

function _unshift(array, value) {
    const temp = [value, ...array];
    array.length = 0; // 将数组置空，不能使用 array = []
    temp.forEach((item) => {
        array.push(item);
    });
    return array;
}

3.数组拼接,of方法可以将一组参数转化成数组。of方法也是ES6才支持的。

function _unshift(array, value) {
    const temp = Array.of(value).concat(array);
    array.length = 0; // 将数组置空，不能使用 array = []
    temp.forEach((item) => {
        array.push(item);
    });
    return array;
}

4.万金油splice

function _unshift(array, value) {
    array.splice(0, 0, value);
    return array;
}

5.unshift方法

function _unshift(array, value) {
    array.unshift(value);
    return array;
}

向下取整

请补全JavaScript函数，要求以数字的形式返回数字参数向下取整的结果。

• floor()

  function _floor(number) {
  	return Math.floor(number) 
  }
  

• parseInt()

  function _floor(number) {
     return parseInt(number)
  }
  

• 两次取反

  function _floor(number) {
      return ~~number
  }
  

• Math.trunc() 方法会将数字的小数部分去掉，只保留整数部分。

  function _floor(number) {
      return Math.trunc(number)
  }
  

• split()

  function _floor(number) {
      // 补全代码
      let arr = number.toString().split(".");
      return +arr[0];
  }
  

• 右移

  function _floor(number) {
      return number >> 0
  }
  

• 求余

  function _floor(number) {
      return number-number%1;
  }
  

JavaScript实现数字、字符串直接取整的六种方法 (opens new window)

整数反转

请补全JavaScript函数，要求将整数参数反转之后输出。 示例：

1. _reverse(0) -> 0
2. _reverse(233) -> 332
3. _reverse(-223) -> -322

function _reverse(number) {
    // 补全代码
    let num = Math.abs(number);
    let str = num.toString();
    while (str.endsWith("0")) {
        str = str.substring(0, str.length - 1);
    }
    str = str.split("").reverse().join("");
    if (number < 0) {
        str = "-" + str;
    }
    return parseInt(str);
}

字符串搜索

请补全JavaScript函数，要求以boolean的形式返回字符串首参中是否包含第二个参数。

• 方法1 ---------- search()

        function _search(string, value) {
            let reg = new RegExp(value)
            return string.search(reg) != -1
        }

• 方法2 ----------- indexOf()

        function _search2(string, value) {
            return string.indexOf(value) != -1
        }

• 方法3 ----------- match()

        function _search3(string, value) {
            let reg = new RegExp(value)
            let match = string.match(reg)
            return (match === null) || (match === []) ? false : true
        }

• 方法4 --------- split() + some()

        function _search4(string, value) {
            return string.split('').some(item => item == value)
        }

• 方法5 ------------- RegExp + test()

        //  与 search() 方法差别在于 test() 返回一个布尔值，而 search() 返回索引（如果找到）或者-1（如果没找到）
        function _search4(string, value) {
            let reg = new RegExp(value)
            return reg.test(string)
        }

• 方法6 --------- includes

        // String.prototype.includes() 方法用于判断一个字符串是否包含 在 另一个字符串中，根据情况返回 true 或 false。（区分大小写）
        // Array.prototype.includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false
        function _search6(string, value) {
            return string.includes(value)
        }

移除数组中的元素

移除数组 arr 中的所有值与 item 相等的元素。不要直接修改数组 arr，结果返回新的数组

输入描述：

[1, 2, 3, 4, 2], 2

输出描述：

[1, 3, 4]

示例1

输入：

[1, 2, 3, 4, 2], 2

复制

输出：

[1, 3, 4]

        function remove(arr, item) {
            let new_arr = []
            arr.forEach(i => {
                if(i != item) {
                    new_arr.push(i)
                }
            } )
            return new_arr
        }

        function remove(arr, item) {
            return arr.filter(i => i != item)
        }

移除数组中的元素(2)

移除数组 arr 中的所有值与 item 相等的元素，直接在给定的 arr 数组上进行操作，并将结果数组返回

示例1

输入：

[1, 2, 2, 3, 4, 2, 2], 2

复制

输出：

[1, 3, 4]

function removeWithoutCopy(arr, item) {
    while(arr.indexOf(item) != -1) {
        arr.splice(arr.indexOf(item), 1)
    }
    return arr
}

function removeWithoutCopy(arr, item) {
    let index = 0;
    arr.forEach((i) => {
        if (i != item) {
            arr[index++] = i;
        }
    });
    arr.length = index;
    return arr;
}

删除数组最后一个元素

删除数组 arr 最后一个元素。不要直接修改数组 arr，结果返回新的数组

JavaScript中的slice()方法可以用来提取一个字符串或数组的一部分，并返回一个新的字符串或数组，而不修改原始字符串或数组。 slice()方法接受两个参数：起始索引和终止索引（可选）。

function truncate(arr) {
    return arr.slice(0,-1)
}

查找元素位置

在数组 arr 中，查找值与 item 相等的元素出现的所有位置

输入：

['a','b','c','d','e','f','a','b','c'] 'a'

输出：

[0, 6]

function findAllOccurrences(arr, target) {
    let newArr = [];
    arr.forEach((item, index) => {
        if (item == target) {
            newArr.push(index);
        }
    });
    return newArr;
}

function findAllOccurrences(arr, target) {
    return arr.reduce((prev, curr, index) => {
        if (curr == target) {
            prev.push(index);
        }
        return prev
    }, []);
}

阻止冒泡事件

请补全JavaScript函数，要求在点击li元素的时候不触发ul的事件。 注意：需要自行获取li元素。

        const li = document.getElementsByTagName(li)[0]
        li.addEventListener('click', function(e){

            //方法一：cancelBubble 属性防止事件流冒泡到父元素。
            e.cancelBubble=true;

             //方法二：提示：如需防止向上冒泡到父元素并向下被子元素捕获，使用 stopPropagation() 方法。
            e.stopPropagation();

            //方法三：preventDefault() 用于取消事件的默认行为，
            //如果a标签的默认事件是href跳转，加了就不会跳转了
            e.preventDefault();

            //方法四：事件处理过程中，阻止了事件冒泡，也阻止了默认行为，相当于会直接调用 preventDefault和stopPropapation
            return false;
        })

阻止默认事件

请补全JavaScript函数，要求在点击id为"checkbox"的复选框时不会取消勾选状态。 注意：需要自行获取input元素。

        let input = document.getElementById('checkbox')
        input.addEventListener('click', function(e) {
            e.preventDefault()
        })

url地址

请补全JavaScript函数，实现一个函数返回页面当前url。

function getUrlHref (){
    // 补全代码
    return window.location.href
}

点击按钮隐藏元素

请补全JavaScript代码，实现一个盒子的关闭按钮功能。 要求：

1. 使类为"btn"的div元素中心点定位在类为"box"的div元素右上顶点
2. 使类为"btn"的div元素中内容"X"垂直水平居中
3. 点击"X"按钮可以使类为"box"的div元素隐藏

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            .box {
                width: 100px;
                height: 100px;
                border: solid 1px black;
                /*补全代码*/
                position: relative;
                
            }
            .btn{
                width: 20px;
                height: 20px;
                text-align: center;
                line-height: 20px;
                background-color: red;
                /*补全代码*/
                position: absolute;
                right: -10px;
                top: -10px;
                
            }
        </style>
    </head>
    <body>

        <div class='box'>
            <div class='btn'>X</div>
        </div>

        <script type="text/javascript">
            var btn = document.querySelector('.btn');
            var box = document.querySelector('.box');
            btn.onclick = function(){
                // 补全代码
                box.style.display = 'none'
            }
        </script>
    </body>
</html>

CSS

盒模型

盒模型 - content-box

盒模型是CSS的核心概念，描述了元素如何显示，以及在一定程度上如何相互作用、相互影响。页面中的所有元素都被看作一个矩形盒子，这个盒子包含元素的内容、内边距、边框和外边距。  内边距是内容周围的空间，当给元素填充背景时会作用到元素的内容区域和内边距区域。边框会在内边距外且紧挨着内边距。边框的外侧是外边距，外边距是围绕在盒子可见部分之外的透明区域，用于控制元素之间的距离。  默认情况下，width和height是指盒子的内容区域的大小，如果此时给盒子添加内边距或边框，那么会导致整个盒子变大。现在给类名为"content-box"的盒子设置宽度、高度都为"80px"、内边距为"5px"、边框为"5px solid black"，此时可以打开调试工具查看该盒子的大小，会发现该盒子实际是一个长度为"100px"的正方形，并不是"80px"。  实际上还有另外一种盒模型，它的width和height的计算方式和当前的盒子不同。完成以上所讲的步骤即可通过测试，进入下一节的学习吧。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            .content-box {
                box-sizing: content-box; /*默认就是content-box*/
                width: 80px;
                height: 80px;
                padding: 5px;
                border: 5px solid black;
            }
        </style>
    </head>
    <body>
        <div class="content-box"></div>
    </body>
</html>

盒模型 - border-box

默认盒模型的width和height只会作用于盒子的内容区，而通过"box-sizing"属性可以改变计算盒子大小的方式。"box-sizing"的默认值为"content-box"，即上一题看到的那样，把值只作用于内容区。现在给类名为"border-box"的盒子设置"box-sizing"属性为"border-box"，此时width和height的值不仅会作用于内容区，并且还会包括内边距和边框。  很多人将"border-box"称为怪异盒模型，其实并不怪异。因为现实中的盒子就是这样测量的。比如快递盒，当用安全气囊包裹易碎物品时，填充物就可以视为"padding"，无论填充物有多厚，也不会影响盒子的整体大小。  现在再给类名为"border-box"的盒子设置宽度、高度都为"100px"、内边距为"5px"、边框为"5px solid black"，此时通过调试工具会发现盒子的实际大小并没有因为添加了内边距或边框而被撑大。"border-box"在布局中可以让开发者减少不必要的烦恼，如添加内边距、边框之后盒子大小发生变化影响到整体布局的效果。完成以上所讲的步骤即可通过测试，进入下一节的学习吧。

<!DOCTYPE html>
<html>

<head>
    <meta charset=utf-8>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .border-box {
            box-sizing: border-box;
            width: 80px;
            height: 80px;
            padding: 5px;
            border: 5px solid black;
        }
    </style>
</head>

<body>
    <div class="border-box"></div>
</body>

</html>

盒模型- 外边距折叠

常规块盒子有一种机制叫外边距折叠，即垂直方向上的两个外边距相遇时，会折叠成一个外边距，且折叠之后的外边距高度为两者之中较大的那一个。现在给类名为"top"、"bottom"两个盒子都设置宽度、高度且都为"100px"、都设置外边距且都为"10px"，可以添加任意颜色便于区分两个盒子。此时通过调试工具可以发现两个盒子之间的距离为"10px"，并不是"20px"，说明已经发生了外边距折叠。 外边距折叠好像很奇怪，实际上却很有用。当一个页面包含了多个段落，如果没有外边距折叠，从第二个段落开始，所有段落的间距都是最上方段落的上外边距的两倍，有了外边距折叠，段落间距才会相等。 如果想要清除两个盒子之间的外边距折叠，可以给目标盒子设置以下属性：

1. display: inline-block
2. float属性值不是"none"的元素
3. 绝对定位

现在给类名为"bottom"的盒子设置"position"属性为"absolute"，可以看到下方的盒子向下移动了，此时外边距折叠失效。完成以上所讲的步骤即可通过测试，进入下一节的学习吧。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            .top,.bottom {
                width: 100px;
                height: 100px;
                margin: 10px;
                /* float: left; 
                display: inline-block;
                可以清除外边距折叠*/ 
            }
            .top {
                background-color: blueviolet;
            }
            .bottom {
                background-color: cadetblue;
                position: absolute;
            }
        </style>
    </head>
    <body>
        <section class="top"></section>
        <section class="bottom"></section>
    </body>
</html>

浮动

浮动

浮动盒子可以向左、右移动，直到它的外边沿接触父级的外边沿或另一个浮动盒子的外边沿。浮动盒子会脱离常规文档流，所以文档流中的元素几乎认为浮动盒子不存在。  现在给"body"标签设置宽度为300px，再给类名为"left"、"center"、"right"的盒子（左、中、右盒子）皆设置宽度、高度且都为100px，三个盒子的颜色可以自定义以便于观测。继续给中间盒子设置"float: left"属性，此时中间盒子已经是一个浮动盒子，不再占据流中的位置空间，右盒子上升到了浮动盒子的区域并且被浮动盒子覆盖住了。现在再给左、右盒子皆设置"float: left"属性，此时三个盒子水平排列在一行上。重设左盒子的宽度、高度皆为120px，可以观察到因为"body"盒子较窄，所以右盒子被迫换行并且因为左盒子的高度超过了中间盒子，右盒子被卡在了中间盒子下方。  以上为浮动盒子的特性。完成以上所讲的步骤即可通过测试，进入下一节的学习吧。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            body {
                width: 300px;
            }
            .left,.center,.right {
                width: 100px;
                height: 100px;
                float: left;
            }
            .left {
                width: 120px;
                height: 120px;
                background-color: red;
            }
            .center {
                background-color: yellow;
                /* float: left; */
            }
            .right {
                background-color: blue;
            }
        </style>
    </head>
    <body>
    	<div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </body>
</html>

浮动 - 清除

通过前面的学习了解到，浮动元素会脱离文档流，因此不会影响其他元素。但,在之前介绍浮动盒子时提到了"文档流中的元素几乎认为浮动盒子不存在"，实际上被浮动盒子覆盖的区域中的文本内容会识别到浮动盒子并且绕开浮动盒子。  现在给类名为"media"的盒子设置"float: left"属性，让该盒子成为浮动盒子，背景色可以自定义便于观察。此时可以观察到盒子下方的文字内容跑到了盒子右侧。通过调试工具可以发现，两个"p"标签被浮动元素所覆盖，并且内部的文字识别到了浮动元素从而绕开了浮动元素。如果给"section"元素添加边框，就会发现"section"这个父级盒子的高度只有两个"p"标签那么高，并没有将浮动元素的高度计算进去，这样会让布局很困难。  clear属性的值有"left"、"right"、"both"和"none"，用于指定盒子的那一侧不应该紧挨着浮动盒子。现在再给类名为"clear-left"的"p"标签设置"clear: left"属性，现在可以发现"universe"文本到了浮动盒子的下方并且"section"盒子的高度也发生了变化，该高度包含了浮动盒子的高度。  完成以上所讲的步骤即可通过测试，进入下一节的学习吧。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            section {
                border: 1px solid red;
            }
            .media {
                width: 100px;
                height: 100px;
                background-color: blueviolet;
                float: left;
            }
            .clear-left {
                clear: left;
            }
        </style>
    </head>
    <body>
    	<section>
            <div class="media"></div>
            <p>hello</p>
            <p class="clear-left">universe</p>
        </section>
    </body>
</html>

定位

定位 - static

在流中的元素定位属性值默认都为"static"，即没有定位。此时元素会忽略"top"、"bottom"、"left"、"right"和"z-index"定位属性。  现在给"section"盒子设置"left: 10px"，这时会发现定位属性无效。完成以上所讲的步骤即可通过测试，进入下一节的学习吧。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            section {
                width: 100px;
                height: 100px;
                background-color: black;
                left: 10px;
            }
        </style>
    </head>
    <body>
    	<section></section>
    </body>
</html>

定位 - inherit

当一个元素的定位属性设置为"inherit"时，表示从父元素继承定位属性。现在虽然类名为"inner"的里盒子设置了"left: 10px"属性，但是这是无效的，因为该盒子的定位属性值为"static"。现在给里盒子添加"position: inherit"属性，表示从类名为"outer"的父级外盒子继承定位属性，现在发现里盒子的"left: 10px"属性依然没有生效，因为外盒子的定位值依然是"static"。最后再给外盒子添加"position: relative"属性，此时会发现里盒子向右移动了10px，定位属性"left"生效了。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            .outer {
                width: 100px;
                height: 100px;
                background-color: black;
                position: relative;
            }
            .inner {
                width: 80px;
                height: 80px;
                background-color: red;
                position: inherit;
                left: 10px;
            }
        </style>
    </head>
    <body>
    	<section class="outer">
            <section class="inner">
                
            </section>
        </section>
    </body>
</html>

定位 - absolute

绝对定位会把元素拿出文档流，不会再占据原来的空间。绝对定位元素的父级是距离该元素最近的定位祖先，也就是"position"属性不为"static"的最近任意祖先。如果没有这个定位祖先，那么绝对定位元素就相对于文档的根元素"html"进行定位。  当前类名为"outer"、"middle"、"inner"的盒子（外、中、里盒子）嵌套在一起，现在给三个盒子均设置左内边距10px，再自定义盒子背景颜色以便于观察。再给里盒子设置绝对定位属性"position: absolute"，会发现里盒子的位置并没有发生改变，因为绝对定位的默认位置是当前绝对定位盒子在流中的位置。继续给里盒子设置"left: 0px"属性，观察到里盒子是根据最外层盒子定位的，直接绕过了中间盒子，这是由于中间盒子的定位属性为默认的"static"，此时再给中间盒子设置定位属性"position: absolute"，会发现里盒子现在是根据中间盒子重新定位的。  完成以上所讲的步骤即可通过测试，进入下一节的学习吧。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            .outer {
                width: 100px;
                height: 100px;
                padding-left: 10px;
                background-color: red;
            }
            .middle {
                width: 100px;
                height: 100px;
                padding-left: 10px;
                background-color: yellow;
                position: absolute;
            }
            .inner {
                width: 100px;
                height: 100px;
                padding-left: 10px;
                background-color: blue;
                position: absolute;
                left: 0px;
            }
        </style>
    </head>
    <body>
    	<div class="outer">
            <div class="middle">
                <div class="inner">
                    
                </div>
            </div>
        </div>
    </body>
</html>

定位 - absolute - 评注

绝对定位非常适合创建弹出层、提示和对话框等覆盖于其他内容之上的组件。比如有一篇文章，可以给文章添加一些行内的评注，最好以气泡图的样式显示在文章外部的空白区域中。  绝对定位的元素默认会待在自己还在流中时的地方，现在给"aside"盒子设置绝对定位属性"position: absolute"，此时"aside"盒子从流中出来并且覆盖住了下方的元素，现在可以将它向左移动一些，把它定位到文章内容的左边。"article"盒子的左外边距为10rem，想让"aside"评注放在左边空白处的中间，需要进行计算，这里省略计算步骤。现在只需要将评注组件向左移动9rem即可。现在给评注组件设置"margin-left: -9rem"，在CSS中，负边距是完全有效的，负左外边距可以将元素往左拉，其他有趣的效果这里不做赘述。此时观察效果，评注在"相煎何太急？"内容的左边，可以很醒目的告诉读者该句的意思。 emsp;完成以上所讲的步骤即可通过测试，进入下一节的学习吧。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            article {
                margin-left: 10rem;
            }
            aside {
                width: 5rem;
                padding: 1rem;
                color: white;
                background-color: pink;
                border-radius: 0.5rem;
                position: absolute;
                margin-left: -9rem;
            }
            aside:after {
                content: '';
                position: absolute;
                display: block;
                width: 0;
                height: 0;
                border: 0.5rem solid pink;
                border-bottom-color: transparent;
                border-right-color: transparent;
                right: -1rem;
                top: 0.5rem;
            }
            .note {
                color: green;
                text-decoration-line: underline;
            }
        </style>
    </head>
    <body>
    	<section>
            <article>
                <p>煮豆燃豆萁，</p>
                <p>豆在釜中泣。</p>
                <p>本是同根生，</p>
                <aside>豆秸怎能这样急迫地煎熬豆子呢？</aside>
                <p class='note'>相煎何太急？</p>
            </article>
        </section>
    </body>
</html>

定位 - z-index

z-index属性设置元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的上面。z-index可以设置为负数，且该属性只能作用于定位元素。  现在给"img"图片标签添加"position: absolute"、"left: 0px"和"top: 0px"属性，此时会发现图片被定绝对定位在了页面的左上角，并且遮挡住了下方的内容。现在继续给图片标签添加"z-index: -1"属性，现在图片堆叠在了字体内容的下方。  完成以上所讲的步骤即可通过测试，进入下一节的学习吧。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            img {
                position: absolute;
                left: 0px;
                top: 0px;
                z-index: -1;
            }
        </style>
    </head>
    <body>
    	<h1>The countdown to Christmas starts here.</h1>
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fuploads.xuexila.com%2Fallimg%2F1912%2F1135-191202143454.jpg&refer=http%3A%2F%2Fuploads.xuexila.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639984107&t=eca951193e736a17eb96278117bcfb1f" width="100">
        <p>由于图像的 z-index 是 -1，因此它在文本的后面出现。</p>
    </body>
</html>

定位 - relative

**相对定位的元素仍然会待在原来的地方，即不会从流中出来。**此后可以通过"top"、"right"、"bottom"和"left"属性使元素相对于初始位置进行移动。现在给类名为"center"的盒子设置相对定位属性"position: relative"、设置"left: 50px"、设置"top: 50px"，再自定义背景颜色以便于观察。此时可以观察到中间盒子在原始的位置上向右、向下均移动了50px的距离，并且保留了原来的空间。  完成以上所讲的步骤即可通过测试，进入下一节的学习吧。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            .left {
                width: 100px;
                height: 100px;
                background-color: red;
            }
            .center {
                width: 100px;
                height: 100px;
                background-color: blue;
                position: relative;
                left: 50px;
                top: 50px;
            }
            .right {
                width: 100px;
                height: 100px;
                background-color: yellow;
            }
        </style>
    </head>
    <body>
    	<div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </body>
</html>

定位 - fixed

固定定位是由绝对定位衍生出来的，不同之处在于，固定定位元素的父级始终是视口。因此固定定位可以用来创建始终停留在窗口相同位置的元素。比如：固定侧栏、固定顶栏等。这样方便用户，不必再费事寻找栏目。  现在给"nav"盒子设置固定定位属性"position: fixed"、设置"top: 0"、设置自定义宽度、背景颜色。此时滑动滚轮，可以发现"nav"盒子始终固定在页面的最上方。但是，数字1却被覆盖了。由于固定定位的盒子不在流中，所以遮盖住了下方的元素。此时再给"section"盒子设置上外边距为1rem，此时1数字正常出现了。固定定位需要注意下方是否有元素被遮挡。  完成以上所讲的步骤即可通过测试，进入下一节的学习吧。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            nav {
                width: 20px;
                background-color: red;
                position: fixed;
                top: 0;
            }
            section {
                margin: 1rem;
            }
        </style>
    </head>
    <body>
    	<nav><br /></nav>
        <section>1<br />2<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></section>
    </body>
</html>

定位 - fixed - 广告

固定定位不仅可以用于导航栏目，还可以用于控制中心、广告、重要提示内容等。本节使用固定定位实现一个广告牌功能，关闭按钮和该按钮的功能已给出，当点击按钮时，广告牌会消失。现在给类名为"advert"的盒子设置固定定位属性"position: fixed"、设置"right: 0"、设置"bottom: 0"，此时广告牌的位置被固定在了视口的右下方。现在还需要将关闭按钮定位在广告牌的右上方，继续给类名为"x"的按钮盒子设置绝对定位属性"position: absolute"、设置"right: 0"，观察按钮的位置，已经被定位在了广告牌的右上方。一个简易的广告牌就设计完成了。  完成以上所讲的步骤即可通过测试，进入下一节的学习吧。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            .advert {
                width: 300px;
                height: 200px;
                background-color: black;
                position: fixed;
                right: 0;
                bottom: 0;
            }
            .advert:first-line {
                color: white;
            }
            .x {
                position: absolute;
                right: 0;
            }
        </style>
    </head>
    <body>
    	<section class="advert">
            广告文案
            <button class="x">x</button>
        </section>

        <script>
            document.querySelector('button').onclick = function() {
                this.parentNode.style.display = 'none'
            }
        </script>
    </body>
</html>

display

display - flex

Flexbox，也就是Flexible Box Layout模块，是CSS提供的用于布局的一套新属性。这套属性包含针对容器、容器直接子元素（弹性项）的两类属性。Flexbox可以控制弹性项的这几个方面：

1. 大小，基于内容以及可用空间
2. 流动方向，水平还是垂直，正向还是反向
3. 两个轴向上的对齐与分布
4. 顺序，与源代码中的顺序无关

现在给"ul"标签添加"display: flex"属性，让该列表成为flex容器，注意：除非另有声明，否则该属性默认弹性项排列方向为正横向，即"flex-direction: row"。现在可以看到，列表内容已经是水平排列，并且根据各自的内容宽度进行了收缩。现在对主轴（即"flex-direction"属性声明的轴向）进行排列，该属性为"justify-content"且默认值为"flex-start"，现在给"ul"标签设置"justify-content: center"属性，可以发现弹性项在主轴上已经居中了。但是此时会发现由于"home"的字体比其他字体大，所以弹性项在辅轴（与主轴对应的另一方向的轴）上并没有对其，这是由于控制辅轴对齐方式的"align-items"属性默认为"stretch"即拉伸，会占满"ul"的所有高度空间，并且该行的基线是默认的。现在再给"ul"标签添加"align-items: center"属性，会发现"li"标签此时没有撑满"ul"标签的高度，并且在辅轴上是居中对齐的，如果给该属性设置"baseline"值，仅仅会在辅轴上将内容文字对齐。  以上所提到的容器属性都有多个属性值，可查阅官网。完成以上所讲的步骤即可通过测试，进入下一节的学习吧。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            nav ul {
                height: 2rem;
                list-style: none;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            nav ul li {
                border: 1px solid black;
            }
            nav ul li:first-child {
                font-size: 1.2rem;
            }
        </style>
    </head>
    <body>
    	<nav>
            <ul>
                <li>home</li>
                <li>spaceships</li>
                <li>planets</li>
                <li>stars</li>
            </ul>
        </nav>
    </body>
</html>

display - flex - 可伸缩项属性

Flexbox支持对弹性项的灵活控制。Flex的意思为可伸缩，这体现在以下三个属性中：

1. flex-basis：基础值
2. flex-grow：拉伸弹性系数，如果容器宽度减去弹性项的基础值之和之后还有剩余空间，那么就按照弹性系数比例去分配剩余空间
3. flex-shrink：缩减弹性系数，和拉伸弹性系数逻辑相反

这三个属性应用给弹性项，而不是容器。  现在首先给所有的"li"添加"flex: 1 0 0%"属性，该属性的三个值分别为flex-grow、flex-shrink和flex-basis，表示：当有剩余空间时均匀分配剩余空间、当超出容器宽度时不进行缩放、弹性项的基础值都为容器的0%。此时可以看到四个每个"li"标签的宽度都为125px，分别占据了容器的1/4。现在再单独给第一个"li"标签设置"flex-grow: 2"属性，此时又会发现所有"li"标签的宽度比值为2:1:1:1。  完成以上所讲的步骤即可通过测试，进入下一节的学习吧。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            nav {
                width: 500px;
            }
            nav ul {
                display: flex;
                list-style: none;
            }
            li {
                border: 1px solid black;
                flex: 1 0 0%;
            }
            li:nth-child(1) {
                flex-grow: 2;
            }
        </style>
    </head>
    <body>
    	 <nav>
            <ul>
                <li>home</li>
                <li>spaceships</li>
                <li>planets</li>
                <li>stars</li>
            </ul>
        </nav>
    </body>
</html>

display - flex - 标签

通过之前的学习，现在来实现一组标签，表示星球的种类。当前的"li"标签都是行内盒子，虽然看似实现了标签效果，但是每一行的宽度却没有保持一致，当进行缩放时，布局会特别的混乱。现在使用Flex布局将当前的布局方式进行优化，首先删除"li"标签的"display: inline-block"属性，给"ul"添加"display: flex"使该元素称为弹性容器。再给容器添加"flex-wrap: wrap"属性表示换行，否则所有标签会在第一行排列。此时标签已经分行排列了，但，每一行的宽度看起来依然是不同的，这时候需要通过给弹性项添加属性，通过之前讲过的"flex"属性入手。继续给所有的"li"标签添加"flex: 1 0 auto"属性，auto代表在计算剩余空间时需要减去每个标签自身的宽度而不是之前讲的0%那样忽略了自身的宽度。此时标签功能基本上是完成了，但是注意，最后一行可能因为页面的缩放导致只有一个标签却占满了一整行。那么继续给所有的"li"标签设置"max-width: 10rem"即可，此时最后一行标签虽然少但是看起来依旧很和谐。  完成以上所讲的步骤即可通过测试，进入下一节的学习吧。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                font-size: 12px;
                box-sizing: border-box;
            }
            nav ul {
                padding: 0.5rem;
                list-style: none;
                display: flex;
                flex-wrap: wrap;
            }
            nav ul li {
                margin: 0.2rem;
                flex: 1 0 auto;
                max-width: 10rem;
            }
            nav ul li a {
                position: relative;
                display: block;
                padding: 0.2rem 0.6rem;
                color: white;
                line-height: 1rem;
                background-color: black;
                border-radius: 0.2rem;
                text-decoration: none;
                text-align: center;
            }
            nav ul li a:before {
                position: absolute;
                content: '';
                width: 0;
                height: 0;
                border: 0.7rem solid transparent;
                border-right-width: 0.7rem;
                border-right-color: black;
                left: -1.2rem;
                top: 0;
            }
        </style>
    </head>
    <body>
    	<nav>
            <ul>
                <li><a href="">Fillithar</a></li>
                <li><a href="">Berzite</a></li>
                <li><a href="">Galidraan</a></li>
                <li><a href="">Gravlex Med</a></li>
                <li><a href="">Cato Neimoidia</a></li>
                <li><a href="">Coruscant</a></li>
                <li><a href="">Dantooine</a></li>
                <li><a href="">Dhandu</a></li>
                <li><a href="">Iktotchon</a></li>
                <li><a href="">Hosnian Prime</a></li>
                <li><a href="">Harkrova I</a></li>
                <li><a href="">Livno III</a></li>
                <li><a href="">Karfeddion</a></li>
                <li><a href="">Eriadu</a></li>
                <li><a href="">Jestefad</a></li>
                <li><a href="">Iridonia</a></li>
                <li><a href="">Malachor</a></li>
                <li><a href="">Gan Moradir</a></li>
                <li><a href="">Kethmandi</a></li>
                <li><a href="">Mirrin Prime</a></li>
                <li><a href="">Ezaraa</a></li>
                <li><a href="">Muunilinst</a></li>
                <li><a href="">Itapi Prime</a></li>
                <li><a href="">Nam Chorios</a></li>
            </ul>
        </nav>
    </body>
</html>

display - flex - order

使用Flexbox的order属性，可以完全摆脱项目在源码中顺序的约束。默认情况下，每个项目的order值都为0，意味着按照他们在源代码中的顺序进行排列。可以观看右边的代码效果，从设计上说，把图片放在最前面可以抓住读者的眼球，是比较好的设计方式，但是对于浏览器而言，拿到标题并且直接将标题呈现给读者的代价一定比获取一张照片并渲染出来小得多。所以可以考虑折中的方式，先渲染标题但是优先显示图片。  现在给"img"图片标签设置"order: -1"属性，此时观察效果会发现图片的排列在标题之上，其他内容的相对位置不会变，它们的order值仍然是0。order的值不一定要连续，并且正负都可以。  完成以上所讲的步骤即可通过测试，进入下一节的学习吧。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            section {
                display: flex;
                flex-direction: column;
                text-align: center;
            }
            img {
                order: -1;
            }
        </style>
    </head>
    <body>
    	<section>
            <h2>countdown</h2>
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fuploads.xuexila.com%2Fallimg%2F1912%2F1135-191202143454.jpg&refer=http%3A%2F%2Fuploads.xuexila.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639984107&t=eca951193e736a17eb96278117bcfb1f" width="100%">
            <article>The countdown to Christmas starts here.</article>
            <p><a href="#">more</a></p>
        </section>
    </body>
</html>

display - grid

Grid，即网格布局。它将页面划分为一个个网格，可以任意组合不同的形态，做出理想的布局效果。Grid布局与Flexbox布局的区别在于，Flexbox是根据轴线对弹性项进行排列，而Grid布局是将容器划分为行和列，产生单元格，然后再对单元格进行操作。  采用网格布局的区域称为容器。容器内部采用网格定位的每个子元素称为容器项，也是单元格。划分网格的线称为网格线，比如，3x3的网格有4条水平网格线和4条垂直网格线。  现在给section盒子设置"display: grid"属性，将该盒子变成一个容器。现在需要通过给该容器划分行和列来生成单元格，给容器设置"grid-template-rows: 100px"和"grid-template-columns: repeat(2, 1fr)"两条属性以生成一个Nx2的网格，且每个容器项的宽度比为1:1、第一行的高度为100px（注意：实际上行高度可以不用设置，会根据每个容器项自动撑开，但如果设置了，就要考虑清除需要多少行，当前的行值100px仅为第一行，如果需要前三行都为100px，需要设置为"grid-template-rows: 100px 100px 100px"）。repeat方法可以简化属性值的书写，为了方便表示比例关系，网格布局提供了fr关键字，该关键字和flex-grow颇为相似。实际上如果想固定大小，完全可以将单位全部设置为固定的px值。现在继续给容器添加"grid-gap: 10px"属性，该属性为"grid-row-gap"和"grid-column-gap"两个属性的简写，分别代表行间距和列间距。  进入下一节的学习吧。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            section {
                width: 500px;
                text-align: center;
                display: grid;
                grid-template-rows: 100px;
                grid-template-columns: repeat(2, 1fr);
                grid-gap: 10px;
            }
            article {
                height: 100px;
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
    	<section>
            <article>1</article>
            <article>2</article>
            <article>3</article>
            <article>4</article>
            <article>5</article>
            <article>6</article>
            <article>7</article>
            <article>8</article>
            <article>9</article>
        </section>
    </body>
</html>

display - grid - 区域

网格布局允许指定区域，一个区域由单个或多个单元格组成。根据上一节学习的内容，请将"section"设置为网格布局容器，并且生成一个3x3的网格，该网格容器项的宽度、高度都为100px。再给容器添加"grid-template-areas: 'a b c''d e f''g h i'"属性，表示3x3的网格区域划分从左到右、从上到下依次为a、b、c、d、e、f、g、h、i。现在给第一个"article"标签设置"grid-area: e"属性，此时可以看到数字1已经被移动到了最中间的区域，即区域"e"。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            section {
                text-align: center;
                display: grid;
                grid-template-rows: repeat(3, 100px);
                grid-template-columns: 100px 100px 100px;
                grid-template-areas: 'a b c''d e f''g h i'
            }
            article {
                height: 100px;
                border: 1px solid black;
            }
            article:nth-child(1) {
                grid-area: e;
            }
        </style>
    </head>
    <body>
    	<section>
            <article>1</article>
            <article>2</article>
            <article>3</article>
            <article>4</article>
            <article>5</article>
            <article>6</article>
            <article>7</article>
            <article>8</article>
            <article>9</article>
        </section>
    </body>
</html>

单列布局

单列布局

单列布局是将头部、内容区、底部在页面上垂直排列，是非常实用的一种布局方式。主要对三个区域的宽度进行统一，然后通过设置自动外边距进行居中。 现在给"header"、"section"、"footer"三个盒子统一设置"margin: 10px auto"、"width: 360px"、"border: 1px solid black"属性。此时因为内容区有内容而头部和底部没有内容所以只有内容区的高度被撑开，一般头部和底部的内容是根据自己的需求固定大小的，所以现在再给头部和底部统一设置高度，即"height: 32px"。 完成以上所讲的步骤即可通过测试，进入下一节的学习吧。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            body {
                width: 500px;
            }
            header, section, footer {
                margin: 10px auto;
                width: 360px;
                border: 1px solid black;
            }
            header, footer {
                height: 32px;
            }
        </style>
    </head>
    <body>
    	<header></header>
        <section><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></section>
        <footer></footer>
    </body>
</html>

双列布局

双列布局 - 浮动

自适应的双列布局利用浮动、外边和触发父级BFC即可实现，这种方法主要是因为BFC的高度计算会包含其内的浮动元素的高度，父盒子会被撑开。  现在给类名为"container"的父盒子添加"overflow: hidden"属性，使该父盒子成为BFC。继续给类名为"left"的盒子设置"float: left"和"width: 100px"属性，使该盒子成为浮动元素并且需要一个固定的宽度。最后再给类名为"right"的盒子设置左外边距"margin-left: 100px"属性，该属性值需要和左浮动的盒子宽度一致。此时父盒子的高度会根据左边浮动元素、右边内容区中高度较高的一方进行计算，并且右边内容区的宽度自适应，最好是根据需要，配合最大或最小宽度进行设置。  完成以上所讲的步骤即可通过测试，进入下一节的学习吧。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .container {
                border: 1px solid black;
                overflow: hidden;
            }
            .left {
                border: 1px solid black;
                width: 100px;
                float: left;
                background-color: red;
            }
            .right {
                margin-left: 100px;
                background-color: yellow;
            }
        </style>
    </head>
    <body>
    	<section class="container">
            <article class="left"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></article>
            <article class="right">123</article>
        </section>
    </body>
</html>

双列布局 - 绝对定位

通过绝对定位实现的双列布局看起来会比较僵硬，因为父盒子首先需要设置定位属性并且父盒子的高度无法被子盒子撑开，如果子盒子的高度是自适应的，那么父盒子的高度也就无法确定从而设置了，但优点是设置属性比浮动来得更直观。  现在给类名为"container"的父盒子添加"position: relative"属性，为了保证子盒子绝对定位时不会根据html元素定位。继续给类名为"left"的盒子添加"position: absolute"、"left: 0"和"width: 100px"三条属性，使该盒子定位到父盒子的最左边并且赋予宽度，但高度是根据内容自适应的。最后给类名为"right"的盒子添加"position: absolute"、"left: 100px"和"right: 0px"，因为该盒子没有给定宽度，设置"left"和"right"定位属性会使内容区保留在这个范围内，同样实现了自适应。  完成以上所讲的步骤即可通过测试，进入下一节的学习吧。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .container {
                position: relative;
                background-color: blue;
            }
            .left {
                position: absolute;
                left: 0;
                width: 100px;
                background-color: red;
                border: 1px solid black;
            }
            .right {
                position: absolute;
                left: 100px;
                right: 0px;
                background-color: yellow;
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
    	<section class="container">
            <article class="left"><br /><br /><br /><br /></article>
            <article class="right"><br /><br /><br /></article>
        </section>
    </body>
</html>

双列布局 - flex

通过Flexbox可以快速实现双列布局，主要通过"flex: 1"这条弹性项属性给内容区申请到父盒子的所有剩余空间，并且可以给弹性项设置"position"属性调整弹性项内部的子盒子细节。  现在给类名为"container"的父盒子添加"display: flex"属性，使该盒子成为弹性盒容器。继续给类名为"left"的弹性项盒子添加"width: 100px"属性。最后给类名为"right"的弹性项盒子添加"flex: 1"属性。由于弹性项盒子默认占满弹性容器盒子的所有高度，所以两个弹性项盒子的高度也是自适应。右边的内容区宽度会占满弹性容器盒子的剩余空间，所以宽度也是自适应的。  完成以上所讲的步骤即可通过测试，进入下一节的学习吧。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .container {
                display: flex;
                background-color: blue;
                border: 1px solid black;
            }
            .left {
                width: 100px;
                background-color: red;
                border: 1px solid black;
            }
            .right {
                flex: 1;
                background-color: yellow;
                border: 1px solid greenyellow;
            }
        </style>
    </head>
    <body>
    	<section class="container">
            <article class="left"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></article>
            <article class="right"></article>
        </section>
    </body>
</html>

双列布局 - grid

使用Grid网格布局实现双列布局的要点在于列数为2，且首列的宽度根据需要自行设置，第二列使用片段"fr"属性进行自适应即可。行数不需要指定，每行会根据内容高度进行自适应缩放。  现在给类名为"container"的盒子添加"display: grid"属性，使该盒子成为容器。再给该容器添加"grid-template-columns: 100px 1fr"属性，表示第一列宽度始终为100px，第二列的宽度为剩余的所有空间。此时可以看到整个容器的高度因为首列的内容被撑开了，并且右边内容区实现了自适应。  进入下一节的学习吧。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .container {
                display: grid;
                grid-template-columns: 100px 1fr;
                background-color: blue;
                border: 1px solid black;
            }
            .left {
                background-color: red;
                border: 1px solid black;
            }
            .right {
                background-color: yellow;
            }
        </style>
    </head>
    <body>
    	<section class="container">
            <article class="left"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></article>
            <article class="right"></article>
        </section>
    </body>
</html>

三列布局

三列布局 - 浮动

**使用浮动实现三列布局的注意点是浮动元素需要写在内容元素之前，否则布局是混乱的。**这种方式实现三列布局是优点是简单、兼容性好，但缺点是需要清除浮动，否则父盒子的高度无法撑开，可能会导致其他页面元素的布局混乱。  首先给类名为"container"的盒子添加"overflow: hidden"属性，该属性可以使盒子成为BFC，处理浮动元素父盒子高度塌陷的问题。再给类名为"left"的盒子添加"float: left"和"width: 100px"两条属性，首先往左浮动，宽度这里设置100px。继续给类名为"right"的盒子添加"float: right"和"width: 100px"两条属性，往右浮动。最后给类名为"center"的盒子设置外边距"margin: 0px 100px"，该属性上下外边距为0px，左右外边距为两边浮动元素的宽度100px，这样保证了中间的内容区域不会被两边的浮动元素覆盖住。注意，HTML文档中两个浮动元素的顺序在内容元素之前。  完成以上所讲的步骤即可通过测试，进入下一节的学习吧。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .container {
                overflow: hidden;
                border: 1px solid black;
            }
            .left {
                float: left;
                width: 100px;
                background-color: red;
                border: 1px solid black;
            }
            .right {
                float: right;
                width: 100px;
                background-color: brown;
                border: 1px solid black;
            }
            .center {
                background-color: yellow;
                margin: 0 100px;
            }
        </style>
    </head>
    <body>
    	<section class="container">
            <article class="left"><br /><br /><br /></article>
            <article class="right"><br /><br /><br /></article>
            <article class="center">1</article>
        </section>
    </body>
</html>

三列布局 - 绝对定位

使用绝对定位实现三列布局，实际上是和之前使用绝对定位实现双列布局同一个原理。主要思路是，两边通过绝对定位定位到父盒子的左、右边框上，再根据实际的需要设置两边盒子的宽度，高度是根据内容自适应的。中间内容区通过定位属性左、右自适应宽度。  现在给类名为"container"的盒子添加"position: relative"，该属性使子元素可以相对该盒子做定位。继续给类名为"left"的盒子添加"position: absolute"、"left: 0px"和"width: 100px"三条属性。继续给类名为"right"的盒子添加"position: absolute"、"right: 0px"和"width: 100px"三条属性。最后给类名为"center"的盒子添加"position: absolute"、"left: 100px"和"right: 100px"三条属性，表示自适应区域为距离左边100px至距离右边100px。此时可以看到三个盒子的高度不同，根据内容高度撑开，实际中可以按需设置高度值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .container {
                position: relative;
            }
            .left {
                position: absolute;
                left: 0;
                width: 100px;
                background-color: red;
                border: 1px solid black;
            }
            .center {
                position: absolute;
                left: 100px;
                right: 100px;
                background-color: yellow;
                border: 1px solid black;
            }
            .right {                
                position: absolute;
                right: 0;
                width: 100px;
                background-color: blue;
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
    	<section class="container">
            <article class="left"><br /><br /></article>
            <article class="center"><br /><br /><br /></article>
            <article class="right"><br /><br /><br /><br /></article>
        </section>
    </body>
</html>

三列布局 - flex

相比于浮动和定位，使用Flexbox布局实现三列布局要更好，因为弹性容器的高度会根据最高的弹性项进行修正，不会出现明显的台阶式效果。Flexbox实现三列布局的特点为简单、使用、强大，核心思路为设置中间内容盒子的"flex: 1"属性，让中间内容区的宽度自适应，独自占据弹性容器的全部剩余空间。  现在给类名为"container"的盒子添加"display: flex"属性，使该盒子成为弹性容器。再给类名为"left"和"right"的盒子添加"width: 100px"属性，最后给类名为"center"的盒子添加"flex: 1"属性，使该盒子占据容器盒子的全部剩余空间。此时会发现即使三个子盒子的内容高度不同，但容器和子会根据最高的子元素进行修正，并且没有出现浮动和定位中的台阶式效果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .container {
                display: flex;
            }
            .left {
                background-color: red;
                width: 100px;
                border: 1px solid black;
            }
            .center {
                background-color: yellow;
                flex: 1;
                border: 1px solid black;
            }
            .right {
                width: 100px;
                background-color: blue;
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
    	<section class="container">
            <article class="left"><br /><br /></article>
            <article class="center"><br /><br /><br /></article>
            <article class="right"><br /><br /><br /><br /></article>
        </section>
    </body>
</html>

三列布局 - grid

使用grid网格布局实现三列布局，和之前所讲的gird实现双列布局是同样的思想，只是把列数变为了3，高度依然不设置，通过容器项的内容高度自适应撑开整体高度。  现在给类名为"container"的盒子添加"display: grid"属性，使该盒子成为网格布局容器。再给该容器添加"grid-template-columns: 100px auto 100px"属性，表示该容器一共有3列，且宽度分别为100px、自适应、100px。不需要设置行属性，当有多个元素时容器会自适应的往下顺次排列。此时观察容器的高度，是根据容器项中高度最高的那一项决定的，也不会产生台阶式效果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
             * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .container {
                display: grid;
                grid-template-columns: 100px auto 100px;
            }
            .left {
                background-color: red;
                border: 1px solid black;
            }
            .center {
                background-color: yellow;
                border: 1px solid black;
            }
            .right {
                background-color: blue;
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
    	<section class="container">
            <article class="left"><br /><br /><br /></article>
            <article class="center"><br /><br /><br /></article>
            <article class="right"><br /><br /><br /></article>
        </section>
    </body>
</html>

三列布局 - 圣杯布局

不像Flexbox或Grid布局可以控制元素显示的次序，圣杯布局是通过浮动元素和外边距属性实现三列布局，但最重要的一点是，在文档中需要将优先渲染的内容写在最前方，但显示时看起来却好像是按照显示次序书写的一样。  首先给类名为"container"的盒子添加"overflow: hidden"和"padding: 0px 100px"属性，以为了防止容器盒子高度塌陷和给之后的左、右浮动元素预留位置。现在继续给类名为"left"的盒子添加以下属性：

1. "float: left"，浮动，保证之后的"margin-left"属性可以将自身拉到上一行
2. "width: 100px"，固定宽度
3. "margin-left: -100%"，该属性可以将元素向左移动属性值的单位，100%相对于父容器计算
4. "position: relative"，相对定位，需要将自身再向左移动自身的宽度，进入容器的"padding-left"区域
5. "left: -100px"，自身的宽度，刚好进入容器的"padding-left"区域

到这里圣杯布局中最核心的步骤和思想就完了。之后继续给类名为"right"的盒子添加"float: left"、"width: 100px"、"margin-left: -100px"、"position: relative"和"left 100px"属性，该右盒子的思想和左盒子一样，即，将右盒子向上拉一行并且再向右移动自身宽度进入"padding-right"区。最后再给类名为"center"的盒子添加"float: left"和"width: 100%"即可。此时中间内容区的宽度是自适应的，并且因为有内边距属性所以内容不会被两边的浮动盒子遮挡住。  圣杯布局需要注意的是，当中间内容区域的宽度小于左、右盒子的宽度时，整个布局就会混乱，所以为了避免这种情况，再给容器盒子添加"min-width: 100px"属性，保证圣杯布局正确、有效。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            .container {
                overflow: hidden;
                padding: 0 100px;
                min-width: 100px;
                /* background-color: red; */
                border: 1px solid black;
            }
            .left {
                float: left;
                width: 100px;
                margin-left: -100%;
                position: relative;
                left: -100px;
                background-color: greenyellow;
            }
            .center {
                float: left;
                width: 100%;
                background-color: darkorange;
            }
            .right {
                float: left;
                width: 100px;
                margin-left: -100px;
                position: relative;
                left: 100px;
                background-color: darkgreen;
            }
        </style>
    </head>
    <body>
    	<section class="container">
            <article class="center"><br /><br /><br /></article>
            <article class="left"><br /><br /><br /></article>
            <article class="right"><br /><br /><br /></article>
        </section>
    </body>
</html>

三列布局 - 双飞翼布局

双飞翼布局是在圣杯布局上做了优化，解决了圣杯布局中布局发生错乱的问题。核心思路是在圣杯布局的基础上，再在内容区添加一层新的盒子，该盒子通过外边距将内容与两边的浮动元素分隔开，实际上中心盒子是没有"padding"属性的。 首先给类名为"container"的盒子添加"overflow: hidden"属性，解决子浮动元素导致的高度塌陷问题。然后继续给类名为"left"的盒子添加"float: left"、"margin-left: -100%"和"width: 100px"。再给类名为"center"的盒子添加"float: left"和"width: 100%"属性，该盒子并没有像圣杯布局时添加"padding"属性那样。继续给类名为"right"的盒子添加"float: left"、"width: 100px"和"margin-left: -100px"。最后给类名为"main"的盒子添加"margin: 0px 100px"，该属性为双飞翼布局的核心点，使用外边距将内容封锁在两边浮动元素的中间。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            .container {
                overflow: hidden;
                border: 1px solid black;
            }
            .left {
                float: left;
                width: 100px;
                margin-left: -100%;
                background-color: greenyellow;
            }
            .center {
                float: left;
                width: 100%;
            }
            .main {
                margin: 0 100px;
                background-color: darkorange;
            }
            .right {
                float: left;
                width: 100px;
                margin-left: -100px;
                background-color: darkgreen;
            }
        </style>
    </head>
    <body>
    	<section class="container">
            <article class="center"><main class="main"><br /><br /><br /></main></article>
            <article class="left"><br /><br /><br /></article>
            <article class="right"><br /><br /><br /></article>
        </section>
    </body>
</html>