网页布局基础

最新推荐文章于 2020-04-24 01:37:36 发布

lollipop94

最新推荐文章于 2020-04-24 01:37:36 发布

阅读量355

点赞数

分类专栏： CSS 文章标签：布局

本文链接：https://blog.csdn.net/lollipop94/article/details/77046892

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、盒子模型——网页布局的基石

由4个部分组成：

边框（border）
外边距（margin）
内边距（padding）
盒子中的内容（content）

盒子模型

盒子模型的尺寸=边框+外边距+内边距+盒子中的内容的尺寸

盒子在页面中所占的宽度=左边距+左边框+左填充+内容宽度+右填充+右边框+右边距
盒子在页面中所占的高度=上边距+上边框+上填充+内容高度+下填充+下边框+下边距

盒子在三维空间中，由上至下的层依次为border、content+padding、background-image、background-color、margin。

【注】

1、width和height属性指的是内容区的宽度和高度。
2、增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
3、页面自动居中：需要设置margin左右值为auto，而且一定要设置width为一个定值。

二、CSS规定的定位机制

标准文档流
浮动
定位

给个例子来说明，HTML代码如下：

<div class="mainBox">
    <div class="box1"></div>
    <div class="box2"></div>
</div>

1、标准文档流

从上到下，从左到右，输出文档内容。由块级元素和行级元素组成。
块级元素会自动重启一行。

添加样式如下：

.box1{
    width: 300px;
    height: 300px;
    background: #C9F;
}
.box2{
    width: 600px;
    height: 300px;
    background: #FCF;
}

在页面中呈现的效果如下：
标准文档流

2、浮动float

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现的就像浮动框不存在一样。

值	描述
left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在文本中出现的位置。
inherit	规定应该从父元素继承float属性的值。

现在让box1左浮动，添加样式代码：float: left;，如图所示。

将box1的左浮动改为右浮动float: right;，如图。
box1右浮动

取消之前设置的浮动，然后为mainBox添加样式：

.mainBox{
    width: 960px;
    height: 300px;
    background: #CFF;
}

添加mainBox样式并取消浮动

在之前的基础上，为box2设置右浮动。
box2右浮动
再为box1设置左浮动。
box1左浮动，box2右浮动

【浮动元素规则】

浮动元素不能超过包含它的块的左右边界。
浮动元素之前如果出现浮动元素，则必须在该浮动元素之后（不能覆盖）。
如果浮动元素加一起太宽，会自动向下。（宽度受限）
垂直方向要顶头不能超过块区域，同样不能超过在它上面的浮动元素。（上边界受限）
浮动元素的顶端，不能比之前所有浮动元素或块级别元素的顶端更高。（顶端受限）
浮动元素之间左右的边界不能覆盖。（元素之间受限）
浮动元素会尽可能高的放置。
浮动元素会尽可能向左或向右。

3、清除浮动clear

clear属性规定元素的哪一侧不允许其它浮动元素。

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承clear属性的值。

继续沿用刚才的例子。
将mainBox中的height属性清除，再为其添加如下代码：

clear: both;
overflow: hidden;

能可以得到之前的效果，如图所示。
清除浮动

两种方式看似一样，但还是有区别的。

比如，我们把box1中的height属性的值改为400px。
再利用清除浮动的方式，得到如下效果。
清除浮动，改变高度
如果不采用清除浮动的方式，直接设置mainBox的height属性为300px，效果如下：
改变box1高度，设置mainBox高度

4、定位position

1）static：静态定位

默认值。没有定位，指定元素按照常规的文档内容流进行定位。
静态定位的元素不会受到top、bottom、left、right影响。

2）relative：相对定位

元素按照常规的文档流进行布局，它的定位相对于它在正常文档流中的位置进行调整。

