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.演示结果
406
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
