返回目录：财经要闻
大家好，我是@路飞写代码，前端工程师，欢迎关注我，一起分享知识干货
前端工程师经常面临的一个比较头疼的问题，就是页面的布局问题，每一次布局都像经历了各种炼狱一样，都是改改这儿，动动那儿，然后F5刷新页面，布局竟然莫名其妙的好了，但是并不真正知道为什么我加了这个属性，整体的布局就变好了。或者也不知道当布局出现问题时，大致分析出到底是哪儿出现了问题。
CSS布局
为了解决这些困扰，今天我分享一下CSS布局方面的一些干货，让你真正了解一下CSS布局其实没有这么可怕，你甚至会从此爱上布局，此后也再也不惧任何布局。
Display属性
首先我们来了解一下display这个属性，display 是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值，这与元素的类型有关。对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。这块延伸出两个概念，块级元素和行内元素。
- 块级元素：一个块级元素会新开始一行并且尽可能撑满容器。比如布局中经常用到的标签<div><p><section>等。块级元素拥有宽高属性，如果缺省宽度，默认撑满容器，可以容纳嵌套行内元素和块级元素。
- 行内元素：一个行内元素可以在段落中 <span> 像这样 </span>包裹一些文字而不会打乱段落的布局。比如<span><a>等标签。行内元素不能设置宽高、行高、只能容纳文本或者其他行内元素。
了解了这两个属性后，我们就来看看具体的取值代表的含义。
设置元素display:block可以将元素设置为块级元素，当然也可以将行内元素设置该属性，使得行内元素拥有与块级元素一样的表现。反之，设置display:inline到块级元素上，也可以将块级元素设置拥有行内元素的表现，最常见的例子是将<li>设置为inline，变成水平菜单。
display另一个常用的属性none， 用来在不删除元素的情况下隐藏或显示元素，不会占据页面空间。
页面布局
如何让一个块级元素居中
我们先来了解一下margin属性，margin是设置外边距,该属性可以有 1 到 4 个值，分别设置上右下左外边距。
首先我们将块级元素的width设置为一个值，防止块级元素撑满容器，然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距，当然这儿存在一个问题当浏览器窗口比元素的宽度还要窄时，浏览器会显示一个水平滚动条来容纳页面，我们可以通过设置max-width属性使浏览器更好地处理小窗口的情况
div居中css
动图看效果
position属性
为了制作更多复杂的布局，我们需要讨论下 position 属性。
- position:static; static是position的默认值，假如我们不更改这个属性，默认就是static，按照常规的布局规则从上到下，从左到右排列。
- position:relative; relative是相对定位属性，这个相对，是相对元素本来的位置，可以通过设置top,left,bottom,right属性来偏离正常位置进而来控制布局。
- position:absolute;absolute是绝对定位，这个属性比较特殊，它是相对于最近的“positioned”祖先元素，也就是说相对于最近的非static布局的父元素。如果没有最近的非static布局元素，那么设置改属性就会相对于整个<body>来进行绝对定位。当然如果设置了position:absolute属性，但是不设置top、left、bottom、right属性定位仍然按照常规布局来这点要切记。
- position:fixed；fixed属性是相对于视窗来定位，这个属性经常被用来做一些固定广告位展示，页脚贴合视窗底部。
absolute布局展示
下面我们通过例子来实现一个大部分网站的布局
布局CSS如下：
css代码
布局Html元素的结构如下：
元素html的结构
我们来看一下完成的效果图：
布局的效果图
这个就是我们经常的页面排版，左侧导航，右侧主体内容展现页面详细内容。然后页脚展现一下友情链接，企业相关项目展示等。
响应式布局
上面我们知道了完成布局所需要的一些属性。下面我们来讨论一下响应式布局。“响应式设计（Responsive Design” 是一种让网站针对不同的浏览器和设备“呈现”不同显示效果的策略，这样可以让网站在任何情况下显示的很棒！媒体查询是做此事所需的最强大的工具，得以让我们适配各种屏幕的机器来进行布局的显示。
我们上面的布局，如果缩小浏览器的话，显示会变的非常拥挤，甚至可能出现滚动条。让整个页面变得非常不美观，此时我们可以在小屏幕上让其完全显示成一列。我们设置如下：
媒体查询
这样当屏幕宽度在599px像素内，我们就让nav导航栏不进行绝对定位也不让section有左边距，同时这个时候我们也将列表改成水平通过display:inline属性进行设置。这样我们就实现了一个响应式布局。可以适配小屏幕终端，保证显示效果。
响应式布局动图效果
好了，至此今天的分享就到这儿，布局还需要多多练习，掌握各种奇技淫巧，才能真正应用到实际的工作当中。
当然了，我们可以通过这些了解一下原理，这样我们在以后去更改布局的时候会得心应手，但是还是建议各位使用一些UI框架组件，目前主流的UI框架都包含一整套的布局元素，基本上都是栅格布局。有的采用12栏，如ElementUI，有的采用24栏，如BootStrap布局系统。
我是@路飞写代码，欢迎关注我，一起分享知识，拥抱未来。