h5的div布局详解

在实际的网页开发中，网页的整体部分一般是由div标签来进行布局的。那么在使用div布局之前就要了解div的属性

div是块级元素块级元素在页面中的独占一行默认情况下的高度由里面的内容决定。由于块级元素独占一整行那么使用div进行布局的话 div和div之间是上下排列的

还有块级元素之间不仅能套入行内元素还可以嵌入块级元素但在嵌入块级元素的时候由于块级元素的默认属性它们之间是呈现上下排列的所以就需要使用浮动

如图所示，该页面的整体结构的搭建是使用div搭建的。主要有一个大的整体的div 然后这个最大的div下有三个小的div 分别是头部中部底部而在中部的div中还有三个小div

<!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 type="text/css">.container{width: 1000px;height: 880px;border: 1px solid red;margin: 0px auto;background-color: rgb(233, 213, 213);}/* 设置头部样式 */.title{width: 950px;height: 100px;border: 1px solid red;margin: 10px auto;background-color: pink;}/* 设置导航样式 */.nav{width: 950px;height: 120px;margin: 10px auto;background-color: red;}/* 设置主体内容样式 */.content{height: 500px;width: 950px;background-color: lightblue;margin: 10px auto;}/* 设置主体内容左列的样式 */.content .demo1{width: 200px;height: 100%;/*高度设置为100%的时候表示占满容器 那么后期就无法设置该盒子的上外边距和下外边距但是可以设置px为单位作高度 只要不把父容器占满即可*/background-color: yellow;margin-right: 20px;float: left;}/* 设置主体内容的中间的内容的样式 */.content .demo2{width: 400px;height: 100%;background-color: lightcoral;float: left;margin-right: 20px;}     /* 设置主体内容右列的样式 */.content .demo3{width: 310px;height: 100%;background-color: lightgreen;float: right;}/* 设置底部 */.bottom{width: 950px;height: 100px;background-color: lightslategray;margin: 0px auto;}</style>
</head>
<body><div class="container"><div class="title">这是头部</div><div class="nav">这是导航</div><div class="content"><div class="demo1">主体内容的左列</div><div class="demo2">主体内容的中间内容</div><div class="demo3">主体内容的右列</div></div><div class="bottom">这是底部</div></div>
</body>
</html>

最终代码如上所示，在实际搭建下，除了中间的div的搭建需要用到浮动，其它的div只要定义了宽高，然后使用margin: 0px auto;即可实现在整个父级元素内水平居中显示

中部的三个小div的则需要使用float的浮动去实现，

/* 设置主体内容样式 */.content{height: 500px;width: 950px;background-color: lightblue;margin: 10px auto;}/* 设置主体内容左列的样式 */.content .demo1{width: 200px;height: 100%;/*高度设置为100%的时候表示占满容器 那么后期就无法设置该盒子的上外边距和下外边距但是可以设置px为单位作高度 只要不把父容器占满即可*/background-color: yellow;margin-right: 20px;float: left;}/* 设置主体内容的中间的内容的样式 */.content .demo2{width: 400px;height: 100%;background-color: lightcoral;float: left;margin-right: 20px;}     /* 设置主体内容右列的样式 */.content .demo3{width: 310px;height: 100%;background-color: lightgreen;float: right;}

如上所示，中部内容三个小div需要用到浮动，以为块级元素之间的默认排序是上下方向的排序。而在最终的效果图中都是在同一行内排序，所以这里可以使用左浮动来实现给三个div分别使用float： left；方法即可。因为使用浮动就会存在浮动塌陷，所以需要消除浮动塌陷

消除浮动塌陷的三种方法

1.给父级元素定义高度

2.给父级元素使用overflow: hidden;方法消除浮动塌陷

3.使用clear: both;方法消除浮动塌陷

我们这里使用消除浮动塌陷的方法是给父级元素添加高度值所以在对子级元素使用浮动的时候就不会出现浮动塌陷

像这种情况多个小div在一个大div呈一行排序的情况一般使用的都是左浮动如果最后一个元素即使使用了左浮动但是依然在下面那么可以给它尝试使用一下右浮动使它靠右浮动即可实现

h5的div布局详解相关推荐

html5 div布局table,H5的div布局与table布局详解
这次给大家带来H5的div布局与table布局详解,H5div布局与table布局的注意事项有哪些,下面就是实战案例,一起来看一下. 本文实例为大家解析了html5 p布局与table布局,供大家参考 ...
html中style布局放哪,CSS样式表与格式布局详解
样式表 CSS(Cascading Style Sheets 层叠样式表),作用是美化HTML网页. 内联样式表: 例: 内联样式表内嵌样式表:必须写在head标签里例: p { 样式;} he ...
grid layout网格布局详解
grid layout网格布局详解什么是grid layout grid的特点 grid css属性的基础知识创建一个grid布局创建一个网格隐性网格与显性网格尺寸单位fr repeat函数 ...
【C++】C++对象模型：对象内存布局详解（C#实例）
C++对象模型:对象内存布局详解 0.前言 C++对象的内存布局.虚表指针.虚基类指针解的探讨,参考. 1.何为C++对象模型? 引用<深度探索C++对象模型>这本书中的话: 有两个概念可 ...
Linux进程地址空间与进程内存布局详解，内核空间与用户空间
Linux进程地址空间与进程内存布局详解程序段(Text):程序代码在内存中的映射,存放函数体的二进制代码. 初始化过的数据(Data):在程序运行初已经对变量进行初始化的数据. 未初始化过的数据( ...
DevExpress控件GridControl中的布局详解【转】
DevExpress控件GridControl中的布局详解 [转] 2012-10-24 13:27:28| 分类: devexpress | 标签:devexpress |举报|字号订阅 h ...
qt布局嵌套_QDockWidget嵌套布局详解-实现Visual Studio布局
概述许多工程软件,如Qt Creator,VS,matlab等,都是使用dock布局窗口,这样用户可以自定义界面,自由组合窗口. Qt的嵌套布局由QDockWidget完成,用Qt Creator拖 ...
h5列表 php,H5的标签使用详解
这次给大家带来H5的标签使用详解,使用H5标签的注意事项有哪些,下面就是实战案例,一起来看一下. 不允许写结束标记的标签:area(定义图像映射中的区域).base(为页面上的所有链接规定默认地址或默 ...
（淘宝无限适配）移动手机端rem布局详解（转载非原创）
https://www.cnblogs.com/well-nice/p/5509589.html (淘宝无限适配)手机端rem布局详解(转载非原创) 从网易与淘宝的font-size思考前端设计稿与工 ...

h5的div布局详解

h5的div布局详解相关推荐

最新文章

热门文章