FE[0x02] -- 浅谈CSS布局

最近重返css世界，分享一些我的心得体会吧

侃侃而谈

最开始网页有个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最初是为了解决文字环绕而存在的，后期也被用来进行布局。我们还是来看这样一个例子。分别是没用浮动和用了右浮动的效果，可以看到是为了解决文字环绕。

clear

clear 属性被用于控制浮动

同样的，我们来看这样一个例子，两个兄弟元素之间的浮动关系，如楼下布局，设置.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这块知识吧，还是需要同学们自己动手实践，一万个人有一万个人的看法，这个是我亲身经历的一些想法，只有当你亲身经历过才能够更好地去理解学习它，最后，同学们一起来动手试试吧。