CSS布局基础

前言

本文的阅读对象主要是针对CSS零基础的设计与测试人员，帮助学习者快速了解一些CSS基础布局，有助于与开发进行良好的协作与沟通。

这里挑选了三个板块的内容进行阐述：盒模型、块级元素与行内元素、基础布局。每一个元素都是一个盒模型，因此我们有必要了解盒模型的结构。盒模型中的元素种类大致又分为块级元素和行内元素，还有一种类型是行内块元素，因特点是前两者的一个综合与前两者类似，这里就不再赘述。一个个的盒模型通过布局构建出了整个页面，了解基础的布局有助于设计出开发更想要的一个页面。

一、盒模型

页面中的每一个元素都被看做一个矩形盒子。它包括：外边距、边框、内边距以及实际的内容。

boxmodel.gif

Content(内容) - 盒子的内容区域，显示文本和图像的地方。

在CSS默认情况下，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素的总尺寸。如果想让设置的宽度是盒子的总宽度，可以通过box-sizing属性来设置，本文不针对开发，就此略过。

Padding(内边距) - 清除内容周围的区域，内边距是透明的。用于分隔内容，使内容不会散布到边框边界。

内边距就好比是快递盒中的泡沫，将我们购买的物品与箱子隔开，如果没有内边距，想象一下内容就会紧紧贴着边框，这对于没有边框的元素可能看起来没有太大问题，但是如果是一些有边框的元素，比如说一个按钮，没有内边距，边框死死框着按钮文字，这一定不是一个美观的按钮。

Border(边框) - 围绕在内边距和内容外的边框。位于内边距外侧，可以是实线、虚线、点划线等等，也可以只设置上下左右其中一边或多边。

边框的作用可不是仅仅只用来画边框，比如分割线，气泡上的小三角都可以用边框来绘制。

Margin(外边距) - 清除边框外的区域，外边距是透明的。围绕在盒子的可见区域外的透明区域，用于控制各个元素间的距离。

相邻两个元素之间的距离就是依靠外边距设置的（当然对于没有边框的元素用内边距设置也行），每个元素都是一个盒模型，都有外边距，那两个相邻元素都有外边距会怎样呢，它们之间的间距会是二者之和吗？水平方向上是这样的，垂直方向上存在一个外边距合并的特性，垂直方向上最终的间距会是两个外边距中较大的那一个。

二、块级元素和行内元素

了解元素类型之前，先说说元素的排布方式，这就涉及到CSS标准文档流。

文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。自上而下分成一行行，并在每行中从左至右的顺序排放元素。

文档流的方向是可以改变的，但是这个方向正好就是我们习惯的阅读方式，我们没有理由去改变它，这一特性是为某些国家阅读习惯可能不是从左到右而设计的。

文档流.png

块级元素

• 块级元素独自占一行且宽度会占满父元素宽度。
• 能够设置高度和宽度。
• 常见的块级元素：<div> <p> <form> <ul> <ol> <li>等。

块级元素.png

行内元素

• 行内元素不会独占一行，相邻行内元素可以排在同一行。
• 不能设置高度和宽度，设置了没有效果，默认宽度就是文字的宽度。但是高度可以通过另一个属性设置，下文会讲到的行高。
• 常见的行内元素：<span> <i> <button> <em> <strong>等。

行内元素.png

基线

行内元素有四条线，顶线、中线、基线和底线。那这里为什么标题是基线而不是其它的线呢？

在CSS中，行内元素的默认对齐方式是基线对齐，当同一行的文字大小不一致时，基线对齐就是下图中的一个效果，蓝色的线就是基线。

行高.png

另外，基线与行高有关。

行高 line-height

line-height 属性设置行高，不能使用负值。它定义了该元素中基线之间的最小距离而不是最大距离。

在没有内外边距时，我们通常认为行高和字体大小之差为行距。

行距.gif

单行文字之所可以实现近似垂直居中原因在于CSS中“行距上下等分机制”，说是近似居中是因为文字字形的垂直中线位置普遍要比真正的“行框盒子”的垂直中线位置低。

多行文本垂直居中需要借助vertical-align: middle实现。

CSS部分

.box {
    line-height: 120px;
    background-color: #f0f3f9;
}
.content {
    display: inline-block;
    line-height: 20px;
    margin: 0 20px;
    vertical-align: middle;
}

HTML部分

<div class="box">
    <div class="content">基于行高实现的多行文字垂直居中</div>
</div>

为什么有的时候图片与文字同行的时候，图片底部与文字底部没有对齐呢，原因在于图片是替换元素，通过修改某个属性值呈现的内容就可以被替换的元素成为替换元素。例如：<img>、<object>、<video>、<iframe>、<input>、<textarea>，这是因为替换元素的基线为元素下边缘，而非替换元素的下边缘是底线，对应bottom值，因此会造成这样的一个效果。

图片与基线.png

对齐方式 vertical-align

上面提到了CSS中一个重要的属性对齐方式，vertical-align是设置元素的垂直对齐方式，没有继承性，默认值为baseline基线对齐,vertical-align只能应用于行内元素和dispaly属性值为table-cell的元素，像使用了浮动和绝对定位属性的元素，导致display属性计算值为block，vertical-align也不会起作用。

