1.前言
平時在寫css的時候，並沒有刻意關注盒子的width屬性，有時候要加，有時候不加，有時候預設佔滿父盒子，有時候卻又沒有寬度。今來看看到底有哪些情況
2.介紹
//dom結構
="box"
>
="son"
>
<
/div>
<
/div>
<
/body>
//css樣式
.box
.son1. 當沒有給子盒子設定寬度時（預設撐滿父盒子）效果如下
2. 當給子元素設定display: inline，或者display: inline-block;時 預設寬度就為0；（也就是只要是行內元素了就不會預設佔寬了）效果如下
3. 很多時候用到float時也會有with 不佔寬的問題，這時候我們就要認清本質，在浮動的時候首先，元素可以當作會變為inline-block並且脫離文件流所以效果也可想而知 效果同上
4. 還有position屬性 它也可以改變元素的display屬性，同樣因為值為absolute、fixed都會使元素脫離文件流，並且可以看所display的值改為了inline-block 所以也同樣不會佔寬度
5. 還有使用flex布局時，如果父盒子flex-direction: row;
也會使元素變成inline-block同樣也會使得子元素不佔寬度
6.總結
總的來說想判斷佔不佔寬度，就想想它是不是塊級元素了，如果是那麼便會預設佔滿父盒子的寬度
CSS盒子塌陷問題的討論
什麼是盒子塌陷 理論上在父元素內部的元素 出現在盒子外部 出現原因?乙個父親不能被自己浮動的兒子，撐出高度。當父元素未設定 足夠 高度的時候，子元素設定了浮動的屬性時，子元素就會跳出父元素的邊界 脫離文件流 當父元素的高度為auto時，而父元素中又沒有其它非浮動的可見元素時，父盒子的高度就會直接塌陷...
js中的width問題
1 在jquery中，width 方法用於獲得元素寬度 innerwidth 方法用於獲得包括內邊界 padding 的元素寬度，outerwidth 方法用於獲得包括內邊界 padding 和邊框 border 的元素寬度，如果outerwidth 方法的引數為true則外邊界 margin 也會...
CSS元素的width和水平margin的設定
如果沒有設定box sizing為其他值，元素預設的width是指其content box的寬度。只有width，height和margin可以設定為auto，padding和border必須設定為具體的值，或者預設值是0 1.在width，margin left和margin right這3個屬性...