最近学习小程序发现很多关于css布局的东西都不是很懂，所以学习记录下关于CSS布局相关的知识。
学习资料：http://zh.learnlayout.com/
“display”属性
block：块级元素
inline：行内元素
none：一些特殊元素的默认 display 值是它，例如 script 。 display:none 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。
margin: auto;
#main { width: 600px; margin: 0 auto; }然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。
盒模型
<!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>实际结果可以看到设置的宽度只是内容宽度。当你设置了元素的宽度，实际展现的元素却超出你的设置：这是因为元素的边框和内边距会撑开元素。
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属性，你需要添加下面的设置
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }position
1、static
2、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>3、fixed
一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。和 relative 一样， top 、 right 、 bottom 和 left 属性都可用。
.fixed { position: fixed; bottom: 0; right: 0; width: 200px; background-color: white; }4、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)
1、简单布局
Document
2、牛逼布局
Document
3、居中布局
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>
“`
147
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
