关于HTML页面布局要注意的问题

1.用百分比设定元素宽度可能造成的错误

　　很多同学习惯使用百分比来设定页面元素（例如div，以下称作盒子，方便介绍）的宽度，这样做可能造成未知的错误，最常见的就是当页面被缩小，或者屏幕分辨率降低时，由于使用了分辨率设置盒子的宽度，盒子本身也会随着分辨率的降低而减小，有可能造成内部的元素无法正常容纳内部的元素，于是内容会被挤到下一行排列造成布局错误。

　　i.解决办法

　　需要强调的是，使用百分比设定盒子宽度不是不可以，但是如果使用百分比设定宽度，我们最好同时为盒子设定最小宽度element{min-width:1000px;}，保证盒子内部元素能够正确排列在盒子中。或者为盒子设定固定大小的宽度，这样我们可以保证在页面缩小到一定程度时，页面会出现滚动条，不会影响盒子内部的元素布局。

2.当想要让图标移动位置时不要移动父元素

　　有些同学常见的错误是希望改变图标的位置时（比如：希望图标居中，并且向左移动n个px），改变父元素的位置，这样的做法明显是错误的。通俗的说法是我们明明想搬动沙发，却把房子给搬走了。

3.让块元素居中的方法

　　有很多方式可以让块元素水平居中显示，最常用的做法是为元素设定以下样式div{margin：0 auto;}；或者我们也可以使用相对位移来改变元素的位置selector{position:relative;left:npx},但是这种做法常常需要计算像素值，所以第一种办法更直接有效。

4.块元素和内联元素的比较

　　块元素之所以称之为块元素是因为它们都是默认以矩形形状出现的（使用CSS3样式可以改变这一特征），块元素具有height、width的特征，就是说我们可以为块状元素设定高度和宽度来改变它原本的大小。内联元素则不同，默认情况下期中的内容如何排列，它们的形状也就如何展现。另外块元素会在前边和后边各加一个换行，也就是说默认情况下块元素都是独占一行显示的（除非我们为其设定浮动，或者使用位移来改变其初始位置）；通过display属性，我们可以设定元素的显示状态；

display:block;/*元素显示为块状元素*/
display:inline;/*元素显示为内联元素*/
display:inline-block;/*元素显示为块状元素，但是具有行内特征，即取消两端的换行/