Web前端篇 CSS盒模型

常用塊元素由：

p,h1-h6,div,ul,ol,tr,li,form

a,span,em,i,strong,u,

/*上面三句**相當於一句**：border:3px solid red;*/

/*同樣,也可以分別設定邊框四個方向的粗細 線性樣式 顏色,跟padding的四個方向一樣。*/

/*上下5px 左右10px*/

border-width:5px 10px;

/*上：實現 右：點狀 下：雙線 左：虛線*/

border-style: solid dotted double dashed;

/*上：紅色 左右：綠色 下：黃色*/

border-color: red green yellow;

border-top-width: 10px;

border-top-color: red;
border-top-style: solid;
border-right-width: 10px;
border-right-color: red;
border-right-style: solid;
border-bottom-width: 10px;
border-bottom-color: red;
border-bottom-style: solid;
border-left-width: 10px;
border-left-color: red;
border-left-style:solid;
相當於border:10px solid red;

3.margin

注意：盒模型的外邊距水平方向上不會出現問題，在垂直方向上會出現「**外邊距合併**」的現象。

在網頁排版中，外邊距合併的問題也會時常出現，我們如何避免出現這種問題呢？

很簡單，我們如果想讓上下的兩個盒子中間有間距，只需要設定乙個盒子的乙個方向即可。沒必要去碰觸外邊距塌陷的問題，還得找解決問題的方法，得不償失。

web前端 之 CSS盒模型

盒模型包括margin border padding content 由外向裡 盒模型包括標準模型和ie模型 如下圖所示 注意他們的高寬度包含的內容 標準模型高度和寬度指的是content的高度和寬度 ie模型高度和寬度指的是content padding border加起來的高度和寬度 標準模型 ...

WEB學習 CSS盒模型

border是乙個大綜合屬性，border 1px solid red 就是把4個邊框，都設定為1px寬度 線型實線 red顏色。border屬性能夠被拆開，有兩大種拆開的方式 1 按3要素 border width border style border color 2 按方向 border to...

前端 關於CSS盒模型

矩形區域中各個屬性的取值只有margin可以取負值，只有width和margin可以取auto關鍵字，border不能為百分數，其他屬性都只能取 正的數字或者正的百分數。其中margin和padding設定的值是乙個塊區域的垂直高度，這塊區域的長和寬是隨著內容的width和height變化 而變化的...