html(7)盒子模型
1. 理解什麽盒子模型
網頁中，所有的html標簽，都可以做為一個盒子
網頁元素(內容)：文字、圖片<img/>
2. 盒子的邊框（順時針：上右下左 ）
a) border-width:寬度( border-top-width border-right-width
border-bottom-width border-left-width)
b) border-style:樣式( solid細邊框、dashed虛線邊框)
c) border-color:顏色
d) 簡寫：border:1px solid red;
|
屬性 |
說明（順時針：上右下左） |
|
|
border-top-color |
設置上邊框顏色 |
|
|
border-right-color |
設置右邊框顏色 |
|
|
border-bottom-color |
設置下邊框顏色 |
|
|
border-left-color |
設置左邊框顏色 |
|
|
border-color |
設置4個邊框為同一顏色 |
border-color：red; |
|
上下邊框顏色為blue 左右邊框顏色為red |
border-color: blue red; |
|
|
上邊框顏色為blue 左右邊框顏色為red 下邊框顏色為green |
border-color: blue red green; |
|
|
上、下、左、右邊框顏色 分別為blue、red、green、black |
border-color: blue red green black; |
|
e) 外邊距(盒子之間的距離)——margin
1、 居中——margin : 0px auto;
2、 margin-left\right\top\bottom：數字px;
f) 內邊距(文字或圖片和盒子中間的間隙)——padding
padding-top\right\bottom\left (數字px)
說明：邊框、外邊距、內邊距，
簡寫方式方向（順時針），按上、右、下、左設置
一、 標準文檔流
1、 塊級元素
a) 特征：單獨占據一塊區域，單獨占一行，裏面包含內聯元素
b) 常用的塊級元素：
i. 標題標簽——<h1…h6>
ii. 段落標簽——<p>
iii. 層——<div>
iv. 表格——<table>
v. 表單——<form>
vi. 列表：有序列表、無序列表、定義列表
2、 內聯元素
常用的內聯元素：<img/>、<span>、<strong> 、<em>、<a>、
表單元素
3、 標準文檔流規則：塊級元素，包含內聯元素，反之則不行
三、 控制元素顯示和隱藏——display屬性
none——隱藏 block——顯示
html(7)盒子模型