浅谈css网页页面的几种合理布局

日期:2020-12-12 类型:科技新闻 

关键词:秀米制作h5,h5如何制作,h5小游戏制作,h5游戏开发,免费的h5制作网站

2018年早已过了1周,总结1下2017年在企业wiki上写的1篇有关css合理布局的专业知识,那时候也效仿了几个高手写的css合理布局专业知识,和自身在新项目中遇到的坑。空话很少说。请看下列的干货。

1、左侧固定不动,右侧自融入合理布局的两种完成方法

实际效果图以下:

大屏展现:

小屏展现:

 

第1种完成方法根据负边距与波动 完成左侧固定不动,右侧自融入的合理布局。 关键编码以下:

<style type="text/css">
	.left{
		float: left;
		width: 100%;
		height: 200px;
		background-color: red;
	}
	.left-content{
		margin-left: 30%;
	}
	.right{
		float: left;
		width: 30%;
		margin-left: ⑴00%;
		height: 200px;
		background-color: green;
	}
	.layout0{
		clear: both;
		width: 100px;
		height: 100px;
		background-color: yellow;
	}
</style>
<body>
	<div id="body">
		<div class="left">
			<div class="left-content">
				设定子元素的margin,随后父元素务必波动。
				用父元素包裹,关键是由于right会遮盖left,从而致使left內容不能以看到,假如立即在left上设定margin或padding会致使合理布局转变,因而只能再用1个div包裹內容,而且除去right遮盖的宽度。
			</div>
		</div>
		<div class="right">-margin务必超过或等于本身的宽度才会上移</div>
		<div class="layout0"></div>
	</div>
</body>

完成全过程中必须留意的是:

1.自融入的器皿必须器皿包裹住,不然器皿内的內容会被遮盖。

2.right器皿的负边距务必超过或等于本身的宽度才会上移。

3.假如right器皿负边距等于本身的宽度它会靠右对齐,假如负边距等于⑴00%,则会靠左对齐。

第2种 根据波动合理布局来完成左侧固定不动,右侧自融入的合理布局

关键的编码以下:

<style type="text/css">
	.left{
		float: left;
		width: 200px;
		height: 200px;
		background-color: yellow;
	}
	.right{
		padding-left: 200px;
		height: 200px;
		background-color: red;
	}
	@media (min-width: 650px) and (max-width: 1000px){
		.left{
			width: 150px;
		}
		.right{
			margin-left: 150px;
		}
	}
	@media (max-width: 640px){
		.left{
			width: 100px;
		}
		.right{
			margin-left: 100px;
		}
	}
</style>
<body>
	<div id="main">
		<div class="left">左侧固定不动宽度,右侧自融入</div>
		<div class="right"></div>
	</div>
</body>

完成全过程中必须留意的是: 1. left必须摆脱文本文档流,而right只必须一切正常显示信息便可以。

2.left只是遮盖在right上边,因而要想让right內容详细显示信息必须给right padding-left或margin-left。

大屏展现:

小屏展现:

 

关键编码以下:

<style type="text/css">
	#head{
		height: 200px;
		background-color: yellow;
	}
	#body{
		width: 100%;
		float: left;
	}
	.main{
		background-color: green;
		min-height: 200px;
		margin: 0 210px;
	}
	.left{
		float: left;
		background-color: red;
		width: 200px;
		height: 200px;
		margin-left: ⑴00%;
	}
	.right{
		float: right;
		background-color: blue;
		width: 200px;
		height: 200px;
		margin-left: ⑵00px;
	}
	#footer{
		clear: both;
		height: 200px;
		background-color: orange;
	}
</style>
<body>
	<div id="head">即上下固定不动,正中间自融入,它能够运用margin-left为负数来完成,它的完成基本原理便是margin为负值能够更改float元素的排序部位</div>
	<div id="body">
		<div class="main">当好几个元素另外从规范流中摆脱起来时,假如前1个元素的宽度为100%宽度,后边的元素根据负边距能够完成上移。当负的边距超出本身的宽度将上移,要是沒有超出本身宽度就不容易上移</div>
	</div>
	<div class="left"></div>
	<div class="right"></div>
	<div id="footer"></div>
</body>

完成全过程中必须留意:

1.正中间自融入的div必须放在left和right器皿前面而且內容div必须用父器皿包裹

2.left和right器皿向同1个方位波动。

关键编码以下:

<style type="text/css">
	#head{
		height: 200px;
		background-color: yellow;
	}
	#body{
		overflow: hidden;
	}
	.left{
		float: left;
		background-color: red;
		width: 200px;
		height: 200px;
	}
	.right{
		float: right;
		background-color: blue;
		width: 200px;
		height: 200px;
	}
	.main{
		background-color: green;
		height: 200px;
		margin: 0 210px;
	}
	#footer{
		clear: both;
		height: 200px;
		background-color: orange;
	}
