4 CSS佈局與定位

在這裏插入圖片描述

1. 盒子模型

在這裏插入圖片描述
同時內外邊距,邊框都有四個方向,如border-top,border-right,border-bottom,border-left
在這裏插入圖片描述
實例
在這裏插入圖片描述

1.1 overflow屬性

在這裏插入圖片描述

1.2 border屬性

在這裏插入圖片描述
border案例 水平線
在這裏插入圖片描述

1.3 padding屬性

對瀏覽器默認的設置清零
*{
marging:0;
padding:0;
}
在這裏插入圖片描述

1.4 margin屬性

在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述## 2. 定位機制

2.1 文檔流定位

在這裏插入圖片描述
在這裏插入圖片描述

2.1.1 block

在這裏插入圖片描述
將元素顯示爲block,如inline元素a轉換爲block元素,從而使a元素具有塊狀元素特點 display:block;

2.1.2 inline

在這裏插入圖片描述
在這裏插入圖片描述

2.1.3 inline-block

在這裏插入圖片描述

2.1.4 小結

在這裏插入圖片描述
在這裏插入圖片描述

2.2 浮動定位

在這裏插入圖片描述

2.2.1 float屬性

在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
float屬性的特點
在這裏插入圖片描述
在這裏插入圖片描述

2.2.2 clear屬性

在這裏插入圖片描述

在這裏插入圖片描述
利用clear可以重新佈局
在這裏插入圖片描述

2.3 層定位

在這裏插入圖片描述

在這裏插入圖片描述

2.3.1 position

在這裏插入圖片描述

2.3.2 fixed固定定位

在這裏插入圖片描述

2.3.3 relative相對定位

在這裏插入圖片描述
在這裏插入圖片描述

2.3.4 absolute絕對定位

在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述

2.3.5 定位結合使用

在這裏插入圖片描述
在這裏插入圖片描述

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章