HTML与CSS结合时网页布局的注意事项

初学webpage布局时，我们经常会走进很多细节上面的问题。导致整个网页的布局会在我们不知不觉中就变得乱糟糟的。下面，我想和大家分享一下网页布局的一些细节问题以及怎么解决和避免。
首先，我们要确认一个事情，在网页布局之前，我们的宽度和高度都是一个不确定的值，而且，在我们的浏览器窗口可大可小，所以在我们牵涉到于宽度相当的值时，我们尽量用百分比，高度我们也可以先确定一个假设值，用内容填充。然后再将设定的高度屏蔽。
整个网页布局，我们可以简单大看成一个容器；首先，你需要将你拟定的框架简单描绘出来，简单的来说，就是划分方块，你的布局有几大块，几大块里面又有多少小块。划分成块的数量取决于你能用最小的方式把它表示出来。这时，我们就要理解小块到底是什么性质的标签，是行内块标签或者是行内标签，这个是可以在同一行共存的。所以，标签分类的基础必须要理解。我们常用来布局的就是一个div，它标签里面可以包含各类标签。
其次，在布局里面还存在有这样的一些陷阱
1.对不齐：当有发现对不齐时，我们首先应该看看我们的css文件上是否有对齐的属性，然后，用网页打开，用F12查看源代码，看看对不齐的标签块，观察其容器的外边距，内边距一系列的属性值，可以尝试稍作更改。再来观察改变后的结果。
2 有间隙：有间隙是一个常见的问题，当我们估算好了整个内容的长宽，已经想好了向里面添加一堆内容时，我们发现，按照预定的宽度加不进去，元素已经被挤到了下一行。所以这个地方就有必要提一下，当我们的字体大小不是0px的时候，我们经常看见的空格 换行符等，会占据大约4px的空间（假定原字体大小没有改变，是16px）。所以，解决这类问题就是一个细节处理。
3.有时候，你会发现你的CSS不起效果，所以，第一遍便是看看源代码，看看你的CSS有没有在源代码上显示作用。第二看完之后，回头检查该段属性的拼写，最后，检查属性中间的符号，特别是分号，当你用成中文输入法下面的分号时，整个是不起作用的。
4.图片处理效果，当我们希望图片铺满时，我们会发现，图片失真效果比较严重，此时，我们需要确定一下整个图片的宽和高，将图片放入一个合适的容器之中，这样，我们就可以尽可能小的改变图片，减少失真。
5.关于定位和浮动，对于定位，我们有相对定位，绝对定位，和固定，其中，固定存在这样一个问题，我们上下滑动的时候，固定块不会跟随滑动，但是，左右也会失效。所以，这个也是一个缺点。其他的相对定位和绝对定位，要避免一下窗口变化时候造成的影响。对于飘出文本流的东西，我们尽可能少用来做布局。