css使两个盒⼦并列_CSS布局经典问题初步整理
本⽂主要对 CSS 布局中常见的经典问题进⾏简单说明，并提供相关解决⽅案的参考链接，涉及到三栏式布局，负 margin，清除浮动，居中布局，响应式设计，Flexbox 布局，等等。
CSS 基础知识
下⾯⼏个⼊门教程不错：
幕课⽹ – HTML+CSS基础课程：偏基础，可以在线练习和预览
MDN – CSS⼊门教程: MDN 的官⽅⽂档
学习 CSS 布局：排版和配⾊特别舒服，简短但不深⼊，适合概览⼊门
CSS 定位问题
主要就是经典的绝对定位，相对定位问题。
10个⽂档学布局：通过⼗个例⼦讲解布局，主要涉及相对布局，绝对布局，浮动。
百度前端学院笔记 – 理解绝对定位：⽂章本⾝⼀般，⼏篇参考⽂献⽐较详细
HTML和CSS⾼级指南之⼆——定位详解（译⽂）：介绍浮动的使⽤，详细介绍定位的技巧，包括如何准确的给元素在 X 轴、Y 轴和Z 轴定位
三栏式布局
涉及浮动和清除浮动，主要讲解“圣杯”和“双飞翼”两种解决⽅法。这两种⽅法实现的都是三栏布局，两边的盒⼦宽度固定，中间盒⼦⾃适应，它们实现的效果是⼀样的，差别在于其实现的思想。
圣杯布局
圣杯：⽗盒⼦包含三个⼦盒⼦（左，中，右）
中间盒⼦的宽度设置为 width: 100%; 独占⼀⾏；
使⽤负边距(均是 margin-left)把左右两边的盒⼦都拉上去和中间盒⼦同⼀⾏；
.left {margin-left:-100%;} 把左边的盒⼦拉上去
.right {margin-left：-右边盒⼦宽度px;} 把右边的盒⼦拉上去
⽗盒⼦设置左右的 padding 来为左右盒⼦留位置；
对左右盒⼦使⽤相对布局来占据 padding 的空⽩，避免中间盒⼦的内容被左右盒⼦覆盖；
<!-- 圣杯的 HTML 结构 --> <div
<div class="middle" >>中间弹性区
<div class="container" >><!-- 中间的 div 必须写在最前⾯ --> <div
<div class="right" >>右边栏 </div>
</div>
css固定定位</div> </div>
</div> <div
</div>
</div> <div
<div class="left" >>左边栏 </div>
双飞翼布局
双飞翼：⽗盒⼦包含三个⼦盒⼦（左，中，右），中间的⼦盒⼦⾥再加⼀个⼦盒⼦。
中间盒⼦的宽度设置为 width: 100%; 独占⼀⾏；
使⽤负边距(均是 margin-left)把左右两边的盒⼦都拉上去和中间盒⼦同⼀⾏；
在中间盒⼦⾥⾯再添加⼀个 div，然后对这个 div 设置 margin-left 和 margin-right来为左右盒⼦留位置；
<!-- 双飞翼的 HTML 结构 --> <div
<div class="middle" >> <div
<div
<div class="container" >><!-- 中间的 div 必须写在最前⾯ --> <div
</div> <div
</div>
<div class="right" >>右边栏 </div>
<div class="left" >>左边栏 </div>
class="middle-inner" >>中间弹性区 </div>
</div> </div>
</div> <div
</div>
圣杯和双飞翼异同
圣杯布局和双飞翼布局解决的问题是⼀样的，都是两边定宽，中间⾃适应的三栏布局，中间栏要在放在⽂档流前⾯以优先渲染。
两种⽅法基本思路都相同：⾸先让中间盒⼦ 100% 宽度占满同⼀⾼度的空间，在左右两个盒⼦被挤出中间盒⼦所在区域时，使⽤margin-left 的负值将左右两个盒⼦拉回与中间盒⼦同⼀⾼度的空间。接下来进⾏⼀些调整避免中间盒⼦的内容被左右盒⼦遮挡。
主要区别在于 如何使中间盒⼦的内容不被左右盒⼦遮挡：
圣杯布局的⽅法：设置⽗盒⼦的 padding 值为左右盒⼦留出空位，再利⽤相对布局对左右盒⼦调整位置占据 padding 出来的空位；
双飞翼布局的⽅法：在中间盒⼦⾥再增加⼀个⼦盒⼦，直接设置这个⼦盒⼦的 margin 值来让出空位，⽽不⽤再调整左右盒⼦。简单说起来就是双飞翼布局⽐圣杯布局多创建了⼀个 div，但不⽤相对布局了，少设置⼏个属性。
利⽤浮动实现
我⾃⼰使⽤浮动也实现了三栏式布局：左边盒⼦左浮动，右边盒⼦右浮动，中间盒⼦利⽤ margin-left 和 margin-right 来为左右盒⼦留位置，同时⽗盒⼦设置 overflow: auto; 来避免⼦盒⼦溢出。
<!-- 浮动实现的 HTML 结构 --> <div
<div class="right" >>右边栏
</div> <div
<div class="left" >>左边栏 </div>
<div class="container" >> <div
</div> </div>
</div>
<div class="middle" >>中间弹性区 </div>
</div> <!-- 中间的 div 必须写在最后⾯ --> <div
</div>
三栏式布局参考下⾯⼏个链接:
CSS三栏布局——中间固定两边⾃适应宽度： w3cplus 的⽂章，使⽤了双飞翼和浮动实现两侧定宽、中间⾃适应，也实现了两侧⾃适应、中间定宽
简书 – 圣杯布局和双飞翼布局（前端⾯试必看）：只讲了圣杯，不过特别详细
In Search of the Holy Grail：圣杯布局的来源
百度前端学院笔记 – 三栏式布局之双飞翼与圣杯：百度前端学院学员的前端学习笔记
三栏式布局涉及到负 magin 和 清除浮动的问题。
负 magin
这⾥引出了“负 margin”的问题：
负margin⽤法权威指南：The Definitive Guide to Using Negative Margins 的译⽂，介绍了负 magin 的⼀些性质和很多实⽤技巧简书 – margin为负值产⽣的影响和常见布局应⽤：包括对⾃⾝的影响，对⽂档流的影响，以及⼀些在布局中的应⽤技巧(⽐如去除列表右边框，负边距+定位实现⽔平垂直居中，去除列表最后⼀个 li 元素的 border-bottom，多列等⾼)
博客园 – CSS布局奇淫巧计之-强⼤的负边距：和上⽂内容差不多
简单总结⼏点：
不使⽤ float 的话，负 margin 元素是不会破坏页⾯的⽂档流。所以如果你使⽤负 margin 上移⼀个元素，所有跟随的元素都会被上移(⽽ relative 定位的元素则不同，会保留原位置，影响⽂档流)。
当 static 元素的 margin-top/margin-left 被赋予负值时，元素将被拉进指定的⽅向。
如果你设置 margin-bottom/right 为负数，元素并不会如你所想的那样向下/右移动，⽽是将后续的元素拖拉进来，覆盖本来的元素。
当元素不存在 width 属性或者 width: auto 的时候，负 margin 会增加元素的宽度.
margin-top 为负值不会增加⾼度，只会产⽣向上位移;margin-bottom 为负值不会产⽣位移，会减少⾃⾝的供 CSS 读取的⾼度，影响下⽅的元素位置；上下相邻的元素两者均为负时，效果不叠加，取负值更多的那个效果。
清除浮动
清除浮动主要是为了解决⾼度塌陷问题。⽽简单的 clear: both 并不能解决这个问题，所以引出了许多解决⽅案。
StackOverflow – What methods of ‘clearfix’ can I use?：清除浮动⿊科技完整解读
那些年我们⼀起清除过的浮动：神⽂，把“清除浮动”定义为“闭合浮动”，把问题由来和解决⽅案都讲清楚了，并且分析了各种解决⽅案的优劣。
各种解决⽅案在上⾯的链接⾥有很详细的说明了，这⾥就不赘述了。⼤体分为两类：
其⼀，通过在浮动元素的末尾添加⼀个空元素，设置 clear: both 属性，after 伪元素其实也是通过 content 在元素的后⾯⽣成了内容为⼀个点的块级元素；
其⼆，通过设置⽗元素 overflow 或者 display: table 属性来闭合浮动
顺便补充⼀句，clear float(例如 clear: left) 是对某个元素设置，以避免其某⼀边有浮动元素，即对当前元素产⽣约束，约束的边界为其他的浮动元素。对于已经浮动的元素，设置 clear float 是⽆效的。
居中布局
Centering in CSS: A Complete Guide：⾮常全⾯的居中定位博客，包括各种情况下的⽔平居中，垂直居中和⽔平垂直居中⽅案。有展⽰⽰例及相应的 HTML 和 CSS 代码
⽂章⼤致结构：
⽔平居中
对于⾏内元素(inline)：text-align: center;
对于块级元素(block)：设置宽度且 marigin-left 和 margin-right 是设成 auto
对于多个块级元素：对⽗元素设置 text-align: center;，对⼦元素设置 display: inline-block;；或者使⽤ flex 布局垂直居中
对于⾏内元素(inline)
单⾏：设置上下 pandding 相等；或者设置 line-height 和 height 相等
多⾏：设置上下 pandding 相等；或者设置 display: table-cell; 和 vertical-align: middle;；或者使⽤ flex 布局；或者使⽤
伪元素
对于块级元素(block)：下⾯前两种⽅案，⽗元素需使⽤相对布局
已知⾼度：⼦元素使⽤绝对布局 top: 50%;，再⽤负的 margin-top 把⼦元素往上拉⼀半的⾼度
未知⾼度：⼦元素使⽤绝对布局 position: absolute; top: 50%; transform: translateY(-50%);
使⽤ Flexbox：选择⽅向，justify-content: center;
⽔平垂直居中
定⾼定宽：先⽤绝对布局 top: 50%; left: 50%;，再⽤和宽⾼的⼀半相等的负 margin 把⼦元素回拉
⾼度和宽度未知：先⽤绝对布局 top: 50%; left: 50%;，再设置 transform: translate(-50%, -50%);
使⽤ Flexbox：justify-content: center; align-items: center;
响应式设计
“响应式设计（Responsive Design)” 是⼀种让⽹站针对不同的浏览器和设备“呈现”不同显⽰效果的策略。媒体查询(Media Queries)是做此事所需的最强⼤的⼯具。
注： Responsive Web Design ＝ RWD，Adaptive Web Design ＝ AWD
RWD：
采⽤ CSS 的 media query 技术
流体布局（fluid grids）
⾃适应的图⽚/视频等资源素材
（为⼩、中、⼤屏幕做⼀些优化，⽬的是让任何尺⼨的屏幕空间都能得到充分利⽤）
AWD：
CSS media query 技术（仅针对有限⼏种预设的屏幕尺⼨设计）
⽤ JavaScript 来操作 HTML 内容
在服务器端操作 HTML 内容（⽐如为移动端减少内容，为桌⾯端提供更多内容）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。