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

时间:2021-09-07 17:11:37

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;/*元素显示为块状元素,但是具有行内特征,即取消两端的换行/