display属性理解： inline ， block， inline-block+BFC格式上下文、盒模型

display 属性可以设置元素的内部和外部显示类型 display types。
元素的外部显示类型 outer display types 将决定该元素在流式布局中的表现（块级、内联元素、行内块元素inline ， block， inline-block）
元素的内部显示类型 inner display types 可以控制其子元素的布局（例如：flow layout，grid 或 flex）

.container {
  display:  [ <display-outside> | <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy> ;
  writing-mode: vertical-rl   |   horizontal-tb;
}

当我们关注实际渲染效果时候，需要注意两个概念：盒子模型（客体）、格式化上下文（环境）、

布局是基于文档流、盒模型的概念
三种改变文档流的方式：浮动、Flexbox、布局
即float浮动、position的absolute和fixed定位。

在普通流中，所有的盒子（不管是内联盒子（内联元素等）还是块级盒子（块级元素等））都要属于一个格式化上下文，格式化上下文即控制元素如何进行布局。
元素BFC之后，会跳出文档流，后面还有元素时，其他元素会无视它所占据了的区域，直接在它身下布局。

格式化上下文：元素的边距、边框和填充如何与同一上下文中的其他块交互
块格式化上下文 block formatting contexts、内联格式化上下文 inline formatting contexts、灵活格式化上下文 flex formatting contexts（flex、grid）
盒子：块级盒子（块级元素）、内联盒子、inline-block

元素：盒子

一个内联元素设置position:absolute会自动转为一个块状元素
没有宽高的块状元素、内联元素position:absolute,top:0;left:0后默认宽度是父的宽度
position:absolute,left:50%，宽度被强制设置为父元素的一半

块级元素：默认填充父元素的内容区。e.g：p、div、列表项
行内元素：在一个文本行生成box，而不会打断这行文本。e.g：a、span、em、strong、b、i、u、label、br
在HTML和XHTML中，块级不能继承（即嵌套在）行内

IE会将main元素渲染成行内元素，而不是块级元素。所以在CSS中我们需要修正

块级元素
总是从新行开始
width、height、margin、padding都可以控制
宽度默认是页面的100%
可以容纳内联元素和其他块元素
同级盒子间的垂直距离会由“margin”属性决定，相邻两个块级盒子之间的垂直间距会遵循外边距折叠原则被折叠。
每个盒子的左外边缘会与包含块左边缘重合（如果是从右到左的排版顺序，则盒子的右外边缘与包含块右边缘重合

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<div></div>
<p></p>
<ul></ul>
<ol></ol>
<li></li>

行内元素
和相邻行内元素在一行上（父不够子先继续填满，一个元素会被拆成两行）
width、height无效，单水平方向的padding和margin可以设置

水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

宽度默认是他本身内容的宽度
行内元素只能容纳文本或其他行内元素。

<span></span>
<u></u>
<ins></ins>
<s></s>
<del></del>
<i></i>
<em></em>
<b></b>
<strong></strong>
<a></a>

行内块元素即不独占一行的块级元素
行内元素中有几个特殊的标签 ,可以设置宽高width、height和对齐属性，
所以称他们为行内块元素。

和相邻行内块在一行上，但是之间会有空白间隙,（父不够子到下一行）
width、height、margin、padding都可以控制
默认宽度就是他本身内容的宽度

	<span>...</span>
	<a>...</a>
	<img/>
	<textarea>...</textarea>
	<button>..</button>
	<input>
	<br>
	<label>...</label>
	<select>...</select>
	<canvas>...</canvas>
	<progress>...</progress>
	<cite>...</cite>
	<code>...</code>
	<strong>...</strong>
	<em>...</em>
	<audio>...</audio>
	<video>...</video>

BFC

前端中原本定义了box模型，但是元素会影响其他元素的布局。这时候就出现了BFC，元素会脱离常规流 ，创建一个新的BFC形成独立空间，绝对不会影响到外面的元素

触发BFC的条件有
根元素或包含根元素的元素 display: flow-root 或 display: flow-root list-item
浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 、sticky、 fixed）
行内块元素和表格单元格（元素的 display inline-block、table-cell HTML表格单元格默认为该值）

元素属性 contain: layout, content, 或 strict

表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML
table、row、tbody、thead、tfoot的默认属性）或 inline-table）

overflow 值不为 visible 的块元素

弹性元素（display为 flex 或 inline-flex元素的直接子元素）
网格元素（display为 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width 不为 auto，包括 ``column-count 为 1）
multicol containers：

.container {
  column-count: 3;
}

元素属性 column-span 设置为 all：使元素横跨所有列

使用场景

子元素都设置为浮动

子元素都设置为浮动，会脱离父元素,父元素的高度可能会塌陷（父元素大小受子元素影响）
原因是：浮动的子元素脱离了文档流，被提起来形成了新的VIP队列，下方普通队列（父元素）无法触及它，检测不到它的存在无法被他撑开
方法：对父元素触发BFC
触发了BFC的容器就是页面上一个完全隔离开的容器，容器中的元素绝对不会影响到外面的元素
为了保证上述规则，在计算父元素的高度时必须让浮动的子元素参与进来。

浮动布局的核心就是让元素脱离普通流，然后使用width/height，margin/padding将元素定位。
absolute定位的基准是最近的非static定位父对象，而fixed是相对html根节点的定位。两种定位都会脱离普通流
所以父元素为relative，子元素为absolute，也会出现跟浮动一样的问题：父对象高度坍塌，子元素不能撑起父对象。

另一种方式：
对浮动元素后面的元素 clearfix，使用伪类
父元素class属性值含 clearfix

    .clearfix:before,.clearfix:after { 
      content:".";
      display:table;
    }
    .clearfix:after {
     clear:both;
    }
    .clearfix {
      *zoom:1;
    }

清除浮动,我的理解是拉回文档流

margin包含塌陷、重叠塌陷

margin在垂直方向取最大值
包含塌陷：给容器触发BFC
重叠塌陷：用容器包裹元素，给容器触发BFC

盒模型

在普通流中，所有的盒子（不管是内联盒子（内联元素等）还是块级盒子（块级元素等））都要属于一个格式化上下文，格式化上下文即控制元素如何进行布局。
块级格式化上下文BFC
内联格式化上下文IFC
块级元素布局遵循块级格式化上下文的规则，内联元素布局遵循内联格式化上下文的规则来进行布局。
元素生成一个box，其中包含元素内容。

外边框存在顶部底部折叠现象
height默认描述的是content的高度即box-sizing:content-box;
box-sizing 属性定义了应该如何计算一个元素的总宽度和总高度。
取值：content-box | padding-box | border-box

默认值content-box，标准盒子模型。 width 与 height 只包括内容的宽和高， 不包括边框（border），内边距（padding），外边距（margin）。注意: 内边距、边框和外边距都在这个盒子的外部。 比如说，.box {width: 350px; border: 10px solid black;} 在浏览器中的渲染的实际宽度（包括边框）将是 370px。
所以如果两个子元素分父元素的宽度，30%+70%最终大于父元素
推荐：calc(30%-超出的宽度）；或者border-box更为稳健

控制溢出行为

overflow、overflow-x、overflow-y属性值：
其默认值 visible
设置为非visible的值，可以防止内部元素与容器的外边距折叠

百分比设置高度

百分比参考的是元素容器块的大小，容器的高度一般由子元素高度决定，陷入死循环

所以对元素的margin设置百分数，百分数是相对于父元素的width计算，不管是margin-top/margin-bottom还是margin-left/margin-right。（padding同理）
正常流中的大多数元素都会足够高以包含其后代元素（包括外边距），如果一个元素的上下外边距时父元素的height的百分数，就可能导致一个无限循环

1. 视口的相对单位
2. 创造等高列:高度相同的多列

CSS表格布局_等高列

不像block元素，display: table;的元素需要手动扩展宽度至100%

   *{
      box-sizing: border-box;
    }

    .container {
      display: table;
      width: 100%;
      border-spacing:1.5em 0;
    }

    .main {
      display: table-cell;
      width: 70%;
      background-color: #fff;
      border-radius: .5em;
    }

    .sidebar {
      display: table-cell;
      width: 30%;
      margin-left: 1.5em;
      padding: 1.5em;
      background-color: #fff;
      border-radius: .5em;
    }

思考？

border-spacing:1.5em 0;新增的间隙超出了container的宽度70+30
增加一个包裹元素，设置负外边距
正外边距会将容器的边缘往里推，负外拉，让元素拉伸超过容器

.wrapper {
      margin-left: -1.5em;
      margin-right: -1.5em;
    }

Flexbox_等高列

弹性容器默认子元素等高

.container {
      display: flex;
    }

CSS弹性盒子Flex

高度范围

min-height、max-height设置灵活高度范围

布局position

static即非定位

relative

sticky

相对定位relative和固定定位fixed的结合

主要用在对scroll事件的监听上
在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。
设置position:sticky同时给一个(top,bottom,right,left)之一即可
使用条件：
1、父元素的overflow不是hidden、auto。
2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
3、父元素的高度不能低于sticky元素的高度
4、sticky元素仅在其父元素内生效

实际探索

一开始的默认值：static
关注 box-sizing: border-box;
可以在浏览器自己勾选查看效果

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>盒模型学习</title>
 <style>
     *{
        box-sizing: border-box;
     }
    .child {
        background: blue;
        margin:20px;
        border: 4mm ridge rgba(170, 50, 220, .6);
        border: 10000mm;
        padding:10px;
        width: 100px;
        height: 100px;
        position: static;
    }
    .mid {
        background: green;
        width: 200px;
        height: 200px;
        position: static;
    }
    .parent {
        background: red;
        width: 300px;
        height: 300px;
        position: static;
    }
</style>
<body>  
    <div class="parent" >
        <div class="mid">
            <div class="child"></div>
        </div>
    </div>
</body>
</html>

document.styleSheets

parentStyleSheet 返回在当前规则中已定义的样式表对象