简介

之所以把样式和布局分开就是因为两个是互不影响的，再明确的样式是负责颜色主题，而布局负责的是元素的位置和大小。所以能准确的在不同大小的浏览器友好的布局就需要一些技术含量了，而不像之前的样式那样，每一个属性值都是可选的，布局有更大的可变性。

盒子模型

这个是学习CSS布局绕不开的一个最基本的概念，看了很多教程都很讲解的很不明了，我觉得这个点应该从边框开始学起，边框外部的间距叫做外边距，边框内部的间距叫内边距，被内边距包裹的叫内容，除了内容，其他几个都是可以通过属性来指定大小的，图示如下（我是盗图狗）：

盒子模型图示

• 边框

定义边框通过border属性，这个是边框的简写，具体看实例：

<style type="text/css">
        div {
            /*
            简写属性等于下面三个属性的综合，依次是：
            边框颜色，边框宽度，边框样式
            */
            border: #FFA500 10px solid; 
            border-color: #FFA500;
            border-width: 10px;
            border-style: solid;
        }
    </style>

运行效果如下：

边框

• 外边距

接着在上面的例子上加上外边距，外边距属性是margin，同样也是简写属性：

<style type="text/css">
        body {
            background-color: green;
        }
        div {
            /*
            简写属性等于下面三个属性的综合，依次是：
            边框颜色，边框宽度，边框样式
            */
            border: #FFA500 10px solid; 
            border-color: #FFA500;
            border-width: 10px;
            border-style: solid;
            /*简写属性等于下面四个属性，顺序是上右下左，
            就是逆时针
            */
            margin: 44px 100px 44px 100px;
            margin-top: 44px;
            margin-right: 100px;
            margin-bottom: 44px;
            margin-left: 100px;
        }
    </style>

接着继续看一下运行效果：

外边距

从图中可以看出，div标签的周围是被设置上了间距。

• 内边距

不废话直接上图，使用属性padding，用法和外边距一样：

内边距

• 元素宽高

可以通过height和width来设置元素宽高：

div {
            height: 100px;
            width: 100px;
            padding: 100px;
            margin: 44px;
            background-color: white;
            border: #FFA500 10px solid;
            
        }

这里的元素的实际宽高并不是height和width，而是要加上边框，边距这些才能算出，这种计算非常容易出错，所以CSS3中新添加了个属性box-sizing，把属性值设置为box-border，则其设置的height和width就是包含了边框和内边距的。
具体的有关尺寸设置的属性，请自行查看链接：尺寸属性。

• dispaly属性

该属性可以定义标签应该以什么形式显示或者不显示：

<style type="text/css">
            
            div {
                /*以块级元素显示，可以设置元素宽高，并且独占一行*/
                display: block;
                /*以行内元素显示，宽和高由其内容撑开，
                 * 不能设置宽高，不会强制换行，
                 * 一行显示的下还会继续显示*/
                display: inline;
                /*兼具了两者的特点：既可以设置宽高，元素又不会强制换行*/
                display: inline-block;
                /*隐藏元素，该元素所占空间会被释放掉，就跟没有了一样*/
                display: none;
                /*该属性是表示元素是否可见，哪怕是隐藏了一样占据空间*/
                visibility: hidden;
            }
        </style>

• 定位属性

定位属性让整个CSS布局更加的灵活，但是随着Flex布局的兴起，定位属性可能随着时间的推移将逐渐被取代，因为定位属性就我自己而言，绝对是不好用的，并且以Flex布局现在的能力，完全可以完成90%的布局需求，不过再怎么觉得定位不好用，但毕竟也存在了这么久，还是有可取之处的，还是需要认真学习一下，定位属性再结合Flex布局，应付开发中的布局就得心应手了。直接上例子，在例子中做出对应解释：

/*只要元素使用了position属性定义的值不是static,元素就可以设置上下左右的间距*/
            #div1 {
                background-color: blue;
                /*相对于该元素在正常情况下的位置，该例子是距离原来位置左边间距是100px
                 距离原来顶部位置是44px，其正常情况下所占的空间不变。所以控制不好会导致元素重叠
                 * */
                position: relative;
                top: 44px;
                left: 100px;
                height: 400px;
                width: 200px;
            }
            
            #div2 {
                /*固定定位，会固定在某处，页面滚动该元素也是固定在窗口上的,会脱离文档流*/
                position: fixed;
                height: 100px;
                width: 300px;
                background-color: green;
            }
            
            #div3 {
                /*绝对定位是相对于最近的已定位父元素而定位的，如果没有父元素使用了定位，则相对于HTML标签
                 * 同样会脱离文档流
                 */
                position: absolute;
            }

之所以不建议使用定位，就是一旦控制不好就会造成元素重叠，可以通过z-index属性来指定其谁在最上面，值越大越靠上。

浮动

元素浮动这个在开发中也是常用的，标签浮动后，在标签之后的元素会重新排列，表现为围绕浮动元素，即行宽改变了，如果有多个浮动元素，如果有空间的话，会彼此相邻。设置浮动的元素会向左或者向右浮动（没有向上向下浮动），直到碰到另一个浮动元素或者父包含框。如果不想让浮动元素之后的元素改变布局（因为浮动元素会改变之后的行宽），需要设置clear属性，具体例子如下：

div
{
    float:left;
    width:110px;
    height:90px;
    margin:5px;
    clear:both;
}

浮动元素也脱离了文档流，浮动布局自从Flex布局出现后并不流行了，另外推荐一篇布局进阶文章：常用布局

Flex布局

得这篇写的是目前最易懂的了，不过多解释了：阮一峰Flex布局讲解