社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > css教學 > 主體

淺談css網頁的版面問題

php中世界最好的语言
發布： 2018-03-20 14:28:21
原創
1741 人瀏覽過

這次帶給大家淺談css網頁的版面問題，css網頁的版面問題的注意事項有哪些，下面就是實戰案例，一起來看一下。

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: -100%;
		height: 200px;
		background-color: green;
	}
	.layout0{
		clear: both;
		width: 100px;
		height: 100px;
		background-color: yellow;
	}
</style>
<body>
	<p id="body">
		<p class="left">
			<p class="left-content">
				设置子元素的margin,然后父元素必须浮动。
				用父元素包裹，主要是因为right会覆盖left，从而导致left内容不可以看到，如果直接在left上设置margin或者padding会导致布局变化，因此只能再用一个p包裹内容，并且去除right覆盖的宽度。
			</p>
		</p>
		<p class="right">-margin必须大于或等于自身的宽度才会上移</p>
		<p class="layout0"></p>
	</p>
</body>
登入後複製
實作過程中需要注意的是:

1.自適應的容器需要容器包住，否則容器內的內容會被覆寫。

2.right容器的負邊距必須大於或等於自身的寬度才會上移。

3.如果right容器負邊距等於自身的寬度它會靠右對齊，如果負邊距等於-100%，則會靠左對齊。

第二種透過

浮動佈局來實現左邊固定，右邊自適應的佈局

主要的程式碼如下：

<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>
	<p id="main">
		<p class="left">左边固定宽度，右边自适应</p>
		<p class="right"></p>
	</p>
</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: -100%;
	}
	.right{
		float: right;
		background-color: blue;
		width: 200px;
		height: 200px;
		margin-left: -200px;
	}
	#footer{
		clear: both;
		height: 200px;
		background-color: orange;
	}
</style>
<body>
	<p id="head">即左右固定，中间自适应，它可以利用margin-left为负数来实现，它的实现原理就是margin为负值可以改变float元素的排列位置</p>
	<p id="body">
		<p class="main">当多个元素同时从标准流中脱离开来时，如果前一个元素的宽度为100%宽度，后面的元素通过负边距可以实现上移。当负的边距超过自身的宽度将上移，只要没有超过自身宽度就不会上移</p>
	</p>
	<p class="left"></p>
	<p class="right"></p>
	<p id="footer"></p>
</body>
登入後複製
實作過程中需要注意:

#1.中間自適應的p需要放在left和right容器前面並且內容p需要用父容器包裹

2 .left和right容器向同一個方向浮動。

主要程式碼如下：

<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>
	<p id="head">左右固定宽度并且向两边浮动，中间的p设置两边的margin</p>
	<p id="body">
		<p class="left"></p>
		<p class="right"></p>
		<p class="main">该方案有一个缺陷，在小屏幕情况下回导致right被挤下去，main没有了</p>
	</p>
	<p id="footer"></p>
</body>
登入後複製
實作過程中需要注意:

#1.該方式只需要注意中間自適應的p需要放在left和right容器的後面。

2.left和right容器向兩邊浮動。

主要程式碼如下：

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<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>
	<p id="main">
		<p class="left">flex 语法我参照了阮一峰关于flex语法介绍 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html</p>
		<p class="main"></p>
		<p class="right"></p>
	</p>
</body>
</html>
登入後複製
如果未了解flex佈局請移至文末點擊連結查看阮一峰大神寫的關於flex語法

3、定位佈局

這邊就不絮絮叨的講一些基礎的css定位知識了（ps:不會的請自行到w3c官網查閱），我主要來講解一下工作中遇到的坑。以免其他人跟我一樣掉進坑裡。

