备案控制台
开发者社区 开发与运维 文章 正文

CSS布局解决方案（终结版） 下

2022-05-06 106
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： CSS布局解决方案（终结版） 下

不定宽+自适应

1）使用float+overflow（1）原理、用法

  • 原理：这种情况与两列定宽查不多。
  • 用法：先将左框设置为float:left、margin-right:px，再设置右框overflow: hidden，最后设置左框中的内容width: px。

（2）代码实例

<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>
.left{
        float: left;
        margin-right: 20px;
    }
.right{
    overflow: hidden;
}
.left p{
    width: 200px;
}

（3）优缺点

  • 优点:简单
  • 缺点:ie6下兼容性存在一定问题

2）使用table（1）原理、用法

  • 原理：通过将父框改变为表格，将左右框转换为类似于同一行的td以达到多列布局，设置父框宽度100%，给左框子元素一个固定宽度从而达到自适应。
  • 用法：先将父框设置为display: table、width: 100%，再设置左、右框display: table-cell，最后设置左框width: 0.1%、padding-right: px以及左框中的内容width: px。

（2）代码实例

<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>
.parent{
    display: table; width: 100%;
    }
.left,.right{
    display: table-cell;
}
.left{
    width: 0.1%;
    padding-right: 20px;
}
.left p{
    width:200px;
}

（3）优缺点

  • 缺点:ie6 ie7不支持

3）使用flex（1）原理、用法

  • 原理：通过设置CSS3布局利器flex中的flex属性以达到多列布局，加上给左框中的内容定宽、给右框设置flex达到不定款+自适应。
  • 用法：先将父框设置为display:flex，再设置右框flex:1，最后设置左框margin-right:20px、左框中的内容width: *px。

（2）代码实例

<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>
.parent {
    display:flex;
}
.left {
    margin-right:20px;
}
.right {
    flex:1;
}
.left p{
    width: 200px;
}

（3）优缺点

  • 优点:flex很强大
  • 缺点:兼容性存在一定问题，性能存在一定问题

两列不定宽+一列自适应

（1）原理、用法

  • 原理：这个情况与一列不定宽+一列自适应查不多。
  • 用法：先将左、中框设置为float:left、margin-right:px，再设置右框overflow:hidden，最后给左中框中的内容设置width: *px。

（2）代码实例

<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="center">
        <p>center</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>
.left,.center{
    float: left;
    margin-right: 20px;
}
.right{
    overflow: hidden;
}
.left p,.center p{
    width: 100px;
}

等分布局

公式转化:c = w n + g (n-1) -> c = w n + g n - g -> c + g = （w + g） * n

因此，我们需要解决两个问题：1.如何让总宽度增加g(即：c+g)，2.如何让每个宽包含g（即：w+g）

1）使用float（1）代码实例

<div class="parent">
    <div class="column"><p>1</p></div>
    <div class="column"><p>2</p></div>
    <div class="column"><p>3</p></div>
    <div class="column"><p>4</p></div>
</div>
.parent{
    margin-left: -20px;//c增加g
}
.column{
    float: left;
    width: 25%;
    padding-left: 20px;
    box-sizing: border-box;//包含padding区域 w+g
}

（2）优缺点

  • 优点：兼容性较好
  • 缺点：ie6 ie7百分比兼容存在一定问题

2）使用table（1）代码实例

<div class="parent-fix">
    <div class="parent">
        <div class="column"><p>1</p></div>
        <div class="column"><p>2</p></div>
        <div class="column"><p>3</p></div>
        <div class="column"><p>4</p></div>
    </div>
</div>
.parent-fix{
    margin-left: -20px;//c+g
}
.parent{
    display: table;
    width:100%;
    table-layout: fixed;
}
.column{
    display: table-cell;
    padding-left: 20px;//w+g
}

（2）优缺点

  • 优点：结构和块数无关联
  • 缺点：增加了一层

3）使用flex（1）代码实例

<div class="parent">
    <div class="column"><p>1</p></div>
    <div class="column"><p>2</p></div>
    <div class="column"><p>3</p></div>
    <div class="column"><p>4</p></div>
