html总结包括怪异盒子、普通盒子、居中、圣杯布局、双飞翼布局等

很久没有打开博客，竟然发现自己之前写的博客竟然有一定的浏览量，觉得很惊喜，又觉得写博客这事很有意义。
今天就来讲html相关知识

1、两种盒子模型

众所周知，我们页面中的元素就是一个盒子，这个盒子他有width,height,border,padding,margin。

盒模型宽度的计算

普通盒模型

盒子的总width:offsetWidth=width+padding-left+padding-right+border-left+border-right;

怪异盒子模型

怪异盒子模型是边框和内边距是包含在width里面的，比如设置

p{
	box-sizing:border-box;
	width:100px;
	border:1px;
	padding:10px;
}	

那么在这样设置后真实width的值为(100-10-10-1-1)px=78px;
在某个元素的css语句里设置：box-sizing:border-box;即可将盒子设置为怪异盒子。
盒子的总width offsetWidth(100px)=width(78px)+padding-left+padding-right+border-left+border-right。

2、块级标签、行内标签和行内块元素

块级标签

块级元素的特点是单独占一行，并排斥其它元素与其位于同一行，可设置width、height、padding、border、margin。
有
p元素、h1-h6元素、div、ol、li、ul等

行内标签

行内标签又叫内联标签，在浏览器中可以与其它行内元素共占一行，只有当多个元素的总宽度大于浏览器的宽度时，才会换行显示。
有：
span、a、input、strong、b、i

行内块元素

行内块元素在浏览器中与其他行内元素或行内块元素占一行，只有当多个元素的总宽度大于浏览器的宽度时，才会换行显示。
有：img、input

  <input type="text" style="width:100px;height:100px">
  <input type="text" style="width:100px;height:100px">
  <img src="./tupian1.png" style="width:100px;height:100px">
  <img src="./tupian1.png" style="width:100px;height:100px">

``

元素之间嵌套规则

1. 块级元素能嵌套块级元素、行内元素、行内块元素
2. 行内元素能嵌套块级元素、行内元素、行内块元素
3. a元素不可以嵌套a元素
4. 部分块级元素：不能嵌套块级元素，只能嵌套内联元素，如：p、h1~h6
   比如在p元素内嵌套块级元素，虽然浏览器不报错能正常显示2222，又比如在a标签里嵌套a标签，也是一样的能正常显示1111、3333。其实这两种情况是浏览器将错误的代码进行正确解析

<p><div>2222</div></p>
<a href="#">1111<a href="#">3333</a></a>

解析为

<div>2222</div>
<p></p>
<a href="#">1111</a>
<a href="#">3333</a>

有了前面的知识后，想必大家都知道html5新增了许多语义化标签，下面带大家来看看

3、 html5新增的语义化标签

个人对于语义化的理解是，为了使我们减少使用没有实际意义的标签，比如：div、span，语义化标签更加有丰富的含义，是浏览器在没有css的情况下，也能很好的呈现出内容结构和代码结构。
有header、nav、article、section、aside、footer

语义化标签的优点：

• 是浏览器没有css的情况下，能很好的呈现内容结构、代码结构
• 比div、span有更加丰富的含义，方便维护
• 有利于搜索引擎能识别页面的结构，有利于SEO
• 方便其它设备解析(比如移动端、盲人阅读器)
• 有利于合作，遵守w3c原则

4、margin纵向重叠问题

在了解了基本的元素后，我们会发现上下两个块级元素盒子会存在外边距重叠的问题，那么外边距的值计算方法如下：

• 若margin-bottom、margin-top都大于0，那么取两者中最大的值
• 若margin-bottom、margin-top其中一个大于0，另一个小于0，那么取两者之和
• 若margin-bottom、margin-top两者都小于0，那么取两者之和
  

margin负值问题

• margin-top、bottom-left是负值，元素会向上或向左移动
• margin-right是负值，右侧的元素会向左移动，自身不动
• margin-bottom是负值，下侧元素上移，自身不动。
• 

5、 BFC

• Block Format Context: 块级格式化上下文

• 一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素

• 形成BFC的条件:
  1、float设置为left、right
  2、position设置为absolute、fixed
  3、overflow设置为hidden、scroll、auto
  4、display设置为flex或者inline-block等

• 应用
  清除浮动

6、float

首先来看float的两者应用，使用float实现圣杯布局和双飞翼布局

特点:

• 实现PC端三栏布局，中间一栏最先渲染
• 实现两边宽度固定，中间自适应
• 效果图
  

圣杯布局

思路：中间一栏最先渲染，那么中间盒子在左盒子上面，基本布局完成，然后为了不让中间的内容被覆盖，给container设置padding-left和padding-right。然后给左边盒子向左移动中间盒子宽度的距离，此时左边盒子移动到了中间盒子最左边，然后通过相对定位，平移padding-left的值的距离。右边盒子向左移动自身宽度的距离，然后通过相对定位，向右移动padding-right距离。

  <div class="container">
    <div class="middle">中间</div>
    <div class="left">左边</div>
    <div class="right">右边</div>
  </div>

  <style>
    /* 中间盒子先渲染 ，所以中间盒子在左盒子之前，最外层盒子container设置内边距，中、左、右盒子全部浮动
    中间盒子不浮动的话中间盒子会独占一行，那么左边盒子浮动只会一直向着浏览器的左边一直移动不会想上面去*/
    .container{
      padding:0 100px;
      background-color: #ddd;
    }
    .left {
      position: relative;
      width: 100px;
      height: 100px;
      /* 设置左边浮动 */
      float: left;
      background-color: rgb(216, 226, 156);
      /* 左边盒子向左移动中间盒子的宽度 ，此时移动到中间盒子的最左端*/
      margin-left: -100%;
      /* 然后将左边盒子向左平移内边距宽度 */
      left: -100px;
    }
    .right {
      position:relative;
      width: 100px;
      height: 100px;
      float: left;
      background-color: blanchedalmond;
      /* 向左移动width宽度 */
      margin-left:-100px;
      /* 向右移动paddin宽度 */
      left:100px;
    }
    .middle {
      width: 100%;
      height: 200px;
      float: left;
      background-color: aqua;
    }
  </style>

