web页面布局中的定位与浮动

weixin_45987479

已于 2022-06-22 21:09:22 修改

阅读量864

点赞数

文章标签：前端 html web

于 2022-06-22 21:06:03 首次发布

本文链接：https://blog.csdn.net/weixin_45987479/article/details/125416402

版权

一.网页布局是网页制作的基础

（1）流式布局，即元素按照标准文档流进行排列；

（2）浮动布局

（3）绝对（相对）定位布局。

常见的布局结构分为：一列布局，两列布局，三列布局和混合布局，其中使用最多的是混合布局，即按照网站的实际需求使用多列进行布局。

二.页面布局原则
了解网页的布局原则，有助于设计出美观有序的页面。在网页设计中布局原则主要有整体性、对比性和均衡性三方面，具体介绍如下

1. 整体性

整体性是指设计元素的整体与统一。整体统一的布局指页面上不同元素相互影响如同一个整体，页面中所有按钮等控件元素都应该保持一致。对于网页重复出现的形尺寸、色彩都是一个有机联系的整体。把页面元素组织起来形成组块，让页面更加整体有利于统一版面布局的风格。

2. 对比性

网页是由很多元素构成的，这些元素的重要性各不相同。有些内容元素需要重点突出，此时就需要通过对比，创造出视觉趣味性，同时引导用户的注意力。对比包含色对比、字体字号对比、区块面积大小对比等。

3. 均衡性

网页中的均衡是指页面上文字、形状、色彩等因素在视觉上的平衡。视觉平衡分为对称平衡和不对称平衡。网页中各个元素是有重量的，如果达到对称平衡，页面则显得宁静稳重。为了在页面中添加趣味性，可以选择不对称平衡。

三.浮动与定位

浮动

1 首先了解把块元素放在一行内？

使用行内块元素会产生空隙

2 如何实现两个盒子左右对齐？

总结：有很多布局效果，标准流没有办法完成，此时利用浮动完成布局

浮动能改变标签的默认排列方式

实际应用：

浮动元素经常搭配父级标准流，目的是限制浮动元素位置

先用标准流的父元素排列上下，之后内部子元素采取浮动排列左右

清除浮动？

也不是真正意义上的清除，而是限制浮动子元素

1 ）父元素不方便给高度（不知道子元素多少）

2 ）父元素高度设置为0的话，会被其他标准流父元素挤上去

操作：给父级添加overflow属性，值设置为hidden.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one {
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;

        }

        .two {
            width: 200px;
            height: 200px;
            background-color: blue;
            float: left;
        }

        .three {
            width: 200px;
            height: 200px;
            background-color: green;
            float: left;

        }

        ul {
            list-style: none;
        }

        li {
            float: left;
            margin-left: 20px;
        }

        span {
            width: 200px;
            height: 200px;
            background-color: #ccc;
            float: left;
        }

        div {
            height: 200px;
            background-color: blue;
            float: left;
        }
    </style>
</head>

<body>
    <!-- 文档流 -->

    <!-- 浮动产生的特性 -->
    <!-- 行内元素 无法设置宽高
    在设置浮动以后，会拥有行内块的特性， 可以设置宽度和高度
    -->


    <!-- 块级元素
    在设置浮动之后，原本独占一行的特性也消失，根据自身内容大小来占据位置
    -->

    <!-- 行内块的特性
    1.可以设置宽度和高度
    2.会并排显示
    3.所占区域大小根据自身内容大小决定
    -->
    <span>行内-span标签</span>
    <div>块级元素</div>


    <!-- 1.浮动会遮盖住下面的元素，但是不会遮盖住文字内容 -->
    <!-- <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div> -->

    <!-- <ul>
        <li>促销</li>
        <li>家电</li>
        <li>食品</li>
    </ul> -->

    <!-- 清除浮动 -->
    <!-- 方法一：overflow:hidden -->
    <!-- 方法二：额外标签法 -->
    <!-- 方法三：伪元素清除浮动 -->
</body>

</html>

定位

定位：就是将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子

定位 = 定位模式 + 边偏移

定位模式用于指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置

1 . 定位模式

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

这里部分定位给予演示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            height: 1500px;
        }
        .one {
            width: 100px;
            height: 100px;
            background-color: #ccc;
        }
        .two {
            width: 100px;
            height: 100px;
            background-color: red;
            position: sticky;
            top: 10px;
        }
        .three {
            width: 100px;
            height: 100px;
            background-color: blue;
        }

        /* .main {
            background-color: #ccc;
            width: 400px;
            height: 400px;
            margin: 0 auto;
            overflow: hidden;
        } */
        .second {
            background-color: rgb(249, 156, 156);
            width: 200px;
            height: 200px;
            margin: 0 auto;
            margin-top: 100px;
            position: relative;
        }
        .move {
            background-color: rgb(88, 239, 186);
            width: 100px;
            height: 100px;
            margin: 0 auto;
            position: absolute;
            top: 50px;
            left: 50px;
        }
    </style>
</head>

<body>

    <!-- 定位的特性 -->

    <!-- 相对定位 -->

    <!-- 绝对定位 -->
    <!-- <div class="main">
        <div class="second">
            <div class="move">这是绝对定位的盒子</div>
        </div>
    </div> -->
    <!-- 固定定位 -->
    <!-- 粘性定位 -->
    <div class="main">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </div>
</body>
</html>