CSS页面布局制作
2019-05-02 本文已影响0人
V哥带你写程序
搞清概念
一个页面可以看成是由一个表格加上这些表格里的控件组成。 这个表格由几行几列组成，每一行的列数还可能不同。这个表格就是我们说的页面布局。这么个简单的框框也有一些细节要考虑，我们一步一步开始。
最外层框
问题一：这是固定宽度布局(Fixed Layout), 还是流式布局(Fluid Layout)?
目前Fixed Layout(例如：固定960px宽)比较少了，90%概率都使用流式布局。
<div class="wrapper">
</div>
.wrapper {
width:95%;
margin: 0 auto
}
这样一个居中的大框框就出来了，两边还有点呼吸空间
行容器
心法：扫一眼，网站都可以分成几行（最简单只一行），每一行在分成几列，这些列基本是对齐的，对不齐的要么很有艺术气氛，要么就是怪胎，90%是对齐的。一行内分几列，一般使用Float来实现。
一行就是写个div就结束了，但其实并没那么简单，这个div的重要任务是把内部float的内容Hold住，Hold不住，东西就会支在外面就破功了。
<div class="wrapper">
<div class="row">
</div>
</div>
.row:after{
content:'';
display:block;
clear:both;
height:0
}
