适配css3新特性
在css3中，大家可使用prefixfree.min.js这一软件来源于动为css3的有关特性再加适配访问器特性，使大家无需为每一个css3新特性加上上特性（必须采用很多css3的新项目时再引进）
content合理布局
当h5嵌入在app里边的情况下，在iso手机上下，底端（头顶部）固定不动按键会跟随一起翻转，必须应用content合理布局，随后应用padding-bottom或是padding-top，把相对的部位空出去！！！
当必须在content里边翻转的情况下，必须将body和html设定height:100%;随后content也必须设定height:100%,那样才能够完成在content里边里边翻转，当必须在body里边翻转的情况下，必须将html、body中的height:100%;设定除掉！！要不然body会被限定住，內容只显示信息一半不可以翻转！！！
也有一种处理弹出窗口蒙版层底端出現翻转的方式便是，当出現弹出窗口的情况下，根据js操纵下边的內容为body{height:100%;overflow:hidden;},随后关掉弹出窗口的情况下清除掉这一款式！！！
<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;
应用这类合理布局方法能够处理，宣传单页面翻转的情况下，点一下弹出窗口，弹出窗口会被遮挡住翻转难题！！！
留意：当必须测算body的高宽比的情况下，不可以应用，也有当网页页面中，有表格，必须应用position：relative时，来使安卓系统电脑键盘不被遮挡！！！！可是为处理弹出窗口不翻转难题，能够根据，弹出窗口的情况下，提升content合理布局，关掉弹出窗口的是清除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>");
});
情景二：在content合理布局下，必须给网页页面设定情况图，能够在content下边在包囊一层大的div，随后对这一div开展全网页页面情况图设定，那样情况图才会伴随着內容超过一显示屏而翻转，而并不是立即在content这一器皿上设定情况图，假如立即在这里个器皿上设定情况图，那情况图不容易翻转!!!
普遍头顶部合理布局
两侧有时候候有文本或是标志，可是正中间的题目固定不动垂直居中，大约部位以下，便是內容能变化！！
合理布局以下
<div class="head"> <a class="head-left">设定</a>本人管理中心<a class="head-right">大量</a></div>
css:
.head{
position:relative;
width:100%;
height:88px;
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;
}
仿真模拟上拽载入
$(window).scroll(function() {
var winH = $(window).height();
var scrH = $(window).scrollTop();
var htmH = $(document).height();
//处理翻转到下边，蒙版层一半
$(".fixed").height(htmH);
if(winH + scrH >= htmH) {
console.info(tabActive);
if(tabActive==0){
console.info(1111);
if(next_page){
if(ajax_lock == true)
{
ajax_lock = false;
page++;
getRecord(page,0);
}
}
}
});
1.清理勾选框
实际效果
html编码
<label> <input id="rememberPwdCheck" class="checkbox hidden" type="checkbox" checked="checked"> <i class="icon icon-checkbox"></i> <span class="rememberPwdtxt">记牢账户登陆密码</span> </label>
css编码
.hidden {
display: none;
}
.checkbox:checked ~.icon-checkbox {
background: url(../images/yes_15.png) no-repeat;
background-size: 0.3rem 0.25rem;
}
.icon-checkbox {
width: 0.3rem;
height: 0.3rem;
margin-right: 0.1rem;
border: 0.02rem solid #d7d7d7;
border-radius: 0.06rem;
}
.icon {
display: inline-block;
vertical-align: middle;
}
js
if(!$('#agreeTerm').is(":checked")){
$.alert('请启用愿意《商业保险条文》和《关键告之与声明》');
return;
};
<div class="allCheck">
<input type="checkbox" id="allCheck" class="check hidden">
<label for="allCheck" class="check-icon">全选</label>
</div>
.allCheck {
padding:0 .1rem 0 .3rem;
}
.check-icon {
display: inline-block;
width:1.5rem;
padding-left:.5rem;
background:url("../../assets/select-no.png")no-repeat left center;
background-size:.42rem .42rem ;
}
.check:checked ~ .check-icon {
background:url("../../assets/selected.png")no-repeat left center;
background-size:.42rem .42rem ;
}
2.仿真模拟单选按键
相近实际效果
html编码
<dl id="" class="money">
<dt>挑选赔偿额度<span class="p_help help">赔偿金表明</span></dt>
<dd>
<span>
<input id="money_type_0" name="money_type" class="selection-rd hidden" type="radio" value="1" checked="">
<label class="selection-lb" for="money_type_0">1零元</label>
</span>
<span>
<input id="money_type_1" name="money_type" class="selection-rd hidden" type="radio" value="2">
<label class="selection-lb" for="money_type_1">二十元</label>
</span>
<span>
<input id="money_type_2" name="money_type" class="selection-rd hidden" type="radio" value="3">
<label class="selection-lb" for="money_type_2">5零元</label>
</span>
</dd>
</dl>
css编码
.selection-rd:checked ~ .selection-lb {
color: #e44;
border:1px solid #e44;
}
.selection-lb {
display: inline-block;
margin:33px 30px 30px 0;
width:150px;
height: 64px;
line-height: 64px;
white-space: nowrap;
background-color: #fff;
border:1px solid #bbc;
border-radius: 5px;
text-align: center;
font-size: 32px;
}
jq编码
var payLevel=$("input[name='money_type']:checked").val();
3.正中间文本，两侧水平线垂直居中
实际效果
编码
<div class="title-center"><div>学员信息内容</div></div>
/*正中间文本两侧水平线实际效果*/
.title-center {
position:relative;
width:100%;
text-align: center;
height: 100px;
line-height: 100px;
font-size: 28px;
color: #4d72e2;
}
.title-center div{
display: inline-block;
padding:0 20px;
}
.title-center:before ,.title-center:after{
display: inline-block;
position: relative;
content:"";
height:2px;
width:48px;
top:-6px;
background-color:#4d72e2;
}
当设定rem为企业时，1px，会显示信息稍大，将.title-center:before ,.title-center:after改动为以下：
.title-center:before, .title-center:after {
display: inline-block;
position: relative;
content: "";
height: 1px;
width: 1.88rem;
top: -.1rem;
background-color: #fd734f;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
最终版，rem企业，水平线响应式长短！！！！
<div class="flexbox flexbox-middle">
<span class="flexchild border-center"></span>
<span style="padding:0 .2rem;">我想垂直居中，两侧水平线两端对齐</span>
<span class="flexchild border-center"></span>
</div>
.border-center{
/*display:inline-block; 应用flexchild合理布局的情况下，不可以给原素设定这一特性，要不然， -webkit-box-flex: 1;会无效*/
height: 1px;
background-color: #fd734f;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
正中间文本，两侧水平线垂直居中方式2
实际效果图
<div class="card-title"><span class="text">不错过你较为快糖块盒假如好</span></div>
css
.card-title {
padding-top: .4rem;
font-size: .34rem;
color: #3c3c3c;
text-align: center;
font-weight: bold;
}
.card-title .text {
position: relative;
}
.card-title .text:before ,.card-title .text:after {
content: "";
display: inline-block;
position: absolute;
width: .4rem;
height: .32rem;
background: url('../images/card-title.png')no-repeat;
background-size: 100% 100%;
top: 50%;
margin-top: -.16rem;
}
.card-title .text:before{
left: -.51rem;
}
.card-title .text:after{
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
right: -.51rem;
}
4.如何完成标志水准竖直垂直居中（rem企业）
运用background-size来设定情况图的自身尺寸规格，随后运用background-position:center center;来设定情况图相对性原素的水准竖直垂直居中,在其中原素的宽是情况图的宽，高便是原先的高
sass的书写
@mixin headerIcon($width,$height,$url,$position) {
position: absolute;
$position: .3rem;
top: 0;
width: $width; //标志的总宽
height: .88rem; //头顶部的高宽比
background: url($url) no-repeat;
background-position:left center;
background-size:$width $height;
font-size: .3rem;
text-align: left;
}
方式二，
html:
<a>
<i class="foot-nav1 icon"></i>
<span>主页</span>
</a>
css:
a{display:inline-block;}
.foot-nav1{
width: .66rem;
height: .66rem;
display: block;
margin: 0 auto;
background:url();
}
span {
display: block;
line-height: .24rem;
text-align: center;
font-size: .24rem;
height: .24rem;
margin-bottom: .8rem;
color: #666;
}
5.头顶部常见款式设定
<div><a></a><h1>我是题目</h1><a></a></div>
.header{
width: 100%;
height: .88rem;
position: absolute;
left: 0;
top: 0;
z-index: 998;
border-bottom: 1px solid #f1f1f1;
text-align: center;
h1{
font-size: .36rem;
font-family: PingFangSC-Medium, sans-serif;
}
.left-icon{
position: absolute;
width: .88rem;
height: .88rem;
left: .3rem;
top: 0;
background: url('../../assets/back-icon.png') no-repeat;
background-size:.17rem .35rem;
background-position: left center;
}
.right-icon{
position: absolute;
width: .88rem;
height: .88rem;
right: .3rem;
top: 0;
background: url('../../assets/back-icon.png') no-repeat;
background-size:.17rem .35rem;
background-position: left center;
}
6.常见表格合理布局
实际效果：
编码：
<div class="section2">
<div class="des-title"><span class="text">请用心填好下列信息内容</span></div>
<ul>
<li class="flexbox">
<input type="text" placeholder="请键入您的名字" class="flexchild fill-content" id="tbName2">
</li>
<li class="flexbox flexbox-middle">
<span class="fill-label">取货详细地址:</span>
<span class="adress" style="overflow: hidden;">
<input id="provinceCity2" name="rec_address_select" class="txt" placeholder="挑选" readonly="readonly">
<input id="detailssq2" type="hidden" readonly="readonly">
<i class="ui-icon Rmore-icon noborder"></i>
</span>
</li>
<li class="flexbox">
<input type="text" placeholder="请填好详尽详细地址" class="flexchild fill-content " id="adressDetail">
</li>
</ul>
</div>
css：
.section2 li {
list-style: none;
position: relative;
width: 500px;
margin: 0 auto;
border: 1px solid #ffd6b9;
box-sizing: border-box;
padding: 17px 30px;
background-color: #fff;
margin-top: 20px;
border-radius: 40px;
}
.section2 li input {
background-color: transparent;
border: 0 none;
color: #333;
outline: none;
position: relative;
font-size: 26px;
width: 435px;
z-index: 102;
}
html：
<li class="flexbox">
<label>您的心中人：</label>
<input type="text" placeholder="请键入心中人名字" class="flexchild" id="loveName">
</li>
css：
.sec3 li {
position: relative;
height: .88rem;
-webkit-box-align: end;
-moz-box-align: end;
-ms-flex-align: end;
-webkit-align-items: flex-end;
align-items: flex-end;
box-sizing: border-box;
}
.sec3 li label {
padding-bottom: .2rem;
}
.sec3 li input {
position: relative;
width: 4.86rem;
background: transparent;
border: 0 none;
border-bottom: 1px solid #dc115b;
padding-bottom: .2rem;
color: #efc283;
font-size: .28rem;
border-radius: 0;
}
7、上边照片正下方小蜜字，水准垂直居中合理布局
实际效果
css款式
.mall .details-foot .details-kefu {
width: 1.56rem;
height: .99rem;
border-right: 1px solid #f1f1f1;
}
.mall .details-foot .details-kefu i {
display: block;
width: .42rem;
height: .42rem;
margin: .12rem auto .06rem;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAAGXRFW…7oxfKRixjo4VSJhW/sUYi1M9kR4RNoUZHpQEuX+Z/pXwEGAHRzn0c9HGr7AAAAAElFTkSuQmCC) no-repeat;
background-size: 100% 100%;
}
.mall .details-foot .details-kefu-name {
text-align: center;
}
8、解题进展条
便是用于展现解题进展的进展条，实际效果以下
在其中img是样子背景色（小圆圈是全透明的）。而recommend-jd-bg是进展条情况色，recommend-jd-ks是操纵进展的色调！！，在其中img的z-index>recommend-jd-bg>recommend-jd-ks
html：
<div class="recommend-jd">
<div class="recommend-jd-bg"></div>
<div class="recommend-jd-ks" style="width: 37.5%;"></div>
<img src="/src/m7.0/images/recommend/jd.png">
</div>
css：
.recommend-jd {
width: 6.43rem;
position: absolute;
top: 1.59rem;
left: .54rem;
}
.recommend-jd-bg {
width: 100%;
height: .31rem;
background: #fff;
position: absolute;
top: 0;
z-index: 97;
}
.recommend-jd-ks {
width: 12.5%; //这一是js操纵，依据题数的进展来操纵！
height: .31rem;
background: #4a90ff;
position: absolute;
top: 0;
z-index: 98;
}
.recommend-jd img {
width: 100%;
display: block;
position: absolute;
top: 0;
z-index: 99;
height: .31rem;
}
进展条2
<div class="progressBar">
<span class="progressPer" style="width: 2rem;">
<span class="moneyBox">
<span class="moneyText">¥0.01</span>
</span>
</span>
</div>
.progressBar {
margin: .3rem auto .1rem;
width: 6.3rem;
height: .1rem;
background-color: rgb(72, 11, 29);
}
.progressPer {
position: relative;
top: 0;
left: 0;
display: inline-block;
width: 0;
height: .1rem;
background-color: #efc283;
}
.moneyBox {
position: absolute;
right: -.53rem;
top: .3rem;
display: inline-block;
width: 1.06rem;
height: .4rem;
background: url(../images/moneyBox.png)no-repeat;
background-size: 100% 100%;
}
.moneyBox .moneyText {
position: absolute;
bottom: 0;
left: 0;
width: 1.04rem;
height: .34rem;
line-height: .34rem;
text-align: center;
color: #efc283;
font-size: .26rem;
}
9.解题检测1-10题都会同一个网页页面
10、除掉selected内置的往下拉框标志，提升以下特性
select {
background: transparent;
border: 0 none;
outline:none;
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
}
11、改动input的placeholder款式
.detail-page input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
font-size: .26rem;
color:#b2b2b2;
opacity: 1;
}
.detail-page input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
font-size: .26rem;
color:#b2b2b2;
opacity: 1;
}
.detail-page input::-moz-placeholder { /* Mozilla Firefox 19+ */
font-size: .26rem;
color:#b2b2b2;
opacity: 1;
}
.detail-page input:-ms-input-placeholder { /* Internet Explorer 10-11 */
font-size: .26rem;
color:#b2b2b2;
opacity: 1;
}
12.input中提升disabled会内置深灰色，改动色调以下
input:disabled{
border:1px solid #DDD;
background-color:#F5F5F5;
color:#ACA899;
}
13、几行文本上下两端对齐：
p {
text-align: justify;
text-justify: inter-ideograph;
}
实际效果
14、完成单写作字两边两端对齐，比如要完成以下单写作字两端对齐
方式一，应用伪类：
html：
<div class="line">
<div class="public">名字</div>
<b>:</b>
<b>林小</b>
</div>
<div class="line">
<div class="public">真实身份证</div>
<b>:</b>
<b>1</b>
</div>
<div class="line">
<div class="public">手机上号码</div>
<b>:</b>
<b>141000000</b>
</div>
css：
.line{
width:100%;
height:15px;
margin:5px;
}
.public{
width:80px;
height:100%;
display:inline-block;
text-align: justify;
vertical-align:top;
}
.public::after{
content:"";
display: inline-block;
width:100%;
overflow:hidden;
height:0;
}
方式二应用letter-spacing来处理：
html：
<span style="font-size:12px;"><dl class="hotsearch" style="width:300px;"> <dt>受欢迎检索</dt> <dd><a href="#" target="_blank" ref="nav" class="w3">电视机机</a></dd> <dd><a href="#" target="_blank" ref="nav" class="w4">性感好看</a></dd> <dd><a href="#" target="_blank" ref="nav" class="w3">高跟鞋鞋</a></dd> <dd><a href="#" target="_blank" ref="nav" class="w2">手机上</a></dd> <dd><a href="#" target="_blank" ref="nav" class="w2">两端对齐</a></dd> <dd><a href="#" target="_blank" ref="nav" class="w3">牛仔裤裤</a></dd> <dd><a href="#" target="_blank" ref="nav" class="w4">小家庭碧玉</a></dd> <dd><a href="#" target="_blank" ref="nav" class="w2">家居家具</a></dd> </dl></span>
css：
.hotsearch dd{
float: left;
line-height: 24px;
margin-right: 30px;
overflow: hidden;
text-align: center;
width: 4em; /*这一值是看最多能显示信息好多个文本，如x，则为x em*/
}
.hotsearch dd a{
display:block;
}
.w2{
letter-spacing:2em; /*假如必须y个字两边两端对齐，则为(x-y)/(y-1),这儿是（4-2）/(2-1)=2em */
margin-right:-2em; /*跟上面一样*/
}
.w3{
letter-spacing:0.5em; /*假如必须y个字两边两端对齐，则为(x-y)/(y-1),这儿是（4-3）/(3-1)=0.5em */
margin-right:-0.5em; /*跟上面一样*/
}
实际效果
15、完成照片载入全过程高宽比响应式
运用场景：在网页页面合理布局全过程中，碰到滚屏图或是大幅图片，当照片下边也有其他块內容，在照片载入全过程中，因为高宽比是0，下边的原素会往上跑，照片载入完。原素会向下跑，给客户觉得颤动。
处理方式：在照片最表层设定一个div，给这一div设定以下款式
.img-box {
overflow: hidden;
width: 100%;
height: 0;
padding-bottom: 52%;
/*方式二*/
width:100%;
/*高宽比相对性父级总宽占比*/
height: 52%vw;
background:#eee;
}
16、完成文本超过省去...（必须设定总宽，当父级原素应用flex合理布局时，必须在display：flex；这里设定min-width：0；要不然ellipsis会无效！！）
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ellipsis-2l {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; //第几行
}
17、纵向翻转条
实际效果，每一次点必须与時间两端对齐，能够把小圆点放到跟时间同一个div上，随后水平线制成全部纪录的情况图
html：
<div class="list">
<div class="list-item">
<div class="list-item-time flexbox flexbox-middle"><span class="progres2-item"></span><span>今日</span></div>
<div class="list-item-award yhj">两元特惠券，无门坎能用<a class="go">去应用></a></div>
<div class="list-item-text">已每日签到，得到一个白鸽币</div>
</div>
<div class="list-item">
<div class="list-item-time flexbox flexbox-middle"><span class="progres2-item"></span><span>今日</span></div>
<div class="list-item-award yhj">两元特惠券，无门坎能用<a class="list-btn">去应用></a></div>
<div class="excode">请想和你在一起奇艺APP换取，换取码：testPw5079</div>
<div class="list-item-text">已每日签到，得到一个白鸽币</div>
</div>
<div class="list-item">
<div class="list-item-time flexbox flexbox-middle"><span class="progres2-item"></span><span>2018-09-28</span></div>
<div class="list-item-text">已每日签到，得到一个白鸽币</div>
</div>
<div class="list-item">
<div class="list-item-time flexbox flexbox-middle"><span class="progres2-item"></span><span>今日</span></div>
<div class="list-item-award yhj">两元特惠券，无门坎能用<a class="list-btn">去应用></a></div>
<div class="excode">请想和你在一起奇艺APP换取，换取码：testPw5079</div>
<div class="list-item-text">已每日签到，得到一个白鸽币</div>
</div>
</div>
css：
.list {
padding-top: .1rem;
padding-bottom: .1rem;
font-size: .3rem;
color: #333;
background-color: #fff;
}
.list-item {
width: 100%;
margin-left: .32rem;
margin-top: -.15rem;
padding-bottom: .4rem;
background: url("../images/border.png") no-repeat .1rem .21rem;
background-size: 1px 100%;
}
.progres2-item {
display: inline-block;
margin-right: .25rem;
width: .21rem;
height: .21rem;
background-color: #4d72e2;
border-radius: 50%;
}
/*最终一个沒有平行线也便是沒有情况，仅有一个的情况下都没有*/
.list-item:last-of-type{
background:transparent;
}
.list-item-award,.list-item-text {
margin-left: .5rem;
}
.list-item-award{
padding-left: .53rem;
margin-bottom: .12rem;
margin-top: .22rem;
}
.list-item-text {
width: 100%;
padding-left: .46rem;
padding-bottom: .16rem;
background: url("../images/sign-icon.png") no-repeat left .05rem;
background-size: .32rem .25rem;
font-size: .26rem;
color: #808080;
box-sizing: border-box;
border-bottom: 1px solid #f4f4f4;
}
.list-item:last-of-type .list-item-text {
border-bottom: 0 none;
}
.list-item .list-btn {
padding-left: .1rem;
text-decoration: underline;
font-size: .28rem;
color: #316cec;
}
18、文本底端水平线情况
<div class="login-title">让新手鸽了解您并不是设备人哦！</div>
.login-title {
position: relative;
height: .39rem;
margin-top: .4rem;
font-size: .34rem;
color: #fff;
text-align: center;
}
.login-title:after {
content: "";
position: absolute;
width: 5.05rem;
height: .21rem;
background-color: #fe923f;
z-index: -1;
left: 0;
right: 0;
margin: 0 auto;
bottom: 0;
}
附录： CSS常见款式选编
1. 情况图响应式显示屏
.background{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-width: 1000px;
z-index: -10;
zoom: 1;
background-color: #fff;
background: url(../../assets/signin@2x.png) no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center 0;
}
2. 高宽比响应式显示屏
.height{
width: 200px;
min-height: 400px;
overflow: auto;
height: 100vh;
display: -webkit-flex;
}
到此这篇有关详细说明常见css款式(合理布局)的文章内容就详细介绍到这了,大量有关CSS款式合理布局內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！