10-[CSS]-盒模型：border，padding，margin
阿新 • • 發佈：2018-06-02
html文檔 alt PE css tex 線性 lds RM solid
1、CSS盒子模型
HTML文檔中的每個元素都被描繪成矩形盒子，這些矩形盒子通過一個模型來描述其占用空間，這個模型稱為盒子模型。 盒子模型通過四個邊界來描述：margin（外邊距），border（邊框），padding（內填充），content（內容區域），如圖所示：
<!-- 盒模型： 在網頁中 基本上都會顯示一些方方正正的盒子，這種盒子就被我們稱為盒模型 重要的屬性： width,height,padding,border, margin width: 指的是內容的寬度，而不是整個盒子真實的寬度 height: 指的是內容的高度，而不是整個盒子真實的高度 做一個寬度402*402的盒子，你應該如何設計？-->
<!-- 如果想保證盒子的真實寬度，加width應該減padding 減width 應該加padding -->
2、border
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>border</title> <style type="text/css"> .box{ width: 200px; height: 200px; /*簡寫*/ /*border: 5px solid red;*/ /*按照3要素*/ /*寬度，類型，顏色*/ /*border-width: 5px; border-style: solid; border-color: red;*/ /*border-width: 5px 10px; border-style: solid dotted double dashed; border-color: red green yellow;*/ /* 按照方向分*/ /* 四個值 上 右 下 左 */ /* border-style: dotted dashed double solid; border-width: 5px 10px 15px 20px; border-color: blue red yellow slateblue; */ /* 三個值 上 左右 下*/ /* border-style: dotted double solid; border-width: 5px 10px 20px; border-color: blue yellow slateblue; */ /* 兩個值 上下 左右 */ /* border-style: dotted solid; border-width: 5px 20px; border-color: blue yellow; */ /* 一個值 上下左右 */ /* border-style: dotted; border-width: 20px; border-color: blue; */ /*設置border沒有樣式*/ /*border: none;*/ /*border-top: 0;*/ border-left: 10px solid red; } </style> </head> <body> <!-- border: 邊框的意思 邊框有三個要素： 粗細 線性 顏色 如果顏色不寫，默認是黑色的 如果 粗細不寫 不顯示。 只寫線性樣式，默認的有上下左右 3px的寬度 solid 默認的黑色 --> <div class="box"></div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*小三角 箭頭指向下方*/ div{ width: 0; height: 0; border-bottom: 20px solid red; border-left: 20px solid transparent; border-right: 20px solid transparent; } </style> </head> <body> <div></div> </body> </html>
3.padding內邊距
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>padding</title> <style type="text/css"> .box{ width: 300px; height: 300px; /*padding: 30px;*/ background-color: red; /*border: 5px solid yellow;*/ /*小屬性設置*/ /*padding-top: 30px; padding-right: 30px; padding-bottom: 30px; padding-left: 30px;*/ /*綜合屬性設置，用空格隔開*/ /*上 右 下 左*/ /*padding: 20px 30px 40px 50px ;*/ /*上 左右 下*/ /*padding: 20px 30px 40px;*/ /* 上下 左右*/ /*padding: 20px 30px;*/ /*上下左右*/ padding: 20px; } </style> </head> <body> <!-- padding: 就是內邊距。 padding的區域是有背景顏色。並且背景顏色和內容區域顏色一樣 也就是說background-color這個屬性將填充所有的border以內的區域 就是邊框到內容之間的距離 padding有四個方向。所以說我們能分別描述4個方向的padding 方法有兩種：1.寫小屬性 2.寫綜合屬性 用空格隔開 --> <div class="box"> 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } </style> </head> <body> <!-- 比如說通常我們做站的時候，要清除默認的padding，margin * 效率不高。所以我們要使用並集選擇器來選中頁面中應有的標簽（不同背，因為有人已經給咱們寫好了這些清除默認的樣式表） body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0; } --> <ul> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> </ul> </body> </html>
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0; }
4、margin外邊距
/*
內邊距：內容區域到邊框的距離
內邊距會擴大元素所在的區域
註意：
為元素設置內邊距 只能影響自己，不會影響其他的元素；
*/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } div{ width: 300px; height: 300px; border: 1px solid red; background-color: green; /*margin: 20px;*/ margin-top: 30px; margin-left: 50px; margin-bottom: 100px; } p{ border: 1px solid green; } </style> </head> <body> <!-- margin: 外邊距 指的是距離 --> <div></div> <p>我是一個p標簽</p> </body> </html>
10-[CSS]-盒模型：border，padding，margin