【网页布局基础】css布局学习总结

三种定位机制

1.标准文档流:从上到下,从左到右输出文档内容

2.浮动

3.绝对定位

需要注意的是块级元素如div p ul 等

      行级元素如span strong img input等

块级元素与行级元素都是盒子模型,下面说下盒子模型

盒子模型

盒子模型是网页布局的基石,border padding margin

下面给出盒子3d模型图便于理解

技术分享

 

常见布局

自动居中一列布局

布局时候最重要的是把握三个技能点:标准文档流,块级元素,margin属性

自动居中代码:margin:0 auto; auto会根据浏览器宽度自动设置两边外边距

需要注意的是:不能同时在设置float与绝对定位了!

 

浮动布局

float属性:left right none; float属性意思就是元素会左移或者右移直到碰到容器

设置float属性后,相邻元素即紧邻之后的元素受到了影响

清楚浮动的代码为:clear:both;

      或者:width:100%;overflow:hidden;

 

横向两列布局

首先可以用浮动方法来实现 

其次可以用绝对定位的方法,但用的不多主要用于一列宽度固定另一列宽度自适应的时候,需要注意的是 固定宽度列的高度要大于自适应列的高度

这里给出一段网页布局的代码

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <style type="text/css">
 7 *{margin:0; padding:0;}
 8 #wrap{width:970px; margin:0 auto;}
 9 #mainbody{position:relative; margin-top:15px;}
10 #left{float:left;width:110px; }
11 #mid{float:left;width:650px;border:1px solid #999;margin-left:13px;}
12 #right{position:absolute;border:1px solid #999;margin-left:790px;}
13 </style>
14 </head>
15 
16 <body>
17 <div id="wrap">
18      <div id="header"><img src="http://img.mukewang.com/5369cd6e0001a15b09700088.jpg" width="970" height="88" /></div>
19      <div id="mainbody">
20           <div id="left"><img src="http://img.mukewang.com/5369cd0e00011e3901090487.jpg" width="109" height="487" /></div>
21           <div id="mid"><img src="http://img.mukewang.com/5369cd3c00013e9e06490439.jpg" width="649" height="439" /></div>
22           <div id="right"><p>欢迎使用金山软件出品的爱词霸,在线查询你英语词汇、句子释义</p><img src="http://img.mukewang.com/5369cd540001d8e101770329.jpg" width="177" height="329" /></div>
23   </div>
24 </div>
25 </body>
26 </html>

从中可以看出 left与mid的横向两列采取了浮动的方法

right采取了绝对定位的方法

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。