1.position属性
属性值 | 描述 |
---|---|
static | 正常流(默认值)元素在页面中正常出现,并作为页面流的一部分 |
relative | 相对定位,相对于其正常位置进行定位,并保持其未定位前的形状及所占空间 |
absolute | 绝对定位,相对于浏览器窗口进行定位,将元素框从页面流中完全删除后,重新定位 |
fixed | 固定定位,相对于浏览器窗口进行定位,将元素从页面流中完全删除后,重新定位,当拖拽页面滚动条时,该元素不会随之滚动 |
默认的静态定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试position属性</title>
<style type="text/css">
.top {
background: blue;
border: 2px solid blue;
padding: 20px;
}
.footer{
background:blue;
padding:20px;
}
.content {
background: orange;
padding: 15px;
position: static;/*默认的静态定位*/
border: 1px dashed black;
}
#a, #b {
padding: 10px;
background: white;
border: 1px dashed black;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="content">
<div id="a">box-1</div>
<div id="b">box-2</div>
</div>
<div class="footer"></div>
</body>
</html>
相对定位
.content {
background: orange;
padding: 15px;
/*position: static;/*默认的静态定位*/
position:relative;
margin-left:50px;
margin-top:50px;
border: 1px dashed black;
}
绝对定位
.content {
background: orange;
padding: 15px;
/*position: static;/*默认的静态定位*/
/* position:relative;
margin-left:50px;
margin-top:50px; *//*相对定位测试*/
position:absolute;
margin:70px;
border: 1px dashed black;
}
固定定位
.content {
background: orange;
padding: 15px;
/*position: static;/*默认的静态定位*/
/* position:relative;
margin-left:50px;
margin-top:50px; *//*相对定位测试*/
/* position:absolute;
margin:70px;
border: 1px dashed black; *//*绝对定位测试*/
position:fixed;
}
clear属性
属性值 | 描述 |
---|---|
left | 清除左侧浮动产生的影响 |
right | 清除右侧浮动产生的影响 |
both | 清除两侧浮动产生的影响 |
none | 默认值,允许浮动元素出现在两侧 |
display属性
属性值 | 描述 |
---|---|
none | 将元素设为隐藏 |
block | 将元素显示为块级元素,此元素前后会带有换行符 |
inline | 默认,此元素会被显示为内联元素,元素前后没有换行符 |
inline-block | 将元素显示为行内快级元素 |
visible | 将元素设为可见状态 |
hidden | 将元素设为隐藏状态,被隐藏的元素仍然占原来空间 |
cursor属性
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>典型布局</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
overflow: hidden;
}
#div1 {
margin-top: 20px;
margin-left: auto;
margin-right: auto;
width: 500px;
height: 600px;
border: 2px solid black;
}
#bannerDiv {
width: 500px;
height: 100px;
border: 1px solid black;
line-height: 100px;
text-align: center;
}
#navigationDiv {
width: 500px;
height: 30px;
border: 1px solid black;
line-height: 30px;
text-align:center;
}
#foucsDiv {
width: 500px;
height: 150px;
background: orange;
border: 1px solid yellow;
line-height: 150px;
text-align:center;
}
#left {
float:left;
border: 1px solid yellow;
width: 250px;
height: 150px;
}
#right {
float: left;
width: 250px;
height: 150px;
}
#clear {
clear: both;
}
#content {
width: 500px;
height: 250px;
border: 1px solid black;
line-height: 250px;
background-color:#F2F2F2;
}
#a {
width: 165px;
height: 250px;
float: left;
line-height: 250px;
border: 1px solid black;
}
#b {
width: 165px;
height: 250px;
float: left;
line-height: 250px;
border: 1px solid black;
}
#c {
width: 166px;
height: 250px;
float: left;
line-height: 250px;
border: 1px solid black;
}
#class {
width: 500px;
height: 50px;
border: 1px solid black;
line-height: 50px;
text-align: center;
}
</style>
</head>
<body>
<div id="div1">
<div id="bannerDiv">网站头部(公司log等)</div>
<div id="navigationDiv">导航</div>
<div id="foucsDiv">
<div id="left">焦点内容(左)</div>
<div id="right">焦点内容(右)</div>
</div>
<div class="clear"></div>
<div id="content">
<div id="a">主体内容一</div>
<div id="b">主体内容二</div>
<div id="c">主体内容三</div>
</div>
<div id="class">网站底部</div>
</div>
</body>
</html>