社区
学习
工具库
AI工具
休闲
搜索
简体中文
首页 web前端 css教程 css网页的几种布局实例

css网页的几种布局实例

小云云
小云云
Jan 11, 2018 am 09:41 AM
css 实例

本文主要介绍了浅谈css网页的几种布局的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

2018年已经过了一周，总结一下2017年在公司wiki上写的一篇关于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的屏幕下使用的样式
}
登录后复制

相关推荐：

CSS网页错位怎么处理

css网页布局注意事项

详解CSS网页布局错位宽度计算说明

以上是css网页的几种布局实例的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

显示更多

热门文章

R.E.P.O.能量晶体解释及其做什么（黄色晶体）
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影：贝壳谜语解决方案
1 周前 By DDD
R.E.P.O.如果您听不到任何人，如何修复音频
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
在哪里可以找到原子中的起重机控制钥匙卡
1 周前 By DDD
显示更多

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里
7444
15
CakePHP 教程
1371
52
steam的账户名称是什么格式
76
11
win11激活密钥永久
38
19
NYT连接提示和答案
9
6
显示更多
Related knowledge
bootstrap按钮怎么用 bootstrap按钮怎么用 Apr 07, 2025 pm 03:09 PM

如何使用 Bootstrap 按钮？引入 Bootstrap CSS创建按钮元素并添加 Bootstrap 按钮类添加按钮文本

bootstrap怎么调整大小 bootstrap怎么调整大小 Apr 07, 2025 pm 03:18 PM

要调整 Bootstrap 中元素大小，可以使用尺寸类，具体包括：调整宽度：.col-、.w-、.mw-调整高度：.h-、.min-h-、.max-h-

bootstrap怎么插入图片 bootstrap怎么插入图片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入图片有以下几种方法：直接插入图片，使用 HTML 的 img 标签。使用 Bootstrap 图像组件，可以提供响应式图片和更多样式。设置图片大小，使用 img-fluid 类可以使图片自适应。设置边框，使用 img-bordered 类。设置圆角，使用 img-rounded 类。设置阴影，使用 shadow 类。调整图片大小和位置，使用 CSS 样式。使用背景图片，使用 background-image CSS 属性。

Bootstrap列表如何移除默认样式？ Bootstrap列表如何移除默认样式？ Apr 07, 2025 am 10:18 AM

Bootstrap 列表的默认样式可以通过 CSS 覆盖来移除。使用更具体的 CSS 规则和选择器，遵循 "就近原则" 和 "权重原则"，覆盖 Bootstrap 默认的样式。为避免样式冲突，可使用更具针对性的选择器。如果遇到覆盖不成功的情况，可调整自定义 CSS 的权重。同时注意性能优化，避免过度使用 !important，撰写简洁高效的 CSS 代码。

bootstrap如何上传文件 bootstrap如何上传文件 Apr 07, 2025 pm 01:09 PM

可以通过 Bootstrap 实现文件上传功能，步骤如下：引入 Bootstrap CSS 和 JavaScript 文件；创建文件输入字段；创建文件上传按钮；处理文件上传（使用 FormData 收集数据，然后发送到服务器）；自定义样式（可选）。

Bootstrap列表如何改变大小？ Bootstrap列表如何改变大小？ Apr 07, 2025 am 10:45 AM

Bootstrap 列表的大小取决于包含列表的容器的大小，而不是列表本身。使用 Bootstrap 的网格系统或 Flexbox 可以控制容器的大小，从而间接调整列表项的大小。

bootstrap导航栏怎么设置 bootstrap导航栏怎么设置 Apr 07, 2025 pm 01:51 PM

Bootstrap 提供了设置导航栏的简单指南：引入 Bootstrap 库创建导航栏容器添加品牌标识创建导航链接添加其他元素（可选）调整样式（可选）

bootstrap日期怎么验证 bootstrap日期怎么验证 Apr 07, 2025 pm 03:06 PM

在 Bootstrap 中验证日期，需遵循以下步骤：引入必需的脚本和样式；初始化日期选择器组件；设置 data-bv-date 属性以启用验证；配置验证规则（如日期格式、错误消息等）；集成 Bootstrap 验证框架，并在表单提交时自动验证日期输入。

See all articles