歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!
css中把元素叫做盒子,設置對應的樣式分別為:盒子的寬度(width)、盒子的高度(height)、盒子的邊框(border)、盒子內的內容和邊框之間的間距(padding)、盒子和盒子之間的間距(margin)。
 
設置寬高:
width:200px;  /* 設置盒子的寬度,此寬度是指盒子內容的寬度,不是盒子整體的寬度 */
 
height:200px;  /* 設置盒子的高度,此高度是指盒子內容的高度,不是盒子整體的高度 */
 
 
 
設置邊框border:
設置一邊的邊框,如:頂部邊框
 
border-top-color:red;  /* 設置頂部邊框顏色為紅色 */
 
border-top-width:10px;  /* 設置頂部邊框粗細為10px */
 
border-top-style:solid;  /* 設置頂部邊框的線為實線 */
 
/* 邊框常用的線:solid實線、bashed虛線、dotted點線 */
 
css 盒子模型上面三句可以簡寫為一句:
 
border-top:10px solid red;
 
 設置其他三個邊的方法和上面一樣,把上面的top換成left(左邊)、right(右邊)、bottom(底邊)即可
 
 四個邊如果設置一樣,可以將四個邊合并成一句:
 
border:10px solid red;
 
 設置內間距padding:
 設置盒子四邊的內間距,如:
 
 padding-top:20px;  /* 設置頂部內間距 */
 
 padding-left:30px;  /* 設置左邊內間距 */
 
 padding-right:40px;  /* 設置右邊內間距 */
 
 padding-bottom:50px;  /* 設置底部內間距 */
 
上面的設置可以簡寫,如:
 
padding:20px 40px 50px 30px;  /* 四個值按照順時針方向,分別設置的是上 右 下 左,四個方向的內邊距值 */
 
padding后面還可以跟3個值,2個值和1個值,它們分別設置的項目如下:
 
padding:20px 40px 50px;  /* 設置頂部內邊距為20px,左右內邊距為40px,底部內邊距為50px */
 
paddinig:20px 40px;  /* 設置上下內邊距為20px,左右內邊距為40px */
 
padding:20px;  /* 設置四周內邊距為20px */
 
設置外間距margin:
 
外邊距的設置方法和padding的設置方法相同,將上面設置項中的’padding’換成’margin’就是外邊距設置方法。
 
盒子模型的實際尺寸:
 
盒子的寬度:width + 左右border的值 + 左右padding的值
 
盒子的高度:height + 上下border的值 + 上下padding的值

如需轉載,請注明文章出處和來源網址:http://www.rs2pl.com/rumen/r64936.shtml

久久天天躁狠狠躁夜夜躁2020