网页布局基础

最新推荐文章于 2020-11-05 23:50:36 发布

润田原来是纯净水

最新推荐文章于 2020-11-05 23:50:36 发布

阅读量482

点赞数

分类专栏： html基础

本文链接：https://blog.csdn.net/qq_14962167/article/details/52919946

版权

html基础专栏收录该内容

4 篇文章 0 订阅

订阅专栏

W3C标准

由万维网联盟指定的一系列标准，包括：

机构化标准语言(HTML和XML)
表现标准语言(CSS)
行为标准语言(DOM和ECMAScript)

W3C标准倡导结构、样式、行为分离。

CSS定位机制

css中存在3中定位机制：

(1)标准文档流(Normal flow)
特点：

从上到下，从左到右，输出文档内容
由块级元素和行级元素组成
(2)浮动(Floats)

(3)绝对定位(Absolute positioning)

网页布局是网页制作的基础。(使用div+css布局网页)

相关知识点：

标准文档流
盒子模型
float属性
position属性

案例一：自动居中一列布局案例(盒子模型的使用方法)
盒子模型：

在盒子模型的三维立体结构一共有五层。
从第一层到第五层分别为：边框(border)、内边距(content+padding)、背景图片(background-image)、背景颜色(background-color)、外边距(margin)

自动居中-列布局的三个技能点：

标准文档流
会计元素
margin属性

注意：
1、如果想让页面居中，当设置margin属性为auto的时候，不能再设置浮动或者绝对定位属性。
2、自动居中一列布局需要设置 margin 左右值设置为 auto，而且一定要设置width为一个定值。

栗子：现在页面中有个红色的方框，如下。我们要让它在屏幕中居中显示。
这里写图片描述

我们可以对原来代码进行修改：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .header {
            width: 500px;/*宽度为500像素*/
            height: 200px;/*高度为200px*/
            border: 2px solid red;/*边框为2px，实心红色*/
        }
    </style>
</head>
<body >
    <div class="header"></div>
</body>
</html>

在样式中的”.header”中添加自适应居中，如下：

  .header {
            width: 500px;/*宽度为500像素*/
            height: 200px;/*高度为200px*/
            border: 2px solid red;/*边框为2px，实心红色*/
            margin: 0px auto;/*设置上下外面局为0px，左右自适应*/
        }

结果居中显示：
这里写图片描述

案例二：浮动布局案例(float属性以及解决浮动影响的方法)
浮动布局：

css中规定的第二种定位机制
能够实现横向多列布局
通过设置float属性实现

float属性：(有三个属性值)

left：左浮动
right：右浮动
none：不浮动

特点：元素会左移，或者右移，直至触碰到容器位置。
注意：

设置了浮动的元素，仍旧处于标准文档流之中
当元素设置浮动属性后，会对相邻的元素产生影响，相邻元素特指紧邻后面的元素
栗子：下面两个块状元素，我们要将其显示在同一行中。

这里写图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box1{
            height: 50px;
            background-color: red;
        }
        .box2{
            height: 50px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
</body>
</html>

这里我们可以通过添加左浮动属性，让两个块状元素显示在同一行内。box1与box2属性修改为：

.box1{
            height: 50px;
            background-color: red;
            float: left;
        }
        .box2{
            height: 50px;
            background-color: blue;
            float: left;
        }

显示结果：
这里写图片描述

我们看到，两个div的宽度发生了变化，这是因为：当元素没有设置宽度值，而设置了浮动属性，元素的宽度随内容的变化而变化

清除浮动的常用方法：

clear属性：

1、常用clear：both；
2、同时设置width：100%(或者固定宽度)+overflow:hidden;

案例三：绝对定位布局案例(绝对应为实现横向两列或者多列布局)

position属性，有三种定位形式：

1、静态定位
2、相对定位
3、绝对定位

position属性可以设置4个属性值：

static(静态定位)
relative(相对定位)
absolute(绝对定位)
fixed(固定定位)

(1)、相对定位：
特点：

1、相对于自身原有位置进行偏移
2、仍处于标准文档流中
3、随即拥有偏移属性和z-index属性

(2)、绝对定位：
特点：

1、建立了以包含块为基准的定位
2、完全脱离了文档标准流
3、随即拥有偏移属性和z-idnex属性
未设置偏移量时：
特点
无论是否存在已定位祖先元素，都保持在元素初始位置
脱离了标准文档流

设置了偏移量时：

无已定位祖先元素，以< html>为便宜参照基准
已有定位祖先元素，以距离最近的已定位祖先元素为偏移参照基准

使用绝对定位实现横向两列布局(不经常使用)
常用场合：

常用语一列固定宽度，另一列宽度自适应的情况

主要应用技能：

relative—父元素相对定位
absolute—自适应宽度元素绝对定位

注意：

固定宽度列的高度>自适应宽度的列

栗子：

已知一个设置了绝对定位的元素 b，位于其父元素 a 中，a 元素为静态定位，则 b 元素将以（ html 元素）为基准进行偏移。
因为 a 元素为静态定位，所以要以根元素为基准进行偏移，也就是 html 元素。

切记：

父级元素必须是绝对定位（absolute）、相对定位（relative）或固定定位（fixed）的，才能给绝对定位的子元素进行定位参照，如果父元素是静态（static）的，则上溯到祖父元素、曾祖父元素……直到找到一个非静态的祖先元素，然后就会相对于这个元素来定位。如果所有祖先元素都是静态的，则以html来进行定位。