如果想熟練掌握P和CSS的布局方法,首先要對盒模型有足夠的了解。每個HTML元素都可以看作一個裝了東西的盒子,盒子里面的內容到盒子的邊框之間的距離即填充(padding),盒子本身有邊框(border),而盒子邊框外和其他盒子之間,還有邊界(margin),如圖1所示。
圖1 盒模型圖解
#menu {
background: #9cf;
margin: 20px;
border: 10px solid #039;
padding: 40px;
width: 200px;
}
圖2 元素總寬度的計算
#menu {
width: 200px;
padding: 5px;
border: 1px solid #ccc;
}
#menu {
padding: 5px;
width:110px;
voice-family: "\"}\"";
voice-family: inherit;
width: 100px;
}
voice-family: "\"}\"";
voice-family: inherit;
#box {
border: 1px solid #B51C8C;
width:768px;
}
圖3 針對IE修正CSS
圖4 邊界的壓縮
注1. 塊級元素(display: block)
每個塊級元素都從一個新行開始,而且其后的元素也需另起一行開始,標題、段落、表格、層、body等都是塊級元素。塊級元素只能作為其他塊級元素的子元素,而且需要一定的條件。
注2. 內聯元素(display: inline)
內聯元素不需要在新行內顯示,而且也不強迫其后的元素換行,如a、em、span等都為內聯元素。內聯元素可以為任何其他元素的子元素。
40個可愛粉色兒童房設計裝修設計2018-04-22
100款國外食品包裝設計集包裝設計2017-07-17
40幅日本海報設計作品海報設計2017-07-04
46款茶品牌和包裝設計欣賞包裝設計2017-04-14
20款現代簡約風格名片設計名片設計2016-04-18
59款日本優秀logo設計欣賞標志設計2016-03-29
10個CSS簡寫/優化技巧CSS教程2013-06-04
css的margin縮寫方式CSS教程2012-05-23
CSS網頁布局時常犯的幾種CSS教程2009-09-28
CSS浮動屬性Float詳解CSS教程2009-09-17
CSS定位屬性Position詳解CSS教程2009-09-17
CSS布局教程:絕對定位和相CSS教程2009-07-15