H5学习03之页面布局

一,居中布局:
  • 1,对于宽度小于父标签的块级标签在父标签中居中或者或者宽度小于行宽的块级元素在本行中居中: margin: 0 auto;//自身居中
    注意:这里只能是块级标签,行内块级标签是不行的哦

  • 2,对于块级或者行内块级标签内部内容或者子标签居中: text-align: center;//自身内容或者子内容居中

  • 3,对于行内标签可以在其父标签中设置:text-align: center;

  • 4,对于垂直居中就比较easy,不论块级海试行内标签,只要设置本标签的line-height等于父标签的高度即可

  • text-align是内容居中,margin是布局居中,也即是标签居中。所以如果是想让inlineblock居中,那么要用margin,如果想让inlineblock内部内容居中,比如说文字,需要用text-align
二,脱离标准流
  • 默认情况下,所有的网页标签都在标准流布局中从上到下,从左到右
脱离标准流的方法有
  • 1, float脱离标准流:

  • float只有两个属性:

  • left:脱离标准流,浮动在父标签的最左边

  • right:脱离标准流,浮动在父标签的最右边

  • 如果一个标签内的子标签有float,并且这个标签的尺寸想跟随里面内容的尺寸那么这个标签最好为inline-block类型

  • 2,position脱离标准流

  • 如果需要在父标签中脱离标准流,需要设置子绝父相

  • position属性有如下几种:

  • 4.png
  • 在设置了脱离标准流的方式之后,需要通过left、right、top、bottom属性来设置其具体脱离的位置

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,841评论 1 92
  • 一 外部式css样式 (也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css...
    KunMitnic阅读 984评论 0 1
  • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 3,340评论 0 5
  • 北风吹荒草,旷野无一人。日暖如春睡欲浓,几度梦乾坤。 枯藤深满园,燕离王谢门。多少霸业成笑谈,岁月了无痕。
    横出的虫阅读 315评论 1 2
  • 据说,输入文字就可以选择书法家的手笔书写出来了,王羲之老先生要是看到了,估计也傻眼了!不过,机器人写书法的出现,也...
    书画之家网阅读 559评论 0 0