精华内容
下载资源
问答
  • HTML 知识点总结

    2018-01-02 18:18:20
    HTML 知识点总结 HTML 知识点总结 HTML 知识点总结 HTML 知识点总结
  • HTML知识点总结

    2021-03-14 14:00:45
    HTML知识点总结 知识点目录 html简介 声明文档类型 中文网页编码声明 超链接 html简介 1.html是超文本标记语言。 注意:不是编程语言。 2.利用标记标签来描述网页。 声明文档类型 1.!DOCTYPE 是一个文档类型标记...

    HTML知识点总结

    HTML简介
    声明文档类型
    标签
    HTML主要常用标签
    HTML属性
    中文编码声明
    超链接
    HTML注释
    文本格式设置
    HTML head
    HTML 表格
    HTML 列表
    HTML表单

    HTML简介

    1.html是一种超文本标记语言,用来创建网页。
    注意:不是编程语言。
    2.利用标记标签来描述网页。
    3.html中不支持使用空格、回车、制表符,它们会被解析成一个空白字符。

    声明文档类型

    1.!DOCTYPE 是一个文档类型标记(DOCTYPE是document type的缩写),用此来说明html是哪个版本。
    2.DOCTYPE使用时不分大小写,无严格的规范。
    3.<!DOCTYPE>没有结束标签。

    中文网页编码声明

    再很多浏览器中,直接输出中文一般会出现乱码的情况,所以此时需要在头部把编码设置成UTF-8,字符编码的设置实例:<meta charset="utf-8">

    标签

    1.标签<>由两个尖括号包含元素。
    2. 标签总是成对出现,一个是开始标签,一个是结束标签。
    3. 格式:<标签>内容</标签>

    HTML主要常用标签

    • <html>:用来定义整个html文档。

    • <title>:这个元素在头部中是必须的,用来设置文档的标题。一个文档中只能有一个<title>。浏览器会以特殊的方式来使用标题,并且通常把它放置在浏览器窗口的标题栏或状态栏上。

    • <head>:包含文档的元数据。

    • <body>:在该标签中的文档内容在网页中是可见的,用来定义文档的主体。

    • <h1><h6>:该标签用来定义标题的。实例:<h1>定义标题</h1>

    • <p>:用此定义段落。

    • <img>:用此来定义图像。

    • <br>:表示换行,开始新的一行。

    • <script>:用来加载脚本文件。

    • <div>:分区,分块.

    HTML属性

    • 属性是html元素提供的附加信息。
    • 属性一般描述开始标签。
    • 属性值应该始终被包括在引号内。
    • 属性值总是以名称/值对的形式出现,比如name=“cc”.

    超链接

    • 利用<a>元素来创建超链接。
    • <href>:用来指定a元素引用的资源的URL。
    • 格式:<a href="url">链接</a>
    • 以图片超链接为例:
      1.当图片较多时,采用编码base64来提高加载速度,转换完成后,将文本牵引进html文档中,文本会被浏览器解读为图片。
      2.图片途径标签:<src>
      3.<alt>:获取图片出现问题时显示的文字。
      实例:
    <a href="https://www.runoob.com/html/html-paragraphs.html">
       <img src="xxx.gif",alt="lalalla"></a>
    

    HTML注释

    1.格式:<!内容 >
    2.在注释中的内容不会显示在浏览器界面中。
    3.例子:

    <!--单行注释-->
    <!--
        多行注释
        多行注释
        多行注释
    -->
    

    文本格式设置

    1.<b>:用来设置粗体。
    2.<em>:用来着重文字。
    3.<del>:用来删除文本.。
    4.<small>:用来定义小号字。
    5.<strong>:用来加重语气
    6.<sub>:用来定义下标字
    7.<sup>:用来定义上标字
    8.<ins>:用来定义插入字
    9.<i>:用来设置斜体字

    HTML head

    1. <head>: 定义文档的信息。

    2. <title>:定义文档的标题。

    3. <link>:定义一个文档和外部资源之间的关系。
      例子:

       <link rel="stylesheet" type="text/css" href="style.css">
      
    4. <meta>:用来定义文档中的元数据。
      例子:(为搜索定义关键词)

        <meta  name="keyword" content="HTML,CSS,XML,JavaScript">
      
    5. <style>:定义HTML文档的样式文件.

    HTML表格

    1.标签:

    • <table>:表格.
      属性:border表示边缘宽度,width表示表格宽度.

    • <tr>:表示行.

    • <td>:普通单元格.

    • <th>:表头单元格(加粗显示)

    • <caption>:表格标题,居中显示.

    2.例子:

    <table>
        <tr>
          <th>姓名</th>
          <th>数学成绩</th>
          <th>语文成绩</th>
        </tr>
        <tr>
          <td>苏苏</td>
          <td>98</td>
          <td>96</td>
        </tr>
        <tr>
          <td>芽芽</td>
          <td>100</td>
          <td>100</td>
        </tr>
      </table>
    

    效果:

    姓名 数学成绩 语文成绩
    苏苏 98 96
    芽芽 100 100

    HTML 列表

    1.列表主要有有序列表和无序列表
    2.无序列表说明:

    • <ul>:标记符号.
    • <li>:用来定义列表项序列.
    • type属性可以指定列表项目符号的样式,符号样式如下:
      (1)dise:实心原点
      (2)circlr:空心原点.
      (3)square:实心方块.

    -例子:

    <ul type="dise">
      <li>1111</li>
      <li>222</li>
      <li>33</li>
    </ul>
    

    -效果:

    • 1111
    • 222
    • 33
    3.有序列表说明:
      1. :标记符号.
    • type属性可以指定列表项目编号的样式,符号样式如下:
      (1)1:阿拉伯数字
      (2)a:小写英文字母
      (3)A:大写英文字母
      (4)i:小写罗马数字.
      (5)l:大写罗马数字
      -例子:
      <ol type="1">
      <li>数学</li>
      <li>语文</li>
      <li>英语</li>
      </ol>
    
    • 效果:
      1. 数学
      2. 语文
      3. 英语

    HTML表单

    表单元素使用:
    1.文本区域:textarea
    2.列表框:select
    3. 文本输入框:input type="text"
    4. 单选输入框:input type="radio"
    5.复选输入框:input type="checkbox"
    6.重置按钮;input type="reset" value="重置”
    7. 提交按钮:input type="submit" value="提交"
    8.密码域:input type="password" name="text" value=" "

    展开全文
  • html知识点总结

    2019-04-19 22:27:13
    html知识点总结 一、盒子模型 盒子中的区域 一个盒子中主要的属性就5个:width、height、padding、border、margin。如下: width和height:内容的宽度、高度(不是盒子的宽度、高度)。 padding:内边距。 ...

    html知识点总结


    一、盒子模型

    盒子中的区域
    一个盒子中主要的属性就5个:width、height、padding、border、margin。如下:

    • width和height:内容的宽度、高度(不是盒子的宽度、高度)。
    • padding:内边距。
    • border:边框。
    • margin:外边距。

    盒子模型的示意图:
    在这里插入图片描述
    代码演示:
    在这里插入图片描述
    上面这个盒子,width:200px; height:200px; 但是真实占有的宽高是302*302。 这是因为还要加上padding、border。
    在这里插入图片描述
    在这里插入图片描述

    	box-sizing:content-box  //标准盒子模型
    	box-sizing:border-box   //怪异盒子模型
    	<!DOCTYPE html>         //如果不写,使用默认方式解析文档.ie中默认怪异模型
    

    认识padding

    padding就是内边距。padding的区域有背景颜色,css2.1前提下,并且背景颜色一定和内容区域的相同。也就是说,background-color将填充所有border以内的区域

    padding写法有两种,第一种写小属性;第二种写综合属性,用空格隔开。

    小属性的写法:

        padding-top: 30px;
        padding-right: 20px;
        padding-bottom: 40px;
        padding-left: 100px;
    

    综合属性的写法:(上、右、下、左)(顺时针方向,用空格隔开。margin的道理也是一样的)

    padding:30px 20px 40px 100px;
    

    如果写了四个值,则顺序为:上、右、下、左。

    如果只写了三个值,则顺序为:上、右、下。

    如果只写了两个值,比如说:

    padding: 30px 40px;
    

    则顺序等价于:30px 40px 30px 40px;

    要懂得,用小属性层叠大属性。比如:

    padding: 20px;
    padding-left: 30px;
    

    二、position定位属性

    CSS position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left 属性则决定了该元素的最终位置。
    normal flow:

    • normal flow直译为常规流、正常流,国内不知何原因大多译为文档流;
    • 窗体自上而下分成一行一行,并在每行中按从左至右的顺序排放元素;
    • 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端,若当前行容不下,则另起新行再浮动;
    • 内联元素也不会独占一行,几乎所有元素(包括块级,内联和列表元素)均可生成子行,用于摆放子元素;
    • 有三种情况将使得元素脱离normal flow而存在,分别是 float,absolute ,fixed,但是在IE6中浮动元素也存在于normal flow中。

    1、position: static
    MDN的描述:

    该关键字指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置。此时 top、right、bottom、left 属性无效。

    个人补充:static是position的默认值。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS-position-static</title>
        <link rel="stylesheet" href="https://cdn.bootcss.com/normalize/8.0.0/normalize.css">
        <style>
            .container{
                background-color: #868686;
                width: 100%;
                height: 300px;
            }
            .content{
                background-color: yellow;
                width: 100px;
                height: 100px;
                position: static;
                left: 10px;/* 这个left没有起作用 */
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="content">    
            </div>
        </div>
    </body>
    </html>
    

    在这里插入图片描述
    对 content 的 position 设定 static 后,left就失效了,而元素(content)就以正常的 normal flow 形式呈现。

    2、position: relative
    MDN的描述:

    该关键字下,元素先放置在未添加定位时的位置,再在不改变页面布局的前提下调整元素位置(因此会在此元素未添加定位时所在位置留下空白)。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。

    个人理解:相对于normal flow中的原位置来定位。

    <!DOCTYPE html>
    <html lang="en">
    <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>CSS-position-relative</title>  
        <link rel="stylesheet" href="https://cdn.bootcss.com/normalize/8.0.0/normalize.css">
        <style>
                .container{
                    background-color: #868686;
                    width: 100%;
                    height: 300px;
                }
                .content_0{
                    background-color: yellow;
                    width: 100px;
                    height: 100px;               
                }
                .content_1{
                    background-color: red;
                    width: 100px;
                    height: 100px;
                    position: relative;/* 这里使用了relative  */            
                }
                .content_2{
                    background-color: black;
                    width: 100px;
                    height: 100px;               
                }
            </style>
        </head>
        <body>
            <div class="container">
                <div class="content_0">    
                </div>
                <div class="content_1">    
                </div>
                <div class="content_2">    
                </div>
            </div>   
    </body>
    </html>
    

    在这里插入图片描述
    这是没有设置left、top等属性时,正常出现在normal flow中的位置。

    接着添加left、top:

    .content_1{
          background-color: red;
          width: 100px;
          height: 100px;
          position: relative;/* 这里使用了relative  */
          left: 20px;/* 这里设置了left和top */
          top: 20px;            
    }
    

    在这里插入图片描述
    可以看到,元素(content_1)的位置相对于其原位置(normal flow中的正常位置)进行了移动。

    3、position: absolute
    MDN的描述

    不为元素预留空间,通过指定元素相对于最近的非 static 定位祖先元素的偏移,来确定元素位置。绝对定位的元素可以设置外边距(margin),且不会与其他边距合并。

    个人理解:生成绝对定位的元素,其相对于 static 定位以外的第一个父元素进行定位,会脱离normal flow。注意:是除了static外。

    <!DOCTYPE html>
    <html lang="en">
    <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>CSS-position-static</title>
        <link rel="stylesheet" href="https://cdn.bootcss.com/normalize/8.0.0/normalize.css">
        <style>
            .container{
                background-color: #868686;
                width: 100%;
                height: 300px;
                margin-top: 50px;
            }
            .content{
                background-color: red;
                width: 100px;
                height: 100px;
                position: absolute;
                top: 10px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="content">    
            </div>
        </div>
    </body>
    </html>
    

    在这里插入图片描述
    因为 content 的父元素 container 没有设置 position,默认为 static,所以找到的第一个父元素是 body(),可以看成是元素(content)相对于 body 向下移动10px。

    4、position: fixed
    MDN的描述

    不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时,元素会出现在的每页的固定位置。fixed属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时,容器由视口改为该祖先。

    个人理解:fixed相对于window固定,滚动浏览器窗口并不会使其移动,会脱离normal flow。

    <!DOCTYPE html>
    <html lang="en">
    <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>CSS-position-static</title>
        <link rel="stylesheet" href="https://cdn.bootcss.com/normalize/8.0.0/normalize.css">
        <style>
            .container{
                background-color: #868686;
                width: 100%;
                height: 1000px;
            }
            .content{
                background-color: yellow;
                width: 100px;
                height: 100px;
                position: fixed;/* 这里使用了fixed */
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="content">    
            </div>
        </div>
    </body>
    </html>
    

    5、position: sticky
    MDN的描述

    盒位置根据正常流计算(这称为正常流动中的位置),然后相对于该元素在流中的 flow root(BFC)和 containing block(最近的块级祖先元素)定位。在所有情况下(即便被定位元素为 table时),该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时,后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky对 table元素的效果与 position: relative 相同。

    因为各大浏览器对于sticky的兼容问题,而且JS也可以实现这个功能,在这里就不进行深入了,了解一下就好。

    6、position: inherit
    w3school.com的 描述

    规定应该从父元素继承 position 属性的值。

    inherit 继承父元素,这个用得不多,所以也不继续深入了。


    三、css布局方式

    1、table 布局是最简单的布局方式了,下面我们来看一个简单的例子

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS 布局</title>
    </head>
    <style>
    .container{
        height:200px;
        width: 200px;
    }
    .left{
        background-color: red
    }
    .right{
        background-color: green
    }
    </style>
    <body>
        <table class=container>
            <tbody>
                <tr>
                    <td class=left></td>
                    <td class=right></td>
                </tr>
            </tbody>
        </table>
    </body>
    </html>
    

    在这里插入图片描述
    table 的特性决定了它非常适合用来做布局,并且表格中的内容可以自动居中,这是之前用的特别多的一种布局方式。而且也加入了 display:table;dispaly:table-cell 来支持 teble 布局。用法如下:

    <style>
    .table{
        display: table
    }
    .left{
        display: table-cell;
    }
    .right{
        display: table-cell
    }
    </style>
    
    <div class=table>
        <div class=left></div>
        <div class=right></div>
    </div>
    

    2、display和position属性
    display 有如下几个值:
    block(元素表现为块级元素,有固定宽高,独占一行)
    inline(元素表现为行内元素,不能设置宽高)
    inline-block (对外表现为行内元素,对内表现为块级元素)

    position 有如下几个值:
    static(默认情况,存在文档流当中)
    relative(根据元素本身原来所应该处的位置偏移,不会改变布局的计算)
    absolute(绝对定位,脱离文档流,不会对别的元素造成影响,相对的是父级最近的 relative 或者 absolute 定位元素)
    fixed(绝对定位,脱离文档流,相对于的是屏幕,就是那些浮动的广告那样,怎么拉都固定在同一个位置,而 absolute 元素离开屏幕就看不见了)
    position 的层叠是按顺序层叠的,不过可以通过设置 z-index 来改变层叠顺序,只有 relative,absolute,fixed 可以设置 z-index。

    3、flexbox布局

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS 布局</title>
    </head>
    <style>
    .container{
        height:200px;
        width: 200px;
        display: flex
    }
    .left{
        background-color: red; 
        flex: 1;
    }
    .middle{
        background-color: yellow; 
        flex: 1;    
    }
    .right{
        background-color: green;
        flex: 1;
    }
    </style>
    <body>
        <div class=container>
            <div class=left></div>
            <div class=middle></div>
            <div class=right></div>
        </div>
    </body>
    </html>
    

    在这里插入图片描述
    有时我们可能需要两边定宽,中间自适应,那么可以这样写:

    	.left{
    	    background-color: red; 
    	    width: 20px;
    	}
    	.middle{
    	    background-color: yellow; 
    	    flex: 1;    
    	}
    	.right{
    	    background-color: green;
    	    width: 20px;
    	}
    

    4、float布局
    首先我们要知道,css中的块级元素在页面中是独占一行的,自上而下排列,也就是我们所说的流,通常我们称之为标准流,在这里我以div为例,div是块级元素,如下图。

    在这里插入图片描述
    可很清楚的看得到,div是独自占用一行的,div2和div3是不会排在div1后面,这是在标准流中的理论,但是,有些时候,我们的需求不仅仅是这样,我们想着如何在一行中显示多个div元素,所以,标准流已经不能满足我们的需求,这个时候我们就需要用到浮动,我们这样理解,浮动就是让这个div元素脱离标准流,漂浮在标准流的上面。现在,我给div2加上一个向左的浮动,给个fload:left;然后来看看会发生什么,看图吧,上效果低千言万语!

    在这里插入图片描述
    如图可以看出,黄色的div不见了,其实它并不是不见了,而是跑到了绿色盒子的下面,这个时候我们就要想到了,因为我们给了div2向左浮动,div2已经脱离了标准流,相当于它已经和黄色盒子、红色盒子不在一个层次上,所以,黄色盒子就会顶上去跑到绿色盒子的下面,占据着绿色盒子的位置,就是我们现在看到的效果。好,理解了上面的,让我们接着来,现在我给黄色盒子和绿色盒子都加上左浮动,再看看效果:
    在这里插入图片描述

    现在我们看到div2和div3都脱离的标准流,此时,div3发现div2也是浮动的,所以div3就会跟随着div2之后,而div2发现上边的元素div1是标准流中的元素,因此div2的相对垂直位置不会改变,顶部仍然和div1元素的底部对齐,由于是左浮动,所以,左边的div2在最左边。
    接下来我们来看看不同的:
    如果我把div2和div3都设置成右浮动的话,看图如下:
    在这里插入图片描述

    现在我们可以看到,div2和div3都漂浮到了最右边。但是有一点我们可以发现,因为是向右浮动,右边是最前,所以div2会第一个向右浮动,div3随着紧跟div后面向右浮动,这个时候就很容易的理解了,由于div1是在标准流上,它是独自占用一行的,所以div2和div3不会跑到上面去。

    为了方便理解,让我们再看一个例子,如图:

    在这里插入图片描述
    现在我有四个div,现在他们分别没有浮动,都在标准流里,每个div独占一行,现在我给div2和div4分别加一个左浮动,然后给div3增加50px的宽度,便于理解,来看看效果:

    在这里插入图片描述
    现在我们可以很好的理解上面的效果了,div2和div4都是左浮动的,先来理解div2 ,div2由于有左浮动,脱离了标准流,它发现div1是标准流里的元素,所了垂直位置不变,然后,div3发现div2是浮动的,它和我不在一个流中了,所以它的位置就空了,所以div3就顶了上去,现在来理解div4,div4也是向左浮动的,首先它看到div3向上顶了上去,所以div4也就跟着顶上,然而它是浮动的,但是它发现div3是标准流中的元素,所以它的垂直位置也不会有变化,如果没有div3的话,它的位置会紧跟div2的后面向左浮动的。
    好了,只要理解了上面的东西,大概的浮动问题基本都可以解决了,不管页面多复杂,我们的初衷就是想让多个div或者是多个li标签在一行中显示,便于我们的布局需求,然而,满足我们的需求了,就会带来一些影响,就是浮动带来的影响,所以,我们在用到它的时候就要去解决浮动所带来的影响,也就是传说中的清除浮动。
    首先,让我们来看看浮动会带来什么影响:
    第一种:现在我有三个div,都属于标准流中,独占一行,如图所示:
    在这里插入图片描述
    然而,现在我的需求变了,我想让div1的右边是div2也就是让它们两个在同一行,然而div3的位置还是在下面,这个时候我们要是用到浮动了,给div1和div2添加一个向左浮动,就会出现问题,如图所示:
    在这里插入图片描述
    问题就是div3发现它前面的两个div都脱离了标准流了,那也就是说它上面没有东西了,那我是不是应该顶上去,然而,这并不是我们想要的效果对吧,所以,现在我们就需要清除浮动了。清除浮动有三种种方法,在这里我先说第一种:
    隔墙法,也就是在需要清除浮动的元素前面添加一个空的div,因为它没有浏览器默认样式,没有特殊功能,而且一般不会被css样式化,所以这种方法也是比较常见和常用的方法。
    现在,也就是在div3前面添加一个空的div,给这个div添加一个css属性,clear:both; 代码如下:

    .clearfix{
        clear: both;
    }
    </style>
    <body>
      <div class="box1">div1</div>
      <div class="box2">div2</div>
      <div class="clearfix"></div>
      <div class="box3">div3</div>
    </body>
    

    这样的话就起到了清除浮动的效果,也就是让div3待在浮动元素的下面。效果如图:
    在这里插入图片描述
    现在我们来看看浮动给我带来的第二种影响:
    现在看看我的HTML是怎么写的:

    <style>
        .box{
            background-color: yellow;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: green;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
    <body>
    <div class="box">
        <div class="box1">div1</div>
        <div class="box2">div2</div>
    </div>
    </body>
    

    在这里插入图片描述
    大家注意,现在我是没有给外面的div高度的宽度的,我只是给了它的背景颜色是黄色,这种情况很容易理解嘛,因为它的子元素把它撑开了嘛,那现在我的需求变了,我想让div1和div2在同一行排列,那么,现在我就给div1和div2添加一个向左浮动,来看看会有什么效果:
    在这里插入图片描述
    注意了,现在div1和div2都有了向左浮动,脱离了标准流,我们发现,原本外面包裹的div不见了,不理解的人这时候就很纳闷了,可能你在用的时候不会注意到,也有可能当时需求不一样,所以不能注意到这点,它是怎么回事呢,因为div1和div2都脱离了标准流,所以外面包裹的div没有支撑的东西, 也就是所谓的高度塌陷,那么,我们并不想让它呈现出这种效果,所以这个时候就要清楚浮动了,这里我就说第二种清楚浮动的方法,overflow方法,在父元素上设置overflow这个属性,如果父元素的这个属性设置为auto或者是hidden,父元素就会扩展包含浮动,这个方法有着比较好的语义性,因为它不需要额外的元素,但是,要记住一点,overflow属性不是为了清除浮动而定义的,要小心不要覆盖住内容或者触发了不需要的滚动条。
    现在我就给外面的div添加overflow:hidden,或者是auto,
    代码如下:

    <style>
        .box{
            background-color: yellow;
             overflow:atuo;     //或者是hidden
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: green;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
    <body>
    <div class="box">
        <div class="box1">div1</div>
        <div class="box2">div2</div>
    </div>
    </body>
    

    在这里插入图片描述
    现在外面的div是不是又出来了。
    不同的情况就需要不同的浮动清除办法,现在来说说第三种清除浮动的方法:
    就是利用伪类元素来清除有浮动的标签,也就定义一个公共的类clearfix,给这个类添加css属性,在里面进行清除浮动的操作,光说没用,直接看代码吧:
    复制代码
    .clearfix:after{
    content:"";
    display:table;
    height:0;
    visibility:both;
    clear:both;
    }

    .clearfix{
    zoom:1; / IE/7/6*/
    }
    复制代码
    这里把它写成公共的样式,只要哪里需要清除浮动,就在哪里添加一个清除浮动的类,比如上面的例子,我就给外面包着的div添加clearfix这个类,可以达到和上面同样的效果。这种方式这样理解,就是利用伪类元素,也就是在有浮动的标签前面添加一个块级元素,来达到效果。
    代码如下:

    <style>
    .clearfix:after{
        content:"";
        display:table;
        height:0;
        visibility:both;
        clear:both;
    }
    
    .clearfix{
    *zoom:1;    /* IE/7/6*/
    }
    
    </style> 
    
    <body>
    <div class="box clearfix">
        <div class="box1">div1</div>
        <div class="box2">div2</div>
    </div>
    </body>
    

    四、两栏布局

    在这里插入图片描述
    法一:左侧float:left;右侧margin-left;
    html

    	<div class="left">left</div>
    	<div class="right">right</div>
    

    css

    	body,div{padding: 0 ;margin:0;}
    	.left,.right{height: 200px;}
    	.left{float: left;width: 200px;background-color:skyblue;}
    	.right{margin-left: 200px; background-color: greenyellow;}
    

    因为块级元素有流体特性,即默认会填充满外部容器,所以只需要设置margin,不需要设置width就可以让content填满剩余的部分。

    法二:左侧float:left; 右侧overflow:hidden;
    html

    	<div class="left">left</div>
    	<div class="right">right</div>
    

    css

    	body,div{padding: 0 ;margin:0;}
    	.left,.right{height: 200px;}
    	.left{float: left;width: 200px;background-color:skyblue;}
    	.right{overflow:hidden; background-color: greenyellow;}  //由于bfc清除了浮动的影响,所以会紧跟在浮动元素后面,不会	    被覆盖
    

    右侧设置的overflow:hidden会触发块级格式化上下文(BFC)。
    具有BFC特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响外面的元素,并且BFC具有普通元素没有特性:如下边距不发生折叠;可以清除浮动;可以阻止元素被覆盖。
    正因为有了这些特性,所以右边可以用触发BFC的元素来清除左边浮动的影响。

    触发了BFC的元素仍然保持流体特性,也就是说BFC元素虽然不与浮动交集,自动退避浮动元素宽度的距离,但本身作为普通元素的流体特性依然存在,反映在布局上就是自动填满除去浮动内容以外的剩余空间。

    触发BFC的方法:

    body根元素
    浮动元素(除了float:none)
    定位的元素(absolute、fixed)
    display ( inline-block、table-cells、flex )
    overflow ( hidden、auto、scroll )
    注意 :如果是右边宽度固定,左边宽度自适应,那么html结构应该调整为.right的div写在.left的div上方,如果right写在下方,.left元素不会脱离标准文档流,那么.right会自成一行,达不到想要的效果。

    法三:利用绝对定位
    html

    	<div class="wrap">
    		<div class="left">left</div>
    		<div class="right">right</div>
    	</div>
    

    css

    .wrap{position : relative; }
    .left{ width: 200px;height: 200px; }
    .right{ position: absolute; top: 0; left: 200px; right: 0;height: 200px;}
    //通过设置right:0;来限制右边块级元素的宽度
    

    法四:利用弹性布局
    html

    	<div class="wrap">
    		<div class="left">left</div>
    		<div class="right">right</div>
    	</div>
    

    css

        body,div{padding: 0 ;margin:0;}
    	.wrap{display: flex;}
    	.left,.right{height: 200px;}
    	.left{width: 200px;background-color:skyblue;}
    	.right{flex: 1; background-color: greenyellow;}
    

    但好像实际的应用中,并不喜欢弹性布局


    圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局。

    实现效果: 左右栏定宽,中间栏自适应

    在这里插入图片描述
    1、绝对定位布局:position + margin
    html

        <div class="container">
            <div class="left">Left</div>
            <div class="right">Right</div>
            <div class="main">Main</div>
        </div>
    

    css

         body,html{
            height: 100%;
            padding: 0;
            margin: 0;
            overflow: hidden;
        }
        /*左右进行绝对定位*/
        .left,.right{
            position: absolute;
            height:100%;  
            top: 0;
            background: #ff69b4;
        }
        .left{
            left: 0;
            width: 100px;
        }
        .right{
            right: 0;
            width: 200px;
        }
        /*中间用margin空出左右元素所占的空间*/
        .main{
            height:100%; 
            margin: 0 200px 0 100px;
            background: #659;
        }
    

    2、浮动布局: float + margin
    html结构:

        <div class="container">
            <div class="left">Left</div>
            <div class="right">Right</div>
            <div class="main">Main</div>
        </div>
    

    css样式:

        body,html{
            height: 100%;
            padding:0;
            margin: 0;
        }
        /*左边栏左浮动*/
        .left{
            float:left;
            height:100%;
            width:100px;
            background:#ff69b4;
        }
        /*中间栏自适应*/
        .main{
            height:100%;
            margin:0 200px 0 100px;
            background: #659;
        }
        /*右边栏右浮动*/
        .right{
            float:right;
            height:100%;
            width:200px;
            background:#ff69b4;
        }
    

    3、flex布局
    html结构:

        <div class="container">
            <div class="left"></div>
            <div class="main">center</div>
            <div class="right">right</div>
        </div>
    

    css样式:

        .container{
               display: flex;  //子元素默认横向排列,不设置高度则高度由子元素撑开
           }
           .left{
               width:200px;
               background: red;
           }
           .main{
               flex: 1;
               background: blue;
           }
           .right{
               width:200px;
               background: red;
           }
    

    高度由内容决定

    4、table布局
    html结构:

        <div class="container">
            <div class="left">left</div>
            <div class="main">center</div>
            <div class="right">right</div>
        </div>
    

    css样式:

            .container{
               display: table;
               width:100%;
           }
           .container>div{
               display: table-cell;
           }
           .left{
               width: 100px;
               background: red;
           }
           .main{
               background: blue;
           }
           .right{
               width: 200px;
               background: red;
           }
    

    高度由内容决定


    六、圣杯布局和双飞翼布局

    圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局。
    在这里插入图片描述
    两者的实现方法略有差异,不过都遵循了以下要点:

    • 两侧宽度固定,中间宽度自适应
    • 中间部分在DOM结构上优先,以便先行渲染
    • 允许三列中的任意一列成为最高列
    • 只需要使用一个额外的<div>标签

    圣杯布局

    DOM结构

    <div id="header"></div>
    <div id="container">
      <div id="center" class="column"></div>
      <div id="left" class="column"></div>
      <div id="right" class="column"></div>
    </div>
    <div id="footer"></div>
    

    首先定义出整个布局的DOM结构,主体部分是由container包裹的center,left,right三列,其中center定义在最前面。

    CSS代码
    假设左侧的固定宽度为200px,右侧的固定宽度为150px,则首先在container上设置:

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

    为左右两列预留出相应的空间,得到如下示意图:

    在这里插入图片描述
    随后分别为三列设置宽度与浮动,同时对footer设置清除浮动:

    #container .column {
      float: left;
    }
    
    #center {
      width: 100%;
    }
    
    #left {
      width: 200px; 
    }
    
    #right {
      width: 150px; 
    }
    
    #footer {
      clear: both;
    }
    

    在这里插入图片描述
    根据浮动的特性,由于center的宽度为100%,即占据了第一行的所有空间,所以left和right被“挤”到了第二行。

    接下来的工作是将left放置到之前预留出的位置上,这里使用负外边距(nagetive margin):

    #left {
      width: 200px; 
      margin-left: -100%;
    }
    

    在这里插入图片描述
    随后还需要使用定位(position)方法:

    #left {
      width: 200px; 
      margin-left: -100%;
      position: relative;
      right: 200px;
    }
    

    这里使用position: relative和right: 200px将left的位置在原有位置基础上左移200px,以完成left的放置:
    在这里插入图片描述
    接下来放置right,只需添加一条声明即可:

    #right {
      width: 150px; 
      margin-right: -150px; 
    }
    

    得到最终的效果图:
    在这里插入图片描述
    至此,布局效果完成。不过还需要考虑最后一步,那就是页面的最小宽度:要想保证该布局效果正常显示,由于两侧都具有固定的宽度,所以需要给定页面一个最小的宽度,但这并不只是简单的200+150=350px。回想之前left使用了position: relative,所以就意味着在center开始的区域,还存在着一个left的宽度。所以页面的最小宽度应该设置为200+150+200=550px:

    body {
      min-width: 550px;
    }
    

    综上所述,圣杯布局的CSS代码为:

    body {
      min-width: 550px;
    }
    
    #container {
      padding-left: 200px; 
      padding-right: 150px;
    }
    
    #container .column {
      float: left;
    }
    
    #center {
      width: 100%;
    }
    
    #left {
      width: 200px; 
      margin-left: -100%;
      position: relative;
      right: 200px;
    }
    
    #right {
      width: 150px; 
      margin-right: -150px; 
    }
    
    #footer {
      clear: both;
    }
    

    在这里插入图片描述

    双飞翼布局
    DOM结构

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

    双飞翼布局的DOM结构与圣杯布局的区别是用container仅包裹住center,另外将.column类从center移至container上。

    CSS代码
    按照与圣杯布局相同的思路,首先设置各列的宽度与浮动,并且为左右两列预留出空间,以及为footer设置浮动清除:

    #container {
      width: 100%;
    }
    
    .column {
      float: left;
    }
    
    #center {
      margin-left: 200px;
      margin-right: 150px;
    }
    
    #left {
      width: 200px; 
    }
    
    #right {
      width: 150px; 
    }
    
    #footer {
      clear: both;
    }
    

    在这里插入图片描述

    以上代码将container,left,right设置为float: left,而在container内部,center由于没有设置浮动,所以其宽度默认为container的100%宽度,通过对其设置margin-left和margin-right为左右两列预留出了空间。
    将left放置到预留位置:

    #left {
      width: 200px; 
      margin-left: -100%;
    }
    

    以上代码将container,left,right设置为float: left,而在container内部,center由于没有设置浮动,所以其宽度默认为container的100%宽度,通过对其设置margin-left和margin-right为左右两列预留出了空间。
    将left放置到预留位置:

    #left {
      width: 200px; 
      margin-left: -100%;
    }
    

    在这里插入图片描述
    将right放置到预留位置:

    #right {
      width: 150px; 
      margin-left: -150px;
    }
    

    在这里插入图片描述
    最后计算最小页面宽度:由于双飞翼布局没有用到position:relative进行定位,所以最小页面宽度应该为200+150=350px。但是当页面宽度缩小到350px附近时,会挤占中间栏的宽度,使得其内容被右侧栏覆盖,如下所示:

    因此在设置最小页面宽度时,应该适当增加一些宽度以供中间栏使用(假设为150px),则有:

    body {
      min-width: 500px;
    }
    

    至此双飞翼布局大功告成!其布局整体代码为:

    body {
      min-width: 500px;
    }
    
    #container {
      width: 100%;
    }
    
    .column {
      float: left;
    }
            
    #center {
      margin-left: 200px;
      margin-right: 150px;
    }
            
    #left {
      width: 200px; 
      margin-left: -100%;
    }
            
    #right {
      width: 150px; 
      margin-left: -150px;
    }
            
    #footer {
      clear: both;
    }
    

    总结与思考

    通过对圣杯布局和双飞翼布局的介绍可以看出,圣杯布局在DOM结构上显得更加直观和自然,且在日常开发过程中,更容易形成这样的DOM结构(通常<aside>和<article><section>一起被嵌套在<main>中);而双飞翼布局在实现上由于不需要使用定位,所以更加简洁,且允许的页面最小宽度通常比圣杯布局更小。


    七、BFC布局

    BFC是什么
    在解释 BFC 是什么之前,需要先介绍 Box、Formatting Context的概念。

    Box: CSS布局的基本单位
    Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性,决定了这个 Box 的类型。 不同类型的 Box, 会参与不同的 Formatting Context(一个决定如何渲染文档的容器),因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子:

    block-level box:display 属性为 block, list-item, table 的元素,会生成 block-level box。并且参与 block fomatting context;
    inline-level box:display 属性为 inline, inline-block, inline-table 的元素,会生成 inline-level box。并且参与 inline formatting context;

    Formatting context
    Formatting context 是 W3C CSS2.1 规范中的一个概念。**它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。**最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。

    BFC 定义
    BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。

    BFC布局规则:

    • 内部的Box会在垂直方向,一个接一个地放置。
    • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠(如果想不重叠,就生成两个)
    • 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
    • BFC的区域不会与float box重叠。
    • BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
    • 计算BFC的高度时,浮动元素也参与计算

    哪些元素会生成BFC
    body
    float属性不为none
    position为absolute或fixed
    display为inline-block, table-cell, table-caption, flex, inline-flex
    overflow不为visible

    BFC的作用及原理

    1 .自适应两栏布局

    <style>
        body {
            width: 300px;
            position: relative;
        }
     
        .aside {
            width: 100px;
            height: 150px;
            float: left;
            background: #f66;
        }
     
        .main {
            height: 200px;
            background: #fcc;
        }
    </style>
    <body>
        <div class="aside"></div>
        <div class="main"></div>
    </body>
    

    在这里插入图片描述
    根据BFC布局规则第3条:

    每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。

    因此,虽然存在浮动的元素aslide,但main的左边依然会与包含块的左边相接触。

    根据BFC布局规则第四条:

    BFC的区域不会与float box重叠。

    我们可以通过通过触发main生成BFC, 来实现自适应两栏布局。

    .main {
        overflow: hidden;
    }
    

    当触发main生成BFC后,这个新的BFC不会与浮动的aside重叠。因此会根据包含块的宽度,和aside的宽度,自动变窄。效果如下:
    在这里插入图片描述
    2. 清除内部浮动

    <style>
        .par {
            border: 5px solid #fcc;
            width: 300px;
        }
     
        .child {
            border: 5px solid #f66;
            width:100px;
            height: 100px;
            float: left;
        }
    </style>
    <body>
        <div class="par">
            <div class="child"></div>
            <div class="child"></div>
        </div>
    </body>
    

    在这里插入图片描述
    根据BFC布局规则第六条:

    计算BFC的高度时,浮动元素也参与计算

    为达到清除内部浮动,我们可以触发par生成BFC,那么par在计算高度时,par内部的浮动元素child也会参与计算。

    .par {
        overflow: hidden;
    }
    

    在这里插入图片描述

    3 .防止垂直 margin 重叠

    <style>
        p {
            color: #f55;
            background: #fcc;
            width: 200px;
            line-height: 100px;
            text-align:center;
            margin: 100px;
        }
    </style>
    <body>
        <p>Haha</p>
        <p>Hehe</p>
    </body>
    

    在这里插入图片描述

    两个p之间的距离为100px,发送了margin重叠。
    根据BFC布局规则第二条:

    Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

    我们可以在p外面包裹一层容器,并触发该容器生成一个BFC。那么两个P便不属于同一个BFC,就不会发生margin重叠了。

    <style>
        .wrap {
            overflow: hidden;
        }
        p {
            color: #f55;
            background: #fcc;
            width: 200px;
            line-height: 100px;
            text-align:center;
            margin: 100px;
        }
    </style>
    <body>
        <p>Haha</p>
        <div class="wrap">
            <p>Hehe</p>
        </div>
    </body>
    

    在这里插入图片描述

    BFC 总结:父亲管儿子,兄弟之间不影响


    八、垂直水平居中方法

    水平居中

    • 行内元素
      首先看它的父元素是不是块级元素,如果是,则直接给父元素设置 text-align: center;
    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
            text-align: center;
           }
    </style>
     
    <div id="father">
        <span id="son">我是行内元素</span>
    </div>
    

    如果不是,则先将其父元素设置为块级元素,再给父元素设置 text-align: center;

    <style>
        #father {
            display: block;
            width: 500px;
            height: 300px;
            background-color: skyblue;
            text-align: center;
           }
    </style>
     
    <span id="father">
        <span id="son">我是行内元素</span>
    </span>
    

    效果:
    在这里插入图片描述

    • 块级元素
      方案一:(分宽度定不定两种情况)
      定宽度:需要谁居中,给其设置 margin: 0 auto; (作用:使盒子自己居中)
    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
        }
     
        #son {
            width: 100px;
            height: 100px;
            background-color: green;
            margin: 0 auto;
            line-height:100px;   //文字可垂直居中
        }
    </style>
     
    <div id="father">
        <div id="son">我是块级元素</div>
    </div>
    

    在这里插入图片描述

    不定宽度:默认子元素的宽度和父元素一样,这时需要设置子元素为display: inline-block; 或 display: inline;即将其转换成行内块级/行内元素,给父元素设置 text-align: center;

    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
            text-align: center;
        }
     
        #son {
            background-color: green;
            display: inline;
        }
    </style>
     
    <div id="father">
        <div id="son">我是块级元素</div>
    </div>
    

    效果:(将#son转换成行内元素,内容的高度撑起了#son的高度,设置高度无用)
    在这里插入图片描述
    方案二:使用定位属性
    首先设置父元素为相对定位,再设置子元素为绝对定位,设置子元素的left:50%,即让子元素的左上角水平居中;

    定宽度:设置绝对子元素的 margin-left: -元素宽度的一半px; 或者设置transform: translateX(-50%);

    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
            position: relative;
    }
     
        #son {
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            left: 50%;
            margin-left: -50px;
    }
    </style>
     
    <div id="father">
        <div id="son">我是块级元素</div>
    </div>
    

    不定宽度:利用css3新增属性transform: translateX(-50%);

    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
            position: relative;
    }
     
        #son {
            height: 100px;
            background-color: green;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            line-height:100px;   //文字可垂直居中
    }
    </style>
     
    <div id="father">
        <div id="son">我是块级元素</div>
    </div>
    

    效果:
    在这里插入图片描述

    方案三:使用flexbox布局实现(宽度定不定都可以)
    使用flexbox布局,只需要给待处理的块状元素的父元素添加属性 display: flex; justify-content: center;

    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
            display: flex;
            justify-content: center;
        }
     
        #son {
            width: 100px;
            height: 100px;
            background-color: green;
            line-height:100px;   //文字可垂直居中
        }
    </style>
     
    <div id="father">
        <div id="son">我是块级元素</div>
    </div>
    

    效果:
    在这里插入图片描述

    垂直居中

    • 单行的行内元素
      只需要设置单行行内元素的"行高等于盒子的高"即可;
    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
        }
     
        #son {
            background-color: green;
            height: 300px;
        }
    </style>
     
    <div id="father">
        <span id="son">我是单行的行内元素</span>
    </div>
    

    效果:
    在这里插入图片描述

    • 多行的行内元素
      使用给父元素设置display:table-cell;和vertical-align: middle;属即可;
    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
            display: table-cell;
            vertical-align:middle;
        }
     
        #son {
            background-color: green;
        }
    </style>
     
    <div id="father">
        <span id="son">我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素</span>
    </div>
    

    在这里插入图片描述

    • 块级元素
      方案一:使用定位
      首先设置父元素为相对定位,再设置子元素为绝对定位,设置子元素的top: 50%,即让子元素的左上角垂直居中;

    定高度:设置绝对子元素的 margin-top: -元素高度的一半px; 或者设置transform: translateY(-50%);

    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
            position: relative;
    }
     
        #son {
            height: 100px;
            background-color: green;
            position: absolute;
            top: 50%;
            margin-top: -50px;
    }
    </style>
     
    <div id="father">
        <div id="son">我是块级元素</div>
    </div>
    

    不定高度:利用css3新增属性transform: translateY(-50%);

    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
            position: relative;
    }
     
        #son {
            width: 100px;
            background-color: green;
            position: absolute;
            left: 50%;
            transform: translateY(-50%);
    }
    </style>
     
    <div id="father">
        <div id="son">我是块级元素</div>
    </div>
    

    效果:
    在这里插入图片描述

    • 方案二:使用flexbox布局实现(高度定不定都可以)
      使用flexbox布局,只需要给待处理的块状元素的父元素添加属性 display: flex; align-items: center;
    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
            display: flex;
            align-items: center;
        }
     
        #son {
            width: 100px;
            height: 100px;
            background-color: green;
            line-height: 100px;  //文字可垂直居中
        }
    </style>
     
    <div id="father">
        <div id="son">我是块级元素</div>
    </div>
    

    效果:
    在这里插入图片描述

    • 水平垂直居中
      已知高度和宽度的元素
      方案一:设置父元素为相对定位,给子元素设置绝对定位,top: 0; right: 0; bottom: 0; left: 0; margin: auto;
    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
            position: relative;
    }
     
        #son {
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            line-height: 100px;  //文字可垂直居中
    }
    </style>
     
    <div id="father">
        <div id="son">我是块级元素</div>
    </div>
    

    效果:
    在这里插入图片描述

    • 方案二:设置父元素为相对定位,给子元素设置绝对定位,left: 50%; top: 50%; margin-left: --元素宽度的一半px; margin-top: --元素高度的一半px;
    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
            position: relative;
    }
     
        #son {
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -50px;
            margin-top: -50px;
            line-height: 100px;  //文字可垂直居中
    }
    </style>
     
    <div id="father">
        <div id="son">我是块级元素</div>
    </div>
    

    效果:
    在这里插入图片描述

    • 未知高度和宽度的元素
      方案一:使用定位属性
      设置父元素为相对定位,给子元素设置绝对定位,left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);
    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
            position: relative;
    }
     
        #son {
            background-color: green;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
    }
    </style>
     
    <div id="father">
        <div id="son">我是块级元素</div>
    </div>
    

    效果:
    在这里插入图片描述

    • 方案二:使用flex布局实现
      设置父元素为flex定位,justify-content: center; align-items: center;
    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
            display: flex;
            justify-content: center;
            align-items: center;
    }
     
        #son {
            background-color: green;
    }
    </style>
     
    <div id="father">
        <div id="son">我是块级元素</div>
    </div>
    

    效果:
    在这里插入图片描述


    九、浏览器的reflow和repain

    在各个浏览器厂商你追我赶的形势下,截止今日,产生了很多不同的浏览器,各个浏览器本质大同小异,核心部分基本相似,由渲染引擎和 JS 引擎组成。当你在访问网站页面的时候,浏览器做了很多事情,从发送请求,到解析 HTML 源码,构建渲染树,最后将内容像素绘制到设备屏幕上,一步步完成用户最终需要的场景。然而,在浏览器完成整个渲染的过程中,最为核心的就是“渲染引擎”。

    渲染流程
    结合浏览器渲染原理,来剖析以下代码渲染构建过程:

    HTML 源码:

    <html>
      <head>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <link href="style.css" rel="stylesheet">
        <title>browser rendering</title>
      </head>
      <body>
        <p>Hello <span>web performance</span> students!</p>
        <div><img src="awesome-photo.jpg"></div>
      </body>
    </html>
    

    CSS 源码:

    body { font-size: 16px }
    p { font-weight: bold }
    span { color: red }
    p span { display: none }
    img { float: right }
    

    在这里插入图片描述
    浏览器渲染页面整个过程描述:

    • 首先,解析 HTML Source,构建 DOM Tree;
    • 同时,解析 CSS Style,构建 CSSOM Tree;
    • 然后,组合 DOM Tree 与 CSSOM Tree,去除不可见元素,构建 Render Tree;
    • 再执行 Reflow,根据 Render Tree 计算每个可见元素的布局(几何属性);
    • 最后,执行 Repaint,通过绘制流程,将每个像素渲染到屏幕上。

    注意:

    Render Tree 只包含渲染网页所需要的节点;

    Reflow 过程是布局计算每个对象的精确位置和大小;

    Repaint 过程则是将 Render Tree 的每个像素渲染到屏幕上。

    哪些阶段影响渲染效率
    我们都知道,网页是需要挂载在客户端的浏览器上运行,但是随着互联网的快速发展,为保证用户访问应用的流畅性,往往对客户端的设备配置要求较高。然而,对于用户的设备,我们是无法控制;因此,作为一名开发者,就需要找到除了用户设备配置之外导致访问不流畅的问题,下面就从渲染流程中找到影响性能的问题。

    浏览器初始化渲染时会执行一次 Reflow 过程,这个过程主要是用来确定页面上每个元素在屏幕上的几何位置属性。但是,每执行一次 Reflow 会需要花费大量的时间,耗费大量的设备资源,所以尽量避免执行 Reflow 过程。同时,执行完 Reflow 都会伴随着一次 Repaint 过程,这个过程也会耗费大量的计算机资源,严重影响页面的渲染性能。所以,在浏览器渲染阶段,主要影响页面渲染的阶段是 Reflow 和 Repaint 过程,因此在编写代码时应该尽量避免 Reflow 和 Repaint 过程的执行,如:避免在 JS 代码里直接改变元素的几何属性。

    reflow & repaint 简介

    • reflow 在渲染过程中称为回流,发生在 Render Tree 阶段,它主要是用来确定每个元素在屏幕上的几何属性,需要大量计算每个元素的位置。在代码里每改变一个元素的几何属性,均会发生一次回流过程。

    • repaint 在渲染过程中称为重绘,发生在 reflow 过程之后,当元素的几何属性确定之后便要开始将元素绘制在屏幕上展示。repaint 执行过程就是将元素的颜色、背景等属性绘制出来。在代码里没改变一次元素的颜色等属性时均会对相关元素执行一次重绘。

    如何触发 reflow 和 repaint 过程
    1.改变元素 font-size:

    document.getElementsByTagName('body')[0].style.fontSize = '20px'; // reflow,repaint
    

    2.改变元素盒模型margin、border、padding、width:

    let styles = document.getElementsByTagName('body')[0].style;
    styles.margin = '40px'; // reflow,repaint
    styles.border = '40px solid #f00'; // reflow,repaint
    styles.padding = '40px'; // reflow,repaint
    styles.width = '300px'; // reflow,repaint
    

    3.改变元素颜色、背景色属性:

    let styles = document.getElementsByTagName('body')[0].style;
    styles.color = '#fff'; // repaint
    styles.backgroundColor = '#f00'; // repaint
    

    4.特殊:offset、scroll、client*、getComputedStyle、currentStyle:

    由于浏览器在处理批量修改页面元素样式时,会将批量操作缓存起来,然后再做一次 reflow 过程(异步 reflow),避免每次操作都执行 reflow 消耗资源。但是如果在某个操作之后立马调用了以上执行属性,为了等够得到最新的样式,会检查缓存的操作,是否需要 reflow,这样就 flush 出最新的样式。

    如何减少 reflow 和 repaint 过程
    1.减少 JS 逐行修改元素样式:

    let body = document.getElementsByTagName('body')[0];
    body.className += ' class-name';
    

    2.离线处理 DOM 操作:

    通过 documentFragment 集中处理临时操作;
    克隆节点进行操作,然后进行原节点替换;
    使用 display:none; 进行批量操作。

    3.减少样式的重新计算,即减少 offset、scroll、client*、getComputedStyle、currentStyle 的使用,因为每次调用都会刷新操作缓冲区,执行 reflow & repaint。


    十、WebSocket

    WebSocket是HTML5新增的协议,它的目的是在浏览器和服务器之间建立一个不受限的双向通信的通道,比如说,服务器可以在任意时刻发送消息给浏览器。

    为什么传统的HTTP协议不能做到WebSocket实现的功能?这是因为HTTP协议是一个请求-响应协议,请求必须先由浏览器发给服务器,服务器才能响应这个请求,再把数据发送给浏览器。换句话说,浏览器不主动请求,服务器是没法主动发数据给浏览器的。

    这样一来,要在浏览器中搞一个实时聊天,在线炒股(不鼓励),或者在线多人游戏的话就没法实现了,只能借助Flash这些插件。

    也有人说,HTTP协议其实也能实现啊,比如用轮询或者Comet。轮询是指浏览器通过JavaScript启动一个定时器,然后以固定的间隔给服务器发请求,询问服务器有没有新消息。这个机制的缺点一是实时性不够,二是频繁的请求会给服务器带来极大的压力。

    Comet本质上也是轮询,但是在没有消息的情况下,服务器先拖一段时间,等到有消息了再回复。这个机制暂时地解决了实时性问题,但是它带来了新的问题:以多线程模式运行的服务器会让大部分线程大部分时间都处于挂起状态,极大地浪费服务器资源。另外,一个HTTP连接在长时间没有数据传输的情况下,链路上的任何一个网关都可能关闭这个连接,而网关是我们不可控的,这就要求Comet连接必须定期发一些ping数据表示连接“正常工作”。

    以上两种机制都治标不治本,所以,HTML5推出了WebSocket标准,让浏览器和服务器之间可以建立无限制的全双工通信,任何一方都可以主动发消息给对方。

    WebSocket协议
    WebSocket并不是全新的协议,而是利用了HTTP协议来建立连接。我们来看看WebSocket连接是如何创建的。

    首先,WebSocket连接必须由浏览器发起,因为请求协议是一个标准的HTTP请求,格式如下:

    GET ws://localhost:3000/ws/chat HTTP/1.1
    Host: localhost
    Upgrade: websocket
    Connection: Upgrade
    Origin: http://localhost:3000
    Sec-WebSocket-Key: client-random-string
    Sec-WebSocket-Version: 13
    

    该请求和普通的HTTP请求有几点不同:

    GET请求的地址不是类似/path/,而是以ws://开头的地址;
    请求头Upgrade: websocket和Connection: Upgrade表示这个连接将要被转换为WebSocket连接;
    Sec-WebSocket-Key是用于标识这个连接,并非用于加密数据;
    Sec-WebSocket-Version指定了WebSocket的协议版本。
    

    随后,服务器如果接受该请求,就会返回如下响应:`

    HTTP/1.1 101 Switching Protocols
    Upgrade: websocket
    Connection: Upgrade
    Sec-WebSocket-Accept: server-random-string
    

    该响应代码101表示本次连接的HTTP协议即将被更改,更改后的协议就是Upgrade: websocket指定的WebSocket协议。

    版本号和子协议规定了双方能理解的数据格式,以及是否支持压缩等等。如果仅使用WebSocket的API,就不需要关心这些。

    现在,一个WebSocket连接就建立成功,浏览器和服务器就可以随时主动发送消息给对方。消息有两种,一种是文本,一种是二进制数据。通常,我们可以发送JSON格式的文本,这样,在浏览器处理起来就十分容易。

    为什么WebSocket连接可以实现全双工通信而HTTP连接不行呢?实际上HTTP协议是建立在TCP协议之上的,TCP协议本身就实现了全双工通信,但是HTTP协议的请求-应答机制限制了全双工通信。WebSocket连接建立以后,其实只是简单规定了一下:接下来,咱们通信就不使用HTTP协议了,直接互相发数据吧。

    安全的WebSocket连接机制和HTTPS类似。首先,浏览器用wss://xxx创建WebSocket连接时,会先通过HTTPS创建安全的连接,然后,该HTTPS连接升级为WebSocket连接,底层通信走的仍然是安全的SSL/TLS协议。

    浏览器
    很显然,要支持WebSocket通信,浏览器得支持这个协议,这样才能发出ws://xxx的请求。目前,支持WebSocket的主流浏览器如下:

    Chrome
    Firefox
    IE >= 10
    Sarafi >= 6
    Android >= 4.4
    iOS >= 8

    服务器
    由于WebSocket是一个协议,服务器具体怎么实现,取决于所用编程语言和框架本身。Node.js本身支持的协议包括TCP协议和HTTP协议,要支持WebSocket协议,需要对Node.js提供的HTTPServer做额外的开发。已经有若干基于Node.js的稳定可靠的WebSocket实现,我们直接用npm安装使用即可。


    十一、图片的懒加载

    懒加载
    什么是懒加载
    懒加载其实就是延迟加载,是一种对网页性能优化的方式,比如当访问一个页面的时候,优先显示可视区域的图片而不一次性加载所有图片,当需要显示的时候再发送图片请求,避免打开网页时加载过多资源。

    什么时候用懒加载
    当页面中需要一次性载入很多图片的时候,往往都是需要用懒加载的。

    懒加载原理
    我们都知道HTML中的<img>标签是代表文档中的一个图像<img>标签有一个属性是src,用来表示图像的URL,当这个属性的值不为空时,浏览器就会根据这个值发送请求。如果没有src属性,就不会发送请求。

    所以先不设置src,需要的时候再设置

    我们先不给<img>设置src,把图片真正的URL放在另一个属性data-src中,在需要的时候也就是图片进入可视区域的之前,将URL取出放到src中。

    实现方法:
    HTML结构

    <div class="container">
      <div class="img-area">
        <img class="my-photo" alt="loading" data-src="./img/img1.png">
      </div>
      <div class="img-area">
        <img class="my-photo" alt="loading" data-src="./img/img2.png">
      </div>
      <div class="img-area">
        <img class="my-photo" alt="loading" data-src="./img/img3.png">
      </div>
      <div class="img-area">
        <img class="my-photo" alt="loading" data-src="./img/img4.png">
      </div>
      <div class="img-area">
        <img class="my-photo" alt="loading" data-src="./img/img5.png">
      </div>
    </div>
    

    仔细观察一下,标签此时是没有src属性的,只有alt和data-src属性。
    alt 属性是一个必需的属性,它规定在图像无法显示时的替代文本。
    data-* 全局属性:构成一类名称为自定义数据属性的属性,可以通过HTMLElement.dataset来访问。

    如何判断元素是否在可视区域
    法一:
    网上看到好多这种方法,稍微记录一下。

    • 通过document.documentElement.clientHeight获取屏幕可视窗口高度
    • 通过element.offsetTop获取元素相对于文档顶部的距离
    • 通过document.documentElement.scrollTop获取浏览器窗口顶部与文档顶部之间的距离,也就是滚动条滚动的距离
    • 然后判断②-③<①是否成立,如果成立,元素就在可视区域内。

    法二(推荐)
    通过getBoundingClientRect()方法来获取元素的大小以及位置,MDN上是这样描述的:

    The Element.getBoundingClientRect() method returns the size of an element and its position relative to the viewport.
    这个方法返回一个名为ClientRect的DOMRect对象,包含了top、right、botton、left、width、height这些值。
    

    MDN上有这样一张图:

    在这里插入图片描述
    可以看出返回的元素位置是相对于左上角而言的,而不是边距。

    我们思考一下,什么情况下图片进入可视区域。

    假设const bound = el.getBoundingClientRect();来表示图片到可视区域顶部距离;
    并设 const clientHeight = window.innerHeight;来表示可视区域的高度。

    随着滚动条的向下滚动,bound.top会越来越小,也就是图片到可视区域顶部的距离越来越小,当bound.top===clientHeight时,图片的上沿应该是位于可视区域下沿的位置的临界点,再滚动一点点,图片就会进入可视区域。

    也就是说,在bound.top<=clientHeight时,图片是在可视区域内的。

    我们这样判断:

    function isInSight(el) {
      const bound = el.getBoundingClientRect();
      const clientHeight = window.innerHeight;
      //如果只考虑向下滚动加载
      //const clientWidth = window.innerWeight;
      return bound.top <= clientHeight + 100;
    }
    

    这里有个+100是为了提前加载。

    加载图片
    页面打开时需要对所有图片进行检查,是否在可视区域内,如果是就加载。

    function checkImgs() {
      const imgs = document.querySelectorAll('.my-photo');
      Array.from(imgs).forEach(el => {
        if (isInSight(el)) {
          loadImg(el);
        }
      })
    }
    
    function loadImg(el) {
      if (!el.src) {
        const source = el.dataset.src;
        el.src = source;
      }
    }
    

    这里应该是有一个优化的地方,设一个标识符标识已经加载图片的index,当滚动条滚动时就不需要遍历所有的图片,只需要遍历未加载的图片即可。

    函数节流

    在类似于滚动条滚动等频繁的DOM操作时,总会提到“函数节流、函数去抖”。
    所谓的函数节流,也就是让一个函数不要执行的太频繁,减少一些过快的调用来节流。

    基本步骤:

    • 获取第一次触发事件的时间戳
    • 获取第二次触发事件的时间戳
    • 时间差如果大于某个阈值就执行事件,然后重置第一个时间
    function throttle(fn, mustRun = 500) {
     const timer = null;
     let previous = null;
     return function() {
       const now = new Date();
       const context = this;
       const args = arguments;
       if (!previous){
         previous = now;
       }
       const remaining = now - previous;
       if (mustRun && remaining >= mustRun) {
         fn.apply(context, args);
         previous = now;
       }
     }
    }
    

    这里的mustRun就是调用函数的时间间隔,无论多么频繁的调用fn,只有remaining>=mustRun时fn才能被执行。


    十二、h5新特性及语义化

    h5的新特性如下:
    语义化标签
    表单新特性
    视频(video)和音频(audio)
    canvas画布
    svg绘图
    地理定位
    为鼠标提供的拖放API
    webworker
    (重点)Storage
    (重点)Websocket

    HTML语义化是什么
    语义化是指根据内容的结构化(内容语义化),选择合适的标签(代码语义化),便于开发者阅读和写出更优雅的代码的同时,让浏览器的爬虫和机器很好的解析。

    为什么要语义化?
    有利于SEO,有助于爬虫抓取更多的有效信息,爬虫是依赖于标签来确定上下文和各个关键字的权重。
    语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构

    方便其他设备的解析

    便于团队开发和维护

    <section></section>
    定义文档中的主体部分的节、段。

    <article></article>
    一个特殊的section标签,比section有更明确的语义。定义来自外部的一个独立的、完整的内容块,例如什么论坛的文章,博客的文本

    <aside></aside>
    用来装载页面中非正文的内容,独立于其他模块。例如广告、成组的链接、侧边栏

    <header></header>
    定义文档、页面的页眉。通常是一些引导和导航信息,不局限于整个页面头部,也可以用在内容里。

    <footer></footer>
    定义了文档、页面的页脚,和header类似。

    <nav></nav>
    定义了一个链接组组成的导航部分,其中的链接可以链接到其他网页或者当前页面的其他部分。

    <hgroup></hgroup>
    用于对网页或区段(section)的标题元素(h1~h6)进行组合。

    <figure></figure>
    用于对元素进行组合。

    <figcaption></figcaption>
    为figure元素加标题。一般放在figure第一个子元素或者最后一个。

    <details></details>
    定义元素的细节,用户可以点击查看或者隐藏。

    <summary></summary>
    和details连用,用来包含details的标题。

    <canvas></canvas>
    用来进行canvas绘图。

    <video></video>
    定义视频。

    <audio></audio>
    定义音频。

    <embed></embed>
    定义嵌入网页的内容。比如插件。

    <source></source>
    该标签为媒介元素(比如video、audio)定义媒介元素。

    <datalist id=‘dl’></datalist>
    定义可选数据的列表,与input配合使用()可制作输入值的下拉列表。

    <mark></mark>
    在视觉上向用户展现出那些想要突出的文字。比如搜索结果中向用户高亮显示搜索关键词。

    <meter [min/max/low/high/optimum/value]></meter>
    度量衡,用红黄绿表示出一个数值所在范围。

    <output></output>
    定义不同类型的输出,样式与span无异。

    <progress></progress>
    进度条,运行中的进度。

    <time></time>
    定义日期或者时间。

    <keygen></keygen>
    定义加密内容。

    <command></command>
    定义命令行为。


    十三、css响应式布局

    首先,在网页代码的头部,加入一行viewport元标签。

    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
    

    viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%

    所有主流浏览器都支持这个设置,包括IE9。对于那些老式浏览器(主要是IE6、7、8),需要使用css3-mediaqueries.js。

    <!–[if lt IE 9]><script src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script><![endif]–>
    

    不使用绝对宽度

    由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要。具体说,CSS代码不能指定像素宽度:width:xxx px;只能指定百分比宽度:width: xx%;或者width:auto;

    相对大小的字体

    字体也不能使用绝对大小(px),而只能使用相对大小(em)。

    body {font: normal 100% Helvetica, Arial, sans-serif;}
    

    上面的代码指定,字体大小是页面默认大小的100%,即16像素。

    h1 {font-size: 1.5em;}
    

    然后,h1的大小是默认大小的1.5倍,即24像素(24/16=1.5)。

    small {font-size: 0.875em;}
    

    small元素的大小是默认大小的0.875倍,即14像素(14/16=0.875)。

    em和rem的区别:em是相对于父元素的相对字体,rem是相对于根元素的相对字体(推荐)

    流动布局(fluid grid)

    “流动布局”的含义是,各个区块的位置都是浮动的,不是固定不变的。

    .main{float: right;width: 70%;}
    .leftBar{float: left;width: 25%;}
    

    float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。

    另外,绝对定位(position: absolute)的使用,也要非常小心

    选择加载CSS

    “自适应网页设计”的核心,就是CSS3引入的Media Query模块。

    它的意思就是,自动探测屏幕宽度,然后加载相应的CSS文件。

    <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css"/>
    

    上面的代码意思是,如果屏幕宽度小于400像素(max-device-width: 400px),就加载tinyScreen.css文件。

    <link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="smallScreen.css"/>
    

    如果屏幕宽度在400像素到600像素之间,则加载smallScreen.css文件。

    除了用html标签加载CSS文件,还可以在现有CSS文件中加载。

    @import url("tinyScreen.css") screen and (max-device-width: 400px);
    

    CSS的@media规则

    同一个CSS文件中,也可以根据不同的屏幕分辨率,选择应用不同的CSS规则。

    @media screen and (max-device-width: 400px) { .column {float: none;width: auto;} #sidebar { display: none'}}
    

    上面的代码意思是,如果屏幕宽度小于400像素,则column块取消浮动(float:none)、宽度自动调节(width:auto),sidebar块不显示(display:none)。

    图片的自适应(fluid image)

    除了布局和文本,”自适应网页设计”还必须实现图片的自动缩放。

    这只要一行CSS代码:

    img { max-width: 100%;}
    

    这行代码对于大多数嵌入网页的视频也有效,所以可以写成:

    img, object { max-width: 100%;}
    

    老版本的IE不支持max-width,所以只好写成:

    img { width: 100%; }
    
    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,056
精华内容 2,022
关键字:

html知识点总结