CSS--display（flex重點）
阿新 • • 發佈：2019-01-11
display
首先得寫寫flex——-彈性佈局
flex
div{display:flex;}設定了flex後
- 子元素行內元素支援寬高了
- 子元素的clear,float,vertical-align失效
詳細的在阮一峰大神的部落格上都有，這裡附上一些不太清楚的：
flew-grow的計算方法
- 當容器有多餘空間的時候，室友flew-grow才有用
- flew-grow是介於0-1的數字，預設是0，原大小
下面這個例子，.div2的width=剩餘width*flex-grow+設定寬度=（700-500）*0.1+100=120px
<!DOCTYPE html> flew-shrink計算方法
- 數字在0-1是表示放大，預設為1，原大小
- 數字大於1是縮小
計算公式：
.div2的width=設定寬度-設定寬度(div2的flew-shrink/總的flew-shrink)=100-100(5/(1+5+1+1+1+1))=50px
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.bg{display:flex;width: 500px;}
.div1{height: 100px; width: 100px;background: lightblue;}
.div2{height: 100px; width: 100px;background: lightyellow;flex-shrink: 5;}
</style>
</head>
<body >
<div class="bg">
<span class="div1">1</span>
<span class="div2">1</span>
<span class="div1">1</span>
<span class="div1">1</span>
<span class="div1">1</span>
<span class="div1">1</span>
</div>
</body>
</html>flex-basis計算邏輯
flex-basis只是設定content內容，即如果有padding和border，總寬度為flex-basis+border+padding
如果設定了width，同時設定了flex-basis取得是flex-basis寬度
下面例子的width=flex-basis=200px
.div2{height: 100px; width:100px;padding: 10px;border: 5px solid red;margin: 10px;flex-basis:200px;}下面是最常用行內的block/inline/inline-block/table的注意事項
block
- 換行
- 可以設定寬高
- 支援margin padding
- 程式碼換行不解析
inline
- 不換行
- 不支援寬高
- 不支援上下margin和padding
- 內容撐開
- 程式碼換行被解析（如果font-size：16px，那就佔8px）
inline-block
- 塊元素同行顯示
- 內嵌支援寬高和上下padding
注意：ie67下不認識inline-block，但是對於inline元素來說，使用inline-block會出發layout重新計算寬高，使得元素具有inline-block屬性。
但是塊元素依舊是行佈局。
解決方案是：
/*推薦:IE6、7*/
div {
display:inline-block;
*zoom:1;
*display: inline;
}
/*推薦*/div {
display:inline-block;
_zoom:1;
_display:inline;
} table-cell
- ie67不支援
- 利用同行等高，寬度自動調節這個特性
常見應用有左固定，右自適應佈局：
<style type="text/css">
.left{float:left; width:260px; padding:10px; margin-right:10px; border:1px solid #ccc;}
.classtd{ display: table-cell; width:3000px; padding:10px; border:1px solid #ccc;}
</style>
<div class="left">我是左邊欄目</div>
<div class="classtd">
我是自適應的右邊
</div>