定義：

在CSS處理頁面的時候，它認為每個元素都是包含在一個不可見的盒子里，盒子模型由內容區域、內容區域周圍空間(內邊距padding)、內邊距的外邊緣(邊框，border)和邊框外面將元素與相鄰元素隔開的不可見區域(margin)構成。我們將盒子模型想象成一幅掛在墻上的畫，畫是內容，襯邊是內邊距，畫框是邊框，與相鄰畫框之間的距離是外邊距。

邊框(給html元素添加邊框線，會改變元素的寬度)

上邊框

1.?Border-top-color:顏色值;上邊框的顏色

2.?Border-top-style:線型;線型有solid實線 ?dashed虛線dotted點狀線

3.?Border-top-width:粗細；例如border-top-width:2px;

簡寫為

Border-top:粗細 線型 顏色;

右邊框

1.?Border-right-color:顏色值;上邊框的顏色

2.?Border-right-style:線型;線型有solid實線 ?dashed虛線dotted點狀線

3.?Border-right-width:粗細；例如border-right-width:2px;

簡寫為

Border-right:粗細 線型 顏色;

下邊框

1.?Border-bottom -color:顏色值;上邊框的顏色

2.?Border-bottom-style:線型;線型有solid實線 ?dashed虛線dotted點狀線

3.?Border-bottom-width:粗細；例如border-bottom-width:2px;

簡寫為

Border-bottom:粗細 線型 顏色;

左邊框

1.?Border-left-color:顏色值;上邊框的顏色

2.?Border- left -style:線型;線型有solid實線 ?dashed虛線dotted點狀線

3.?Border- left -width:粗細；例如border- left -width:2px;

簡寫為

Border- left:粗細 線型 顏色;

上右下左四條邊框的樣式一樣

可以簡寫為 ?border:粗細 線型 顏色；

盒子模型(div、等塊元素、行內塊元素)

盒子的必要屬性：

內容區：width、height和 border:

內邊距 padding(將盒子撐大，盒子的寬高會改變)

內容和邊框之間的距離

1.?Padding-top：數值；內容和上邊框之間的距離

2.?Padding-right：數值；內容和右邊框之間的距離

3.?Padding-bottom：數值；內容和下邊框之間的距離

4.?Padding-left：數值；內容和左邊框之間的距離

簡寫形式

Padding：10px 20px 30px 40px;上邊框距離10px ?右 ?20px ??下邊框30px ???左40px

Padding:10px 20px 30px; 上10px ?????左右 ?20px????下 ?30px

Padding:10px 30px; ??上下10px ??左右30px

Padding:10px; ??上右下左都是10px

注意：一個值的話上右下左等距；兩個值上下等距、左右等距；三個值左右等距。

外邊距 margin(默認8px，不會將盒子撐大是盒子與盒子之間的距離)

這里需要在注意的是：外邊距在操作行內與元素的時候只能操作元素與元素左右之間的距離，不能操作上下距離html>

Title

.box1{

width:?80px;

height:?90px;

border:2px?solid?blue;

padding:?20px?15px;

-ms-word-wrap:break-word;

word-wrap:break-word;

}

.box2{

width:?50px;

height:?50px;

border:2px?solid?pink;

padding:?20px;

margin:20px;

}

span{

border:1px?solid?red;

/*padding:20px;*/

margin:20px;

}

https://www.imooc.com/u/6491408/articles

木子大大

木子大大木子大大

木子大大

網站布局的一個思想

網站的結構就是兩部分(橫向和縱向) 如果是縱向的就是正常的文檔流，設置內容器的寬度和高度，設置內容和邊框之間的距離 padding ,邊框往外的部分margin border調這些屬性就可以

如果是橫向排列，我們就要使用浮動

浮動(在需要浮動的元素上面添加浮動，將不在一行的元素排在一行上面)

Float：left；左浮動

Float: right; 右浮動

浮動的特點：

使元素站隊(站隊的邊界是他父級的邊界)，一行站滿后從下一行開始

設置浮動的元素，不占空間(脫標)

設置浮動的元素層級高于普通元素

設置浮動之后，無論之前是否是塊元素，設置浮動之后一定是塊元素

盒子被浮動后后面的盒子會根據文本流動占位移動那個盒子的位置

清除浮動(清楚周邊的浮動流，恢復到正常的文檔流)

Clear:left;

Clear:right;

Clear:both; /*清除左浮動，右清除右浮動*/

html>

Title

.parent{

width:?400px;

height:?150px;

border:1px?solid?pink;

padding:?20px;

}

.child{

width:?90px;

height:?100px;

border:?1px?solid?hotpink;

float:?left;

margin-right:?20px;

}

.child3{

float:?right;

}

.child4{

width:?100px;

height:?150px;

border:?1px?solid?black;

clear:?both;

}

muzidigbigmuzidigbigmuzidigbigmuzidigbig

lDiv里面還有

p、div父盒子沒有設置固定高，里面div設置了浮動，父元素受影響，無法正常的計算，如何讓父元素得到一個自然高

在父盒子里面的p設置清除浮動的屬性clear:both;

瀏覽器的一個bug ?----在父元素的樣式中加overflow:hidden;

可以讓父元素得到一個自然高

不受浮動的影響 ?? 。

若有不足請多多指教！希望給您帶來幫助！

總結

以上是生活随笔為你收集整理的html文件div盒子浮动,css基础03-盒模型、网站布局思想、浮动以及浮动带来的影响...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。