</style>
<body>
	<div id="head">上下固定不动宽度而且向两侧波动,正中间的div设定两侧的margin</div>
	<div id="body">
		<div class="left"></div>
		<div class="right"></div>
		<div class="main">该计划方案有1个缺点,在小显示屏状况下次致使right被挤下去,main沒有了</div>
	</div>
	<div id="footer"></div>
</body>

完成全过程中必须留意:

1.该方法只必须留意正中间自融入的div必须放在left和right器皿的后边。

2.left和right器皿向两侧波动。

关键编码以下:

<!DOCTYPE html>
<html>
<meta charset="utf⑻">
<head>
	<title>应用flex 完成“双飞翼合理布局”</title>
</head>
<style type="text/css">
	#main{
		display: flex;
		display: -webkit-flex;//谷歌访问器加前缀
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;
	}
	.left{
		flex: 0 0 auto;
		width:100px;
		height: 200px;
		background-color: red;
		word-wrap: break-word; 
		overflow: hidden;
	}
	.main{
		flex: 1 1 auto;
		height: 200px;
		background-color: green;
	}
	.right{
		flex: 0 0 auto;
		width: 100px;
		height: 200px;
		background-color: yellow;
	}
</style>
<body>
	<div id="main">
		<div class="left">flex 英语的语法我参考了阮1峰有关flex英语的语法详细介绍 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html</div>
		<div class="main"></div>
		<div class="right"></div>
	</div>
</body>
</html>

假如未掌握过flex合理布局请挪到文末点一下连接查询 阮1峰高手写的有关flex英语的语法

3、精准定位合理布局

这边就不啰啰嗦嗦的讲1些基本的css精准定位专业知识了(ps:不容易的请自主到w3c官方网站查阅),我关键来说解1下工作中中遇到的坑。以防别的人和我1样掉入坑中。

第1:应用好几个fixed时,留意自身必须根据甚么精准定位,由于假如父级有效transform特性时,将会会致使子元素的fixed根据父元素器皿精准定位,而并不是根据body精准定位。实际效果以下:

在上图中我能够发现正中间黑色的小框是根据父级来精准定位,而且宽度也根据父器皿的50%。详尽的请看下面编码:

<!DOCTYPE html>
<html>
<head>
    <title>有关position的精准定位的坑</title>
</head>
<style type="text/css">
    body{
        margin: 0;
        padding: 0;
    }
    i{
        font-style: normal;
        cursor: pointer;
    }
    #delete-button{
        position: absolute;
        left: 45%;
        top: 45%;
        text-align: center;
        vertical-align: middle;
        height: 50px;
        margin: auto;
        cursor: pointer;
    }
    #delete-button > i{
        display: inline-block;
        width: 32px;
        height: 32px;
        border-radius: 16px;
        background-color: orange;
        color: red;
        font-size: 32px;
        vertical-align: middle;
        line-height: 28px;
    }
    /*第1个模态框的款式*/
    #layout{
        display: none;
        width: 100%;
        height: 100%;
    }
    /*应用flex合理布局水平垂直垂直居中*/
    /*#layout-box{
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        display: flex;
        display: -webkit-flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        background-color: rgba(0,0,0,0.3);
    }*/
    /*应用postion 和 transform 水平竖直垂直居中*/
    #layout-box{
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.3);
    }
    .modal-dialog{
        position: absolute;
        left: 50%;
        top: 50%;
        width: 500px;
        height: 200px;
        border-radius: 10px;
        transform: translate(⑸0%, ⑸0%);
        -webkit-transform: translate(⑸0%, ⑸0%);
        -moz-transform: translate(⑸0%, ⑸0%);
        -o-transform: translate(⑸0%, ⑸0%);
        background-color: #fff;
    }
    .dialog-title{
        text-align: center;
        color: #333;
        font-size: 28px;
        margin-bottom: 10px;
    }
    .dialog-content{
        text-align: center;
        color: #666;
        font-size: 18px;
    }
    .dialog-button{
        margin-top: 20px;
        width: 100%;
        color: #333;
    }
    .dialog-button >.button-box{
        display: inline-block;
        width: 48%;
        text-align: center;
    }
    .button-box span{
        display: inline-block;
        padding: 10px;
        color: #fff;
        border-radius: 6px;
        cursor: pointer;
    }
    #confirm{
        background-color: #27ad9a;
    }
    #cancel{
        background-color: red;
    }
    /*加上按钮的款式*/
    #add-button > i{
        display: inline-block;
        width: 32px;
        height: 32px;
        border-radius: 16px;
        background-color: #27ad9a;
        color: #fff;
        font-size: 32px;
        vertical-align: middle;
        line-height: 28px;
        text-align: center;
    }
    #add-button{
        display: inline-block;
        cursor: pointer;
    }
    /*第2个模态框的款式*/
    .layout2{
        display: none;
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background-color: rgba(0,0,0,0.2);
    }
    .modal-dialog2{
        position: fixed;
        left: 50%;
        top: 50%;
        width: 50%;
        height: 50%;
        border-radius: 10px;
        transform: translate(⑸0%, ⑸0%);
        -webkit-transform: translate(⑸0%, ⑸0%);
        -moz-transform: translate(⑸0%, ⑸0%);
        -o-transform: translate(⑸0%, ⑸0%);
        background-color: rgba(0,0,0,0.2);
    }
    .modal-dialog2 > span{
        display: block;
    }
    .modal-text{
        float: left;
    }
    #close{
        color: red;
        font-size: 24px;
        float: right;
        cursor: pointer;
    }
