width具體細節(jié)
1州泊、width :auto;至少包含四種表現(xiàn)形式:
- 充分利用可利用的空間认轨，
div p元素的默認寬度就是父級元素 - 收縮與包裹很钓，包裹性也就是css3中的
fit-content - 收縮到最小 在
table-layout：auto的表格中纸淮。一柱擎天的樣子 - 超出容器袱院，特俗情況屎慢，
width：auto的時候會超出父元素的寬度瞭稼，就比如出現(xiàn)內(nèi)容很長的連續(xù)英文和數(shù)字，white-space:nowrap
2腻惠、寬度和流體特性
以上的四種寬度环肘，1是外部寬度，234是內(nèi)部寬度
外部寬度和流的特性
- 正常流寬度 但是如果我們給一個表現(xiàn)為外部尺寸的塊級元素設(shè)置了寬度集灌，流動性就會丟失
- 格式化寬度
position:absolute/fixed
一般來說絕對定位寬度表現(xiàn)為包裹性悔雹，由內(nèi)部尺寸決定，有一種例外欣喧，當left/righttop/bottom同時存在的時候
內(nèi)部寬度和流的特性：
- 包裹性（1 包裹性 2 自適應(yīng)性）
自適應(yīng)性是指 元素尺寸由內(nèi)部元素決定腌零，但是永遠的小于包含塊容器的尺寸 - 首選最小寬度
- 中文（東亞文字）的最小寬度是14
- 西方文字的最小寬度 由特定的連續(xù)的英文字符單元決定
- 類似于圖片的這種替換元素的最小寬度是自己本身
- 最大寬度
元素能達到的最大寬度，其實就是包裹性元素設(shè)置的white-space:nowrap申明后的寬度唆阿。
如果內(nèi)部沒有塊級元素或者是塊級元素沒有設(shè)定寬度值益涧，最大寬度實際上是連續(xù)內(nèi)聯(lián)盒子的寬度
3、 width的細節(jié)
有四種盒子：content box,padding box,border box,margin box
寬度的表現(xiàn)設(shè)定不合理的原因：
- 設(shè)置寬度流動性丟失驯鳖，尤其是寬度設(shè)定在content上的時候
- 與現(xiàn)實世界表現(xiàn)不一致的困擾闲询；可能是指的寬度是content的，但是開發(fā)者以為是包含了
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;
}
如上就是設(shè)置了父元素扭弧，然后子元素根據(jù)流動性實現(xiàn)內(nèi)部自適應(yīng)
張鑫旭就推薦，整個html只有一個widht记舆，然后剩下的就全用流體布局實現(xiàn)鸽捻。
5、 box-sizing
可以理解為寬度作用的細節(jié)
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的背景永遠透明在規(guī)范里標明了
*{box-sizing:border-box}
/**這種方式不好删咱，1浪費渲染，search的搜索框本來就是這個屬性豪筝，2痰滋、不能真正的實現(xiàn)無計算**/
/**推薦**/
input ，textarea,img,video ,object{
box-sizing:border-box;
}
/**因為box-sizing設(shè)計的主要目的還是為了這種原色普通文本框和文本域的計算**/
height 的細節(jié)
1续崖、height：100%
如果父元素不確定的話敲街，那么height的百分比基本上就可以當成沒看見了。
原因：如果包含塊的高度沒顯示指定（即高度由內(nèi)容決定严望，且該元素不是絕對定位多艇，那么計算值就是auto） 'auto'* 100% = nan
如何支持100% 的高度
1、顯示的確定高度
2像吻、使用絕對定位峻黍，注意的是絕對定位元素的百分比和非絕對定位元素的百分比是有區(qū)別的复隆。
-
絕對定位的百分比是相對于
padding-box的 -
非絕對定位的百分比是相對于
content box的
min-width /max-width /min-height/max-height
1 、min-width /max-width 與流
其出現(xiàn)一定是自適應(yīng)布局 或者是流布局中出現(xiàn)的姆涩。如果定死了挽拂，就沒有變化的可能性
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