第一：使用多個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;
    }
    /*第一个模态框的样式*/
    #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(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        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;
    }
    /*第二个模态框的样式*/
    .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(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        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>
    <p id="delete-button"><i>-</i>删除</p>
    <p id="layout">
        <p id="layout-box">
            <p class="modal-dialog">
                <p class="dialog-title">提示</p>
                <p class="dialog-content">是否删除该项,点击确定</p>
                <p class="dialog-button">
                    <p class="button-box">
                        <span id="confirm">确定</span>
                    </p>
                    <p class="button-box">
                        <span id="cancel">取消</span>
                    </p>
                </p>
                <p id="add-button"><i>+</i>添加</p>
                <p class="layout2">
                    <p class="modal-dialog2">
                        <span class="modal-text">你是我的小可爱</span>
                        <span id="close">关闭</span>
                    </p>
                </p>
            </p>
        </p>
    </p>
</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;
    }
    /*第一个模态框的样式*/
    #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;
    }
    /*第二个模态框的样式*/
    .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(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        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>
    <p id="delete-button"><i>-</i>删除</p>
    <p id="layout">
        <p id="layout-box">
            <p class="modal-dialog">
                <p class="dialog-title">提示</p>
                <p class="dialog-content">是否删除该项,点击确定</p>
                <p class="dialog-button">
                    <p class="button-box">
                        <span id="confirm">确定</span>
                    </p>
                    <p class="button-box">
                        <span id="cancel">取消</span>
                    </p>
                </p>
                <p id="add-button"><i>+</i>添加</p>
                <p class="layout2">
                    <p class="modal-dialog2">
                        <span class="modal-text">你是我的小可爱</span>
                        <span id="close">关闭</span>
                    </p>
                </p>
            </p>
        </p>
    </p>
</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>
登入後複製
第二：解決在手機上的抖動問題（ps：這個問題我參考了網路上大神寫的一篇部落格請移至文末查看）

**一、**在webkit核心瀏覽器中給fixed加上防抖樣式- webkit - transform: translateZ(0);

**二、**設定html 和body 的css {height:100%;overflow:auto;margin:0;} 這個影響全域樣式不建議使用。

三、在fiexd内设置position:absolute，如下：

<p style="position:fiexd;bottom:0px;">
  <p style="position:absolute;">
  </p>
</p>
登入後複製

 

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-900px之间的样式
}
@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的屏幕下使用的样式
}
登入後複製

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

CSS Gird的布局详解

CSS实现波浪移动

以上是淺談css網頁的版面問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
css 問題
來源：php.cn
上一篇：css3繪製圓形loading轉圈動畫 下一篇：談談CSS中的幾種選擇器
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
關於CSS心智圖的課件在哪？ 課件
來自於 2024-04-16 10:10:18
0
0
1335
頁面突然無法拉動 css 或 bootstrap 所以我正在開發一個頁面，我昨天做了一部分，效果很好，今天我繼續做剩下的部分，一切都很好。當我嘗試將其作為普通html頁面打開時，CSS或BOOTSTRAP不起作用，僅顯示頁面文本，...
來自於 2024-04-06 21:58:04
0
1
800
動態修改Javafx中的內嵌CSS樣式 我試圖在應用程式最大化時更改窗格的背景圖像。我的背景是使用內嵌css設定的。我為樣式設定了兩個不同的變數和一個if語句。但是，我沒有運氣讓它改變樣式。 StringcssStyle...
來自於 2024-04-06 20:57:16
0
1
487
如何在 CSS 中使浮動元素垂直堆疊而不是水平堆疊？ 我正在嘗試製作一個包含兩列的網頁，一側具有主要內容，另一側具有額外的內容。但是因為我使用浮動屬性將額外的列向左對齊，所以它水平堆疊，但我希望它垂直堆疊。我目前的程式碼：.topic...
來自於 2024-04-06 20:45:26
0
2
386
有沒有辦法強制彈性框中的文字垂直居中，無論我們有什麼其他 CSS 程式碼？ 我有以下CSS程式碼，它是我正在開發的網站中使用的更大CSS程式碼的一部分：.cards-u{display:flex;flex-wrap:wrap;justify-content...
來自於 2024-04-06 20:41:51
0
1
518
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板