CSS各种布局和技巧

2019-06-04 本文已影响0人 WlSE

本文主要参考CSS 布局经典问题初步整理, 还有一些自己的看法.

左右布局

float和负margin,在一个容器中有两个子元素, 第一个子元素左浮动, 第二个子元素, margin: -第一个子元素的宽度
用绝对定位和margin: 还是一个容器中两个子元素, 第一个绝对定位, 宽度可以定死, 然后第二个元素的margin-left: 就是第一个元素的嗯宽度;

左中右布局

常用双飞翼布局和圣杯布局, 圣杯布局和双飞翼布局解决的问题是一样的，都是两边定宽，中间自适应的三栏布局

圣杯布局

父盒子包含三个子盒子（左，中，右）

三个子元素都浮动
中间盒子的宽度设置为 width: 100%; 独占一行；
使用负边距(均是margin-left)把左右两边的盒子都拉上去和中间盒子同一行；
- .left {margin-left:-100%;} 把左边的盒子拉上去
- .right {margin-left：-右边盒子宽度px;} 把右边的盒子拉上去
父盒子设置左右的 padding 来为左右盒子留位置
然后左右两个盒子需要是使用相对定位, 去占据 padding空出来的位置,避免中间盒子的内容被左右盒子覆盖；

<!-- 圣杯的 HTML 结构 -->
<div class="container">
    <!-- 中间的 div 必须写在最前面 -->
    <div class="middle">中间弹性区</div>
    <div class="left">左边栏</div>
    <div class="right">右边栏</div>
</div>

演示jsbin

双飞翼布局

父盒子包含三个子盒子（左，中，右），中间的子盒子里再加一个子盒子。

中间盒子的宽度设置为 width: 100%; 独占一行；
使用负边距(均是 margin-left)把左右两边的盒子都拉上去和中间盒子同一行；
在中间盒子里面再添加一个 div，然后对这个 div 设置 margin-left 和 margin-right来为左右盒子留位置；

<!-- 双飞翼的 HTML 结构 -->
<div class="container">
    <!-- 中间的 div 必须写在最前面 -->
    <div class="middle">
         <div class="middle-inner">中间弹性区</div>
    </div>
    <div class="left">左边栏</div>
    <div class="right">右边栏</div>
</div>

演示jsbin

圣杯和双飞翼异同

圣杯布局和双飞翼布局解决的问题是一样的，都是两边定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。

两种方法基本思路都相同：三栏全部 float 浮动。首先让中间盒子 100% 宽度占满同一高度的空间，在左右两个盒子被挤出中间盒子所在区域时，使用 margin-left 的负值将左右两个盒子拉回与中间盒子同一高度的空间。接下来进行一些调整避免中间盒子的内容被左右盒子遮挡。
主要区别在于如何使中间盒子的内容不被左右盒子遮挡：
- 圣杯布局的方法：设置父盒子的 padding 值为左右盒子留出空位，再利用相对布局对左右盒子调整位置占据 padding 出来的空位；
- 双飞翼布局的方法：在中间盒子里再增加一个子盒子，直接设置这个子盒子的 margin 值来让出空位，而不用再调整左右盒子。

简单说起来就是双飞翼布局比圣杯布局多创建了一个 div，但不用相对布局了，少设置几个属性。

浮动实现三联布局

我自己使用浮动也实现了三栏式布局：左边盒子左浮动，右边盒子右浮动，中间盒子利用 margin-left 和 margin-right 来为左右盒子留位置，同时父盒子设置 overflow: auto; 来避免子盒子溢出。

<!-- 浮动实现的 HTML 结构 -->
<div class="container">
    <div class="left">左边栏</div>
    <div class="right">右边栏</div>
    <!-- 中间的 div 必须写在最后面 -->
    <div class="middle">中间弹性区</div>
</div>

水平居中

对于行内元素(inline): text-align: center
对于块级元素(block): 设置宽度且 margin-left 和margin-right设置为auto
对于多个块级元素: 对父元素设置 text-align: center ,对子元素设置 display: inline-block
多个块级元素(flex) , 父元素设置 display: flex; justify-content: center

垂直居中

对于行内元素(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;

其他技巧

用浮动的时候, 需要clearfix清除浮动, 记住:

.clearfix::after{
    content:'';
    display: block;
    clear:both
}

把浮动元素的父级加上clearfix这个类, 就能做到没有副作用的清楚浮动.

注意:

浏览器默认font-size: 16px
text-decoration: 属性可以有两个值: 第一个是形式, 第二个是样式,如: line-through red 字体中间红色的线
所有的元素都可以是行内元素,也可以说内联元素. 默认的都是浏览器厂商默认给的
选择器优先级原则: 越精确越大
color:可以继承
文字的word-break: break-all 全部都可以打断
一般来说, 内联元素可以说高度由line-height决定, 字体大小小于行高
上下margin在 inline-block 的情况下不合并
不到情不得已不要设置高度.
css中文档的纵向优先级, 设置position: relative; 比普通流的要靠前
span不设置display:inline-block是无法使margin-bottom生效的
行内元素不设置display:inline-block是无法使用padding-top 撑开
display:inline-block 会出现 bug, 底部的会有空隙, 需要加 vertical-align: top; (记住)

元素高度由什么决定

由内容决定 div高度由其内部文档流元素的高度总和决定(决定不是相等)

文档流: 文档内元素的流动方向, 行内元素从左到右, 块级元素从上到下.