CSS与DIV的结合使用

最新推荐文章于 2025-06-29 09:19:53 发布

原创最新推荐文章于 2025-06-29 09:19:53 发布 · 2.4k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #html5

本文详细介绍了CSS与DIV如何结合进行页面布局，包括页面布局的基本步骤、CSS的定位机制（普通流、浮动、绝对定位）、浮动属性及清除浮动的方法。同时讲解了常见的浮动布局模式，如一列固定宽度居中、自适应宽度以及两列自动居中布局。此外，还探讨了CSS中常用的属性如visibility和display，并区分了块元素和行内元素的特点。

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

CSS与DIV进行的页面布局

1、页面布局

（1）确定版心：页面的主体内容，在页面中水平居中显示

（2）分析页面中的模块：分析页面中的版块成分以及位置

（3）控制页面中各个模块

2、CSS的定位机制

（1）普通流方式：由元素在html文件中的位置决定（由标签在文件中的位置来决定）

（2）浮动方式：元素在页面中可以左右移动，直到碰到包含框或其他浮动框

（3）绝对位置：直接将元素定位到页面的任何位置（设置元素在页面中的位置坐标）

3、浮动属性

（1）浮动：元素脱离原有的标准文档流，移动到其父元素中指定的位置

（2）浮动的实现：在元素的CSS中添加float属性

left	向左浮动
right	向右浮动
none	不浮动（默认值）

浮动元素不占据空间：以两个div为例，正常状态时，是两个都能显示出来，占据的是两个孔家，若是加了浮动后，div就会叠加，两个就会显示在一个位置上，此时若是想要两个div又可以正常的显示出来，可以对浮动的div加margin-left属性，或者是让另一个也加浮动属性。当量div叠加在一起时，他们的内容不会被覆盖，如果后面的div没有指定宽度则自动横向填充完整，文字过多就会跑到第一个div下方，形成文字环绕的效果。

<style>
    #d1{
        width: 100px;
        height: 100px;
        background-color: aquamarine;
    }
    #d2{
        width: 100px;
        height: 100px;
        background-color: blanchedalmond;
    }
</style>
<body>
    <div id="d1"></div>
    <div id="d2"></div>
</body>

<style>
    #d1{
        width: 100px;
        height: 100px;
        background-color: aquamarine;
        float: left;
    }
    #d2{
        width: 100px;
        height: 100px;
        background-color: blanchedalmond;
    }
</style>
<body>
    <div id="d1"></div>
    <div id="d2"></div>
</body>

<style>
    #d1{
        width: 100px;
        height: 100px;
        background-color: aquamarine;
        float: left;
    }
    #d2{
        width: 100px;
        height: 100px;
        background-color: blanchedalmond;
        float: left;
    }
</style>
<body>
    <div id="d1">内容1</div>
    <div id="d2">内容2</div>
</body>

<style>
    #d1{
        width: 100px;
        height: 100px;
        background-color: aquamarine;
        float: left;
    }
    #d2{
        width: 100px;
        height: 100px;
        background-color: blanchedalmond;
        /* float: left; */
        margin-left: 100px;
    }
</style>
<body>
    <div id="d1">内容1</div>
    <div id="d2">内容2</div>
</body>

4、常见的浮动布局

（1）一列固定宽度并自动居中：margin取值为auto

<style>
    #d1{
        margin: auto;
        background-color: blanchedalmond;
        height: 100px;
        width: 100px;
    }
</style>
<body>
    <div id="d1"></div>
</body>

（2）一列自适应宽度：相对于浏览器而言，盒子的宽度会随浏览器宽度的改变而改变，也可以设置适应页面宽度的百分比

<style>
    #d1{
        margin: auto;
        background-color: blanchedalmond;
        height: 100px;
        width: 20%;
    }
</style>
<body>
    <div id="d1"></div>
</body>

div盒子的宽度会随着页面宽度的变化而变化

（3）两列自动居中：采用嵌套的方式，让外层的盒子自动居中，从而达到内层的盒子自动居中

<style>
    #d1{
        margin: auto;
        background-color: blanchedalmond;
        height: 200px;
        width: 200px;
    }
    #d2{
        background-color: cornflowerblue;
        height: 200px;
        width: 100px;
        float: left;
    }
    #d3{
        background-color: rgb(145, 159, 185);
        height: 200px;
        width: 100px;
        float: left;
    }
</style>
<body>
    <div id="d1">
        <div id="d2"></div>
        <div id="d3"></div>
    </div>
</body>

5、清除浮动

浮动的元素离开了原有的文档流，它会对页面中的其他元素的排版产生影响，为了消除这种影响，可以使用clear属性消除浮动

left	清除左边的浮动影响
right	清除右边的浮动影响
both	清除左右两边的浮动影响

6、定位属性

（1）相对定位：元素以它所在的普通流中的位置为起始点进行定位（设置坐标）

<style>
    #d1{
        width: 100px;
        height: 100px;
        background-color: cornflowerblue;
    }
    #d2{
        width: 100px;
        height: 100px;
        background-color: rgb(21, 93, 228);
    }
    #d3{
        width: 100px;
        height: 100px;
        background-color: rgb(62, 83, 121);
        position: relative;/*相对位置*/
        top: 100px;
        left: 100px;
    }
</style>
<body>
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3"></div>
</body>

（2）绝对位置：可以把元素精确定位到页面的某个位置

注意：1、元素绝对定位后与普通文档流没有关系，不占据普通文档流的空间

2、绝对定位的元素位置是相对于最近的父元素而言

3、因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素，但可以通过z-index来控制它的层级次序。z-index的值越高，则它越显示在上层

<style>
    #d1{
        width: 100px;
        height: 100px;
        background-color: cornflowerblue;
    }
    #d2{
        width: 100px;
        height: 100px;
        background-color: rgb(21, 93, 228);
    }
    #d3{
        width: 100px;
        height: 100px;
        background-color: rgb(62, 83, 121);
        position: absolute;/*绝对位置*/
        top: 100px;
        left: 100px;
    }
</style>
<body>
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3"></div>
</body>

7、在页面布局中常用的CSS属性

（1）visibility：元素是否可见

取值：visible：元素可见（默认值）

hidden：不可见

（2）dispaly：元素的显示方式

取值：none不显示

block：块状显示

inline：显示在一行

注意：visibility：hidden；隐藏元素后，保留元素战友的物理空间

display：none：隐藏元素后，不保留元素所占的物理空间

8、CSS中的块元素和行内元素

（1）块元素(block)：占据了全部的宽度,在前后都有换行符

例：

<h1></h1>
<p></p>
<div></div>
<ul></ul>
<table></table>
<form></form>

其中宽度（width）、高度（height）、内边距（padding）、外边距（margin）都是可以控制的

（2）内联元素（inline）：只需要必要的宽度，不强制换行

<span></span>
<a></a>

宽度（width）、高度（height）

内边距（padding-top、padding-bottom）

外边距（margin-top、margin-bottom）

都是不能改变的

9、html中的块元素和行内元素

（1）块元素：无论内容是什么都会独一行，主要用于页面布局

（2）行内元素：只占用自身的大小，不会占用一行