<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
/*主面板样式*/
#container {width:980px;
background:blue;
margin:0 auto;/*主面板居中*/
}
/*顶部面板样式*/
#header {width:100%;
height:150px;
background:purple;
border:1px #F00 solid;}
/*中间部分面板样式*/
#main {
width:100%;
height:400px;
background:green;
border:1px #F00 solid;
}
/*底部面板样式*/
#footer {
width:100%;
height:100px;
background:yellow;
border:1px #F00 solid;
}
.cat, .sidebar{
float:left;
width:20%;
height:100%;
}
.content {
float:left;
width:60%;
height:100%;
}
</style>
<title>Title</title>
</head>
<body>
<div id="container">
<div id="header">顶部(header)</div>
<div id="main">
<div class="cat">商品分类(cat)</div>
<div class="content">内容(content)</div>
<div class="sidebar">右侧(sidebar)</div>
</div>
<div id="footer">底部(footer)</div>
</div>>
</body>
</html>
外边距
外边距是元素边框与周围元素相隔的空间。
使用margin属性可以设置外边距。
当左右外边距设置为auto时，浏览器会将左右外边距设置
为相等，所以margin:0 auto可以将元素居中。
display
行内元素不能设置width，height，margin-top，margin-
bottom。
可通过修改display来修改元素的性质。
可选值：
block：设置为块元素
inline：设置为行内元素
inline-block：设置为行内块元素
none：隐藏元素
visibility:用于元素是否可见。
和display不同，使用visibility隐藏一个元素，隐藏后的元
素依然在文档中占位，不会被其他元素覆盖。
可选值：
visible:可见的
hidden：隐藏的
overflow
当相关标签里面的内容超出了样式的宽度和高度时，浏览器就会让内容溢出盒子。
可通过overflow来控制内容溢出的情况。
可选值：
visible：默认值
scroll：添加滚动条
auto：根据需要添加滚动条
hidden：隐藏超出盒子的内容
文档流：
文档中可实现的对象在排列时所占的位置。
文档流默认紧贴上一个元素的右边
浮动
使元素脱离原来的文本流，在父元素中浮动起来。
可选值：
none：不浮动
left：向左浮动
right：向右浮动
元素浮动不会影响父元素的高度，
浮动元素默认会变为块元素，即使设置display：inline仍
是一个块元素。
清除浮动
clear属性可以清除元素周围的浮动对元素的影响。
元素不会因为上方出现了浮动元素而改变位置。
可选值：
left：忽略左侧浮动
right：忽略右侧浮动
both：忽略全部浮动
none：不忽略浮动，默认值
网友评论