導航:首頁 > 萬維百科 > 網頁設計盒子模型代碼

網頁設計盒子模型代碼

發布時間:2020-10-03 22:21:47

1、網頁設計與製作中三個盒子模型的css樣式怎麼弄

CSS盒子模型:W3C組織建議把所有的網頁上的對象都放在一個盒子中(在定義盒子寬高的時候,要考慮到內填充,邊框,邊界的存在)
一個盒子的構成:
盒子中的內容:content
盒子的邊框:border
盒子邊框與內容之間的距離:稱為填充---padding內邊距(內補丁)
如果有多個盒子存在,盒子與盒子之間的距離:稱為邊界---margin,外邊距(外補丁)
整個盒子模型在網頁中所佔的寬度:左邊界+左邊框+左填充+內容+右填充+右邊框+右邊界
CSS盒子模型的屬性:
內容屬性:寬=width 高=height
內填充屬性(內容與邊框之間的距離):padding
外邊距屬性:margin(使用該屬性的時候注意瀏覽器的兼容性)
內填充與邊界的規則:
如果有四個參數:表示上右下左,也可以單單指定某個方向
如果只有一個參數:表示上右下左
如果有兩個參數: 第一個參數表示上下 第二個參數表示左右
如果三個參數:表示上 左右 下
邊框屬性:border

復制代碼
代碼如下:

<style type="text/css">
#bigBox{
width:300px;
height:300px;
background:#F30;
padding:20px 0px 0px 20px;
margin:20px;
}
#smallBox{
width:150px;
height:150px;
background:#6F9;
padding-top:20px;
}
</style>
</head>
<body>
<div id="bigBox">
<div id="smallBox">
小盒子
</div>
</div>

2、網頁設計盒子模型,左邊的側邊欄高度不和右邊內容文章高度同步,見描述!

整體沒有高度,給最大的盒子一個高度,裡面的盒子高度100%試試。

與網頁設計盒子模型代碼相關的知識