亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

HTML+CSS 輕鬆入門之盒子模型之寬度高度

盒模型寬度和高度和我們平常所說的物體的寬度和高度理解是不一樣的,css內定義的寬(width)和高(height),指的是填充以裡的內容範圍。

因此一個元素實際寬度(盒子的寬度)=左邊界+左邊框+左填充+內容寬度+右填充+右邊框+右邊界

0.jpg

#元素的高度也是同理

例如下面這段程式碼:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
      div{
        width:200px;
        padding:20px;
        margin:10px;
        border:1px solid red;
      }
  </style>
</head>
<body>
    <div>歡迎來到php中文網</div>
</body>
</html>

元素的實際長度為:10px+1px+20px+200px+20px+1px+10px=262px。在chrome瀏覽器下方可查看元素盒模型,如下圖:

0.jpg

繼續(xù)學習
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ width:200px; padding:20px; margin:10px; border:1px solid red; } </style> </head> <body> <div>歡迎來到php中文網</div> </body> </html>