DIV的大小——盒子模型
系統(tǒng)
2202 0
一、瀏覽器效果和Dreamweaver設(shè)計(jì)視圖：
二、HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<title>盒子模型</title>
</head>
<body>
<div id="box">
<div id="content"></div>
</div>
</body>
</html>
三、CSS
#box {
width:200px;
height:100px;
margin:10px 20px 30px 40px;
border:solid 10px red;
padding:10px 20px 30px 40px;
background-color:green;
}
#content {
width:100%;
height:100%;
background:blue;
}
【說(shuō)明】
1、本實(shí)例中使用了css reset.css，在這里，主要重置了body和div的{margin: 0;padding: 0;}
2、在用CSS設(shè)計(jì)盒子時(shí)，可以設(shè)置盒子的寬（width）和高（height）屬性，但是這個(gè)寬和高并不是盒子的實(shí)際寬和高，而是盒子內(nèi)容的寬和高。
本例中，盒子的width和height是藍(lán)色內(nèi)容的寬和高，而盒子實(shí)際的寬和高是：
盒子的實(shí)際寬度=左邊界+左邊框+左填充+寬+右填充+右邊框+右邊界；
盒子的實(shí)際高度=上邊界+上邊框+上填充+高+下填充+下邊框+下邊界。
DIV的大小——盒子模型
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫(xiě)作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元