width与height css世界的尺寸

width具体细节

1、width :auto;至少包含四种表现形式:

• 充分利用可利用的空间，div p元素的默认宽度就是父级元素
• 收缩与包裹，包裹性也就是css3中的 fit-content
• 收缩到最小 在table-layout：auto的表格中。一柱擎天的样子
• 超出容器，特俗情况，width：auto的时候会超出父元素的宽度，就比如出现内容很长的连续英文和数字，white-space:nowrap

2、宽度和流体特性

以上的四种宽度，1是外部宽度，234是内部宽度

外部宽度和流的特性

• 正常流宽度 但是如果我们给一个表现为外部尺寸的块级元素设置了宽度，流动性就会丢失
• 格式化宽度position:absolute/fixed
  一般来说绝对定位宽度表现为包裹性，由内部尺寸决定，有一种例外，当left/right top/bottom同时存在的时候

内部宽度和流的特性：

• 包裹性（1 包裹性 2 自适应性）
  自适应性是指 元素尺寸由内部元素决定，但是永远的小于包含块容器的尺寸
• 首选最小宽度
  • 中文（东亚文字）的最小宽度是14
  • 西方文字的最小宽度 由特定的连续的英文字符单元决定
  • 类似于图片的这种替换元素的最小宽度是自己本身
• 最大宽度
  元素能达到的最大宽度，其实就是包裹性元素设置的white-space:nowrap申明后的宽度。
  如果内部没有块级元素或者是块级元素没有设定宽度值，最大宽度实际上是连续内联盒子的宽度

3、 width的细节

有四种盒子：content box,padding box,border box,margin box
宽度的表现设定不合理的原因：

1. 设置宽度流动性丢失，尤其是宽度设定在content上的时候
2. 与现实世界表现不一致的困扰；可能是指的宽度是content的，但是开发者以为是包含了padding 或者是border的

4、css流体布局下的宽度分离原则

宽度分离原则：width不与影响宽度的属性如：padding/border属性共存
如

//不推荐这么写
.box{width:100px;border:1px solid ;}
//要分开写
.father{width:100xp;}
.son {
margin：0 20px;
padding:0 20px;
border:1px solid;
}

如上就是设置了父元素，然后子元素根据流动性实现内部自适应
张鑫旭就推荐，整个html只有一个widht，然后剩下的就全用流体布局实现。

5、 box-sizing

可以理解为宽度作用的细节

box-sizing :content-box;/**默认值**/
box-sizing :padding-box/**firefox支持**/
box-sizing :border-box;/**全线支持**/
box-sizing :margin-box;/**都不支持**/

box-sizing :border-box;d的时候，其实是相当于width包含了content padding 和border的宽度。

但是为什么不支持margin-box呢？
因为改变margin并不会影响offset的尺寸 但是border和padding就不一样了
如果有了box-sizing支持了margin-box那么background-origin属性要不要支持，margin的背景永远透明在规范里标明了

*{box-sizing:border-box}
/**这种方式不好，1浪费渲染，search的搜索框本来就是这个属性，2、不能真正的实现无计算**/

/**推荐**/
input ，textarea,img,video ,object{
box-sizing:border-box;
}
/**因为box-sizing设计的主要目的还是为了这种原色普通文本框和文本域的计算**/

height 的细节

1、height：100%

如果父元素不确定的话，那么height的百分比基本上就可以当成没看见了。
原因：如果包含块的高度没显示指定（即高度由内容决定，且该元素不是绝对定位，那么计算值就是auto） 'auto'* 100% = nan

如何支持100% 的高度

1、显示的确定高度
2、使用绝对定位，注意的是绝对定位元素的百分比和非绝对定位元素的百分比是有区别的。

• 绝对定位的百分比是相对于padding-box的
• 非绝对定位的百分比是相对于content box的

min-width /max-width /min-height/max-height

1 、min-width /max-width 与流

其出现一定是自适应布局 或者是流布局中出现的。如果定死了，就没有变化的可能性

2、与众不同的初始值

max-*系列，初始值是：none
min-*系列的初始值是：auto
为什么max系列不能使auto呢？如果父元素是100px子元素是200px，如果默认max-width 是auto也就是max-width:100px;直接让子元素的200px无效，所以不能使auto

3、max 会覆盖width 哪怕你是important

如果一个元素width:100px!important但是max-width:20px;那么宽度还是20px
超越最大：min 覆盖max
如果max-width:50px;min-width:100px;那么超越最大的原则，min就会赢了，元素为100px