布局用position还是float? – Aoker

  • A+
所属分类:html教程
摘要

布局用position还是float? – Aoker

  初入前端。在学习上总会有很多问题。这次就网页布局来讲讲。

  网页布局在现代已经不再是什么难事,几乎所有页面都能做好一个能拿得出手的布局,在现在招聘网站上也有好多要求什么div+css布局的,简直不知所言。

  前端不懂布局就没法继续前了。那么怎么布局呢。

  细心一点就会发现,css里面竟然没有专门为布局而设定的属性。而能达到布局效果的,主要就是用position和float这两个属性了。

  在分析两个属性之前,先聊一下

  html标签里面,div是常用于布局的盒子,是一个块级元素,块级元素的自带属性就是display:block。可设宽度和高度,在文档流中独占一行,就是说如果想要有两个div并排的话,就要采取手段了。

  下面两个属性的用法。

  float

  中文翻译是叫做浮动,如果你用word比较多的话,应该不难理解浮动的意思。

设置样式属性float:left之后,会允许下面的块级元素在器右边并排,如果这两个元素的宽度超出父元素的宽度,那么本该在旁边的块级元素就会浮动到下一行,并且只到遇到下一个同级的块级元素设置的clear:left才会停止。另外间距需要使用margin属性来控制。

  优点:该元素的内容不会脱离文档流,父级元素可以让子元素撑起来。所谓撑起来就是比如父元素的宽 、高能自适应。

  缺点:说实话个人经常忘记加clear,所以不喜欢用float去布局。另外由于是浮动的。文档流不会出现重叠的情况。有时候布局会乱掉。

  position

  中文翻译叫定位。position有四个值,static(没有定位),fixed(固定定位),relative(相对定位),absolute(绝对定位);

  static很少用(几乎没用过),暂且不聊;position:relative可用与微调,在原位置上通过top、left、right、bottom来偏移距离。设置了position:absolute的块级元素会脱离文档流,就是说如果设置了float,float是没有效果的,并且能出现两个块级元素重叠的效果,position:absolute的父级元素一般会设置position:relative,用于限制position:absolute的活动范围。

  优点:简直就是坐标系,指哪打哪。给我一堆松散同级的元素都能布出一个漂亮的局。

  缺点:子元素脱离了文档流,父级元素的自适应没有了,高度不再自适应。

、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、

  那么布局用什么好呢?你喜欢用什么就用呗。开心就好,样式而已,都没有改变html的结构,但是最好不要一起用于同级的布局中,写着很乱,局也容易乱。

  个人喜欢用position。

  所以这里在给出一个解决父级高度宽度自适应的方法。就是用js啦。

  

 1 
     DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document title>  6 <style type="text/css">  7  #person{position: relative; margin: 0 auto 0; width: 100px; background: yellow;}  8  #son{ position: absolute; top: 10px; left: 0; width: 50px; height: 1000px; background: red; }  9  style> 10  head> 11 <body> 12 <div id="person"> 13 <div id="son"> div> 14  div> 15 <script> 16  document.getElementById('person').style.height = document.getElementById('son').offsetHeight + 20 + 'px'; 17  script> 18  body> 19  html>

温馨提示:要灵活使用js的方法,才能有好效果!

  

  

  • 微信
  • 分享
  • 相关标签:布局用position还是float? - Aoker
  • 本文原创发布php教程 ,转载请注明出处,感谢您的尊重!
    • 上一篇:第 15 章 CSS 文本样式[上] - 水之原
    • 下一篇:兼容IE-FireFox-Chrome的背景音乐播放 - Hey,Coder!

    相关文章

    相关视频

    • Html如何设置横向导航结构_HTML/Xhtml...
    • Html+css实现纯文字和带图标的按钮_HTML...
    • HTML对于元素水平垂直居中的探讨_HTML/Xh...
    • 修改输入框placeholder文字默认颜色-we...
    • 布局用position还是float? - Aok...
      weinxin
      欢迎加入中国站长博客之家
      本站的所有资源都会上传分享到博客之家,希望大家互相学习交流进步。

      发表评论

      :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: