一.定位
1.Position
position 属性指定了元素的定位类型。
元素可以使用的顶部,底部,左侧和右侧属性定位。但是,必须是先设定position属性。
position参考值:
- static:默认值,没有定位,遵循正常的文档流对象,不会受到 top, bottom, left, right影响。
- fixed:元素的位置相对于浏览器窗口是固定位置,即使窗口滚动它也不会移动。
- relative :相对定位元素的定位是相对其正常位置,它原本所占的空间不会改变。
- absolute :相对于最近的已定位父元素,若没有,则它的位置相对于html。
- sticky:粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。
语法举例:
h1
{
position:fixed; /*先设定position属性*/
top:10px; /*对上下左右进行设置*/
right:20px;
}
2.元素的重叠
z-index属性指定了一个元素的堆叠顺序(哪个元素应该放在前面,或后面)。
优先级:标准流盒子,低于浮动的盒子,浮动的盒子又低于定位的盒子。
用法:
- 必须有定位。(除去static之外)
- 给定 z-index 的值为层级的值。(不给默认为0)
- 层级不取小数。
- 层级为0的盒子,也比标准流和浮动高;层级为负数的盒子,比标准流和浮动低。
- 而层级的高低,与占位无关。
语法举例:
img
{
positon:absolute;
top:0px;
left:0px;
z-index:-1;
}
3.overflow
overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。
参考值:
- visible:默认值。内容不会被修剪,会呈现在元素框之外。
- hidden:内容会被修剪,并且其余内容是不可见的。
- scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
- auto:如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
语法举例:
div
{
width:200px;
height:100px;
overflow:auto;
}
实例:
<!DOCTYPE html>
<html>
<head>
<style>
h1
{
position:absolute;
top:230px;
left:40px;
}
div
{
width:200px;
height:100px;
overflow:auto;
}
img
{
position:absolute;
top:0px;
left:0px;
z-index:-1;
}
</style>
<meta charset = "utf-8"/>
<title>定位</title>
</head>
<body>
<img src="露西亚.jpg" height = "400px">
<h1>铁板</h1>
<div>
<p>你们又要迫害我了对吧</p>
<p>你们又要迫害我了对吧</p>
<p>你们又要迫害我了对吧</p>
<p>你们又要迫害我了对吧</p>
<p>你们又要迫害我了对吧</p>
<p>你们又要迫害我了对吧</p>
</div>
</body>
</html>
结果:
二.浮动
Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。
元素的水平方向浮动,意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
语法举例:
.photo
{
float:left;
width:100px;
height:100px;
margin:5px;
}
如果你不想要元素周围出现浮动元素,使用clear(参考值:left,right,both,none)
.text
{
clear:both;
width:100px;
height:100px;
margin:5px;
}
三.对齐
1.元素居中对齐
要水平居中对齐一个元素, 可以使用 margin: auto,且设置到元素的宽度将防止它溢出到容器的边缘。
.center {
margin: auto;
width: 50%; /*必须设置宽度*/
padding: 10px;
}
2.文本水平对齐
使用 text-align: center
p
{
text-align:center;
}
3.图片居中对齐
要让图片居中对齐, 可以使用 margin: auto; 并将它放到块元素中:
img
{
display:block;
margin:auto;
}
其他对齐的方式,如左对齐,右对齐等等,很简单,使用position:absolute或float修改就可以了。
实例:
<!DOCTYPE html>
<html>
<head>
<style>
div
{
margin:auto;
padding:10px;
width:50%;
border:2px solid green;
}
p
{
text-align:center;
}
img
{
display:block;
margin:auto;
}
</style>
<meta charset = "utf-8"/>
<title>对齐</title>
</head>
<body>
<div>
<p>你们又要迫害我了对吧</p>
<img src = "露西亚.jpg" height = "400px">
</div>
</body>
</html>
结果: