对于html和css有这么点看法，在知乎上看到这么一句话，前端就像是造房子一样，html就是房子的框架，css就是装饰颜料，而js就是实现房子功能的实现，其实就是这个道理
HTML
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。准确来说这并不算编程，只能算标记语言，跟很多人一样，我也喜欢用div和span来搭框架，其实就是懒得去用标准化，实际效果是一样的，但这并不可取，也希望大家不要向我学习，尽量用标准化的去搭框架。至于为什么用div和span我下面会讲。
1.常规流
所有元素在默认情况下，都属于常规流布局，对于总体规则的话，就是块盒独占一行，行盒水平依次排列，上面说我喜欢用div和span元素布局，这两个元素分别是块盒和行盒，当然块盒和行盒不只有这两个，还有很多，有兴趣的可以参考w3c里面的手册。
包含块：每一个盒子都有自己的包含块，包含块决定盒子的排列区域，然而绝大部分情况下，盒子的包含块就是父元素的内容盒。
块盒(display:block)
块盒是可以设置宽高的，默认情况下设置的宽高就是内容盒的宽高，除非你去改变盒子类型，比如box-sizing:'border-box',这么设置的话改变宽高就是改变边框盒的大小
width:auto和margin:auto
这两个若是同时存在的话，width的吸收能力是大于margin的，相当于width是老大，等他吃完了，小弟margin才能喝点汤，然而，若是宽度，边框，内边距都计算完了，还有剩余空间，那就由margin-right来吸收
块盒居中
这是在开发中常见的，如何把网页内容居中给用户显示，块盒定宽，定高后，再加上margin:0 auto;意思就是外边距上下为0，左右自动吸收，然后块盒就能在包含块中居中了
百分比取值
简而言之就是流动布局，是移动端的一种布局方法，我不是很推荐用，有点麻烦，还要计算百分比大小，我记得京东的布局上好像用过，但不推荐，因为有更好的布局方法，弹性布局，这块以后再讲。当然你要是不怕麻烦可以使用，这种方法是相对于包含块的百分比来用的
上下外边距合并
两个常规流块盒，上下外边距(margin)会进行合并，两个外边距会取最大值，对于这方面我一般会进行调试，调到我满意的位置，但是想要解决这个问题，我记得是有两种，一种就是加边框，加边框就不会有这种问题了，然而很多情况下我们根本不想加边框，那就是在父元素上加overflow:hidden，溢出隐藏，让父元素创建一个BFC区域，创建BFC区域的元素就隔断了它内部与外部的联系。
今天不想写了，有点累，明天写float部分，以上是我自己的见解，有问题欢迎讨论。
网友评论