前端基础--CSS布局学习

最近学习小程序发现不少关于css布局的东西都不是很懂，因此学习记录下关于CSS布局相关的知识。
学习资料：http://zh.learnlayout.com/css

“display”属性

block：块级元素
inline：行内元素
none：一些特殊元素的默认 display 值是它，例如 script 。 display:none 一般被 JavaScript 用来在不删除元素的状况下隐藏或显示元素。html

margin: auto;

#main { width: 600px; margin: 0 auto; }

而后你就能够设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度，而后剩余的宽度会一分为二成为左右外边距。git

盒模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css" media="screen"> .simple { width: 500px; margin: 20px auto; border-style: solid; border-color: '#333333'; } .fancy { width: 500px; margin: 20px auto; padding: 50px; border-width: 10px; border-style: solid; border-color: '#0000FF'; } </style>
</head>
<body>

    <div class="simple">
        我小一些...
    </div>

    <div class="fancy">
        我比它大！
    </div>

</body>
</html>

实际结果能够看到设置的宽度只是内容宽度。当你设置了元素的宽度，实际展示的元素却超出你的设置：这是由于元素的边框和内边距会撑开元素。web

box-sizing

上面的盒模型不符合如今人的思惟习惯，因此添加了一个新的属性box-sizing。当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框再也不会增长它的宽度。这里有一个与前一页相同的例子，惟一的区别是两个元素都设置了 box-sizing: border-box;小程序

<style type="text/css" media="screen"> .simple { width: 500px; margin: 20px auto; border-style: solid; border-color: '#333333'; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .fancy { width: 500px; margin: 20px auto; padding: 50px; border-width: 10px; border-style: solid; border-color: '#0000FF'; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } </style>

为了全部的css开发者都是这种模型，给全局全部元素添加border-box属性，你须要添加下面的设置api

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

position

一、static
二、relative
经常使用用法嵌套型布局，若是父布局是relative，子布局是absolute，那么对子布局设置top left定位是相对于父布局的，若是父布局不是ralative，那就根据window窗体来定位。注：absolute忽略父布局的包裹关系浏览器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css" media="screen"> .relative1{ position: relative; height: 300px; border-style: solid; border-color: '#333333'; } .relative2{ display: block; position: absolute; width: 200px; top:100px; left:30px; border-width: 10px; border-style: solid; border-color: '#0000FF'; } </style>
</head>
<body>
    <div class="relative1">
        relative 表现的和 static 同样，除非你添加了一些额外的属性。
        <div class="relative2">
            在一个相对定位（position属性的值为relative）的元素上设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。其余的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。
        </div>
    </div>

</body>
</html>

三、fixed
一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即使页面滚动，它仍是会停留在相同的位置。和 relative 同样， top 、 right 、 bottom 和 left 属性均可用。markdown

.fixed { position: fixed; bottom: 0; right: 0; width: 200px; background-color: white; }

四、absolute
absolute 是最棘手的position值。 absolute 与 fixed 的表现相似，可是它不是相对于视窗而是相对于最近的“positioned”祖先元素。若是绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，而且它会随着页面滚动而移动。记住一个“positioned”元素是指 position 值不是 static 的元素。工具

<div class="relative1">
        relative 表现的和 static 同样，除非你添加了一些额外的属性。
        <div class="cc">
            <div class="relative2">
                在一个相对定位（position属性的值为relative）的元素上设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。其余的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。
            </div>
        </div>

    </div>

如上面的代码，三层嵌套。relative2设置成absolute，relative1设置成ralative，cc不设置任何postion属性，这样relative2会相对于relative1进行绝对布局。布局

float

另外一个布局中经常使用的CSS属性是 float 。Float 可用于实现文字环绕图片

img { float: right; margin: 0 0 1em 1em; }

float用于布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css" media="screen"> nav{ float: left; width: 25%; } section{ margin-left: 25%; } </style>
</head>
<body>
    <div>
        <nav>
            <ul>
                <li><a href="" title="JAVA">JAVA</a></li>
                <li><a href="" title="JAVA">JAVA</a></li>
                <li><a href="" title="JAVA">JAVA</a></li>
                <li><a href="" title="JAVA">JAVA</a></li>
            </ul>
        </nav>

        <section>
            这个例子和以前那个外观如出一辙。请注意咱们在容器上作了“清除浮动”。本来在这个例子中是不须要的，可是当 nav 比非浮动的内容还要高时就须要了。
        </section>

        <section>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
        </section>

    </div>
</body>
</html>

媒体查询

“响应式设计（Responsive Design” 是一种让网站针对不一样的浏览器和设备“呈现”不一样显示效果的策略，这样可让网站在任何状况下显示的很棒！

媒体查询是作此事所需的最强大的工具。让咱们使用百分比宽度来布局，而后在浏览器变窄到没法容纳侧边栏中的菜单时，把布局显示成一列：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css" media="screen"> @media screen and (min-width: 600px) { nav{ float: left; width: 25%; } section{ margin-left: 25%; } } @media screen and (max-width: 599px){ nav li{ display: inline; } } </style>
</head>
<body>
    <div calss="container">
        <nav>
            <ul>
                <li><a href="" title="家具日用">家具日用</a></li>
                <li><a href="" title="电子产品">电子产品</a></li>
                <li><a href="" title="生鲜蔬菜">生鲜蔬菜</a></li>
                <li><a href="" title="音频书籍">音频书籍</a></li>
            </ul>
        </nav>

        <section>
            当你调整浏览器窗口大小时，布局比之前更酷了！
        </section>
        <section>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
        </section>
    </div>

</body>
</html>

inline-block

inline-block属性的元素既拥有了block元素能够设置width和height的特性，又保持了inline元素不换行的特性.
你能够建立不少网格来铺满浏览器。在过去很长的一段时间内使用 float 是一种选择，可是使用 inline-block 会更简单。让咱们看下使用这两种方法的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css" media="screen"> .container{ margin-top: 20px; padding: 10dp; border-color: black; border-style: solid; } /*方法一 浮动方式布局*/ .box{ float: left; width: 200px; height: 100px; margin: 1em; background-color: red; } .after-box{ clear: left; } /*方法二 inline-block方式布局*/ .box2{ display: inline-block; width: 200px; height: 100px; margin: 1em; } </style>
</head>
<body>

    <div class="container">
        <div class="box">
            我在浮动！
        </div>
        .....
        <div class="after-box">
            我在使用 clear，因此我不会浮动到上面那堆盒子的旁边。
        </div>
    </div>


    <div class="container">
        <div class="box2">
            我在浮动！
        </div>
        ......
        <div class="after-box">
            我在使用 clear，因此我不会浮动到上面那堆盒子的旁边。
        </div>
    </div>

</body>
</html>

###flexbox
新的 flexbox 布局模式被用来从新定义CSS中的布局方式。很遗憾的是最近规范变更过多，致使各个浏览器对它的实现也有所不一样。
[CSS官方文档对于flex的讲解](http://css.cuishifeng.cn/flex.html)
一、简单布局

Document

二、牛逼布局

Document

三、居中布局

Document

div{
border-style: solid;
border-color: red;
}
.container {
width: 500px;
height: 300px;
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-aligin-items: center;
justify-content: center;
-webkit-justify-content: center;
}

<div class="container">
    <div>
        我想要居中到父容器的中心
    </div>
</div>

“`