</style>
<body>
    <div id="delete-button"><i>-</i>删掉</div>
    <div id="layout">
        <div id="layout-box">
            <div class="modal-dialog">
                <div class="dialog-title">提醒</div>
                <div class="dialog-content">是不是删掉该项,点一下明确</div>
                <div class="dialog-button">
                    <div class="button-box">
                        <span id="confirm">明确</span>
                    </div>
                    <div class="button-box">
                        <span id="cancel">撤销</span>
                    </div>
                </div>
                <div id="add-button"><i>+</i>加上</div>
                <div class="layout2">
                    <div class="modal-dialog2">
                        <span class="modal-text">你是我的小讨人喜欢</span>
                        <span id="close">关掉</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
    document.getElementById("delete-button").onclick= function(){
        var layout = document.getElementById("layout")
        layout.style.display = "block"
    }
    document.getElementById("confirm").onclick=function(){
        var layout = document.getElementById("layout")
        layout.style.display = "none"
    }
    document.getElementById("cancel").onclick=function(){
        var layout = document.getElementById("layout")
        layout.style.display = "none"
    }
    document.getElementById("add-button").onclick=function(){
        var layout = document.getElementsByClassName("layout2")
        layout[0].style.display = "block"
    }
    document.getElementById("close").onclick=function(){
        var layout = document.getElementsByClassName("layout2")
        layout[0].style.display = "none"
    }
</script>
</html>

假如大家尝试把父器皿上的transform特性除去,大家能够看到 子器皿沒有根据父器皿精准定位,而是根据body精准定位的,宽度也是根据body给的50%宽度。实际效果图以下:

详尽请看编码:

<!DOCTYPE html>
<html>
<head>
    <title>有关position的精准定位的坑</title>
</head>
<style type="text/css">
    body{
        margin: 0;
        padding: 0;
    }
    i{
        font-style: normal;
        cursor: pointer;
    }
    #delete-button{
        position: absolute;
        left: 45%;
        top: 45%;
        text-align: center;
        vertical-align: middle;
        height: 50px;
        margin: auto;
        cursor: pointer;
    }
    #delete-button > i{
        display: inline-block;
        width: 32px;
        height: 32px;
        border-radius: 16px;
        background-color: orange;
        color: red;
        font-size: 32px;
        vertical-align: middle;
        line-height: 28px;
    }
    /*第1个模态框的款式*/
    #layout{
        display: none;
        width: 100%;
        height: 100%;
    }
    /*应用flex合理布局水平垂直垂直居中*/
    #layout-box{
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        display: flex;
        display: -webkit-flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        background-color: rgba(0,0,0,0.3);
    }
    /*应用postion 和 transform 水平竖直垂直居中*/
    .modal-dialog{
        width: 500px;
        height: 200px;
        border-radius: 10px;
        background-color: #fff;
    }
    .dialog-title{
        text-align: center;
        color: #333;
        font-size: 28px;
        margin-bottom: 10px;
    }
    .dialog-content{
        text-align: center;
        color: #666;
        font-size: 18px;
    }
    .dialog-button{
        margin-top: 20px;
        width: 100%;
        color: #333;
    }
    .dialog-button >.button-box{
        display: inline-block;
        width: 48%;
        text-align: center;
    }
    .button-box span{
        display: inline-block;
        padding: 10px;
        color: #fff;
        border-radius: 6px;
        cursor: pointer;
    }
    #confirm{
        background-color: #27ad9a;
    }
    #cancel{
        background-color: red;
    }
    /*加上按钮的款式*/
    #add-button > i{
        display: inline-block;
        width: 32px;
        height: 32px;
        border-radius: 16px;
        background-color: #27ad9a;
        color: #fff;
        font-size: 32px;
        vertical-align: middle;
        line-height: 28px;
        text-align: center;
    }
    #add-button{
        display: inline-block;
        cursor: pointer;
    }
    /*第2个模态框的款式*/
    .layout2{
        display: none;
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background-color: rgba(0,0,0,0.2);
    }
    .modal-dialog2{
        position: fixed;
        left: 50%;
        top: 50%;
        width: 50%;
        height: 50%;
        border-radius: 10px;
        transform: translate(⑸0%, ⑸0%);
        -webkit-transform: translate(⑸0%, ⑸0%);
        -moz-transform: translate(⑸0%, ⑸0%);
        -o-transform: translate(⑸0%, ⑸0%);
        background-color: rgba(0,0,0,0.2);
    }
    .modal-dialog2 > span{
        display: block;
    }
    .modal-text{
        float: left;
    }
    #close{
        color: red;
        font-size: 24px;
        float: right;
        cursor: pointer;
    }
