html學習筆記4—盒子
阿新 • • 發佈：2020-07-13
CSS處理網頁時,它認為每個元素都包含在一個不可見的盒子裡。如果把所有的元素都想象成盒子,那麼我們對網頁的佈局就相當於是擺放盒子。只需要將相應的盒子擺放到網頁中相應的位置即可完成網頁的佈局。
盒子模型
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒子模型</title> <style type="text/css"> .box1 { /* 使用width來設定盒子內容區的寬度 使用height來設定盒子內容區的高度 width和height只是設定的盒子內容區的大小，而不是盒子的整個大小， 盒子可見框的大小由內容區，內邊距和邊框共同決定*/ width: 100px; height: 100px; /* 設定背景顏色 */ background-color: #bfa; /* 要為一個元素設定邊框必須指定三個樣式 border-width:邊框的寬度 border-color:邊框顏色 border-style:邊框的樣式 */ /*設定邊框的寬度*//* border-width: 100px; */ /* 使用border-width可以分別指定四個邊框的寬度 如果在border-width指定了四個值， 則四個值會分別設定給上右下左，按照順時針的方向設定的 如果指定三個值， 則三個值會分別設定給上 左右 下 如果指定兩個值， 則三個值會分別設定給上下 左右 除了border-width, CSS中還提供了四個border-xxx-width xxx的值可能是top right bottom left 專門用來設定指定邊的寬度*/ /* border-width: 10px 20px 30px 40px; */ /* border-width: 10px 20px 30px ; */ border-width: 10px 20px; /* 設定邊框的顏色 和寬度一樣，color也提供四個方向的樣式，可以分別指定顏色 border-xxx-color */ /* border-color: red; */ /* border-color: red yellow orange blue; */ /* border-color: red yellow orange; */ border-color: red yellow; /* 設定邊框的樣式 可選值: none 預設值沒有邊框 solid 實線 dotted 點狀邊框 dashed 虛線 double 雙線 style也可以分別指定四個邊的邊框樣式，規則和width一致， 同時它也提供border-xxx-style四個樣式，來分別設定四個邊 */ border-style: dotted double; } </style> </head> <body> <div class="box1"></div> </body> </html>