CSS基础-09-布局（定位 position、浮动float，元素对其、图像对其、文本对齐、元素内内容对齐，元素堆叠）

开发运维玄德公 2023-03-28 原文

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>

效果

image.png

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>

结果显示

如图可见，绿色框（不是文字）在页面的中间。

image.png

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>

显示

image.png

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;
}