</div>
.parent{
    display: flex;
}
.column{
    flex: 1;
}
.column+.column{
    margin-left:20px;
}

（2）优缺点

  • 优点：代码量少，与块数无关
  • 缺点：兼容性存在一定问题

定宽+自适应+两块高度一样高

1）使用table（1）代码实例

<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>
.parent {
    display:table;
    width:100%;
    table-layout:fixed;
}
.left {
    width:100px;
    padding-right:20px;
}
.right,.left {
    display:table-cell;
}

2）使用flex

<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>
.parent {
    display:flex;
}
.left {
    width:100px;
    margin-right:20px;
}
.right {
    flex:1;
}

3）使用float（1）代码实例

<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>
p{
    background: none!important;
}
.left,.right{
    background: #444;
}
.parent{
    overflow: hidden;
}
.left,.right{
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}
.left{
    float: left; width: 100px;
    margin-right: 20px;
}
.right{
    overflow: hidden;
}

(2)优缺点

  • 优点：兼容性好
  • 缺点：伪等高，不是真正意义上的等高

全屏布局

全屏布局的特点

  • 浏览器变大时，撑满窗口
  • 滚动条不是全局滚动条，而是出现在内容区域里，往往是主内容区域

全屏平局的方法

1）使用position

（1）代码实例

<div class="parent">
    <div class="top">top</div>
    <div class="left">left</div>
    <div class="right">
        <div class="inner">right</div>
    </div>
    <div class="bottom">bottom</div>
</div>
html,body,.parent{
    margin:0;
    height:100%;
    overflow:hidden;
}
body{
    color:white;
}
.top{
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:100px;
    background:blue;
}
.left{
    position:absolute;
    left:0;
    top:100px;
    bottom:50px;
    width:200px;
    background:red;
}
.right{
    position:absolute;
    left:200px;
    top:100px;
    bottom:50px;
    right:0;
    background:pink;
    overflow: auto;
}
.right .inner{
    min-height: 1000px;
}
.bottom{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:50px;
    background: black;
}

(2)优缺点

  • 优点：兼容性好，ie6下不支持

2）使用flex（1）代码实例

<div class="parent">
    <div class="top">top</div>
    <div class="middle">
        <div class="left">left</div>
        <div class="right">
            <div class="inner">right</div>
        </div>
    </div>
    <div class="bottom">bottom</div>
</div>
html,body,.parent{
    margin:0;
    height:100%;
    overflow:hidden;
}
body{
    color: white;
} 
.parent{
    display: flex;
    flex-direction: column;
}
.top{
    height:100px;
    background: blue;
}
.bottom{
    height:50px;
    background: black;
}
.middle{
    flex:1;
    display:flex;
}
.left{
    width:200px;
    background: red;
}
.right{
    flex: 1;
    overflow: auto;
    background:pink;
}
.right .inner{
    min-height: 1000px;
}

(2)优缺点

  • 缺点：兼容性差，ie9及ie9以下不兼容

3）使用flex（1）代码实例

<div class="parent">
    <div class="top">top</div>
    <div class="middle">
        <div class="left">left</div>
        <div class="right">
            <div class="inner">right</div>
        </div>
    </div>
    <div class="bottom">bottom</div>
</div>
html,body,.parent{
    margin:0;
    height:100%;
    overflow:hidden;
}
body{
    color:white;
} 
.parent{
    display:flex;
    flex-direction:column;
}
.top{
    background:blue;
}
.bottom{
    background:black;
}
.middle{
    flex:1;
    display:flex;
}
.left{
    background: red;
}
.right{
    flex:1;
    overflow:auto;
    background: pink;
}
.right .inner{
    min-height:1000px;
}

全屏布局的小结

方案 兼容性 性能 自适应
Position 好 好 部分自适应
Flex 较差 差 可自适应
Grid 差 较好 可自适应

当然，最最最最最后，如果您喜欢这片文章，可以疯狂点赞或者收藏喔！！😯