</style>
<body>
    <div id="delete-button"><i>-</i>删掉</div>
    <div id="layout">
        <div id="layout-box">
            <div class="modal-dialog">
                <div class="dialog-title">提醒</div>
                <div class="dialog-content">是不是删掉该项,点一下明确</div>
                <div class="dialog-button">
                    <div class="button-box">
                        <span id="confirm">明确</span>
                    </div>
                    <div class="button-box">
                        <span id="cancel">撤销</span>
                    </div>
                </div>
                <div id="add-button"><i>+</i>加上</div>
                <div class="layout2">
                    <div class="modal-dialog2">
                        <span class="modal-text">你是我的小讨人喜欢</span>
                        <span id="close">关掉</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
    document.getElementById("delete-button").onclick= function(){
        var layout = document.getElementById("layout")
        layout.style.display = "block"
    }
    document.getElementById("confirm").onclick=function(){
        var layout = document.getElementById("layout")
        layout.style.display = "none"
    }
    document.getElementById("cancel").onclick=function(){
        var layout = document.getElementById("layout")
        layout.style.display = "none"
    }
    document.getElementById("add-button").onclick=function(){
        var layout = document.getElementsByClassName("layout2")
        layout[0].style.display = "block"
    }
    document.getElementById("close").onclick=function(){
        var layout = document.getElementsByClassName("layout2")
        layout[0].style.display = "none"
    }
</script>
</html>

第2:处理在手机上上的颤动难题(ps:这个难题我参考了在网上高手写的1篇blog请挪到文末查询)

**1、**在webkit核心访问器中 给fixed再加防抖款式 - webkit - transform: translateZ(0);

**2、**设定html 和body 的css {height:100%;overflow:auto;margin:0;} 这个危害全局性款式不提议应用。

3、在fiexd内设定position:absolute,以下:

<div style="position:fiexd;bottom:0px;">
  <div style="position:absolute;">
  </div>
</div>

 

4、百分比合理布局 关键根据设定元素的宽度为百分比或高宽比为百分比。例如:width:50%; height:50%; 这样的写法。

5、回应式合理布局(关键应用新闻媒体查寻来完成回应式设计方案) 关键应用CSS3 @media 来做不一样终端设备的回应式设计方案

关键在css文档中写入

@media screen and (max-width:600px){
    写入当显示屏小于或等于600px时的款式
}
@media screen and (min-width:900px){
    写入当显示屏超过或等于900px时的款式
}
@media screen and (min-width:600px) and (max-width:900px){
    写入当显示屏在600px⑼00px之间的款式
}
@media screen and (max-device-width: 480px){
    写入最大机器设备宽度为480px,例如说iPhone上的显示信息,这里的max-device-width所指的是机器设备的具体辨别率,也便是指可视性面積分辨率
}
@media only screen and (-webkit-min-device-pixel-ratio: 2){
    写入专业对于iPhone4的挪动机器设备款式
}
@media all and (orientation:portrait){
    写入机器设备在纵向时的款式
}
@media all and (orientation:landscape){
    写入机器设备在横向时的款式
}
@media not print and (max-width: 1200px){
    not是用来清除某种制订的新闻媒体种类
    写入在除复印机器设备和机器设备宽度小于1200px下的全部机器设备的款式
}
@media only screen and (max-device-width:240px){
    only用来定某种特殊的新闻媒体种类,能够用来清除不适用新闻媒体查寻的访问器。
    写入只能在最大机器设备宽度为240px的显示屏下应用的款式
}

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。