学习就是多练习，多思考吧
国庆前，一位大佬给不会主动学习的我布置了一个任务，把我正在写文字的地方的主页自己写一遍，并实现其主页功能，但只能用html和css且不准用框架。网页就是这个样子：
看起来挺复杂的
但实际上就是两部分
这样就可以先写两个盒子，盒子还是块级元素，块级元素自成一行，所以直接按顺序写两个div就好了。
但实际上是这样的
因为块级元素在不设长宽的情况下，宽度会撑满父元素宽度，长度得看内容的多少，只要在div里加东西，div就能慢慢的长度变长，慢慢的撑起来了。
拿网页头部为例
可以看出，中间得有个垂直居中的大盒子。
css代码：
width: 1500px;
margin: 0 auto;
当盒子有了宽度后，左右外边距自动且相等，盒子就自然居中了。（只适用于块级元素，不适用于行内元素）
通用方案：（flex布局，这里有个坑，详细请看：flex教程http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html）
display:flex;
align-item:center;
不想用flex布局可以设置行高line-height等于父元素height时，行内元素会自然垂直居中。
继续细分页面就会中间是个三列布局
可以给左右盒子设置左右浮动，这样左右就固定了，因为浮动元素不占原本空间，所以给中间盒子设置宽度为100%时或左右边距相等都可以，css代码如下：
左：
float：left；
右：
float：right；
中间：
width：随意；
margin/padding：0 auto；
这样上三个盒子布局就固定了（顺便挖个坑，用负边距的方法也可以，且负边距用途更广~）
再仔细细分就会发现，右边部分也可以分为三列布局，中间部分可以化为一个减掉一边浮动的三列布局。
剩下部分故技重施，整个网页内容部分，居中，盒子嵌套。慢慢的整个页面就可以用一个盒子套一个盒子设置内外边距来实现了。
（还剩13分钟十一点）
为啥要这么麻烦呢？一个盒子和一个盒子不断嵌套。当初做第一个网页的时候，用了很多定位，给学姐检查的时候（不同浏览器怎么显示不太一样？？）（缩放网页会出现很混乱的情况）
后来看了看这些优秀企业，他们的网站，他们的源码。有时候，看看优秀的作品是怎样做的，也能得到不少启示，这也是一种学习方法吧。
曾经不觉得做网页是间困难的事情，盒子套多了，代码也挺长的。
还得多练习.
（还有3分钟，先交了~）
网友评论