文章标签：
前端开发
关键词：
CSS布局
CSS解决方案
CSS布局解决方案
王平安
目录
相关文章
wscwdie
|
2天前
|
前端开发 开发者 UED
解锁网页布局的秘密武器：探索 CSS Grid 布局的神奇魔力
解锁网页布局的秘密武器：探索 CSS Grid 布局的神奇魔力
wscwdie
21 3
桃李春风一杯酒
|
2天前
|
UED 开发者 容器
【专栏】Flexbox是CSS3的全新布局模式，提供灵活响应式的页面设计
【4月更文挑战第27天】Flexbox是CSS3的全新布局模式，提供灵活响应式的页面设计。其特点包括灵活性、响应式和易理解，通过主轴和交叉轴控制元素排列对齐。核心概念有容器和项目，常用于导航栏、卡片布局、响应式设计、表格和表单布局。关键属性如flex-direction定义主轴方向，justify-content和align-items控制对齐，flex属性调整项目伸缩，order改变排序。在实践中，要关注响应式、代码维护和浏览器兼容性，以优化布局和用户体验。
桃李春风一杯酒
43 4
桃李春风一杯酒
|
2天前
|
前端开发 UED
【专栏：HTML与CSS实战项目篇】创建一个具有复杂布局的电商详情页
【4月更文挑战第30天】构建复杂布局的电商详情页涉及页面结构规划、样式设计和交互效果实现。首先规划顶部导航栏、商品图片展示区、商品信息区、用户评价区和相关商品推荐区。在样式设计上，注重色彩搭配、字体选择、布局与间距及图片处理。交互效果包括图片放大、添加到购物车按钮、滚动监听和评论互动，以提升用户体验。实际开发中需考虑跨设备兼容性和用户体验优化。
桃李春风一杯酒
36 5
桃李春风一杯酒
|
2天前
|
编解码 缓存 前端开发
【专栏：HTML与CSS移动端开发篇】移动端网页布局与适配
【4月更文挑战第30天】本文探讨了如何使用HTML和CSS优化移动端网页布局与适配，强调响应式设计、灵活布局和媒体查询的重要性。针对移动设备的屏幕尺寸、操作方式、网络速度和性能差异，提出了断点选择、触摸优化、图像和性能优化等最佳实践。测试和调试、框架工具的应用也是关键步骤，以确保在多设备上提供优秀用户体验。开发者需持续学习新趋势和工具，以适应移动端发展。
桃李春风一杯酒
39 2
桃李春风一杯酒
|
2天前
|
前端开发 UED 容器
【专栏：CSS进阶篇】CSS Grid布局：构建复杂的二维布局
【4月更文挑战第30天】CSS Grid布局是二维布局系统，适用于复杂页面结构，如页眉、主体和侧边栏。通过定义网格线和单元格，能轻松创建行和列。基本语法包括设置容器为grid容器，定义`grid-template-rows`和`grid-template-columns`。高级特性包括命名网格线、网格区域、网格间隙、重复网格线和自动填充。在实际应用中，CSS Grid能有效提升开发效率和用户体验，尤其在响应式设计和复杂布局场景下。
桃李春风一杯酒
24 0
桃李春风一杯酒
|
2天前
|
前端开发 开发者 容器
【专栏：CSS进阶篇】CSS Flexbox布局：实现灵活的响应式设计
【4月更文挑战第30天】CSS Flexbox是现代网页设计中创建响应式布局的关键工具，它提供了一种一维布局模型，使元素能灵活适应各种屏幕尺寸。通过设置容器的`display`属性为`flex`，开发者可以利用主轴和交叉轴调整元素排列和对齐方式。核心概念包括弹性项、伸缩性、空间分配和对齐。通过实例，如导航栏、卡片布局、图片画廊和响应式表单，展示了Flexbox在实现响应式设计中的应用。尽管需要注意浏览器兼容性，但掌握Flexbox能帮助开发者构建出功能强大且适应性强的界面。
桃李春风一杯酒
19 0
桃李春风一杯酒
|
2天前
|
前端开发 开发者 容器
【专栏：CSS基础篇】CSS定位与布局：从静态到浮动、定位
【4月更文挑战第30天】本文介绍了CSS定位与布局的基础，包括静态、相对、绝对、固定定位以及浮动。静态定位遵循HTML顺序，相对定位可在正常位置基础上偏移，不占用额外空间。绝对定位基于最近已定位祖先元素定位，脱离文档流。固定定位相对于浏览器窗口定位，无视页面滚动。浮动用于文字环绕图片等，可能导致父元素高度塌陷。Flexbox布局提供更灵活的元素排列和对齐方式，适配各种复杂布局需求。理解并掌握这些布局技术能提升网页设计的灵活性和响应性。
桃李春风一杯酒
18 0
桃李春风一杯酒
|
2天前
|
前端开发
【专栏：CSS基础篇】CSS盒模型：理解网页布局的核心
【4月更文挑战第30天】CSS盒模型是网页布局关键，将HTML元素视为内容、内边距、边框和外边距的矩形。内容决定元素大小，padding增加内部空间，border设置线条样式，margin控制元素间距。理解盒模型及其计算方式（内容+padding+border+margin）有助于布局设计。通过调整相关属性，实现浮动、Flexbox或定位布局，创建响应式网页。
桃李春风一杯酒
20 0
程序员-刘华强
|
2天前
|
前端开发
CSS弹性布局justify-content的用法
CSS弹性布局justify-content的用法
程序员-刘华强
17 0
桃李春风一杯酒
|
2天前
|
前端开发 UED 开发者
【专栏】探讨了CSS3动画卡顿的原因，包括复杂动画效果、过多元素参与、低效代码结构和硬件资源限制，并提出优化措施
【4月更文挑战第29天】本文探讨了CSS3动画卡顿的原因，包括复杂动画效果、过多元素参与、低效代码结构和硬件资源限制，并提出优化措施：简化动画路径、控制元素数量、优化代码结构、利用硬件加速及性能监测。通过实际案例展示了优化效果，强调了性能优化对提升用户体验的重要性。在开发中，应持续关注并优化动画性能，以适应网页应用的需求。
桃李春风一杯酒
28 1

