一、盒子模型
一个盒子模型包含外边距margin,边框border,内边距padding,内容content。
上面这个盒子模型的设计代码是:
#box { width: 70px; margin: 10px; padding: 5px;}
1.内边距padding的属性值
属性 | 描述 |
---|---|
padding | 简写属性。作用是在一个声明中设置元素的所内边距属性。 |
padding-bottom | 设置元素的下内边距。 |
padding-left | 设置元素的左内边距。 |
padding-right | 设置元素的右内边距。 |
padding-top | 设置元素的上内边距。 |
2.边框border
3.外边距margin
二、网页布局方式
属性 | 描述 |
---|---|
position | 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 |
top | 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 |
right | 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 |
bottom | 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 |
left | 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 |
overflow | 设置当元素的内容溢出其区域时发生的事情。 |
clip | 设置元素的形状。元素被剪入这个形状之中,然后显示出来。 |
vertical-align | 设置元素的垂直对齐方式。 |
z-index | 设置元素的堆叠顺序。 |
1.相对定位
#box_relative { position: relative; left: 30px; top: 20px; }在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。
2.绝对定位
<html> <head> <style type="text/css"> h2.pos_abs { position:absolute; left:100px; top:150px } </style> </head> <body> <h2 class="pos_abs">这是带有绝对定位的标题</h2> <h2 class="pos_abs">hahahahahaah</h2> <p>通过绝对定位,元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px,距离页面顶部 150px。</p> </body> </html>
我们发现这里重叠了。
3.浮动定位
<html> <head> <style type="text/css"> ul { float:left; width:100%; padding:0; margin:0; list-style-type:none; } a { float:left; width:7em; text-decoration:none; color:white; background-color:purple; padding:0.2em 0.6em; border-right:1px solid white; } </style> </head> <body> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> <li><a href="#">Link 6</a></li> <li><a href="#">Link 7</a></li> <li><a href="#">Link 8</a></li> </ul> <p> 在上面的例子中,我们把 ul 元素和 a 元素浮向左浮动。 li 元素显示为行内元素(元素前后没有换行)。 这样就可以使列表排列成一行。ul 元素的宽度是 100%, 列表中的每个超链接的宽度是 7em(当前字体尺寸的 7 倍)。 我们添加了颜色和边框,以使其更漂亮。 </p> </body> </html>
float只能在水平上浮动不能在垂直上浮动。
三、一个实例
<!doctype html> <html> <head> <style> #con{width:1000px; height:960px; border:#000000 solid 1px; margin:0 auto;} #header{ height:10%; padding:1px; border:#000000 solid 1px;} #left{ float:left; top:10%; left:0; width:20%; height:80%; border:#000000 solid 1px;} #right{ position:relative; top:-80%; right:-60%; width:40%; height:26.5%; border:#000000 solid 1px;} #middle{ position:relative; top:0; left:20%; width:40%; height:40%; border:#000000 solid 1px;} #footer{ position:relative; top:-80%; left:0; width:100%; height:8.5%; border:#000000 solid 1px;} </style> </head> <body> <div id="con"> <div id="header"> <h1>A</h1> </div> <div id="left"> <h1>B</h1> </div> <div id="middle"> <h1>C</h1></div> <div id="middle"> <h1>D</h1></div> <div id="right"> <h1>E</h1></div> <div id="right"> <h1>F</h1></div> <div id="right"> <h1>G</h1></div> <div id="footer"> <h1>H</h1></div> </div> </body> </html>