CSS定位、溢出、浮动和对齐
1.定位(position)
position属性可以定义元素的定位类型。
对应的可以有五个值:static(静态)、relative(相对)、fixed(固定)、absolute(绝对)和sticky(粘性)。
(1)static(静态)定位:
HTML 元素的默认值,即没有定位,静态定位不会受到 top, bottom, left, right影响。
div.static {
position: static;
border: 3px solid #00ff00;
}
(2)fixed(固定)定位:
元素的位置相对于浏览器窗口是固定位置。
窗口滚动它不会移动:
p.fixed
{
position:fixed;
top:30px;
right:5px;
}
(3)relative(相对)定位:
相对其正常位置的定位
h2.left{
position:relative;
left:-20px;
}
h2.right{
position:relative;
left:20px;
}
(4)absolute(绝对)定位:
绝对定位是相对于最近的已定位父元素,如果没有已定位的父元素,那么它的位置相对于:
h2{
position:absolute;
left:100px;
top:150px;
}
(5)sticky (粘性)定位:
页面滚动时,它会一直停在屏幕的同一个位置
div.sticky {
position: sticky;
top: 0;
background-color: green;
border: 2px solid #red;
}
(6)重叠的元素:
当两个元素发生重叠后,可以使用z-index设置纵向覆盖情况
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
2.溢出
使用overflow属性
visible:默认值,内容不裁剪,呈现在元素框外
hidden:内容被裁剪,溢出内容不可见
scroll:内容被裁剪,浏览器给出滚动条来查看溢出内容
div {
width: 200px;
height: 50px;
background-color: #eee;
overflow: scroll;}
3.浮动
元素向左或向右移动,其周围的元素也会重新排列,主要应用于图像或布局。
div{
float:right;
}
把几个浮动的元素放到一起,如果有空间的话,它们将彼此相邻
.float {
float:left;width:110px;height:90px;margin:5px;
}
清除浮动(clear):
clear可以是元素恢复到默认的区块排列方式
.clear
{
clear:both;
}
4.对齐
(1)元素居中对齐:
要水平居中对齐一个元素(如
), 可以使用 margin: auto
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
(2)元素左右对齐
①(absolute):
.right {
position: absolute;right: 0px;width: 300px;border: 3px solid #73AD21;padding: 10px;
②(float):
.right {
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
(3)垂直居中对齐
①(padding):
.center {
padding: 70px 0;
border: 3px solid green;
}
②(line-height):
.center {line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;}
/* 如果文本有多行,添加以下代码: */
.center p {line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
③(position 和 transform):
.center {height: 200px;
position: relative;
border: 3px solid green; }
.center p {margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
5.演示代码
<!DOCTYPE html>
<html><meta charset="UTF-8">
<head>
<title> CSS定位、溢出、浮动和对齐 </title>
<link rel = "stylesheet" type="text/css" href="amiao9.css">
</head>
<body>
<div class="static">静态定位</div>
<div class="fixed">固定定位</div>
<div class="right1">向右相对定位</div>
<div class="left">向左相对定位</div>
<div class="absolute">绝对定位</div>
<div class="sticky">粘性定位</div>
<div class="overflow">溢出效果:这年夏天,风遇见云,萤火虫遇见星光.这年夏天,风遇见云,萤火虫遇见星光.这年夏天,风遇见云,萤火虫遇见星光.这年夏天,风遇见云,萤火虫遇见星光.这年夏天,风遇见云,萤火虫遇见星光</div>
<div class="float">浮动内容1</div>
<div class="float">浮动内容2</div>
<div class="float">浮动内容3</div>
<div class="center1">元素的水平居中对齐</div>
<div class="right2">元素的右对齐对齐</div>
<div class="center2">垂直居中对齐</div>
</body>
</html>
amiao9.css
/* 静态定位 */
.static{
position:static;
border:1px solid #00ff00;
}
/* 固定定位 */
.fixed{
position:fixed;
border:1px solid red;
top:50px;
right:30px;
}
/* 向右相对定位 */
.right1{
position:relative;
left:-10px;
}
/* 向左相对定位 */
.left{
position:relative;
left:50px;
}
/* 绝对定位 */
.absolute{
position:absolute;
top:10px;
left:100px;
}
/* 粘性定位 */
.sticky{
position:sticky;
top:0px;
border:5px solid yellow;
}
/* 溢出效果 */
.overflow{
width:300px;
height:100px;
background-color:rgb(198, 129, 247);
overflow:scroll;
}
/* 浮动内容 */
.float{
float:left;
clear:both;
}
/* 元素的水平居中对齐 */
.center1{
margin:auto;
width:60%;
height:100px;
border:3px solid rgb(108, 243, 108);
}
/* 元素的右对齐对齐 */
.right2{
float:right;
width:60%;
border:3px solid yellow;
margin:1px;
background-color:rgb(248, 174, 70);
}
/* 垂直居中对齐 */
.center2{
padding:50px 0;
border:3px solid rgb(153, 255, 0);
background-color:rgb(112, 247, 198);
}
6.演示结果