相对定位的完成过程是首先按staic（float）方式生成一个元素（并且元素像层一样浮动了起来），然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>相对定位</title> 
<style>
    div{
        width: 100px;
        height: 100px;
        background: #C9F;
        border: 1px solid #000;
    }
    .pos_relative
    {
        position: relative;
        top: 100px;
        left: 100px;
        width: 100px;
        height: 100px;
        background: #CFF;
    }
</style>
</head>
<body>
    <div class="pos_relative">相对定位</div>
    <div></div>
    <div></div>
</body>
</html>

相对定位

将top、left的值进行更改，如下：

.pos_relative
{
    position: relative;
    top: 50px;
    left: 60px;
    width: 100px;
    height: 100px;
    background: #CFF;
}

相对定位，更改位置

3）absolute：绝对定位

元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相当于<html>。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>绝对定位</title> 
<style>
    div{
        width: 100px;
        height: 100px;
        background: #C9F;
        border: 1px solid #000;
    }
    .pos_absolute
    {
        position: absolute;
        top: 100px;
        left: 100px;
        width: 100px;
        height: 100px;
        background: #CFF;
    }
</style>
</head>
<body>
    <div class="pos_absolute">绝对定位</div>
    <div></div>
    <div></div>
</body>
</html>

绝对定位

相对定位和绝对定位的最大区别：

相对定位没有脱离当前文档流。
绝对定位脱离了当前文档流，即该元素的前后元素在计算位置和偏移时将不再计算该元素的大小和位置。

相对元素经常被用来作为绝对定位元素的容器块。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>绝对定位和相对定位</title> 
<style>
    .pos_absolute
    {
        position: absolute;
        top: 100px;
        left: 100px;
        width: 100px;
        height: 100px;
        background: #CFF;
    }
    .pos_relative
    {
        position: relative;
        width: 150px;
        height: 80px;
        background: #FCF;
    }
</style>
</head>
<body>
    <div class="pos_relative">
        相对定位
        <div class="pos_absolute">绝对定位</div>
    </div>
</body>
</html>

混合定位

绝对定位的<div>随着相对定位的<div>的位置而变化。
当改变pos_relative的位置时，比如添加如下代码：
top: 60px;left: 80px;，
pos_relative内部的子元素是不会发生变化的，因为他们都是相对pos_relative绝对定位的。

更改位置，混合定位

4）fixed：固定定位

元素的位置相当于浏览器窗口是固定位置。
不随浏览器窗口的滚动条滚动而变化。
元素的位置与文档流无关，不占据空间。

看下面这个例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>固定定位</title> 
<style>
    div{
        width: 100px;
        height: 100px;
        background: #C9F;
        border: 1px solid #000;
    }
    .pos_fixed
    {
        position: fixed;
        top: 100px;
        left: 100px;
        width: 100px;
        height: 100px;
        background: #CFF;
    }
</style>
</head>
<body>
    <div class="pos_fixed">固定定位</div>
    <div></div>
    <div></div>
</body>
</html>

固定定位

当我们把浏览器窗口缩小后，滚动条滚动对固定定位的没影响，但是其他的两个<div>块会随滚动条滚动。

【补充】

CSS定位属性	说明	值
bottom	定义了定位元素下外边距边界与其包含下边界之间的偏移。	auto、length、%、inherit
clip	剪辑一个绝对定位的元素。	shape、auto、inherit
cursor	显示光标移动到指定的类型。	url、auto、crosshair、default、pointer、move、e-resize、ne-resize、nw-resize、n-resize、se-resize、sw-resize、s-resize、w-resize、text、wait、help
left	定义了定位元素左外边距边界与其包含块左边界之间的偏移。	auto、length、%、inherit
overflow	设置当元素的内容溢出其区域时发生的事情。	auto、hidden、scroll、visible、inherit
position	指定元素的定位类型。	absolute、fixed、relative、static、inherit
right	定义了定位元素右外边距边界与其包含块右边界之间的偏移。	auto、length、%、inherit
top	定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。	auto、length、%、inherit
z-index	设置元素的堆叠顺序，即哪个元素放在前面或是后面。具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。	number（可正可负）、auto、inherit