# 5.盒模型 - box-sizing:content-box | border-box; 預設content-box 一個盒模型的功能強弱，直接決定了佈局是否簡潔，決定了編程的複雜度。 正常盒子： boxWidth = width + border*2 + padding*2; IE6混雜模式的 ...
# 5.盒模型
- box-sizing:content-box | border-box; 預設content-box 一個盒模型的功能強弱，直接決定了佈局是否簡潔，決定了編程的複雜度。
正常盒子： boxWidth = width + border*2 + padding*2;
IE6混雜模式的盒子整體寬度 boxWidth = width; contentWidth = width - border*2 - padding*2;
- overflow:visiable | hidden | auto | scroll;
- resize: none | both | horizontal | vertical; 要配合overflow使用
- flex display:flex | inline-flex; flex:將對象作為彈性伸縮和顯示 inline-flex:將對象作為內聯塊級彈性伸縮盒顯示。
```html /* * align-content:center;//多行文本居中 */
/* * justify-content:center; * align-items:center;//單行文本居中 */ <style> .wrapper{ width:300px; height:300px; border:1px solid black; display:flex; /*flex-direction:row | row-reverse | column | column-reverse;主軸方向*/ /*flex-wrapper:wrap | nowrap | wrap-reverse;換行 */ /*justify-content:flex-start | flex-end | center | space-between | space-around;基於主軸的對齊方式 */
/*align-items:flex-start | flex-end | center | baseline | stretch;基於交叉軸的對齊方式,主要還是針對單行元素來處理對齊方式*/
/*align-content:flex-start | flex-end | center | space-between | space-around;基於交叉軸的對齊方式,主要還是針對多行元素來處理對齊方式*/ }
.content{ width:150px; height:150px; border:1px solid green; box-sizing:border-box;
/*order:0;預設值為0;數值大的在前面 */ /*align-self:auto | flexstart | flex-end | center | baseline | stretch;子項基於交叉軸的對齊方式 */
/*flex-grow:1;基於比例瓜分剩餘空間,伸展性,0則不參與瓜分*/ /*flex-shrink: */ /*flex-basis:auto | 100px;用來覆蓋子項的width */ } </style> <div class="wrapper"> <div class="content"></div> <div class="content"></div> <div class="content"></div> </div> ```
```html
<style> /* flex-shrink的計算 */ .wrapper{ width:600px; height:300px; border:1px solid black; display:flex; }
.content{ width:100px; height:100px; flex-shrink:1; }
.content:nth-of-type(2){ width:200px; flex-shrink:1; } .content:nth-of-type(3){ width:400px; flex-shrink:3; } /* 總長度：各自子元素內容盒的width * 各自子元素的flex-shrink值 的總和： (100 * 1) + (200 * 1) + (400 * 3) = 1500; 計算第三個content壓縮後的長度： 要壓縮的總長度 = 子元素內容盒的總長度 - 父親的內容盒長度 100 + 200 + 400 - 600 = 100;
子元素壓縮的長度 = (子元素的width * 子元素的flex-shrink) / 上面的總長度 * 要壓縮的總長度 (400 * 3)/1500 * 100 = 80
最終子元素內容盒的width = 子元素內容盒的寬度 - 子元素要壓縮的長度 400 - 80 = 320; */ </style> <div class="wrapper"> <div class="content"></div> <div class="content"></div> <div class="content"></div> </div>
/* flex-basis 只寫了flex-basis或者flex-basis大於width，代表元素的最小寬度。 當不換行內容超過內容區時，容器會被撐開
設置的width和flex-basis且flex-basis小於width時，代表元素的最小寬度是flex-basis，最大寬度是width。 當不換行內容超過內容區時，容器會被撐開但是容器寬度不會超過width。
無論什麼情況，被不換行內容撐開的容器，不會被壓縮
word-break:break-word;//元素中內容可以換行 彈性盒一般都要換行，才能進行正常的壓縮。 */ ```
```html <style> /* 彈性盒的應用 */ /* 1.單行居中 */ .wrapper{ width:300px; height:300px; display:flex; border:1px solid black; } .content{ width:100px; height:100px; border:1px solid black; justify-content:center; align-items:center; } </style> <div> <div class="content"></div> </div>
<style> /* 2.多行居中 */ .wrapper{ width:300px; height:300px; display:flex; border:1px solid black; } .content{ width:100px; height:100px; border:1px solid black; justify-content:center; align-content:center; } </style> <div> <div class="content"></div> <div class="content"></div> <div class="content"></div> </div>
<style> /* 3.可動態增加的導航欄 */ .wrapper{ width:300px; height:200px; display:flex; border:1px solid black; } .item{ height:30px; flex:1 1 auto; } </style> <div> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>
<style> /* 4.等分佈局 */ .wrapper{ width:400px; height:200px; display:flex; border:1px solid black; } .content{ border:1px solid black; box-sizing:border-box; height:100px; flex:1 1 auto; } </style> <div> <div class="content">1</div> <div class="content">2</div> <div class="content">3</div> </div>
<style> /* 4.中間固定，兩邊自適應 */ .wrapper{ width:400px; height:200px; display:flex; border:1px solid black; } .content{ border:1px solid black; box-sizing:border-box; height:100px; flex:1 1 auto; } .content:nth-of-type(2){ flex:0 0 200px; } </style> <div> <div class="content">1</div> <div class="content">2</div> <div class="content">3</div> </div>
<style> /* 5.多行換行，一次排列 */ .wrapper{ width:400px; height:800px; border:1px solid black; display:flex; flex-wrap:wrap; align-content:flex-start; } .content{ border:1px solid black; box-sizing:border-box; height:100px; flex:1 1 auto; } .content:nth-of-type(2){ flex:0 0 200px; } </style> <div> <div class="content">1</div> <div class="content">2</div> <div class="content">3</div> <div class="content">4</div> <div class="content">5</div> <div class="content">6</div> <div class="content">7</div> <div class="content">8</div> <div class="content">9</div> <div class="content">10</div> <div class="content">11</div> <div class="content">12</div> </div>
<style> /* 6.聖杯佈局 */ .wrapper{ width:300px; height:300px; border:1px solid black; display:flex; flex-direction:column;/*垂直佈局*/ } .header, .footer{ border:1px solid black; box-sizing:border-box; flex:0 0 20%; } .contain{ flex:1 1 auto; display: flex; } .left, .right{ flex:0 0 20%; } .center{ flex: 1 1 auto; } </style> <div> <div class="header"></div> <div class="contain"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div> <div class="footer"></div> </div> ``` 以上是markdown格式的筆記
