浅谈css网页的布局问题

程序猿 • 2025年12月24日 00:39:17 • 用户投稿 • 阅读 0

这次给大家带来浅谈css网页的布局问题，css网页的布局问题的注意事项有哪些，下面就是实战案例，一起来看一下。

1、左边固定，右边自适应布局的两种实现方式

效果图如下：

大屏展示：

小屏展示：

第一种实现方式通过负边距与浮动实现左边固定，右边自适应的布局。主要代码如下：

.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;}
设置子元素的margin,然后父元素必须浮动。用父元素包裹，主要是因为right会覆盖left，从而导致left内容不可以看到，如果直接在left上设置margin或者padding会导致布局变化，因此只能再用一个p包裹内容，并且去除right覆盖的宽度。
-margin必须大于或等于自身的宽度才会上移

实现过程中需要注意的是:

1.自适应的容器需要容器包裹住，否则容器内的内容会被覆盖。

2.right容器的负边距必须大于或等于自身的宽度才会上移。

3.如果right容器负边距等于自身的宽度它会靠右对齐，如果负边距等于-100%，则会靠左对齐。

第二种通过浮动布局来实现左边固定，右边自适应的布局

主要的代码如下：

.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;}}
左边固定宽度，右边自适应

实现过程中需要注意的是： 1. left需要脱离文档流，而right只需要正常显示就可以。

2.left只是覆盖在right上边，因此想要让right内容完整显示需要给right padding-left或者margin-left。

大屏展示：

小屏展示：

主要代码如下：

#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;}即左右固定，中间自适应，它可以利用margin-left为负数来实现，它的实现原理就是margin为负值可以改变float元素的排列位置
当多个元素同时从标准流中脱离开来时，如果前一个元素的宽度为100%宽度，后面的元素通过负边距可以实现上移。当负的边距超过自身的宽度将上移，只要没有超过自身宽度就不会上移

实现过程中需要注意:

1.中间自适应的p需要放在left和right容器前面并且内容p需要用父容器包裹

2.left和right容器向同一个方向浮动。

主要代码如下：

#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;}左右固定宽度并且向两边浮动，中间的p设置两边的margin
该方案有一个缺陷，在小屏幕情况下回导致right被挤下去，main没有了

实现过程中需要注意:

1.该方式只需要注意中间自适应的p需要放在left和right容器的后面。

2.left和right容器向两边浮动。

主要代码如下：

使用flex 实现“双飞翼布局”#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;}
flex 语法我参照了阮一峰关于flex语法介绍 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

如果未了解过flex布局请移至文末点击链接查看阮一峰大神写的关于flex语法

3、定位布局

这边就不絮絮叨叨的讲一些基础的css定位知识了（ps:不会的请自行到w3c官网查阅），我主要来讲解一下工作中遇到的坑。以免其他人和我一样掉入坑中。

第一：使用多个fixed时，注意自己需要基于什么定位，因为如果父级有用transform属性时，可能会导致子元素的fixed基于父元素容器定位，而不是基于body定位。效果如下：

在上图中我可以发现中间黑色的小框是基于父级来定位，并且宽度也基于父容器的50%。详细的请看下面代码：

    关于position的定位的坑    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;    }    -删除
            
            
                
提示
                是否删除该项,点击确定
                                    
                        确定                    
                                            取消                    
                
                +添加
                                    
                        你是我的小可爱                        关闭                    
                
            
        
    
    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"    }

如果我们尝试把父容器上的transform属性去除，我们可以看到子容器没有基于父容器定位，而是基于body定位的，宽度也是基于body给的50%宽度。效果图如下：

详细请看代码：

    关于position的定位的坑    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;    }    -删除
            
            
                
提示
                是否删除该项,点击确定
                                    
                        确定                    
                                            取消                    
                
                +添加
                                    
                        你是我的小可爱                        关闭                    
                
            
        
    
    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"    }

第二：解决在手机上的抖动问题（ps：这个问题我参照了网上大神写的一篇博客请移至文末查看）

**一、**在webkit内核浏览器中给fixed加上防抖样式 – webkit – transform: translateZ(0);

**二、**设置html 和body 的css {height:100%;overflow:auto;margin:0;} 这个影响全局样式不建议使用。

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

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的屏幕下使用的样式}

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

关于作者

程序猿签约作者

414.1K 文章

0 评论

2 粉丝

这个人很懒，什么都没有留下～

谈谈CSS中的几种选择器

上一篇 2025年12月24日 00:39:08

