HTML（八）、宽高自适应

一、宽度自适应

网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应。元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。

块元素在不设置宽度的情况下  width:auto;(默认)
子元素盒模型总大小=父元素的width
子元素设置了padding border margin
子元素的width+子padding+子border+子margin =父元素width

如果设置了宽度100%;  width:100%;
那么 子元素width=父元素width

二、高度自适应

height:auto; 默认值 初始状态等同与0;
子元素能撑开父元素的高度 如果父元素设置了
固定高度 那子元素就无法撑开

但有时候我们希望元素本身
有个最小高度 当内容区域超过
最小高度父框就被撑大。

三、最小高度自适应

min-height：最小高度；(IE6浏览器不识别该属性)
ie6里的height 其实就是最小高度

过滤器：
_(只有ie6能识别) 	_height:value;
*(只有ie6、7识别) 	*height:value;
!important  优先级最高 (ie6识别不了) 	 height:value  !important;


兼容元素具备最小高度自适应的方法：
hack1:min-height:value; _height:value; (建议使用)
hack2:min-height:value;height:auto!important;height:value;

min-height（最小高度）
max-height(最大高度)
min-width(最小宽度)
max-width(最大宽度)

四、高度塌陷及解决方法

伪元素选择符：
:after      最后一个子元素之后添加一个类似span的伪元素
:before   第一个子元素之前添加一个类似span的伪元素
注：这两个伪元素必须添加 content 属性否则伪元素无效

:first-letter 定义内容区第一个字符的样式。
:first-line:定义内容区第一行的样式。

	ie8以下不支持伪元素

overflow:hidden; 自动检索子元素高度。
clear:both; 清除浮动  (在最后一个浮动元素之后添加一个块元素 来清浮动)


万能清除法：配合第二种方式通过伪元素实现
clear:after { content:""; clear:both; display:block; visibility:hidden;}

visibility:visible/hidden; (可见/隐藏)

五、元素的高度自适应屏幕的高度(一屏页面的书写)

如果想让元素高度和窗口高度一样那么就要设置
html,body{height:100%;}
元素{height:100%;}

六、及BFC概念应用(后台管理系统页面的书写)

什么的BFC?
BFC (Block fomatting content)是 W3C CSS2.1 规范中的一个概念。
1、块级格式化上下文，它是浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外元素的布局，这个渲染区域只对块级元素起作用，
它规定了内部block-levelbox如何布局，并且与这个区域外部毫不相干。
2、布局方式：
a. 内部的box会在垂直方向，一个接一个地放位置。
b. box垂直方向的距离由margin决定，属于同一个BFC的两个相邻的box的margin会发生重叠。
c. BFC的区域不会和float box重叠。
d. 计算BFC的高度的时候，浮动元素也参与计算。
3、哪些元素会生成BFC？
a. 根元素
b. float元素不为none
c. position为absolute或者fixed
d.overflow不为visible
e.display为inline-block,table-cell,table-caption,flex,inline-fixed

w3c规范中的BFC定义：浮动元素和绝对定位元素，非块级盒子的块级容器（例如inline一blocks, table一cells,和 table一captions),以及overflow值不为“visiable”的块级盒子，
都会为他们的内容创建新的 BFC (块级格式上下文）。
在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的
垂直的间隙是由他们 的margin值所决定的。
在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。
在BFC中，每一个盒子的左外边缘（margin一left)会触碰到容器的左边缘(border一left)(对于 从右到左
的格式来说，则触碰到右边缘）。
BFC的通俗理解：首先BFC是一个名词，是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见 摸不着的），箱子里面物品的摆放是不受外界的影响的。
转换为BFC的理解则是：BFC中的 元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元 素和其子元素带来的影响。）并且在一个BFC中，块盒与行盒
（行盒由一行中所有的内联元 素所组成）都会垂直的沿着其父元素的边框排列。详细参见：
http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html
https://www.zhihu.com/question/28433480