双飞翼布局

思路:

• 中间盒子写在左边盒子前面，且用一层盒子container包裹
• 中间盒子middle设置左右外边距
• left、right、container全部浮动
• 左盒子left向左移动container的盒子宽度
• 右盒子right向左移动margin-right的宽度

  <div class="container">
    <div class="middle">中间</div>
  </div>
    <div class="left">左边</div>
    <div class="right">右边</div>

  <style>
    /* 中间盒子先渲染 ，所以中间盒子在左盒子之前，最外层盒子container设置内边距，中、左、右盒子全部浮动
    中间盒子不浮动的话中间盒子会独占一行，那么左边盒子浮动只会一直向着浏览器的左边一直移动不会想上面去*/
    .left {
      width: 100px;
      height: 100px;
      /* 设置左边浮动 */
      float: left;
      background-color: rgb(216, 226, 156);
      /* 左边盒子向左移动中间盒子的宽度 ，此时移动到中间盒子container的最左端*/
      margin-left: -100%;
    }
    .right {
      width: 100px;
      height: 100px;
      float: left;
      background-color: blanchedalmond;
      /* 向左移动padding宽度 */
      margin-left:-100px;
    }
    .container{
      width: 100%;
      float:left;
    }
    .middle{
      margin:0 100px;
      background-color: aqua;
      height: 200px;
    }
  </style>

清除浮动

清除浮动主要有以下几种方法：

• 额外标签法
  在需要的盒子下面添加一个元素clearfix，然后.clearfix{float:both}

• 外层盒子给定高度

• 父级元素也一起浮动

• 父级元素定义overflow:hidden或 overflow:auto,触发BFC

    .clearfix{
      height:200px;
      /* zoom:1; */
      /*overflow:hidden;*/
      overflow:auto;
    }

• 父级元素定义伪元素::after和zoom(建议使用这种方法)

.clearfix:after{
      display:block;
      clear:both;
      content:"";
      visibility: hidden; 
      height:0px;
    }
    //兼容低版本
    .clearfix{
      zoom:1
    }

7、flex布局

flex基本了解

• 元素结构：容器内布放子元素，容器设置display：flex;

• 布局思想：
  - 设置主轴方向控制子元素排列方向
  - 设置容器相关属性控制子元素布局
  - 设置子元素相关属性控制子元素布局

• 容器样式属性
  - flex-direction
  - justify-content：flex-start/flex-end/space-between/space-around/center
  - align-items(适用于子元素单行的情况下):flex-start/flex-end/space-between/space-around/center
  - align-content(适用于子元素是多行的情况下)
  - flow-wrap :nowrap/wrap-reverse

• 子元素样式
  - flex
  - order
  - align-self

实现骰子三点

在这里插入代码片

  <div class="container">
    <div class="left">左边</div>
    <div class="middle">中间</div>
    <div class="right">右边</div>
  </div>
</body>

    .container{
      display:flex;
      flex-direction: row;
      justify-content: space-around;
      width:400px;
      height:400px;
      border:1px goldenrod solid;
    }
    .middle,.left,.right{
      width:100px;
      height:100px;
      border-radius: 100%;
      border:1px solid red;
      text-align: center;
      line-height: 100px;
    }
    .middle{
      align-self:center;
    }
    .right{
      align-self:flex-end;
    }
  </style>

8、元素居中

定位回顾

• relative相对自身定位
• absolute依据最近一层的定位元素定位
  - 定位元素是设置了relative、absolute、fixed
  - 找不到最近一层元素就相对于body

行内元素水平垂直居中

• 水平居中

  • text-align：center

• 垂直居中

  • line-height：盒子高度（一行内容）
  • line-height：行高（1/2/…）设置行高

块级元素水平垂直居中

• 水平居中
  margin:0 auto;(前提该盒子定义了width值)

• 水平垂直居中

• posiiton:absolute;top:50%;left:50%;transform:(-50%,-50%);

• position:absolute;top:0;left:0;bottom:0;right:0;maigin:auto;//要设置宽高

  <div class="container">
    <div class="right">右边</div>
  </div>
  
      .container{
      posiiton:relative;
      width:400px;
      height:400px;
      border:1px goldenrod solid;
      }
    .right{
      position:absolute;
      top:0;
      left:0;
      bottom:0;
      right:0px;
      margin:auto;
      width:100px;
      height:100px;
      border:1px red solid;
      text-align:center;
      line-height:100px;
    }

• 采用flex来水平垂直居中
  display:flex;justify-content:center;align-item:center;

• 采用表格来水平垂直居中
  父盒子：display::table-cell;text-align:center;vertical-align:middle;
  子元素: display：inline-block；

    .container{
      display:table-cell;
      width:400px;
      height:400px;
      border:1px goldenrod solid;
      text-align:center;
      vertical-align: middle;
    }
    .right{
      display:inline-block;
      width:100px;
      height:100px;
      border:1px red solid;
      text-align:center;
      line-height:100px;
    }
   <div class="container">
    <div class="right">右边</div>
  </div>   

9、样式单位

• em：相对于自身字体大小的单位
• rem: 相对于html标签字体大小的单位
• vh：相对于视口高度大小的单位，20vh==视口高度/100*20
• vw：相对于视口宽度大小的单位，20vw==视口宽度/100*20