像上图中文字与图片底部不对齐的问题使用vertical-align属性即可解决。

取值：top | middle | baseline | bottom | text-top | text-bottom

三、基础布局

这里主要叙述一下通常的几种布局方式，通过定位布局、使用浮动进行布局（一般不会使用，浮动比较魔鬼）以及弹性盒布局。

1.定位 position

• 静态定位 static

  HTML 元素默认情况下的定位方式为 static（静态）。

  静态定位的元素不受 top、bottom、left 和 right 属性的影响。

  position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位。

• 相对定位 relative

  元素相对于其默认位置进行定位。

  设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。

  设置了position: relative;的元素仍会在文档流中占用初始的空间。

相对定位.png

.relative-box {
  position: relative;
  left: 20px;
  top: 20px;
}

• 绝对定位 absolute

  元素以最近非静态定位的祖先为基点进行定位。

  absolute也需要与top、right、bottom、left一同使用进行定位。

  设置了position: absolute;的元素会脱离正常文档流，不会在页面中占用位置。

  绝对定位前：

绝对定位前.png

绝对定位后：

绝对定位后.png

.absolute-box {
  position: absolute;
  left: 20px;
  top: 20px;
}

这里的大方框是这几个盒子的父元素，并且给它添加了一个相对定位属性，可以看出来，添加了绝对定位的盒子跑到了前面去，这便是相对于最近的非静态定位的父元素进行定位，并且原来的位置被后面的元素占据。

绝对定位多用于放置某些固定在页面或某个区域四角的元素，通常我们需要知道上下左右其中两个值便可以进行定位，例如右上角的元素需要知道距离页面右边和上边的值。

绝对定位例子.png

• 固定定位 fixed

  元素相对于浏览器窗口进行定位，位置不受页面滚动影响。

  使用top、right、bottom、left进行位置调整。

  固定定位的元素也会脱离正常文档流。

  固定定位前：

固定定位前.png

固定定位后：

固定定位后.png

.fixed-box {
   position: fixed;
   right: 10px;
   bottom: 200px;
}

添加了固定定位的盒子跑到了页面右下角，因其是相对于浏览器窗口进行定位的，因此无论怎样滚动页面，它依然在那个位置不会随页面一起滚动，你想到了什么，没错，就是平常我们浏览网页时页面里的那些烦人的小广告，但是也不是只能用来做烦人的东西，像某些页面过长，会有一个返回顶部的按钮，也是使用这个属性实现的。

2.浮动 float

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素除了inline-table计算为table外，其它元素都会计算为块状block，而不论它本身是何种元素。

浮动属性的设计初衷是为了实现文字环绕图片效果。

浮动.png

浮动元素的特性

• 包裹性

假设浮动元素的父元素宽度为200px，浮动的子元素是一个宽度为128px的图片，此时浮动元素的宽度表现为“包裹”，宽度为图片的128px。

CSS部分

.father {
    width: 200px;
}
.float {
    float: left;
}
.float img {
    width: 128px;
}

HTML部分

<div class="father">
    <div class="float">
        <img src="1.jpg">
    </div>
</div>

• 块状化并格式化上下文

display计算值为块状。原来为inline-table的计算为table，其余的全部计算为block，块元素可以在一行显示，按照一个指定的方向移动，遇到父级的边界或者相邻的浮动元素就会停下来。

• 破坏文档流

浮动的元素会不完全脱离文档流，浮动后跟的元素（没有浮动）的位置是从前面浮动元素的位置开始的。

• 父级高度塌陷（破坏性），子元素有浮动后，那父级元素的高度不会自动撑开了。

浮动有很多人烦人的“副作用”，因此迫不得已一般是不会使用它来进行布局。

3.弹性盒布局

弹性盒布局是一个非常好用且强大的布局方式。通过弹性盒指明空间的分布方式、内容的对齐方式和元素的视觉顺序，内容可以轻易横向或纵向排布，还可以沿一个轴布局，或者折断成多行。弹性盒布局最突出的一个特点是能让元素对不同的屏幕尺寸和不同的显示设备做好适应准备。

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

通常弹性盒布局的使用场景可以是在一个区域要将一些元素均匀分布，或是其中一个区域宽度一定，其它的区域跟随屏幕尺寸的变化而弹性收缩。

使元素均匀分布在一个盒子区域中：

弹性盒布局.png

某一区域定宽，其它区域伸缩：

定宽.png

一些重要的属性

justify-content: 指明在弹性容器的主轴上如何分布各行里的弹性元素。应用于弹性容器上。

取值：flex-start | flex-end | center | space-between | space-around | space-evenly

align-items: 定义弹性元素在弹性容器垂轴方向上的对齐方式。应用于弹性容器上。

取值： flex-start | flex-end | center | baseline | stretch

align-content: 定义弹性容器中垂轴方向上的额外空间如何分配到弹性元素行之间和周围。应用于弹性容器。

取值：flex-start | flex-end | center | space-between | space-around | space-evenly | stretch

align-self: 用于定义单个弹性元素覆盖align-items属性的值。应用于弹性元素。

取值： auto | flex-start | flex-end | center | baseline | stretch

结语

感谢大家的阅读，欢迎批评指正，一起学习。