ＨＴＭＬ的区块属性
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ＨＴＭＬ的区块属性相关的知识，希望对你有一定的参考价值。
区块属性（区块模型）
margin
是定义区块外边界与上级元素距离的属性，用1到4个值来设置元素边界，每个值都是长度、百分比或auto，百分比值参考上一级元素的宽度，允许使用负值边际。如果四个值都给出了，它们分别被应用于上、右、下和左边界。如果只给出一个值，它被应用于所有的边界。如果两个或三个值给出了，省略的值与对应的边相等。注意如果边界在垂直方向邻接（重叠）了，会改用其中最大的那个边界值。而水平方向则不会。也可以选择使用上边界margin-top、下边界margin-bottom、左边界margin-left和右边界的margin-right属性分别设置与上级元素的外的边距。
padding
用于设置区块的内边距属性，是边框的元素内容之间的间隔距离。与margin属性相反，但使用的是相同属性值，是上补白padding-top、右补白padding-right、下补白padding-bottom和左补白padding-left属性的缩写
float
设置区快漂浮属性，允许网页制作者将文本环绕在一个元素的周围，可以使用左漂浮left值，右漂浮right值
clear
清除属性指定一个元素是否允许有元素漂浮在它的旁边。值left移动元素到在其左边的漂浮的元素的下面；同样的值right移动到其右边的漂浮的元素下面。其他的还有缺省的none值，和移动元素到其两边的漂浮的元素的下面的both值
ｍａｒｇｉｎ
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>区块属性</title> 6 <style> 7 body{ 8 background:green; 9 margin:0px; 10 padding:50px; 11 } 12 #main{ 13 width:100%; 14 height:400px; 15 16 background:yellow; 17 /*margin-top:50px; 18 margin-left:40px; 19 margin-bottom:80px; 20 margin-right:30px;*/ 21 margin:50px 40px 60px 30px; 22 } 23 </style> 24 </head> 25 26 <body> 27 <div id="main"> 28 aaaaaa 29 </div> 30 </body> 31 </html>
ｐａｄｄｉｎｇ
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>区块属性</title> 6 <style> 7 body{ 8 background:green; 9 margin:0px; 10 padding:100px 50px 40px 80px; 11 } 12 #main{ 13 width:100%; 14 height:400px; 15 16 background:yellow; 17 /*margin-top:50px; 18 margin-left:40px; 19 margin-bottom:80px; 20 margin-right:30px;*/ 21 margin:50px 40px 60px 30px; 22 } 23 </style> 24 </head> 25 26 <body> 27 <div id="main"> 28 aaaaaa 29 </div> 30 </body> 31 </html>
ｆｌｏａｔ
区块框浮动
虽然使用绝对定位可以实现页面布局，但由于调整某个区块框时其他区块的位置并不会随着改变，所以并不是布局的首选方式。而使用浮动的区块框可以向左或右移动，直到它的外边缘碰到包含它区块的边框或另一个浮动框的边框的边框为止。并且由于浮动框不在文档的普通流中，所以文档的普通流中的区块框表现的就像浮动框不存在一样
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>区块框浮动</title> 6 <style> 7 body{ 8 margin:0px; 9 } 10 #one{ 11 width:200px; 12 height:200px; 13 background:green; 14 float:left; 15 } 16 #two{ 17 width:200px; 18 height:200px; 19 background:yellow; 20 } 21 #three{ 22 width:200px; 23 height:200px; 24 background:red; 25 } 26 </style> 27 </head> 28 29 <body> 30 <div id="one"> 31 aaaaaa 32 </div> 33 <div id="two"> 34 bbbb 35 </div> 36 <div id="three"> 37 ccccccccccccccccc 38 </div> 39 </body> 40 </html>
ｃｌｅａｒ
在进行页面布局时，经常需要设置多个区块框并列在一行中排列。最常见的方式就是使用float属性，再通过left或right值移动区块框向左或向右浮动。但当前面并列的多个区块框总宽度不足包含框的100%时，就会在行框中留出一定的宽度，而下面的某个区块框又恰好满足这个宽度，则很可能会向上提，和上一行并列的区块框在同一行排列。而这不并是我们想要的结果，所以可以使用clear属性解决这一问题，该属性值可以是left、right、both或none，它表示框的哪些边不应该挨着浮动框。
<!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=gb2312" /> <title>行框和清理</title> <style> body{ margin:0px; } #one{ width:200px; height:200px; background:green; float:left; } #two{ width:200px; height:200px; background:yellow; float:left; } #three{ width:200px; height:200px; background:red; float:left; } .clear{ clear:both; } </style> </head> <body> <div id="one"> aaaaaa </div> <div id="two"> bbbb </div> <div class="clear"></div> <div id="three"> ccccccccccccccccc </div> </body> </html>
以上是关于ＨＴＭＬ的区块属性的主要内容，如果未能解决你的问题，请参考以下文章