前段入门之HTML二（HTML盒模型及其定位、HTML层模型与浮动模型）

前端入门之HTML二

1 HTML盒模型

  在HTML语法中，每一个非空HTML元素都可以看成是一个“盒子”。在现实生活中，一个盒子📦所占的空间中有盒子壳，放在盒子里的物体，以及盒子与物体之间的填充物，分别对应HTML盒模型的盒子壁（border）、盒子内容（content）以及内边距（padding），HTML盒模型中还有一个部分叫做外边距（margin），表示与外部元素的间距。

盒模型	属性

1.1 padding、border-width和margin的声明

 当padding、border-width或margin当做复合属性声明时：
  • 一个属性为四个方向相同；
  • 两个属性为上下、左右；
  • 三个属性为上，左右，下；
  • 四个属性为上、右、下、左。

.wrapper{
    border: 10px solid green;
    width: 100px;
    height: 100px;
    background-color: red;
    padding: 10px;
}
.content{
    width: 100px;
    height: 100px;
    background-color: black;
}

<div class="wrapper">
    <div class="content">    
    </div>
</div>

对.content选择器操作	渲染结果	浏览器element
无
padding: 10px 20px
padding: 10px 20px 30px
padding: 10px 20px 30px 40px

1.2 盒模型的定位

1.2.1 绝对定位（absolute）

 • 脱离原来位置进行定位（真空）。绝对定位的元素脱离原来的层跑到上一个层去，原来的位置变成“真空”。其他元素可以占领。

.demo{
    width: 100px;
    height: 100px;
    background-color: red;
    opacity: 0.5;
}
.box{
    width: 150px;
    height: 150px;
    background-color: green;
}

<div class="demo"></div>
<div class="box"></div>

操作	渲染结果
无
.dom{position:absolute;top:10px;left:10px}

 • 相对于最近的声明position属性的上级元素进行定位，如果没有，则相对于文档进行定位。

.wrapper{
    margin-left: 100px;
    width: 200px;
    height: 200px;
    background-color: orange;
}
.content{
    margin-left: 100px;
    width: 100px; 
    height: 100px; 
    background-color: black;
}
.box{
    width: 50px;
    height: 50px;
    background-color: yellow;
}

<div class="wrapper">
    <div class="content">
        <div class="box">
        </div>
    </div>
</div>

依次操作	渲染结果
无
.box{positon:absolute;left:50px}
.content{positon:absolute}
.content{positon:absolute}、.wrapper{positon:absolute}

1.2.2 相对定位（relative）

 • 保留原来位置进行定位（灵魂出窍）。相对定位的元素的“灵魂”跑到上一层去，“身体”留在原来的位置，其他元素不能占领。

.demo{
    width: 100px;
    height: 100px;
    background-color: red;
    opacity: 0.5;
}
.box{
    width: 150px;
    height: 150px;
    background-color: green;
}

<div class="demo"></div>
<div class="box"></div>

操作	渲染结果
无
.dempo{position:relative;top:100px;left:100px}

 • 相对于自己原来的位置进行定位。

.wrapper{
    margin-left: 100px;
    width: 200px;
    height: 200px;
    background-color: orange;
}
.content{
    margin-left: 100px;
    width: 100px; 
    height: 100px; 
    background-color: black;
}
.box{
    width: 50px;
    height: 50px;
    background-color: yellow;
}

<div class="wrapper">
    <div class="content">
        <div class="box">
        </div>
    </div>
</div>

操作	渲染结果
无
.box{positon:relative;left:50px}

1.2.3 固定定位（fixed）

 • 与absolute类似
 • 相对于可视窗口进行定位
 无视滚动条，一直窗口居中：

div{
    position:fixed;
    Left:50%;
    top:50%;
    width:100px;
    height:100px;
    background-color:red;
    margin-left:-50px;
    margin-top:-50px;
}

<div></div>

1.2.4 如何对HTML元素进行定位？

 • 如果想要对一个元素进行定位，需要参照物和定位。
 • 一般情况下用relative作为参照物，用absolute进行定位。
 • relative能够保留元素原来的位置，不对后面的元素产生影响，若relative不设置定位值，则对元素本身没有影响。而absolute元素就可以以最近的上级relative元素为参照物，设置定位值进行定位。

2 HTML层模型

  当元素声明position时，z-index属性控制重叠元素覆盖，值越大，元素层级越高，离用户越近。
  使用场景：元素进行绝对或固定定位向上层移动时。

3 HTML浮动模型

  float:left/right

3 .1 浮动流

 浮动元素产生了浮动流，对后面的元素产生影响。
 所有产生了浮动流的元素，块级元素看不见；产生了bfc（补充说明）的元素和文本类属性（inline）的元素以及文本都能看到浮动元素。

<div class="box"></div>
<div class="demo"></div>

.box{
    width: 100px;
    height: 100px;
    background-color: black;
    opacity: 0.5;
}
.demo{
    width: 150px;
    height: 150px;
    background-color: green;
}

依次操作	渲染结果
无
.box{float: left}
.demo{float: left}

3 .2 清除浮动流

 撑开包住浮动流的父级元素。

<div class="content">1</div>
    <div class="content">2</div>
    <div class="content">3</div>
    ------
    <p></p>

.wrapper{
    border: 5px solid black;
}
.content{
    float: left;
    color: #fff;
    background-color:black ;
    width: 100px;
    height: 100px;
    opacity: 0.5;
}
p{
    border-top:10px solid green ;
}

依次操作	渲染结果
无
p{clear: both}

---

补充说明：
  • 属性的取值现用现查：CSS在线参考手册
  • CSS初始化：*{margin:0,padding:0}
  • 元素居中设置：
  子元素content大小=父元素content大小，并设置父元素padding四个方向相同。
  • body元素margin默认值为8px。
  • margin塌陷：
  父子结构元素垂直方向maring是结合到一起的，取两者中最大的属性值。
  弥补方式是触发盒子的bfc：position:absolute；display:inline-block；float:left/right；overflow:hidden。哪一个声明不产生影响就用哪一个。
  • margin合并：
  兄弟结构元素垂直方向<margin>属性合并，取两者中最大的属性值。
  弥补方式是不解决，只声明一个元素垂直方向margin属性。

---

相关文章链接：
前段入门之CSS一 | 前段入门之CSS二| 前段入门之CSS三
前段入门之HTML一 | 前段入门之HTML二

---

本人由于之前用Flask&Dash框架快速开发数据分析Web APP 开始了解到前段工程师这个行业，并产生了一些兴趣，现在打算从头开始学习前段开发的一些知识，写博客来记录一下学习的过程。欢迎各位一起讨论学习，如有错误的地方或者建议，恳请在评论区批评和指导，博客不定期修改和更新。