CSS与DIV的结合使用

最新推荐文章于 2024-05-11 11:43:05 发布

Han_Zhou_Z

最新推荐文章于 2024-05-11 11:43:05 发布

阅读量2.1k

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/Han_Zhou_Z/article/details/120728472

版权

CSS与DIV进行的页面布局1、页面布局（1）确定版心：页面的主体内容，在页面中水平居中显示（2）分析页面中的模块：分析页面中的版块成分以及位置（3）控制页面中各个模块2、CSS的定位机制（1）普通流方式：由元素在html文件中的位置决定（由标签在文件中的位置来决定）（2）浮动方式：元素在页面中可以左右移动，直到碰到包含框或其他浮动框（3）绝对位置：直接将元素定位到页面的任何位置（设置元素在页面中的位置坐标）3、浮动属性（1）浮动：元素脱离原有的标准文档流，移动到其父

摘要由CSDN通过智能技术生成

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>

最低0.47元/天解锁文章

Han_Zhou_Z

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
CSS与DIV的结合使用

CSS与DIV进行的页面布局1、页面布局（1）确定版心：页面的主体内容，在页面中水平居中显示（2）分析页面中的模块：分析页面中的版块成分以及位置（3）控制页面中各个模块2、CSS的定位机制（1）普通流方式：由元素在html文件中的位置决定（由标签在文件中的位置来决定）（2）浮动方式：元素在页面中可以左右移动，直到碰到包含框或其他浮动框（3）绝对位置：直接将元素定位到页面的任何位置（设置元素在页面中的位置坐标）3、浮动属性（1）浮动：元素脱离原有的标准文档流，移动到其父
复制链接

扫一扫