美文网首页Html5
H5学习03之页面布局

H5学习03之页面布局

作者: 张不二01 | 来源:发表于2017-01-19 19:37 被阅读28次
一,居中布局:
  • 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属性来设置其具体脱离的位置

相关文章

  • H5学习03之页面布局

    一,居中布局: 1,对于宽度小于父标签的块级标签在父标签中居中或者或者宽度小于行宽的块级元素在本行中居中: mar...

  • JetPack学习笔记之DataBinding(一)

    JetPack学习笔记之DataBinding(一) 布局文件通常只负责UI控件的布局工作,页面通过setCont...

  • HTML学习之图片字体适配

    移动h5 图片字体等适配WebApp开发之--"rem"单位Rem实现自适应初体验手机端页面自适应解决方案—rem布局

  • 小程序页面布局

    小程序开发之页面布局

  • h5页按钮组固定在底部

    h5页固定在底部的按钮 问题 单独使用fixed布局,会被键盘顶上去 单独使用flex布局,在上划页面会被滑动脱离...

  • H5提纲布局

    传统布局与HTML5布局和H5新语义标签 传统网页布局 H5 经典网页布局 H5新语义标签 输入类型 (表单类型,...

  • 小程序和h5页面之间的互相跳转

    小程序跳转到 H5 页面 H5 页面跳回小程序 在 h5 页面的任何点击事件中: 在H5页面引入 https://...

  • 跟高老师学习Web前端之46.

    今天开始进入新课程的学习---页面布局元素。 页面布局元素包含:display、float、clear、visib...

  • 03-页面布局

    一、盒子模型 盒模型: 是CSS的基石,指定标签如何显示。它规定了网页元素如何显示以及元素间相互关系。 页面上的每...

  • 一些使用函数工具箱

    1.微信h5游览器自动播放媒体文件 一些微信h5页面常用设置 移动端常用的自适应布局设置

网友评论

    本文标题:H5学习03之页面布局

    本文链接:https://www.haomeiwen.com/subject/brcibttx.html