css3绘制圆形loading转圈动画

下一篇 2025年12月24日 00:39:27

用户投稿

修复Django电商项目中AJAX过滤产品列表图片不显示问题

在Django电商项目中，当使用AJAX动态加载过滤后的产品列表时，常遇到图片无法正常显示的问题。这通常是由于前端模板中图片加载方式（如data-setbg属性结合JavaScript库）与AJAX动态内容更新机制不兼容所致。解决方案是直接在AJAX返回的HTML中使用标准的标签来渲染图片，确保浏览…

程序猿
2026年5月10日
7000
用户投稿

css max-height属性怎么用

max-height 属性设置元素的最大高度。说明该属性值会对元素的高度设置一个最高限制。因此，元素可以比指定值矮，但不能比其高。不允许指定负值。注意：max-height 属性不包括外边距、边框和内边距。立即学习“前端免费学习笔记（深入）”；值描述none 默认。定义对元素被允许的最大高…

程序猿
2026年5月10日
1000
用户投稿

修复点击时按钮抖动：CSS垂直对齐实践

本文探讨了在Web开发中，交互式按钮（如播放/暂停按钮）在点击时发生意外垂直位移的问题。通过分析CSS样式变化对元素布局的影响，我们发现这是由于按钮不同状态下的边框样式和内边距改变，以及默认的垂直对齐行为共同作用所致。核心解决方案是利用CSS的vertical-align属性，将其设置为middle…

程序猿
2026年5月10日
1000
用户投稿

使用 Jupyter Notebook 进行探索性数据分析

Jupyter Notebook通过单元格实现代码与Markdown结合，支持数据导入（pandas）、清洗（fillna）、探索（matplotlib/seaborn可视化）、统计分析（describe/corr）和特征工程，便于记录与分享分析过程。 Jupyter Notebook 是进行探索性…

程序猿
2026年5月10日
0000
用户投稿

如何在HTML中插入表单元素_HTML表单控件与输入类型使用指南

HTML表单通过标签构建，包含action和method属性定义数据提交目标与方式，常用input类型如text、password、email等适配不同输入需求，配合label、required、placeholder提升可用性，结合textarea、select、button等控件实现完整交互，是…

程序猿
2026年5月10日
3000
用户投稿

前端缓存策略与JavaScript存储管理

根据数据特性选择合适的存储方式并制定清晰的读写与清理逻辑，能显著提升前端性能；合理运用Cookie、localStorage、sessionStorage、IndexedDB及Cache API，结合缓存策略与定期清理机制，可在保证用户体验的同时避免安全与性能隐患。前端缓存和JavaScript存…

程序猿
2026年5月10日
2000
用户投稿

JavaScript 动态菜单点击高亮效果实现教程

本教程详细介绍了如何使用 JavaScript 实现动态菜单的点击高亮功能。通过事件委托和状态管理，当用户点击菜单项时，被点击项会高亮显示（绿色），同时其他菜单项恢复默认样式（白色）。这种方法避免了不必要的DOM操作，提高了性能和代码可维护性，确保了无论点击方向如何，功能都能稳定运行。动态菜单高亮…

程序猿
2026年5月10日
2000
用户投稿

html5怎么画实线_HTML5用CSS border-style:solid画元素实线边框【绘制】

可通过CSS的border-style属性设为solid添加实线边框：一、内联样式用border:2px solid #000；二、内部样式表统一设置如div{border:1px solid #333}；三、外部CSS文件定义.my-box{border:3px solid red}并引入；四、单…

程序猿
2026年5月10日
4000
用户投稿

css如何禁止滚动条

css禁止滚动条的方法：1、完全隐藏，代码为【】；2、在不需要时隐藏，代码为【】；3、样式表方法。本教程操作环境：windows7系统、css3版，DELL G3电脑。 1、完全隐藏在里加入scroll=”no”，可隐藏滚动条；立即学习“前端免费学习笔记（深入）”；…

程序猿
2026年5月10日
0000
用户投稿

动态更新圆形进度条：JavaScript成绩计算器集成指南

本文档旨在指导开发者如何将JavaScript成绩计算系统与动态圆形进度条集成，实现可视化展示平均成绩。我们将详细讲解如何修改现有的JavaScript代码，使其在计算出平均分后，能够动态更新圆形进度条的进度，从而提供更直观的用户体验。本文档包含详细的代码示例和注意事项，帮助开发者轻松实现这一功能。…

程序猿
2026年5月10日
0000
用户投稿

