千锋教育-做有情怀、有良心、有品质的IT职业教育机构

400-811-9990
当前位置:千锋视频教程 > html5视频教程  >  HTML5界面设计之文本流,浮动流,定位流的应用

HTML5界面设计之文本流,浮动流,定位流的应用

时间:2018-04-02 14:42:29     来源:千锋视频教程 作者:成都

  三个流的区别:

  1 文本流是对元素最原本的定位方式,也是最基础的排布方式,它是时元素全部按照原来其自身设定的排布方式排布。这也是按照两种元素类型来排布,

  (1)行内元素(内联元素)与其他元素并排,但不能设定宽高还有margin-top

  ,行内元素的宽就是文字的宽度。

  (2)块级元素独占一行,即不能与其他元素并列,可以设置高和宽,如果不设置宽,则默认设置宽度为父级的100%

  2 浮动流是指给元素加css属性float:left/right,将元素的排布方式改变,使不能改变高宽的元素可以设定高度和宽度,即是不区分元素的元素类型,使元素脱离原本的文本流,也就是脱离原本的标准流。但是浮动流有它自身的缺陷,由于脱离了标准流,原本的标准流中下面的元素会弥补浮动流元素原本的位置,可 能会出现围字现象,或者原本标准流的内容被遮挡住。可以在设置浮动的后一个标签里设置一个clear属性来解决浮动带来的影响

  (单指浮动的负面影响)或者给父级加overflow:hidden以及万能的清除浮动方法

  .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}

  .clearfloat{zoom:1}

  3 定位流 是指对元素添加css属性position:relative/absolute/fixed。relative对元素没有改变,不改变元素的元素类型,不改变元素的位置但是可以给元素使用left right top bottom 四个属性,改变元素展现在页面的位置,但是元素本身所在的位置不会改变,还会在标准流中占位。而添加了position:absolute的元素会寻找父级,或者祖先级中添加了position属性(默认值除外)的position:relative的元素,以它为参考,使用left等等属性来定位(如果

  上级全没有添加position,则以body来作为参考物),而且absolute不会占用标准流的位置,也不会区分元素的类型,即设定了position:absolute的元素都可以设置高宽。fixed固定定位,对于设定了固定定位的元素来说,它只会以body来定位,不随网页的滚动而改变位置,固定定位也会使元素脱离原本的标准流,也不区分原本元素的元素类型。所有的定位都可以添加一个z-index属性,以改变元素的层级,可以理解为将2D的网页变得3D化,在普通的xy轴上来添加一个z轴对元素的展现添加了一种元素之间的覆盖,这个属性的值在负值到999.

  刚开始接触的时候很多不理解,心情很烦躁,感觉是不是选错了行业,后面在慢慢的反复尝试练习中,渐渐领会了其中的奥妙,就像桃花源记里面一段“初极狭,才通人。复行数十步,豁然开朗。”总的来说呢,很庆幸自己的选择。

  每天更新HTML5视频教程 ,欢迎各位同学学习。

  • 北京天丰利校区(总部):北京市海淀区宝盛北里西区28号天丰利商城4层
    北京沙河校区:北京市昌平区沙阳路18号北京科技职业技术学院广场服务楼2层、南区服务楼2层
    咨询电话:400-186-9990 010-82790226-801
    面授课程:全栈HTML5+培训、UI交互设计培训、PHP培训、JavaEE+云数据培训、大数据开发培训、VR/AR混合
    现实培训、Python培训、Linux云计算培训、软件测试培训、Android培训、iOS培训、好程序员
  • 深圳西部硅谷校区地址:深圳市宝安区宝安大道5010号深圳西部硅谷B座A区605-619
    深圳大学城校区地址:深圳市南山区留仙大道1201号大学城创客小镇16栋2楼、3楼
    咨询电话:0755-33582485-801(硅谷校区)0755-86660670-801(大学城校区)
    面授课程:全栈HTML5+培训、UI交互设计培训、PHP培训、JavaEE+云数据培训、Android培训、iOS培训
  • 上海校区地址:上海市宝山区同济支路199号智慧七立方3号楼2-4层
    咨询电话:400-627-7899 021-56166283/56166279
    面授课程:全栈HTML5+培训、UI交互设计培训、JavaEE+云数据培训、Android课程培训、iOS课程培训、好程序员
  • 郑州校区地址:郑州市金水区纬五路21号河南教育学院综合楼(经纬中学楼)7/8层
    咨询电话:0371-55191750 400-186-9990
    面授课程:全栈HTML5+培训、UI交互设计培训、PHP培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 广州校区地址:广州市天河区元岗路310号智汇park创意园E座5层
    咨询电话:020-22119207 400-186-9990
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 大连校区地址:辽宁省大连市甘井子区软件园路2号东软信息学院B5座一楼
    咨询电话:0411-39026086 400-186-9990
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、UI交互设计培训、Android课程培训、iOS课程培训
  • 武汉校区地址:武汉市光谷大道61号智慧园21号楼2层
    咨询电话:027-65523826
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 成都校区地址:成都市武侯区科华北路62号力宝大厦N(北楼)18楼
    咨询电话:028-83178771
    面授课程:全栈HTML5+培训、UI交互设计培训、PHP培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 西安校区地址:西安市雁塔区高新六路52号立人科技C座西区4楼
    咨询电话:029-85260160
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、Android课程培训
  • 杭州校区地址:浙江省杭州市江干区九堡旺田书画城A座4层
    咨询电话:0571-86893632 010-82790226-801
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 青岛校区地址:青岛市市南区金坛路17号青岛职业技术学院南校区实训楼A4层
    咨询电话:0532-80910752/3 010-82790226-801
    面授课程:全栈HTML5+培训、UI交互设计培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 重庆校区地址:重庆市高新区科园一路2号大西洋国际12-1
    咨询电话:023-68883009
    面授课程:JavaEE+云数据课程培训
  • 长沙校区地址:湖南省长沙市岳麓区麓谷企业广场A2栋三单元306号
    咨询电话:0731-85513010/85513210
    面授课程:JavaEE+云数据课程培训
  • 哈尔滨校区地址:哈尔滨市松北区创新一路699号科技创新城19号楼五楼
    咨询电话:15663846969
    面授课程:全栈HTML5+培训
  • 千锋教育服务号

    了解千锋动态
    关注千锋教育服务号

  • 千锋互联服务号

    扫码匿名提建议
    直达CEO信箱