html自动宽度和高度,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