H5移动端开发-CSS知识点

1、z-index属性

设置对象的层叠顺序，integer值，值越大，则被层叠在越上面。MUI框架中就是利用此属性来实现抽屉菜单。

leftMenu = mui.preload({
				url:'index-menu.html',
				id:'index-menu',
				styles:{
					left:0,
					width:'70%',
					zindex:-1
				},//窗口参数
				show: {
					aniShow:'none'
				}
			})

2、对象高度自适应（height:100%）

一个对象的高度是否可以使用百分比显示，取决于该对象的父级对象。浏览器在默认情况下，是没有给body一个高度属性的，因此我们直接设置body的子级对象height:100%时，不会产生任何效果。只有给body设置height:100%后，子级对象才能实现高度自适应。由于Firefox的html标签不是100%高度，为了兼容不同浏览器，应该给html、body2个标签都设置为height:100%。

html, body {
   margin: 0px;
   height: 100%;
}

3、background-image属性

background-repeat 设置对象是否平铺

background-attachment 设置背景图片是否随对象滚动而滚动

background-size 设置宽高，如果都为100%则表示自适应屏幕大小

扫描二维码关注公众号，回复： 4144893 查看本文章

<div class="mui-content" style="width: 100%; height: 100%; background-image: url(../img/背景.png); background-size: 100% 100%;"></div>

4、text-align

作用于块级元素的行内内容（inline content），对子级块级元素本身不产生作用，但对子级块级元素的行内内容起作用。

5、设置导航条背景透明

MUI框架中导航条默认添加阴影效果，设置背景透明还需去除阴影。

<span style="font-size:14px;">.nav-bar {
   background-color: rgba(0,0,0,0);
   box-shadow: none;
}</span>

H5移动端开发-CSS知识点

猜你喜欢