React组件中动态属性值的管理与同步：利用状态实现受控组件

本教程旨在解决react组件中动态属性值同步使用的问题。我们将探讨如何利用react的`usestate` hook来管理组件内部状态，从而实现一个属性的值动态地影响另一个属性，并构建出可预测、易于维护的受控组件。文章将通过具体代码示例，详细阐述从初始化状态到处理状态更新的完整过程，并强调受控组件在…

程序猿
2026年5月10日
0000
用户投稿

如何讲html和css_讲解HTML与CSS结合使用基础【基础】

需将HTML与CSS结合使用以实现网页结构与样式的分离：HTML定义标题、段落等语义结构，CSS控制颜色、字体等外观；可通过内联样式、内部样式表或外部CSS文件引入样式，并利用类选择器和ID选择器精准应用。如果您希望网页不仅展示内容，还能具备基本的样式和结构布局，则需要将HTML与CSS结合使用。…

程序猿
2026年5月10日
1000
用户投稿

CSS伪元素与固定背景：移动友好的实现策略

本文深入探讨了如何利用CSS的::before伪元素、position: fixed和z-index属性，创建一种在移动设备上表现更稳定的全屏固定背景效果，以替代传统background-attachment: fixed可能存在的兼容性问题。教程将详细解析这些核心CSS概念及其在构建响应式布局中的…

程序猿
2026年5月10日
0000
用户投稿

JavaScript计算器开发：解决数值显示与初始化问题

本教程深入探讨了使用JavaScript构建计算器时常见的数值显示异常问题，特别是由于类属性未初始化导致的`Cannot read properties of undefined`错误。我们将详细分析问题根源，并通过在构造函数中调用初始化方法来解决该问题，同时优化显示逻辑，确保计算器功能稳定且界面显…

程序猿
2026年5月10日
0000
用户投稿

HTML表单如何实现PWA支持？怎样添加离线功能？

答案是利用Service Worker缓存资源并结合Background Sync API实现离线提交与自动同步。通过注册Service Worker缓存表单相关文件，拦截提交行为，将离线数据存入IndexedDB，并注册后台同步任务，待网络恢复后由Service Worker自动发送数据，确保提交…

程序猿
2026年5月10日
0000
CSS技巧：在复杂悬停效果中确保图像始终可见

本教程探讨如何在包含悬停效果的CSS卡片布局中，确保图像始终显示在最顶层而不被裁剪或遮挡。通过调整HTML结构，利用CSS的position和z-index属性，以及引入pointer-events，我们将解决图像被overflow: hidden和扩展叠加层遮盖的问题，实现复杂的视觉交互效果。在…

程序猿
2026年5月10日 • 用户投稿
0000
HTML文档如何工作？如何编辑HTML格式文件？

浏览器解析和渲染html的过程包括：1. 解析html构建dom树；2. 结合css构建渲染树；3. 布局计算元素位置；4. 绘制像素到屏幕。编辑html可使用记事本、vs code、sublime text等文本或代码编辑器，其中vs code因语法高亮、自动补全和插件生态成为主流选择。标准htm…

程序猿
2026年5月10日 • 用户投稿
1000
用户投稿

JavaScript 中使用多个 querySelector 更新页面元素

本文旨在讲解如何在 JavaScript 的 if 语句中使用多个 querySelector 来更新不同的页面元素，并提供示例代码和注意事项，帮助开发者理解并应用此技术。通过该方法，可以根据特定条件动态修改页面内容，提升用户体验。使用 querySelector 在 if 语句中更新多个元素在…

程序猿
2026年5月10日
1000
用户投稿

HTTP客户端请求缓存与重用优化

合理使用客户端缓存与连接复用可显著提升Web性能。通过Cache-Control、ETag和Last-Modified实现条件请求，避免重复传输；启用Keep-Alive并维护TCP连接池以减少握手开销；优先采用HTTP/2或HTTP/3实现多路复用与低延迟连接；针对静态资源设置长缓存，动态数据使用…

程序猿
2026年5月10日
1000
用户投稿

CodeIgniter在IIS环境下实现URL重写与index.php移除指南

本教程详细指导如何在IIS服务器上部署的CodeIgniter应用中，移除URL中不必要的index.php。核心解决方案涉及修改CodeIgniter的config.php文件，将$config[‘index_page’]设置为空，并辅以正确的IIS web.config重…

程序猿
2026年5月10日
1000

发表回复

登录后才能评论

浅谈css网页的布局问题

关于作者

相关推荐

发表回复