html和css的一定要想清楚的东西

闲话

这几天我体会到了大学的酸爽。。。除了高数作业之类的学业，我还苦逼地打着两份工。一份是升华工作室网络部，一份是云麓谷技术中心的研发部。两边争相布置任务，我天天在图书馆泡得死去活来，回宿舍还得熬夜爆肝代码，爆得肝肠寸断。幸亏两边目前都主要在搞前端开发，代码没啥逻辑思维含量，要不然我可能要横尸大学了。上大学之前我还野心勃勃地想学acm搞搞算法，现在这种情况下，要是不两个都退出的话，搞acm就是开玩笑。
对了，图书馆WiFi崩了，所以我强行拿流量爆肝的，TM光是你们嫂子Chambers的照片就尼玛废了我20K流量，她却每次都非要来客串露脸，naive！！！咳咳。。希望大家不辜负我这个穷光蛋的流量，对自己有所提高。

闲话结束

好了闲言碎语不要讲，我们开始吧。

看之前如果不知道盒子模型或不知道常用的HTML和css标签属性，就先去看一下它们吧。

通俗易懂的菜鸟教程

因为是前端开发，所以我这几天写了一定量的HTML和css代码，有些老是理不清的东西，经过试（瞎）验（玩），总算想明白了。总结一下，希望小白们可以理清头绪，把网页的控制权明明白白地把握在自己手里。写代码，就应该做到把思路想清晰，自己就知道结果是咋样的，而不是看着浏览器的运行效果一点一点调，这儿relative一下那float一下是很不好的。（当然只是我这种菜鸡的个人观点）

一些通用规律：

1.

width和height等设置的都是本盒子的content的属性；单位1px并不是屏幕的一个像素，而是浏览器自己调整的个数不知有几个的多个像素。百分数的单位1（参照）是父容器的对应量。假如父容器宽度是整个浏览器窗口页面的60%，那设置width： 50%就是本盒子内容跨度是整个页面的60%*50%=30%啦！margin和padding等与长度有关的属性都是如此。所以百分数的可以随浏览器窗口的变化而变化，不会出现窗口显示不全的情况。

2.

背景染色是对盒子的content+padding的。

3.

相邻元素的margin会以较大（宽）的为准合并，较小（窄）margin的就等于直接没了。

4.

若用position：absolute来搞布局，则本盒子就凌驾于整个页面之上，相当于页面上从没有这个东西，它跟页面失去了关系，也就是完全跟他的长辈容器没关系了，它被逐出家门了。所以他很可能会盖住正常排版的页面。所以这些position不建议用（除了fixed有特殊需要），否则可能改一点代码，页面就全乱了！

5.

布局用margin或flexbox来做，不要用position。

6.（很重要）

子元素的整个盒子都会包含在父容器盒子的content中。所以如何布局，如何设置margin，应该自己根据需要算好设准。父容器的content会自动包含子元素的盒子。
现在有几个问题：
（1）
如果你规定了父元素的大小，子元素有可能超出去，这时就看你的overfloat是咋设得了（hidden就会把超的隐藏），并且，以后的本父容器后的块排布是按父容器占位来的，它是看不到你超出的内容的。也就是把本父容器想窗口，里面的内容用推拉条推拉阅读，不影响外面的世界。
（2）如果你规定了父元素的大小，子元素的整个盒子没沾满，那么浏览器会先按正常排布（一般是从左到右从上到下），然后发现没填满就强行将空的地方补成最右边或下边子元素的margin来填满，以保证不影响视图。
（3）元素的内容在默认情况下会不超出它content的范围排布。但如果你非要把子元素的content设的比父容器的范围还大的话，他会紧着自己（即本子元素）排布，而越出父容器。对于你这种人我也没办法。。。

块级元素和行内元素的属性支持特点

上面是两者都是啥，和设置要求。

按照传统，有你们迷人的嫂子Rebecca Chambers来镇贴！安布雷拉保佑您！

感谢大佬们的阅读，请多指教。