前端基礎(一)--CSS布局基礎
盒模型
CSS中， Box Model叫盒模型（或框模型），Box Model規定了元素框處理元素內容（element content）、內邊距（padding）、邊框（border） 和 外邊距（margin） 的方式。這種方式基本類似于Android開發中的布局方式，所以對于Android developer學習前端布局方式可以很快的入門。但是有一點，在Android中設置margin和padding的順序是left、top、right、bottom，比如setMargin(10, 20, 30, 20)分別代表左上右下的間距分別為10px,20px,30px,20px;但是在CSS中的順序是top、right、bottom、left，比如margin: [10px, 20px, 30px, 20px]分別代表左上右下間距分別為20px,10px,20px,30px。
概述圖如下
定位基礎
position定位
position包括以下幾種類型的定位
-
static 默認值。任意 position: static; 的元素不會被特殊的定位。一個 static 元素表示它不會被“positioned”，一個 position 屬性被設置為其他值的元素表示它會被“positioned”。
-
relative 相對布局，在原有基礎上偏離使框偏離某個方向固定距離。跟Android中的布局方式很像
例子
1 2 3 4 5 6 7 |
.relative2 {
position: relative;
top: -20px; //在原有top位置上向上偏移-20px
left: 20px; //在原有left位置上向左偏移20px
background-color: white;
width: 500px;
}
|
- absolute 絕對布局，向上尋找使用過
position定位過(除了默認值static外)的祖先元素，然后依據該元素進行定位。
1 2 3 4 5 6 7 8 9 10 11 12 |
.relative {
position: relative;
width: 600px;
height: 400px;
}
.absolute {
position: absolute;
top: 120px;
right: 0;
width: 300px;
height: 200px;
}
|
如圖
- fixed 固定定位，相對于視窗來定位，這意味著即便頁面滾動，它還是會停留在相同的位置。相當于在Android開發中
FrameLayout中的某個元素指定layout_gravity使其固定在根布局的某個固定的位置。
例子
1 2 3 4 5 6 7 |
.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 200px;
background-color: white;
}
|
該元素的位置始終在右下角保持不變。
float浮動
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
可以這樣理解，比如float: left就是向左移動，直到坐邊緣碰到根元素或者另外一個佛洞的邊框的邊緣。也就是說，如果好好幾個向左浮動的元素，那么它們是從左到右依次排列的。
如下面的圖
clear清除浮動
clear 屬性定義了元素的哪邊上不允許出現浮動元素。
具體的例子參考這里
三欄式布局
ife其中的一個任務三欄式布局
就是通過CSS的布局基礎知識來寫的。包括position和float。
參考
via:http://w4lle.github.io/2016/04/17/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80-%E4%B8%80-CSS%E5%B8%83%E5%B1%80%E5%9F%BA%E7%A1%80/