请简述一下块元素和行内元素的区别ionic如何在任意HTML元素上定义图标

来源：蜘蛛抓取(WebSpider) 时间：2020-10-22 17:29 标签： 请简述一下块元素和行内元素的区别

开关通常用来设置两种状态 - 开启囷关闭：

选项卡的选项默认的只包含文字使用图标会使其更加生动：比如 微博（weibo）和微信（wechat）：

微信（wechat）的选项卡中第三项包含了一个紅色的信息元素，被称为徽章：

默认情况下选项卡位于屏幕底部，可以使用.tabs-top样式将选项卡置于顶部


顶部选项卡应用也很广泛：


5. .tab-striped .tabs: 条带风格选项卡 条带风格的选项卡起源于Android平台，它使用一个细长的条带表示选项的选中状态：


ionic的Grid布局采用了CSS3的弹性盒（Flexible Box）模型这使得它与大多數 Grid布局都有所区别。
Flex布局主要思想是让容器有能力改变其子元素的宽度、高度甚至先后顺序 从而以最佳方式填充可用空间。CSS3引入Flex容器的主要目的是为了适应所 有类型的显示设备和屏幕大小：
在ionic中使用Grid布局主要使用两个类：
?    .col - 在子元素上使用.col类其扩展系数和收缩系数都被設置为1。这意味着 所有的子元素将平分容器的宽度
在ionic的栅格中，每一行的各列默认是等宽的这使得实现一个图片 浏览界面非常简单。丅图是instagram app的截图：
当然我们也可以显式地指定某些列的宽度。ionic提供了一些预置的CSS类 供我们快速指定列宽：

如果你有特殊的需求，比如非要指定78%的宽度，可以这样：

windows phone的metro风格在信息展示方面有很大的优势虽然携程的APP 没有突出这一点:-( ：

通过定制栅格的列宽，我们可以简单地實现类似的界面

列可以从默认位置偏移，ionic预置了一些CSS类供我们快速设置列偏移：

这实际上是通过设置子元素的margin-left样式实现的所以如果你需要让它 偏移正常位置78%，可以这样：

如果一行中各元素的高度不一样那么比较矮的那些元素将自动被拉伸以适应 整行的高度。

有时你不想这样希望那些元素保持自身的高度。ionic提供了一些预置的CSS类用来 指定这些元素纵向的对齐方式：

我要回帖

更多关于 请简述一下块元素和行内元素的区别 的文章

 

随机推荐