编写静态页面经验总结

静态页面经验总结

1.关于布局时候的居中问题

line-height是内容的垂直居中而不是元素的垂直居中，元素的垂直居中可以利用内联元素设置vertical-align:middle来实现，在确定高度的情况下也可以通过设置margin或者padding来实现。

2.关于absolute的相对位置的问题

当使用absolute定位的时候，其相对位置是以上一级有position的元素的位置为基准的，上一级中没有则上上一级，依次，直至到body元素，则以body元素的位置为基准。

3.同时使用vertical-align和line-height对于元素位置的影响 解决方法：

当文字和图片处于同一行的时候，设置vertical-align：middle和line-height：center并不能使文字和图片都处于中间从而实现文字和图片的居中对齐。

4、浮动的清除几种方法

• 空标签方法：使用一个空标签设置其属性为clear：both，或者直接调用clearfix类（clearfix类的写法在下面）
• overflow：hidden加在浮动的块的上一级属性中
• clearfix方法，将clearfix类直接加在浮动元素的父级元素上即可。

5、logo优化

1. logo 里面 首先放一个 h1 标签 ，目的是为了提权，告诉搜索引擎，这个地方很重要
2. h1里面在放一个a链接，可以返回首页的， 给a链接一个 大小 和 logo 的背景图片
3. a链接里面要放文字（网站名称），为了搜索引擎收录我们。 但是文字不要显示出来
4. 最后给 a链接一个 title 这样鼠标放到logo 上， 就可以看到提示文字了

• 方法一：要用 text-indent 移到盒子外面 （text-indent: -9999px) ，然后overflow:hidden，淘宝的做法
• 方法二：直接给font-size: 0; 就看不到文字了， 京东的做法。

6、表格与框架都具有页面布局的作用，他们在进行页面布局时各有什么优缺点？

表格用于划分页面区域的，而框架是用于分割浏览器窗口的，即使用框架结构的页面可以将一个浏览器窗口划分为多个相互独立又相互联系的小窗口，

使用框架的优点：

• 访问者的浏览器不需为每个页面重新加载导航条；
• 每个框架都具有自己的滚动条，因此访问者可以独立滚动这些框架进行浏览

使用框架的缺点：

• 并不是所有浏览器都提供良好的框