您现在的位置是：首页> CSS>收藏：常用CSS样式所属分类：CSS

收藏：常用CSS样式

初柒先生 2019-09-17 11:02 165人已围观

简介收藏常用的CSS样式，方便以后查询

1、兼容css3新属性

在css3中，我们可以使用prefixfree.min.js插件实现css代码自动兼容浏览器，因此我们就不必为每个css3样式添加兼容属性，可以减少大量的代码书写。

百度网盘下载地址：https://pan.baidu.com/s/15cRASu-dyXfIG0gu6LI08w 提取码：u5r9

复制这段内容后打开百度网盘手机App，操作更方便哦

使用方法，在文档头部引人插件即可：

<script src="http://leaverou.github.com/prefixfree/prefixfree.min.js"></script>

2、APP式布局

当我们用H5布局App是，因为头部和底部是固定放按钮的，会跟随着内容一起滚动（视觉效果相对不动）。这时候我们可以使用content布局，可以使用padding-bottom或者padding-top属性，把相应的位置空出来！

<body>
	<header></header>
	<div class="content"></div>
	<footer></footer>
</body>

样式：

.content {
	padding-top: .88rem;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	max-width: 750px;
	width: 100%;
	margin: 0 auto;
	overflow-x: hidden;
	height: 100%;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

当需要在content里面滚动的时候，需要将body和html设置height:100%;然后content也需要设置height:100%,这样才可以实现在content里面里面滚动，当需要在body里面滚动的时候，需要将html、body中的height:100%;设置去掉！！不然body会被限制住，内容只显示一半不能滚动！！！

使用这种布局方式可以解决，单页面滚动的时候，点击弹窗，弹窗会被遮住滚动问题！！！

注意：当需要计算body的高度的时候，不能使用，还有当页面中，有表单，需要使用position：relative时，来使安卓键盘不被挡住！！！！但是为解决弹窗不滚动问题，可以通过，弹窗的时候，增加content布局，关闭弹窗的是移除content布局！！！

场景二：在content布局下，需要给页面设置背景图，可以在content下面在包裹一层大的div，然后对这个div进行全页面背景图设置，这样背景图才会随着内容超出一屏幕而滚动，而不是直接在content这个容器上设置背景图，如果直接在这个容器上设置背景图，那背景图不会滚动!!!

//点击领取
$(".reward-btn").click(function(){
	$(".reward-page").wrap("<div class='contentS'></div>");
	$(".insurance-box").show();
	$(".dialog2").show();
	
});
//点击关闭大弹窗按钮
$(".closeDia").click(function(){
	$(this).parent().parent().hide();
	$(".dialog2").hide();
	$(".reward-page").unwrap("<div class='contentS'></div>");
});

3、常见头部布局

两边有时候有文字或者图标，但是中间的标题固定居中，如下：

布局如下：

<div class="head">
	<a class="head-left">设置</a>
	个人中心
	<a class="head-right">更多</a>
</div>
<style>
.head{
    position:relative;
    width:100%;
    height:88px;
	background:red;
    line-height:88px;
    text-align:center;
}
.head-left, .head-right{
    position:absolute;
    height:88px;
    line-height:88px;
}
.head-left {
    left:30px;
}
.head-right {
    right:30px;
}
</style>

很赞哦！ (0)

初柒先生 2019-09-17 11:02 165人已围观

上一篇：网站响应式布局原理，Html5+CSS

下一篇：使用div进行页面布局时宽度为100%，出现没有铺满页面的问题