现在的位置: 首页 > 综合 > 正文

css常用布局

2012年07月20日 ⁄ 综合 ⁄ 共 5735字 ⁄ 字号 小 中 大 ⁄ 评论关闭
  1. CSS布局常用的方法：float : none | left | right 
  4. 取值：
  5. none :　 默认值。对象不飘浮
  6. left :　 文本流向对象的右边
  7. right :　 文本流向对象的左边
  9. 它是怎样工作的，看个一行两列的例子
  12. xhtml:
  14. <div id="warp">
  15. <div id="column1">这里是第一列</div>
  16. <div id="column2">这里是第二列</div>
  17. <div class="clear"></div>
  18. </div>
  21. CSS:
  23. #wrap{ width:100%; height:auto;}
  24. #column1{ float:left; width:40%;}
  25. #column2{ float:right; width:60%;}
  26. .clear{ clear:both;}
  29. position : static | absolute | fixed | relative
  32. 取值：
  34. static :　 默认值。无特殊定位，对象遵循HTML定位规则
  35. absolute :　 将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义
  36. fixed :　 未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范
  37. relative :　 对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置
  40. 它来实现一行两列的例子
  43. xhtml:
  45. <div id="warp">
  46. <div id="column1">这里是第一列</div>
  47. <div id="column2">这里是第二列</div>
  48. </div>
  51. CSS:
  53. #wrap{ position:relative;/*相对定位*/width:770px;}
  54. #column1{ position:absolute; top:0; left:0; width:300px;}
  55. #column2{position:absolute; top:0; right:0; width:470px;}
  58. 他们的区别在哪?
  60. 显然，float是相对定位的，会随着浏览器的大小和分辨率的变化而改变，而position就不行了，所以一般情况下还是float布局！
  63. CSS常用布局实例
  66. 一列
  69. 单行一列
  71. body { margin: 0px;   padding: 0px;  text-align: center;  }
  72. #content {  margin-left:auto;  margin-right:auto;  width: 400px;  width: 370px; }
  75. 两行一列
  77. body {  margin: 0px;   padding: 0px;   text-align: center;}
  78. #content-top { margin-left:auto;   margin-right:auto; width: 400px;  width: 370px;}
  79. #content-end {margin-left:auto; margin-right:auto;  width: 400px;   width: 370px;}
  82. 三行一列
  84. body {  margin: 0px; padding: 0px;  text-align: center;  }
  85. #content-top {  margin-left:auto;  margin-right:auto;  width: 400px;   width: 370px;  }
  86. #content-mid { margin-left:auto; margin-right:auto;  width: 400px;  width: 370px; }
  87. #content-end { margin-left:auto; margin-right:auto; width: 400px;  width: 370px; }
  90. 两列
  93. 单行两列
  95. #bodycenter { width: 700px;margin-right: auto; margin-left: auto;overflow: auto;  }
  96. #bodycenter #dv1 {float: left;width: 280px;}
  97. #bodycenter #dv2 {float: right;width: 410px;}
  100. 两行两列
  102. #header{    width: 700px; margin-right: auto;margin-left: auto; overflow: auto;}
  103. #bodycenter { width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }
  104. #bodycenter #dv1 { float: left; width: 280px;}
  105. #bodycenter #dv2 { float: right;width: 410px;}
  108. 三行两列
  110. #header{    width: 700px;margin-right: auto; margin-left: auto;  }
  111. #bodycenter {width: 700px; margin-right: auto; margin-left: auto;  }
  112. #bodycenter #dv1 {  float: left;width: 280px;}
  113. #bodycenter #dv2 { float: right;  width: 410px;}
  114. #footer{     width: 700px;  margin-right: auto; margin-left: auto;  overflow: auto;  }
  117. 三列
  120. 单行三列
  123. 绝对定位
  125. #left { position: absolute; top: 0px;  left: 0px; width: 120px;  }
  126. #middle {margin: 20px 190px 20px 190px; }
  127. #right {position: absolute;top: 0px; right: 0px;  width: 120px;}
  130. float定位
  133. xhtml:
  135. <div id="warp">
  136. <div id="column">
  137. <div id="column1">这里是第一列</div>
  138. <div id="column2">这里是第二列</div>
  139. <div class="clear"></div>
  140. </div>
  141. <div id="column3">这里是第三列</div>
  142. <div class="clear"></div>
  143. </div>
  146. CSS:
  148. #wrap{ width:100%; height:auto;}
  149. #column{ float:left; width:60%;}
  150. #column1{ float:left; width:30%;}
  151. #column2{ float:right; width:30%;}
  152. #column3{ float:right; width:40%;}
  153. .clear{ clear:both;}
  156. float定位二
  159. xhtml:
  161. <div id="center" class="column">
  162.   <h1>This is the main content.</h1>
  163. </div>
  164. <div id="left" class="column">
  165.   <h2>This is the left sidebar.</h2>
  166. </div>
  167. <div id="right" class="column">
  168.   <h2>This is the right sidebar.</h2>
  169. </div>
  172. CSS:
  174. body {margin: 0;padding-left: 200px;padding-right: 190px;min-width: 240px;}
  175. .column {position: relative;float: left;}
  176. #center {width: 100%;}
  177. #left {width: 180px; right: 240px;margin-left: -100%;}
  178. #right {width: 130px;margin-right: -100%;}
  180. 两行三列
  183. xhtml:
  185. <div id="header">这里是顶行</div>
  186. <div id="warp">
  187. <div id="column">
  188. <div id="column1">这里是第一列</div>
  189. <div id="column2">这里是第二列</div>
  190. <div class="clear"></div>
  191. </div>
  192. <div id="column3">这里是第三列</div>
  193. <div class="clear"></div>
  194. </div>
  197. CSS:
  199. #header{width:100%; height:auto;}
  200. #wrap{ width:100%; height:auto;}
  201. #column{ float:left; width:60%;}
  202. #column1{ float:left; width:30%;}
  203. #column2{ float:right; width:30%;}
  204. #column3{ float:right; width:40%;}
  205. .clear{ clear:both;}
  208. 三行三列
  211. xhtml:
  213. <div id="header">这里是顶行</div>
  214. <div id="warp">
  215. <div id="column">
  216. <div id="column1">这里是第一列</div>
  217. <div id="column2">这里是第二列</div>
  218. <div class="clear"></div>
  219. </div>
  220. <div id="column3">这里是第三列</div>
  221. <div class="clear"></div>
  222. </div>
  223. <div id="footer">这里是底部一行</div>
  226. CSS:
  228. #header{width:100%; height:auto;}
  229. #wrap{ width:100%; height:auto;}
  230. #column{ float:left; width:60%;}
  231. #column1{ float:left; width:30%;}
  232. #column2{ float:right; width:30%;}
  233. #column3{ float:right; width:40%;}
  234. .clear{ clear:both;}
  235. #footer{width:100%; height:auto;}
  237. PS:这里列出的是常用的例子，而非研究之用，对一每个盒子，我都没有设置margin,padding,boeder等属性，是因为我个人觉得，含有宽度定位的时候，最好不好用到他们，除非必不得已，因为如果不是这样的话，解决浏览器兼容问题，会让你头疼，而且产生一系列CSS代码，我觉得这样的效率和效果都不好！
  240. CSS布局高级技巧
  242. margin和padding总是有可能要用到，而产生的问题如何解决呢？由于浏览器解释容器宽度的方法不同：
  244. IE 6.0 Firefox Opera等是
  245. 真实宽度=width+padding+border+margin
  247. IE5.X
  248. 真实宽度=width-padding-border-margin
  250. 很明显，第一种下很完美的布局在第二种情况下后果是很凄惨的！
  253. 解决的方法是 hack
  256. div.content {
  257. width:400px; //这个是错误的width，所有浏览器都读到了
  258. voice-family: "/"}/""; //IE5.X/win忽略了"/"}/""后的内容
  259. voice-family:inherit;
  260. width:300px; //包括IE6/win在内的部分浏览器读到这句，新的数值(300px)覆盖掉了旧的
  261. }
  262. html>body .content { //html>body是CSS2的写法
  263. width:300px; //支持CSS2该写法的浏览器(非IE5)有幸读到了这一句
  264. }
  266. div.content {
  267. width:300px !important; //这个是正确的width，大部分支持!important标记的浏览器使用这里的数值
  268. width(空格)/**/:400px; //IE6/win不解析这句，所以IE6/win仍然认为width的值是300px；而IE5.X/win读到这句，新的数值(400px)覆盖掉了旧的，因为!important标记对他们不起作用
  269. }
  270. html>body .content { //html>body是CSS2的写法
  271. width:300px; //支持CSS2该写法的浏览器有幸读到了这一句
  272. }
  275. 列等高技巧
  277. n行n列布局，每列高度（事先并不能确定哪列的高度）的相同，是每个设计师追求的目标，做法有：背景图填充、加JS脚本的
  278. 方法和容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法。
  281. 背景图填充法：
  284. xhtml:
  286. <div id="wrap">
  287. <div id="column1">这是第一列</div>
  288. <div id="column1">这是第二列</div>
  289. <div class="clear"></div>
  290. </div>
  293. css:
  295. #wrap{ width:776px; background:url(bg.gif) repeat-y 300px;}
  296. #column1{ float:left; width:300px;}
  297. #column2{ float:right; width:476px;}
  298. .clear{ clear:both;}
  300. 就是将一个npx宽的一张图片在外部容器纵向重复，定位到两列交错的位置纵向重复，在视觉上产生了两列高度一样的错觉

 

返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