CSS布局基础

CSS布局基础

前言

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

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

一、盒模型

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

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

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

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

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

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

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

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

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

二、块级元素和行内元素

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

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

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

块级元素

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

行内元素

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

基线

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

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

另外，基线与行高有关。

行高