12bet,元素使用绝对定位时,其将脱离原始文档流,12博体育,不会对其旁边的元素带来任何影响
12bet,浮动布局的优势在于:浮动元素仍保留在文档流中其环绕的元素也都清楚它的位置
12bet,固定布局:页面有着固定的宽度,居左、居右对齐,或者居中。页面内容的宽度不会随着浏览器窗口的宽度变化而变化
流式布局:页面宽度用百分比指定,12博体育,而不是某个固定的宽度。浏览器窗口大小变化时,页面宽度随之变化
流式布局设计避免了另一半页面的空白,显得更为平衡。但使用流式布局,无法精确控制行长、页面布局以及元素位置
使用margin: 0 auto
,使用时注意指定宽度,兼容ie6+
在body上设置text-align: center
,这是一条hack,整整完全遵守标准的浏览器不会改变容器的位置,所以这条行不通
先将元素通过如下代码右移屏幕宽度的50%:
position: absolute;
left: 50%;
然后使用负margin左移元素宽度的50%:
position: absolute;
left: 50%;
width: 1000px;
margin-left: -500px;
使用这种方式,需要将内边距、边框计算在容器宽度中
用户界面设计更加关注用户,其最主要的研究目的就是让开发者和工程师能够更好的满足用户的需求
可用性研究更加关注最终的用户体验,即用户如何与已经开发完成了的程序进行交互
可用性原则:
建议新手去一些地点进行观察。如壮美、多彩、富有活力的大自然常常是灵感的发源地。另外一个灵感的发源地就是人的性格和外贸。人的外形总会在艺术中占有相当的地位。
考虑横向布局,但注意浏览器兼容性和实现
如果将一张纸分为四个象限,西方文字布局的顺序是从左到右,从上至下。浏览者一般都会无意中按照这个顺序来区分四个象限内容的重要性
所以logo一般放在左上位置
在页面中,无需滚动即可看到的区域都是最重要的部分,将某个元素至于页面的右上角,意味着该元素的重要性略逊于左上角的元素,但仍然远高于页面其他元素
底部两个象限并不是那么重要
页面底部的常见用途就是放置一些非必要的内容,比如没有足够层次性的连接,指向本页或网站其他页面的导航等等。这些内容若是用户没有看到,也没有什么大不了的
网格不过是一系列相交线分割出的大小一致且极具逻辑性的方框。若在布局中严格依照网格,元素的比例和间距将变得更为协调统一,虽然这可能让作品过于规整、缺乏创造性
根据需要,可以使用绝对定位(position: absolute
)或是相对定位(position: relative
)来打破网格的限制
大多数浏览器都支持缩放页面的文本字号,很多视力不佳的人很依赖这个功能。字号会进行放大(150%甚至更大),字号放大后可能会导致文本重叠问题,尤其是类似导航链接之类的小块文字区域容易受影响
最常见的两种内容溢出情况:
CSS引入浮动的本意是让文本能够环绕在其中内嵌的其他元素周围,而不是为了页面布局
浮动后可以使用清除浮动的的方式来让某一元素不再跟随在另一元素后面。清除浮动的方式有很多,这里就不一一列举了
绝对定位中遇到的最多的问题就是垂直方向溢出。绝对定位元素不像浮动元素那样能够被“清除”
避免方法:
overflow: auto
或者overflow: scroll
来让内容超出时出现滚动条