2018-11-12
#普通流模型,都处于一维
- position(static,relative,fixed,absolute,sticky)
CSS position属性用于指定一个元素在文档中的定位方式。top,right,bottom 和 left 属性则决定了该元素的最终位置。
没有选取定位方式,设置top,right,bottom 和 left 属性无效
relative
被看作普通流定位模型的一部分,定位元素的位置相对于它在普通流中的位置进行移动。使用相对定位的元素不管它是否进行移动,元素仍要占据它原来的位置。移动元素会导致它覆盖其他的框。
absolute
相对于已定位的最近的祖先元素,如果没有已定位的最近的祖先元素,那么它的位置就相对于最初的包含块(如body)。绝对定位的框可以从它的包含块向上、右、下、左移动。
绝对定位的框脱离普通流,所以它可以覆盖页面上的其他元素,可以通过设置Z-Iindex属性来控制这些框的堆放次序。
fixed
相对于浏览器窗口,其余的特点类似于绝对定位。
- display(none,block,inline-block)
- overflow(auto,visible,hidden,scroll)
- 百分比(100%)
- float
2018-11-13
- 响应式工具
为了加快对移动设备友好的页面开发工作,利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。另外还包含了针对打印机显示或隐藏内容的工具类。
类组 | CSS display |
---|---|
.visible-*-block |
display: block; |
.visible-*-inline |
display: inline; |
.visible-*-inline-block |
display: inline-block; |
因此,以超小屏幕(xs
)为例,可用的 .visible-*-*
类是:.visible-xs-block
、.visible-xs-inline
和 .visible-xs-inline-block
。
.visible-xs
、.visible-sm
、.visible-md
和 .visible-lg
类也同时存在。但是从 v3.2.0 版本开始不再建议使用。除了 <table>
相关的元素的特殊情况外,它们与 .visible-*-block
大体相同。
和常规的响应式类一样,使用下面的类可以针对打印机隐藏或显示某些内容。
class | 浏览器 | 打印机 |
---|---|---|
.visible-print-block .visible-print-inline .visible-print-inline-block |
隐藏 | 可见 |
.hidden-print |
可见 | 隐藏 |
.visible-print
类也是存在的,但是从 v3.2.0 版本开始不建议使用。它与 .visible-print-block
类大致相同,除了 <table>
相关元素的特殊情况外。
- 阻止默认事件,事件冒泡
2018-11-14
- ui.bootstrap modal完全可控操作
- angular-touch 左右滑动最优使用