盒子模型、div盒子、边框粗细、外边距
1.盒子模型
概念：盒子模型是由margin + border + padding +網頁元素（content)組成
圖示：
最簡單的盒子：
<style>
? ? ? ? ul{
? ? ? ? ? ? border: 1px solid rgb(101, 125, 230);
? ? ? ? }
? ? </style>
<body>
<div>
? ? ? ? <ul>
? ? ? ? ? ? <li>我是中國人，來自北京</li>
? ? ? ? ? ? <li>我是中國人，來自北京</li>
? ? ? ? ? ? <li>我是中國人，來自北京</li>
? ? ? ? ? ? <li>我是中國人，來自北京</li>
? ? ? ? ? ? <li>我是中國人，來自北京</li>
? ? ? ? </ul>
? ? </div>
</body>
注釋：div是一個塊元素，上面代碼中div是最外面的盒子，里面有ul標簽（小盒子），畫圖寫代碼最好在每個大塊外面鑲嵌一個div。
2.div盒子
能簡單的出現一個盒子模型的style樣式
div{
? ? ? ? ? ? width: 200px;
//寬200px
? ? ? ? ? ? height: 200px;
//高200px
????????????border-width:3px ;
//邊框粗細3px
????????????border-style: solid;
//邊框樣式solid(實線)
}
注意：單獨設置顏色時候必須要把border-style設置好，否則在網頁顯示不出來。
也可以使盒子有些顏色使用border-color: 顏色;
顏色部分可以使用qq截圖鼠標懸浮某個顏色后減肥ctrl+c是十六進制的顏色，使用c鍵盤是rgba顏色顯示，也可以使用顏色的英文。
/* 設置上邊框顏色 */
? ? ? ? ? ? border-top-color: 顏色;
/* 設置左邊框顏色 */
? ? ? ? ? ? border-left-color: 顏色;
/* 設置右邊框顏色 */
? ? ? ? ? ? border-right-color: 顏色;
/* 設置下邊框顏色 */
? ? ? ? ? ? border-bottom-color: 顏色;
/* 第一個表示上下值，第二個表示左右值 */
? ? ? ? ? ? border-color: 顏色1 顏色2;
/* 第一個值表示上邊框的顏色 第二個值表示左右邊框的顏色 第三個值表示下邊框的顏色*/
? ? ? ? ? ? border-color: 顏色1顏色2 顏色3;
/*按照順時針的順序第一個值表示上邊框的顏色
? ? ? ? ? ? ? ? 第二個值表示右邊框的顏色
? ? ? ? ? ? ? ? 第三個值表示下邊框的顏色
? ? ? ? ? ? ? ? 第四個值表示左邊框的顏色*/
? ? ? ? ? ? ?border-color: 顏色1 顏色2?顏色3?顏色4;
?
3.邊框粗細
width: 200px;
height: 100px;
?border-style:solid;
border-color:lightslategray lightpink lightblue lightgreen;
??/*設置了邊框的顏色和類型之后,系統會默認設置邊框的粗細為3像素--medium*/
例：? ? ? ? ? ? ?border-width: thick;
? ? ? ? ? ? /*粗的邊框系統會設置為5像素 */
?例：? ? ? ? ? ? border-width: medium;?
? ? ? ? ? ? /* medium是中等的粗細系統會默認設置為3像素*/
例：?? ? ? ? ? ? /*border-width: thin;?
? ? ? ? ? ? /* thin是最細的系統會默認設置為1像素*/
? ? ? ? ? ? /* 設置上邊框的粗細 */
例：?? ? ? ? ? ? ?border-top-width:10px ;?
? ? ? ? ? ? /* 設置左邊框的粗細 */
?例：? ? ? ? ? ? ?border-left-width:8px ;?
? ? ? ? ? ? /* 設置右邊框的粗細 */
?例：? ? ? ? ? ? ?border-right-width:8px ;?
? ? ? ? ? ? /* 設置下邊框的粗細 */
? ? 例：?? ? ? ? /border-bottom-width:10px ;?
? ? ? ? ? ? /*設置邊框上下為10px左右為20px */
? ?例：? ? ? ? ? /border-width : 10px 20px;?
? ? ? ? ? ? /*設置邊框的粗細為上邊框10px左右邊框粗細為20p×下邊框粗細為30px */
? ? 例：?? ? ? ? border-width: 10px 20px 50px;?
? ? ? ? ? ? /*順時針的順序,設置邊框的粗細上邊框為10px右邊框為30px下邊框為50px左邊框為80px*/
? ? ?例：? ? ? ? ?border-width: 10px 30px 50px 80px;?
? ? ? ? ? ? /*?設置邊框的粗細可以改變盒子的看上去的寬高?*/
? ? ? ? ? ? /* 邊框沒有任何樣式，沒有顯示 */
例：?? ? ? ? ? ? /* border-style: none; */
? ? ? ? ? ? /* 隱藏邊框樣式，沒有顯示 */
例：?? ? ? ? ? ? /* border-style: hidden; */
? ? ? ? ? ? /* 邊框樣式變成點狀 */
? 例：?? ? ? ? ? /* border-style:dotted; */
? ? ? ? ? ? /*邊框樣式虛線 ?*/
例：?? ? ? ? ? ? /* border-style: dashed; */
? ? ? ? ? ? /* 邊框樣式兩天實線 */
例：?? ? ? ? ? ? /* border-style: double; */
? ? ? ? ? ? /*兩個值表示上下是點狀左右是線狀*/
?例：? ? ? ? ? /* border-style: dotted dashed; */
? ? ? ? ? ? /*上邊框為點狀左右為虛線下邊框是雙實線*/
? 例：?? ? ? ? ? /* border-style: dotted dashed double; */
? ? ? ? ? ? /*順時針按照上右下左的順序,上邊框是實線、右邊框是點狀、下邊框是虛線、左邊框是雙實線*/
?例：? ? ? ? ? ? /* border-style: solid dotted dashed double; */
?/* 舉例子：下邊框為雙實線 */
?border-bottom-style: double;
4.外邊距
?.div1{
? ? ? ? ? ? width: 380px;
? ? ? ? ? ? border: 2px solid lightcoral;
? ? ? ? }
??.div2{
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? height: 100px;
? ? ? ? ? ? border: 2px dashed lightblue;
? ? ? ? ? ?
? ? ? ? }
<div class="div1">
? ? ? ? <div class="div2">
? ? ? ? </div>
? ? </div>
?注意：如果需要設置下邊距，那么最外面的邊框不能設置height高度，有內容邊框會自動撐
????????????/*margin只設置一個值時上右下左都會設置10px的外邊距*/
? ? ? ? ? ? ?margin: 10px;?
? ? ? ? ? ? /* margin設置兩個值時上下外邊距都是10px左右外邊距都是50px */
? ? ? ? ? ? margin : 10px 50px;
? ? ? ? ? ? /* 設置三個值表示上邊距是10px、左右是30px、下邊距是20px */
? ? ? ? ? ? ?margin:10px 30px 20px;??
? ? ? ? ? ? /* margin-top設置邊框上邊距距離 */
? ? ? ? ? ? margin-top: 30px;
? ? ? ? ? ? /* margin-left設置邊框左邊距距離 */
? ? ? ? ? ? margin-left: 30px;?
? ? ? ? ? ? /* margin-bottom設置下邊距 */
? ? ? ? ? ? margin-bottom: 20px;?
5.練習
建議自己做下哦！
?
?
總結
以上是生活随笔為你收集整理的盒子模型、div盒子、边框粗细、外边距的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MAYA 绑定 选一点，列出影响它的骨头
- 下一篇： 英特尔® 虚拟化技术