行内/块级元素 + 盒模型 + BFC + position【CSS 知识汇点1】

行内元素/块级元素

在 html 中，元素主要分成行内元素和块级元素，分别的特征是：

行内元素：

• 不独占一行，和其他元素在同一行
• 没有宽和高，宽和高都设置无效
• 可以设置行高
• 设置 margin 和 padding 左右有效，上下无效
• 只占据它对应标签的边框所包含的空间。
• 只能包含数据和其他行内元素
• 典型标签：a、img、input、select、span、

块级元素：

• 独占一行
• 宽、高、内边距、外边距可以修改
• 若宽度没有设置，则默认宽度为容器的 100%，除非设定一个宽度
• 可以包含行内元素和其他块级元素
• 典型标签：div、fieldset、h1-h6、menu、ol、p、pre、table、ul、ol

⚠️注意：

• 若设置行内元素 float:left/right，则该行内元素转换为块级元素，且具有浮动特性。
• 若为行内元素进行定位，position: absolute 或者 position: fixed 都会把行内元素转换为块级元素
• display:inline-block 会变成行内块级元素，既有行内元素水平排列的特点，也有块级元素设置宽高的特点。

盒模型

盒模型分为内容(content)、内边距（padding）、边框（border）、外边距（margin）

有两种盒模型：

• IE 盒模型(border-box)：width 和 height 包含 content、border 和 padding
• W3C 盒模型(content-box)：width 和 height 只包含 content，不包括 border 和 padding

使用哪个盒模型可以用 box-sizing 控制，默认值是 content-box

// 红色区域大小是 200 - 20 * 2 - 20 * 2
.box {
   width: 200px;
   height: 200px;
   padding: 20px;
   margin: 20px;
   background: red;
   border: 20px solid black;
   box-sizing: border-box;
}

BFC

BFC(Block Formatting Context): 块级格式化上下文，是一个独立渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响

触发 BFC 的条件（以下任意一条）：

• float 的值不为 none
• overflow 的值不为 visible
• display 的值为 table-cell、table-caption、inline-block 之一
• position 的值不为 static 或 relative 之一

BFC 和普通文档流布局区别：

开发中的应用：

• 阻止 margin 上下重叠，margin 上下重叠的情况有：

  • 父子元素：父元素对外展现的 margin 是这个父元素和其第一个子元素的 margin 值较大者
  • 相邻元素：两个块级元素之间，rou都为负值或正值，取绝对值最大的，若一正一负，则取和
  • 空块元素：如果一个空块元素，border、height、padding、inline content、min-height 都不存在的话，上下边距就会合并，取之规则和上面相同

• 自适应两栏布局

  <style>
  .left {
  	width: 100px;
      float: left;
      height: 100px;
  }
  .right {
  	height: 150px;
      float: right;
      overflow: hidden
  }
  </style>
  <div class="left"></div>
  <div class="right"></div>
  

• 可以包含浮动元素 ---- 清除浮动

  浮动就是让某个元素脱离文档标准流，漂浮在文档标准流之上，和标准流不是一个层次，进而导致了高度的塌陷，使原本想放在下面的元素会自动补充。

  清除浮动的方法：

  1. 包含浮动的父级添加 overflow 属性，触发 BFC，实现清除浮动

  <style>
  .par {
  	border: 5px solid red;
      width: 1000px;
      overflow: hidden; //生成BFC，把浮动元素的高度计算在哪，变相清除了内部浮动
  }
  .child {
  	border: 5px solid blue;
      float: left;
      height: 100px;
      width: 100px;
  }
  </style>
  <div class="par">
  	<div class="child"></div>
      <div class="child"></div>
  </div>
  

  2. 利用伪元素，在包含浮动的父级添加伪类 ::after,使用 clear 属性清除浮动

  <style>
  .claerfix::after {
  	content: '';
      display: table;
      clear: both;
  }
  .float-item {
  	float: left;
  }
  </style>
  <div class="claerfix">
  	<div class="float-item"></div>
  <div>
  <div></div>
  

  3. 父级 div 定义 height
  4. 额外标签法：在包含浮动的父级元素中末尾位置，插入一个没有内容的块级元素 div 并添加样式 clear: both

position

position 属性用于指定一个元素在文档中的定位方式：

• static：默认值，指定元素使用正常的布局行为，此时top、bottom、left、right 和 z-index 属性无效

• relative: 指定元素先放置在未添加定位时的位置，再在不改变页面布局的前提下，调整元素位置（因此会在次元素未添加定位时所在位置留下空白）。⚠️注意： absolute 定位的元素会被“正常页面流”忽略，即在正常页面流中，该元素所占空间为0

• absolute：元素会被移出正常文档流，并不为元素预留空间。通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。

• fixed；元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕的位置来指定元素，元素位置在屏幕滚动时不会改变。

• sticky：就是 releative + fixed 的结合体，在元素在屏幕内表现为 relative，就要滚出显示器屏幕的时候，表现为 fixed，特别适合用来做导航的跟随定位效果。