app开发定制h5的div布局详解

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

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

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style type="text/css">
  9.         .container{
  10.             width: 1000px;
  11.             height: 880px;
  12.             border: 1px solid red;
  13.             margin: 0px auto;
  14.             background-color: rgb(233, 213, 213);
  15.         }
  16.  
  17.         /* 设置头部样式 */
  18.         .title{
  19.             width: 950px;
  20.             height: 100px;
  21.             border: 1px solid red;
  22.             margin: 10px auto;
  23.             background-color: pink;
  24.         }
  25.  
  26.         /* 设置导航样式 */
  27.         .nav{
  28.             width: 950px;
  29.             height: 120px;
  30.             margin: 10px auto;
  31.             background-color: red;
  32.         }
  33.  
  34.         /* 设置主体内容样式 */
  35.         .content{
  36.             height: 500px;
  37.             width: 950px;
  38.             background-color: lightblue;
  39.             margin: 10px auto;
  40.         }
  41.  
  42.         /* 设置主体内容左列的样式 */
  43.         .content .demo1{
  44.             width: 200px;
  45.             height: 100%;
  46.             /*高度设置为100%的时候表示占满容器 那么后期就无法设置该盒子的上外边距和下外边距
  47.             但是可以设置px为单位作高度 只要不把父容器占满即可
  48.             */
  49.             background-color: yellow;
  50.             margin-right: 20px;
  51.             float: left;
  52.         }
  53.  
  54.         /* 设置主体内容的中间的内容的样式 */
  55.         .content .demo2{
  56.             width: 400px;
  57.             height: 100%;
  58.             background-color: lightcoral;
  59.             float: left;
  60.             margin-right: 20px;
  61.         }     
  62.         
  63.         /* 设置主体内容右列的样式 */
  64.         .content .demo3{
  65.             width: 310px;
  66.             height: 100%;
  67.             background-color: lightgreen;
  68.             float: right;
  69.         }
  70.  
  71.        
  72.  
  73.         /* 设置底部 */
  74.         .bottom{
  75.             width: 950px;
  76.             height: 100px;
  77.             background-color: lightslategray;
  78.             margin: 0px auto;
  79.         }
  80.         </style>
  81. </head>
  82. <body>
  83.     <div class="container">
  84.         <div class="title">这是头部</div>
  85.         <div class="nav">这是导航</div>
  86.         <div class="content">
  87.             <div class="demo1">主体内容的左列</div>
  88.             <div class="demo2">主体内容的中间内容</div>
  89.             <div class="demo3">主体内容的右列</div>
  90.         </div>
  91.         <div class="bottom">这是底部</div>
  92.     </div>
  93. </body>
  94. </html>

  

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

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

  1. /* 设置主体内容样式 */
  2.         .content{
  3.             height: 500px;
  4.             width: 950px;
  5.             background-color: lightblue;
  6.             margin: 10px auto;
  7.         }
  8.  
  9.         /* 设置主体内容左列的样式 */
  10.         .content .demo1{
  11.             width: 200px;
  12.             height: 100%;
  13.             /*高度设置为100%的时候表示占满容器 那么后期就无法设置该盒子的上外边距和下外边距
  14.             但是可以设置px为单位作高度 只要不把父容器占满即可
  15.             */
  16.             background-color: yellow;
  17.             margin-right: 20px;
  18.             float: left;
  19.         }
  20.  
  21.         /* 设置主体内容的中间的内容的样式 */
  22.         .content .demo2{
  23.             width: 400px;
  24.             height: 100%;
  25.             background-color: lightcoral;
  26.             float: left;
  27.             margin-right: 20px;
  28.         }     
  29.         
  30.         /* 设置主体内容右列的样式 */
  31.         .content .demo3{
  32.             width: 310px;
  33.             height: 100%;
  34.             background-color: lightgreen;
  35.             float: right;
  36.         }

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

消除浮动塌陷的三种方法

1.给父级元素定义高度

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

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

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

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

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发