CSS进阶一（CSS+DIV的页面布局---浮动与定位）

最新推荐文章于 2024-08-19 19:55:55 发布

二十一块石头

最新推荐文章于 2024-08-19 19:55:55 发布

阅读量2.6k

点赞数 2

分类专栏： css 文章标签： css html5 html

本文链接：https://blog.youkuaiyun.com/qq_44872688/article/details/120753147

版权

本文介绍了CSS+DIV在页面布局中的应用，重点讲解了浮动和定位机制。包括浮动的概念、实现方法、常见布局以及清除浮动的方法。同时，详细阐述了相对定位和绝对定位的原理与用法，通过实例展示了如何调整元素在页面中的位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

运用css+div对网页页面进行布局，可以使网页排版更加丰富美观，清晰有条理。在这个过程中，div承载的是内容，css承载的是样式。

一、页面布局概述

(1)确定版心：网页的主体内容,在页面中水平居中显示；

(2)分析页面中的模块：
最简单的页面布局，主要由头部（header）、导航（nav）、焦点图（banner）、内容（content）、页面底部（footer）五部分组成。

(3)控制页面中各个模块:使用CSS+DIV来控制。

二、CSS定位机制

（1）普通流方式：显示的位置由元素在HTML文件中的位置决定（由标签在文件中的位置来决定）；
         block元素（如p、h、div）（块级框）从上到下一个接一个的排列。
         inline元素（如span、strong元素）在行中水平布置。
         且除非特殊的指定，否则所有的框都在普通流中定位。

（2）浮动方式：可以左右移动，直到碰到包含框或其它浮动框；

（3）绝对定位：可以直接将元素定位在页面上地任何位置(设置元素在页面中的位置坐标)。

三、浮动属性

1、什么是浮动

浮动是元素脱离原有的标准文档流,移动到其父元素中指定的位置。

2、浮动的实现

在元素的CSS中添加float属性

 float: left/righr/none;

举例如下：

<!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>003</title>
</head> 
 <style type="text/css"> 
 /* 意思是css样式的文本 */
   .a1 {
   
      width:300px;
      height: 260px;
      background-color: blue;
   }
   .a2 {
   
      width:350px;
      height: 270px;
      background-color: red;
   }
</style>
<body>
    <div class="a1"></div>
    <div class="a2"></div>
</body>
</html>

在这里插入图片描述

如上图可以看出，此时页面有两个盒子，如果我们想把下面的盒子放到第一行水平流的话，可以为上面的盒子设置float属性，使它浮动到左边，这样下面的盒子就上去了。改动代码如下：

   .a1 {
   
      width:300px;
      height: 260px;
      background-color: blue;
      float: left;
   }

此时效果如图：
在这里插入图片描述
可以看出，由于上面盒子的浮动，下面盒子移动到了第一行水平流且被上面盒子覆盖，如果想让它在第一行完全显示，我们可以使用margin-left属性，改动代码如下：

   .a2 {
   
      width:350px;
      height: 270px;
      background-color: red;
      margin-left: 300px;
   }

效果如图：
在这里插入图片描述

也可以使用float:right;让它浮动到右边，效果如图：
在这里插入图片描述
注意：当元素浮动时，它将不再处于普通文档流中，相当于浮在文档之上，不占据空间，但是会缩短行框，产生文字环绕的效果。

浮动元素不占据空间的具体意思:以两个div为例，正常是俩都显示出来，占据2空间，加浮动后，div就会叠加显示在一个位置, 此时要想让两个div正常显示一般使用到margin-left：浮动div的宽度,或者也是使用浮动。
如果不设置，div叠加在一个位置时，只是位置叠加，但div中的内容不会被覆盖, 如果后面的div没有指定宽度则自动横向填充完整，文字过多则会跑到第一个div下面形成文字环绕效果。如果指定宽度则去掉被覆盖的宽度显示，其它的文字到浮动div下面显示，即产生文字环绕效果。

3、常见的浮动布局

（1）一列固定宽度并自动居中

使用 margin:auto;

举例如下：

<!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>003</title>
</head> 
 <style type="text/css"> /* 意思是css样式的文本 */
 /* 可以先用下列语句清除浏览器与页面的默认边距 */
   * {
   
       margin: 0

最低0.47元/天解锁文章