CSS基础-09-布局（定位 position、浮动float，元素对其、图像对其、文本对齐、元素内内容对齐，元素堆叠）
1 定位 （position）
1.1 static 定位
- 效果
静态定位的元素不会受到 top, bottom, left, right影响。
- 示例
div.static {
position: static;
}
1.2 fixed 定位
- 作用
相对于浏览器窗口是固定的，即不会因滚动条移动 - 示例
p.pos_fixed
{
position:fixed;
}
1.3 relative 定位
- 效果
相对其正常位置移动 - 示例
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
可使用： top, bottom, left, right
1.4 absolute 定位
- 效果
定位在页面的一个绝对位置 - 示例
{
position:absolute;
left:150px;
top:150px;
}
1.5 sticky 定位
- 效果
在一定范围（ 定义top, bottom, left, right）内正常移动，超出则不移动 - 示例
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
2. 浮动（float:）
2.1 简单使用
float:right;
说明：值可以是top, bottom, left, right
2.2 相邻元素的浮动
- 设置 margin 后，元素会以该间距排列
{
float:left;
margin:5px;
}
- 元素大小不同儿排不齐，可以定义一下元素大小
{
float:left;
width:110px;
height:90px;
margin:5px;
}
2.3 清除浮动 clear
- 效果
如果没有足够空间，浮动的元素会变成一行相邻在一起。
使用 clear 之后，该元素左右不会出现浮动元素
- 示例
clear:both;
2.4 示例-首字浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>玄德公记事</title>
<style>
span
{
float:left;
width:1.2em;
font-size:300%;
font-family:algerian,courier;
line-height:80%;
}
</style>
</head>
<body>
<h2 style="text-align:center">隆中对</h2>
<p>
<span>自</span>董卓已来，豪杰并起，跨州连郡者不可胜数。曹操比于袁绍，则名微而众寡，然操遂能克绍，以弱为强者，非惟天时，抑亦人谋也。今操已拥百万之众，挟天子而令诸侯，此诚不可与争锋。孙权据有江东，已历三世，国险而民附，贤能为之用，此可以为援而不可图也。荆州北据汉、沔，利尽南海，东连吴会，西通巴、蜀，此用武之国，而其主不能守，此殆天所以资将军，将军岂有意乎？益州险塞，沃野千里，天府之土，高祖因之以成帝业。刘璋暗弱，张鲁在北，民殷国富而不知存恤，智能之士思得明君。将军既帝室之胄，信义著于四海，总揽英雄，思贤如渴，若跨有荆、益，保其岩阻，西和诸戎，南抚夷越，外结好孙权，内修政理；天下有变，则命一上将将荆州之军以向宛、洛，将军身率益州之众出于秦川，百姓孰敢不箪食壶浆以迎将军者乎？诚如是，则霸业可成，汉室可兴矣！
</p>
</body>
</html>
- 效果
2.5 示例 一个网页
说明：这个代码是教程上抄来的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蜀</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.header {
background-color: #2196F3;
color: white;
text-align: center;
padding: 15px;
}
.footer {
background-color: #444;
color: white;
padding: 15px;
}
.topmenu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #777;
}
.topmenu li {
float: left;
}
.topmenu li a {
display: inline-block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
.topmenu li a:hover {
background-color: #222;
}
.topmenu li a.active {
color: white;
background-color: #4CAF50;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.sidemenu {
width: 25%;
}
.content {
width: 75%;
}
.sidemenu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.sidemenu li a {
margin-bottom: 4px;
display: block;
padding: 8px;
background-color: #eee;
text-decoration: none;
color: #666;
}
.sidemenu li a:hover {
background-color: #555;
color: white;
}
.sidemenu li a.active {
background-color: #008CBA;
color: white;
}
</style>
</head>
<body>
<ul class="topmenu">
<li><a href="#home" class="active">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系我们</a></li>
<li><a href="#about">关于我们</a></li>
</ul>
<div class="clearfix">
<div class="column sidemenu">
<ul>
<li><a href="#flight">The Flight</a></li>
<li><a href="#city" class="active">The City</a></li>
<li><a href="#island">The Island</a></li>
<li><a href="#food">The Food</a></li>
<li><a href="#people">The People</a></li>
<li><a href="#history">The History</a></li>
<li><a href="#oceans">The Oceans</a></li>
</ul>
</div>
<div class="column content">
<div class="header">
<h1>The City</h1>
</div>
<h1>Chania</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
<p>You will learn more about responsive web pages in a later chapter.</p>
</div>
</div>
<div class="footer">
<p>底部文本</p>
</div>
</body>
</html>
3. 对齐
3.1 各种元素居中对齐
3.1.1 元素居中对齐
- 使用
margin: auto;可使元素居中对齐 - 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
<style>
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<div class="center">
<p>margin: auto 使得元素居中对齐</p>
</div>
</body>
</html>
- 结果显示
如图可见，绿色框（不是文字）在页面的中间。
3.1.2 图像居中对齐
- 使用
同样使用margin: auto;，
但是image是内联元素，需要用display: block - 示例
img {
display: block;
margin: 0 auto;
}
3.1.3 文本居中对齐
之前《文本和字体》中有详细说明
text-align: center;
3.2 左或右对齐
3.2.1 position 实现
.right {
position: absolute;
right: 0px;
}
3.2.2 使用 float 方式
.right {
float: right;
}
3.3 边框中内容居中对齐
3.3.1 使用 padding实现
说明：padding是内边距，在之前的文档 “盒子和轮廓”中可以看到详细说明。我们可以用内边距将内容“推到”居中的位置。
- 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
<style>
.center {
padding: 70px;
border: 3px solid green;
width: 150px
}
</style>
</head>
<body>
<div class="center">
<p>元素中的文字居中对齐</p>
</div>
</body>
</html>
- 显示
3.3.2 使用 line-height
- 方法
line-height 设置文本行高是200
height设置元素高200，则文本正好垂直居中。
text-align: center;使得文本水平居中
- 示例
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
4. 元素的堆叠顺序
- 示例
元素定义了一个绝对位置，会与其他元素堆叠。设置
z-index:-1后，将其放到下层
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