热门文章

最新文章

  • 1
    局域网管理软件的前端设计与实现：HTML/CSS在网络拓扑展示中的应用
  • 2
    【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果（下）
  • 3
    《CSS 简易速速上手小册》第9章：CSS 最佳实践（2024 最新版）
  • 4
    【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果（上）
  • 5
    前端 富文本编辑器原理——从javascript、html、css开始入门（一）
  • 6
    《CSS 简易速速上手小册》第10章：未来的 CSS（2024 最新版）
  • 7
    《CSS 简易速速上手小册》第7章：CSS 预处理器与框架（2024 最新版）
  • 8
    《CSS 简易速速上手小册》第3章：CSS 响应式设计（2024 最新版）
  • 9
    《CSS 简易速速上手小册》第5章：CSS 动画与过渡（2024 最新版）
  • 10
    【CSS进阶】巧用伪元素before和after制作绚丽效果（上）
  • 1
    会员项目定价卡css3特效
    16
  • 2
    CSS3病毒病原体图形特效
    13
  • 3
    前端的CSS选择器
    24
  • 4
    CSS清除浮动的八种方法
    36
  • 5
    CSS之弹性盒子Flexible Box
    35
  • 6
    CSS水平居中与垂直居中的方法
    22
  • 7
    CSS关于默认宽度
    11
  • 8
    CSS画三角形(三种方法)
    19
  • 9
    CSS背景background八种属性
    24
  • 10
    CSS显示隐藏的三种方法
    17

    • 相关课程

    更多
  • CSS 快速掌握
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 场景实践 -新手玩转云计算制作一个浪漫的表白网页

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • 《优酷响应式布局技术全解析》
  • 天猫HTML5互动技术实践

    • 相关实验场景

    更多
  • CSS基础教程
  • 前端开发基础3：CSS3常见显示属性
    • 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考