DIV+CSS布局
Posted muzidaitou
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DIV+CSS布局相关的知识，希望对你有一定的参考价值。
1.div和span
（1）div和span在整个html标记中，没有任何意义，他们的存在就是为了应用CSS样式
（2）div和span的区别在于，span是内联元素，div是块级元素
2.盒模型
| margin | 盒子外边距 |
| padding | 盒子内边距 |
| border | 盒子边框宽度 |
| width | 盒子宽度 |
| height | 盒子高度 |
3.布局相关的属性
（1）position定位方式
| relative | 正常定位 |
| absolute | 根据父元素进行定位 |
| fixed | 根据浏览器窗口进行定位 |
| static | 没有定位 |
| inherit | 继承 |
（2）定位
left、right、top、bottom离页面顶点的距离
（3）z-index层覆盖先后顺序（优先级）
代码示例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Div+CSS布局（布局相关的属性）</title> 6 <style type="text/css"> 7 body 8 padding: 0px; 9 margin:0; 10 11 12 .div 13 width:300px; 14 height:300px; 15 background-color: green; 16 position: relative; 17 left:10px; 18 top:10px; 19 z-index:1; 20 21 span 22 position:absolute; 23 background-color: #ff6600; 24 color:white; 25 top:-10px; 26 right:0; 27 z-index:0; 28 29 .fixed 30 position:fixed; 31 background-color: #f60; 32 color:white; 33 top:100px; 34 z-index:2; 35 36 </style> 37 </head> 38 <body> 39 <div class="div"> 40 <span>浏览次数：222</span> 41 </div> 42 <div class="fixed"> 43 <p>联系电话：13816888888</p> 44 <p>联系QQ：55888888</p> 45 <p>联系地址：江苏省南京市</p> 46 </div> 47 <br/> 48 <br/> 49 <br/> 50 <br/> 51 <br/> 52 <br/> 53 <br/> 54 <br/> 55 <br/> 56 <br/> 57 <br/> 58 <br/> 59 <br/> 60 <br/> 61 <br/> 62 <br/> 63 <br/> 64 <br/> 65 <br/> 66 <br/> 67 <br/> 68 <br/> 69 <br/> 70 </body> 71 </html>
（4）display显示属性
| display:none | 层不显示 |
| display:block | 块状显示，在元素后面换行，显示下一个块元素 |
| display:inline | 内联显示，多个块可以显示在一行内 |
代码示例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Div+CSS布局（布局相关的属性）</title> 6 <style type="text/css"> 7 body 8 padding: 0px; 9 margin:0; 10 11 div 12 background-color: green; 13 color: white; 14 display:inline; 15 16 span 17 background-color: red; 18 color: white; 19 display:block; 20 width:200px; 21 22 </style> 23 </head> 24 <body> 25 <div>南京邮电大学</div> 26 <div>南京邮电大学</div> 27 <div>南京邮电大学</div> 28 <span>南京邮电大学</span> 29 <span>南京邮电大学</span> 30 <span>南京邮电大学</span> 31 32 </body> 33 </html>
（5）float浮动属性
| left | 左浮动 |
| right | 右浮动 |
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Div+CSS布局（浮动以及溢出处理）</title> 6 <style type="text/css"> 7 body 8 padding: 0px; 9 margin:0; 10 11 .div 12 width:960px; 13 height:600px; 14 margin:0 auto; 15 background-color: #f1f1f1; 16 17 .left 18 float:left; 19 width:260px; 20 height:460px; 21 background-color: #cccccc; 22 23 .right 24 float:right; 25 width:690px; 26 height:460px; 27 background-color: #ddd; 28 29 .bottom 30 width:960px; 31 height:140px; 32 background-color: red; 33 34 </style> 35 </head> 36 <body> 37 <div class="div"> 38 <div class="left"></div> 39 <div class="right"></div> 40 <div class="bottom"></div> 41 </div> 42 </body> 43 </html>
（6）clear清除浮动
clear:both
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Div+CSS布局（浮动以及溢出处理）</title> 6 <style type="text/css"> 7 body 8 padding: 0px; 9 margin:0; 10 11 .div 12 width:960px; 13 height:600px; 14 margin:0 auto; 15 background-color: #f1f1f1; 16 17 .left 18 float:left; 19 width:260px; 20 height:460px; 21 background-color: #cccccc; 22 23 .right 24 float:right; 25 width:690px; 26 height:460px; 27 background-color: #ddd; 28 29 .bottom 30 width:960px; 31 height:140px; 32 background-color: red; 33 34 .clear 35 clear:both; 36 margin-bottom:10px; 37 38 </style> 39 </head> 40 <body> 41 <div class="div"> 42 <div class="left"></div> 43 <div class="right"></div> 44 <div class="clear"></div> 45 <div class="bottom"></div> 46 </div> 47 </body> 48 </html>
（7）overflow溢出处理
| hidden | 隐藏超出层大小的内容 |
| scroll | 无论内容是否超出层大小都添加滚动条 |
| auto | 超出时自动添加滚动条 |
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Div+CSS布局（浮动以及溢出处理）</title> 6 <style type="text/css"> 7 body 8 padding: 0px; 9 margin:0; 10 11 .div 12 width:960px; 13 height:600px; 14 margin:0 auto; 15 background-color: #f1f1f1; 16 17 .left 18 float:left; 19 width:260px; 20 height:460px; 21 background-color: #cccccc; 22 23 .right 24 float:right; 25 width:690px; 26 height:460px; 27 background-color: #ddd; 28 29 .bottom 30 width:960px; 31 height:140px; 32 background-color: red; 33 34 .clear 35 clear:both; 36 margin-bottom:10px; 37 38 /*.jianjie*/ 39 /*width:260px;*/ 40 /*height:120px;*/ 41 /*background-color: red;*/ 42 /*overflow: auto;*/ 43 /**/ 44 </style> 45 </head> 46 <body> 47 <div class="div"> 48 <div class="left"> 49 <!--<div class="jianjie">--> 50 <!--南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学--> 51 <!--南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学--> 52 <!--南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学--> 53 <!--南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学--> 54 <!--南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学--> 55 <!--南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学--> 56 <!--</div>--> 57 </div> 58 <div class="right"></div> 59 <div class="clear"></div> 60 <div class="bottom"></div> 61 </div> 62 </body> 63 </html>
4.兼容问题及高效开发工具
1.兼容性测试
（1）IE Tester
（2）Multibrowser
2.常用的浏览器
（1）Google chrome
（2）Firefox
（3）opera
3.高效的开发工具
| 轻量级的 | Notepad++ |
| sbulime Text | |
| 记事本 | |
| 重量级的 | WebStorm |
| Dreamweaver |
4.网页设计工具
（1）fireworks
（2）Photoshop
5.判断IE的方法
条件判断格式：
<!--[if 条件 版本]> 那么显示 <![endif]-->
（1）不等于
<!--[if !IE 8]> 除了IE8都可以显示 <![endif]-->
（2）小于
<!--[if lt IE 5.5]> IE浏览器版本小于5.5的显示 <![endif]-->
（3）大于
<!--[if gt IE 5]> IE浏览器版本大于5的显示 <![endif]-->
（4）小于等于
<!--[if lte IE 6]> IE浏览器版本小于6的显示 <![endif]-->
（5）大于等于
<!--[if gte IE 7]> IE浏览器版本小于7的显示 <![endif]-->
（6）大于和小于之间
<!--[if (gt IE 5)&(lt IE 7)]> IE浏览器版本大于IE5小于IE7的显示 <![endif]-->
（7）或
<!--[if (IE 6)|(IE 7)]> IE浏览器是IE6或IE7显示 <![endif]-->
（8）仅
<!--[if IE 8]> IE浏览器是IE8就显示 <![endif]-->
5.DIV+CSS网页布局实战
index.html代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>实战训练</title> 6 <link rel="stylesheet" href="style.css"> 7 </head> 8 <body> 9 <div class="header"> 10 <div class="top"> 11 <div class="wp"> 12 <div class="z"> 13 <span><a href="practice.html">设为首页</a></span> 14 <span class="mr_0"><a href="practice.html">收藏本站</a></span> 15 </div> 16 <div class="y"> 17 <span>2019-08-14</span> 18 <span class="mr_0">晴28°C/32°C</span> 19 </div> 20 </div> 21 </div> 22 <div class="logos"> 23 <div class="wp"> 24 <div class="logo z"> 25 <h1><a href="practice.html"><img src="images/logo.jpg" alt="logo"></a></h1> 26 </div> 27 <div class="dianhua y"> 28 <span>客服热线：400-000-000</span> 29 </div> 30 <div class="sousuo y"> 31 <form action="practice.html" method="get"> 32 <table cellpadding="0" cellspacing="0" border="0"> 33 <tr> 34 <td class="s_z"></td> 35 <td class="s_c"> 36 <input type="text" name="text" id="s_c_text"/> 37 </td> 38 <td class="s_y"> 39 <button type="submit" name="submit"></button> 40 </td> 41 </tr> 42 </table> 43 </form> 44 </div> 45 </div> 46 </div> 47 <div class="nav"> 48 <div class="wp"> 49 <ul> 50 <li class="a"><a href="practice.html">网站首页</a></li> 51 <li><a href="practice.html">公司简介</a></li> 52 <li><a href="practice.html">业务描述</a></li> 53 <li><a href="practice.html">服务范围</a></li> 54 <li><a href="practice.html">产品中心</a></li> 55 <li><a href="practice.html">人才管理</a></li> 56 <li><a href="practice.html">在线留言</a></li> 57 <li><a href="practice.html">联系我们</a></li> 58 </ul> 59 </div> 60 </div> 61 </div> 62 <div class="center"> 63 <div class="wp"> 64 <div class="ad"> 65 <img src="images/ad.jpg" alt="ad"> 66 </div> 67 <div class="jianjie z"> 68 <div class="tit"> 69 <img src="images/jianjie.jpg" alt="jianjie"/> 70 <span><a href="practice.html">More</a></span> 71 </div> 72 <div class="jj_c"> 73 <img src="images/jianjie_img.jpg" alt="jianjietupian"> 74 <p>麦子学院是成都麦子信息技术有限公司旗下一个IT在线教育平台，目前已有30万注册用户，10万以上APP下载量，5000小时视频内容。 我们从不说空话，专注于IT在线教育，脱离传统教育的束缚，让你走哪学哪，想学就学。逗比的老师，贴心的助教，在这儿你能感受到来自五 湖四海伙伴们热情和踏实的学习态度！</p> 75 <p>什么都不会没关系，想跳槽想加薪都可以，提升自己更不在话下。 只要你愿意，绝对为你找到一份相当靠谱的工作！成就你，我能行！</p> 76 <p>那么多的梦想，你不想实现？买的起大奔的人会天天挤公交吗？ 想成为成功人士，脑袋里必须要有知识。一切不以要付出为目的的梦想都是耍流氓！ LPS系统、每周直播课、学习作业快速批改、保就业、班主任助教全程跟踪。 你看，离你完成梦想的道路是不是近了很多。</p> 77 </div> 78 </div> 79 <div class="xinwen z"> 80 <div class="tit"> 81 <img src="images/xinwen.jpg" alt="xinwen"/> 82 <span><a href="practice.html">More</a></span> 83 </div> 84 <div class="xw_c"> 85 <ul> 86 <li class="a"> 87 <img src="images/list_img.jpg" alt="xinwentupian"> 88 <a href="practice.html"> 89 <h3>Web前端开发之HTML+CSS基础入门</h3> 90 <p>麦子学院朱朝兵老师带领大家从HTML语法，基本结构到CSS入门DIV+Css布局,通俗易懂 ... ...</p> 91 </a> 92 </li> 93 <li> 94 <a href="practice.html"> 95 <h3>Web前端开发之HTML+CSS基础入门</h3> 96 <span>2019-08-14</span> 97 </a> 98 </li> 99 <li> 100 <a href="practice.html"> 101 <h3>Web前端开发之HTML+CSS基础入门</h3> 102 <span>2019-08-14</span> 103 </a> 104 </li> 105 <li> 106 <a href="practice.html"> 107 <h3>Web前端开发之HTML+CSS基础入门</h3> 108 <span>2019-08-14</span> 109 </a> 110 </li> 111 <li> 112 <a href="practice.html"> 113 <h3>Web前端开发之HTML+CSS基础入门</h3> 114 <span>2019-08-14</span> 115 </a> 116 </li> 117 <li> 118 <a href="practice.html"> 119 <h3>Web前端开发之HTML+CSS基础入门</h3> 120 <span>2019-08-14</span> 121 </a> 122 </li> 123 <li> 124 <a href="practice.html"> 125 <h3>Web前端开发之HTML+CSS基础入门</h3> 126 <span>2019-08-14</span> 127 </a> 128 </li> 129 <li> 130 <a href="practice.html"> 131 <h3>Web前端开发之HTML+CSS基础入门</h3> 132 <span>2019-08-14</span> 133 </a> 134 </li> 135 </ul> 136 </div> 137 </div> 138 <div class="chanpin z"> 139 <div class="tit"> 140 <img src="images/chanpin.jpg" alt="chanpin"/> 141 <span><a href="practice.html">More</a></span> 142 </div> 143 <div class="cp_c"> 144 <ul> 145 <li><a href="practice.html"><img src="images/chanpin_img.jpg" alt="chanpintupian"/><span>Web前端开发之HTML+CSS基础入门</span></a></li> 146 <li><a href="practice.html"><img src="images/chanpin_img.jpg" alt="chanpintupian"/><span>Web前端开发之HTML+CSS基础入门</span></a></li> 147 <li><a href="practice.html"><img src="images/chanpin_img.jpg" alt="chanpintupian"/><span>Web前端开发之HTML+CSS基础入门</span></a></li> 148 <li><a href="practice.html"><img src="images/chanpin_img.jpg" alt="chanpintupian"/><span>Web前端开发之HTML+CSS基础入门</span></a></li> 149 <li><a href="practice.html"><img src="images/chanpin_img.jpg" alt="chanpintupian"/><span>Web前端开发之HTML+CSS基础入门</span></a></li> 150 <li class="mr_0"><a href="practice.html"><img src="images/chanpin_img.jpg" alt="chanpintupian"/><span>Web前端开发之HTML+CSS基础入门</span></a></li> 151 <li><a href="practice.html"><img src="images/chanpin_img.jpg" alt="chanpintupian"/><span>Web前端开发之HTML+CSS基础入门</span></a></li> 152 <li><a href="practice.html"><img src="images/chanpin_img.jpg" alt="chanpintupian"/><span>Web前端开发之HTML+CSS基础入门</span></a></li> 153 <li><a href="practice.html"><img src="images/chanpin_img.jpg" alt="chanpintupian"/><span>Web前端开发之HTML+CSS基础入门</span></a></li> 154 <li><a href="practice.html"><img src="images/chanpin_img.jpg" alt="chanpintupian"/><span>Web前端开发之HTML+CSS基础入门</span></a></li> 155 <li><a href="practice.html"><img src="images/chanpin_img.jpg" alt="chanpintupian"/><span>Web前端开发之HTML+CSS基础入门</span></a></li> 156 <li class="mr_0"><a href="practice.html"><img src="images/chanpin_img.jpg" alt="chanpintupian"/><span>Web前端开发之HTML+CSS基础入门</span></a></li> 157 </ul> 158 </div> 159 </div> 160 </div> 161 </div> 162 <div class="cl"></div> 163 <div class="footer"> 164 <div class="wp"> 165 <div class="footer_top"> 166 <span class="z"> 167 <a href="practice.html">关于我们 | </a> 168 <a href="practice.html">联系我们 | </a> 169 <a href="practice.html">加入我们 | </a> 170 <a href="practice.html">给我留言</a> 171 </span> 172 <span class="y"> 173 © 2015 麦子学院版权所有 ICP证:蜀ICP备13000000号-1 174 </span> 175 </div> 176 <div class="footer_bottom"> 177 <p> 178 友情链接：<a href="http:www.maiziedu.com">麦子学院</a><a href="http:www.maiziedu.com">DZ起点网</a><a href="http:www.maiziedu.com">麦子学院</a><a href="http:www.maiziedu.com">教育部</a><a href="http:www.maiziedu.com">新闻部</a> 179 </p> 180 </div> 181 </div> 182 </div> 183 </body> 184 </html>
style.css代码：
1 /*通用属性*/ 2 *margin: 0;padding: 0; 3 .wpwidth: 960px;margin:0 auto; /*居中*/ 4 .zfloat:left 5 .yfloat:right 6 .clclear:both 7 8 9 10 11 .top 12 width: 100%; 13 height: 24px; 14 background: #303030; 15 line-height: 24px; 16 margin-bottom: 10px; 17 18 19 .top span 20 color:#d8d8d8; 21 margin-right: 15px; 22 23 .top .mr_0 24 margin-right: 0; 25 26 .top a 27 color: #d8d8d8; 28 text-decoration: none; 29 30 .top a:hover 31 color: #ff6600; 32 33 34 /*logos*/ 35 .logos 36 width: 100%; 37 height: 59px; 38 margin-bottom: 10px; 39 40 41 /*搜索*/ 42 .sousuo 43 margin-top: 8px; 44 45 .s_z 46 width: 6px; 47 background: url(images/s_z.jpg) no-repeat; 48 49 .s_c 50 width:240px; 51 background: url(images/s_c.jpg) repeat-x; 52 53 .s_y 54 width: 78px; 55 height: 41px; 56 background: url(images/s_r.jpg) no-repeat; 57 58 .s_c input 59 width: 200px; 60 height: 35px; 61 line-height: 35px; 62 border: 0; 63 margin-top: 2px; 64 65 .s_y button 66 width: 78px; 67 height: 41px; 68 background: none; 69 border: 0; 70 cursor: pointer; 71 72 .dianhua 73 74 height: 59px; 75 line-height: 59px; 76 77 margin-left: 15px; 78 79 .dianhua span 80 font-size: 26px; 81 color: darkred; 82 83 /*导航*/ 84 .nav 85 height: 39px; 86 width: 100%; 87 background: url("images/nav_bg.jpg") repeat-x; 88 /*margin-bottom: 2px;*/ 89 90 .nav li 91 list-style: none; 92 float: left; 93 line-height: 39px; 94 padding: 0 28px; 95 96 .nav li.a , .nav li:hover 97 background: url("images/nav_hover.jpg") repeat-x; 98 99 .nav a 100 color:white; 101 text-decoration: none; 102 font-size: 16px; 103 104 /*center*/ 105 /*广告*/ 106 .ad 107 margin-bottom: 10px; 108 109 /*简介*/ 110 .tit 111 padding-bottom: 8px; 112 border-bottom: 1px solid darkred; 113 position: relative; 114 margin-bottom: 10px; 115 116 .tit span 117 position: absolute; 118 right:0; 119 bottom: 0; 120 121 .tit span a 122 color: darkred; 123 text-decoration: none; 124 125 .jianjie 126 width:540px; 127 height: 360px; 128 129 .jj_c img 130 float: left; 131 margin:0 10px 10px 0; 132 133 .jj_c p 134 font-size: 16px; 135 color: #616161; 136 text-indent: 24px; 137 138 139 140 /*新闻*/ 141 .xinwen 142 width: 400px; 143 height: 360px; 144 margin-left: 20px; 145 146 .xw_c 147 148 149 .xw_c li 150 list-style: none; 151 height: 24px; 152 line-height: 24px; 153 position: relative; 154 padding-left: 15px; 155 background: url("images/list_bg.jpg") no-repeat center left; 156 margin-bottom: 6px; 157 158 .xw_c li.a 159 background: none; 160 padding: 0; 161 height: 76px; 162 163 .xw_c .a img 164 float: left; 165 margin: 0 10px 10px 0; 166 167 .xw_c .a p 168 font-size: 12px; 169 color: #888; 170 text-indent: 24px; 171 172 .xw_c li span 173 position: absolute; 174 right: 0; 175 bottom: 0; 176 color: #888; 177 font-size: 12px; 178 179 .xw_c a 180 color: #616161; 181 text-decoration: none; 182 183 184 .xw_c h3 185 font-weight: normal; 186 187 /*产品*/ 188 .chanpin 189 width: 100%; 190 height:300px; 191 192 .cp_c 193 194 195 .cp_c li 196 float: left; 197 list-style: none; 198 margin: 0 10px 10px 0; 199 width: 151px; 200 height: 96px; 201 overflow: hidden; 202 position: relative; 203 204 .cp_c li span 205 display: none; 206 position: absolute; 207 left:0; 208 bottom: 0; 209 font-size: 14px; 210 height: 20px; 211 padding:0 10px; 212 width: 141px; 213 background:darkred; 214 color: #fff; 215 overflow: hidden; 216 217 .cp_c li a:hover span 218 display: block; 219 220 .cp_c li img 221 float:left; 222 223 .cp_c li.mr_0 224 margin-right: 0; 225 226 /*footer*/ 227 .footer 228 width: 100%; 229 height: 103px; 230 background: url("images/footer_bg.jpg") repeat-x; 231 232 .footer_top 233 height: 80px; 234 line-height: 80px; 235 color: white; 236 237 .footer_top a 238 font-size: 16px; 239 color:#ffffff; 240 text-decoration: none; 241 242 .footer_bottom 243 color: #ff6600; 244 245 .footer_bottom a 246 color: white; 247 text-decoration: none; 248 margin-right: 16px; 249 250 .footer_bottom a:hover 251 color:#ff6600; 252
效果图：
以上是关于DIV+CSS布局的主要内容，如果未能解决你的问题，请参考以下文章