最开始网页有个p的布局，基本上打开大屁股头电脑能看文字就好了，再后来随着Web技术的发展，你可以选择浮动布局float,也可以结合position进行布局，还有table表格布局等，再往后发展就是flex,媒体查询以及grid啦，什么栅栏布局，960网格布局啦。从这条发展主线看，感觉还是回到了最初的表格，抓重点，flex是基于轴的一维布局，而grid是最新的基于二维的布局。关于这方面的资料国内可以看张鑫旭大佬写的书和文章，还有像什么《CSS禅意花园》《精通CSS高级解决方案》《CSS解密》之类的书等，国外的资料可以去https://css-tricks.com，推特，油管上看看，都不错的选择。
这边说了是基础布局，所以不会在这里介绍flex和grid,百分比布局,媒体查询以及移动端布局，可能会在后续文章介绍，那么我们开始吧。
box-model)border-width你不给它设置形状和颜色就仅仅宽度是无效果的
当你设置了元素的宽度，实际展现的元素却超出你的设置：这是因为元素的边框和内边距会撑开元素
两种盒模型content-box和bordr-box
我们来看这样一个例子，同样设置了width:600px为什么效果却截然不同呢？
从中我们可以看到，默认情况下(即content-box的时候)，它会把你的border和padding算上去，这样一对比，是不是清晰了很多，那么我们如何解决呢？来看看border-box的效果。
具体的选择盒模型的方案，你根据具体情况具体分析吧。
float与 clear)float float最初是为了解决文字环绕而存在的，后期也被用来进行布局。我们还是来看这样一个例子。分别是没用浮动和用了右浮动的效果，可以看到是为了解决文字环绕。
clearclear 属性被用于控制浮动
同样的，我们来看这样一个例子，两个兄弟元素之间的浮动关系，如楼下布局，设置.boy左浮动
<div class="boy"><span class="s1">Boy</span></div>
<div class="girl"><span class="s2">Girl</span></div> 用了clear:left之后,可以看到解决了堆积在一起的问题。
display:none与visibility: hidden;)把 display 设置成 none 元素不会占据它本来应该显示的空间，但是设置成 visibility: hidden; 还会占据空间
我们来实践一下，验证楼上的这句话
这个是display:none的情况
这个是visibility: hidden;的情况
margin) 在写页面用margin频率最高的一句我是margin: 0 auto;，我们来看看这句话的优缺点吧。同样我还是举例子，优点是可以使部分网页元素水平居中显示,
我们理科生说话要讲证据，这里说部分，我是有证据的，在移动端体验略微差了点，还有就是你想要表达的元素大于浏览器的尺寸。为了能够看到明显的区别，我把它加了一个灰度的框。
其实都是元素大于浏览器的宽度，我们来看看PC端的表现，可以看到当元素大于浏览器的时候，就有滚动条了，居中显然是不可能的了。
我们再来看看移动端的情况，看见了没有同学们，它并没有很好地实现居中。
这是个让人头大的问题，我们需要解决它。max-wdith巧妙地解决了这个问题，在主流浏览器和IE7+都有较好的表现，适合移动端，校正后的模样。
position) position可以设置的属性有很多，默认是static，还有一些其他属性例如，fixed，relative,absolute等等，然后可以设置top,left,right,bottom等。
我们还是看下楼下我准备的例子。
一个static遇到relative
一个static遇到加了点佐料的relative
一个static遇到两个relative随后跟了一位fixed
之后，一个relative生下一个absolute
这里没有像以往过多地分享代码的实现，而是更多地采用了视觉的呈现。是应为css这块知识吧，还是需要同学们自己动手实践，一万个人有一万个人的看法，这个是我亲身经历的一些想法，只有当你亲身经历过才能够更好地去理解学习它，最后，同学们一起来动手试试吧。
联系客服
