写静态页面常见问题

静态页面常见问题

1、

用<div>包含一个<img>标签时，<img>标签里面的图片下会有一条白色的缝隙

解决方法：因为标签默认是底部对齐，此时只需要给标签加一个display：block的属性将其转换为块状元素
2、

html页面缩小放大位置变了

解决方法：这是因为固定了页面的大小 缩小是其实像素是没变化的 框架小了自然就错位了 你把框架上中下的高度宽度设置为百分比就可以解决这个问题了
3、

关于布局时候的居中问题

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

浮动的清除方法

（1）空标签方法：使用一个空标签设置其属性为clear：both，或者直接调用clearfix类（clearfix类的写法在下面）

（2）overflow：hidden加在浮动的块的上一级属性中

（3）clearfix方法，将clearfix类直接加在浮动元素的父级元素上即可。
5.

同时使用vertical-align和line-height对于元素位置的影响

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

居中

text-align: center可以让下面几种情况居中:
可以让该元素的文本内容水平居中，该元素中的行内元素和行内块级元素，
但是不能让元素内部的块级元素水平居中
垂直居中，用的最多的是让line -height=元素的height,还有vertical-align,
也是垂直对齐，他一般是让图片右边的文本对齐图片的上中下。

7.
z-index的使用

z-index只能在position属性值为relative或absolute或fixed的元素上有效。
z-index值只决定同一父元素中的同级子元素的堆叠顺序。父元素的z-index值（如果有）为子元素定义了堆叠顺序（css版堆叠“拼爹”）。  
向上追溯找不到含有z-index值的父元素的情况下，则可以视为自由的z-index元素，它可以与父元素的同级兄弟定位元素或其他自由的定位元素来比较z-index的值，  
决定其堆叠顺序。同级元素的z-index值如果相同，则堆叠顺序由元素在文档中的先后位置决定，后出现的会在上面。  
所以如果当你发现一个z-index值较大的元素被值较小的元素遮挡了，请先检查它们之间的dom结点关系，多半是因为其父结点含有激活并设置了z-index值的position定位元素。  

8.
定位模式？定位的参照点？
相对定位：relative 相对他自身原来的位置
绝对定位: absolute 相对他最近的有定位的父元素
固定定位: fixed 浏览器 页面
9.
伪类选择器

a:link :没有访问过的链接
a:visited ：已经访问过的链接
a:hover ： 鼠标移动到链接上
a:actie ：选定的链接（通俗的说就是鼠标点击不放的时候）
10
权重（重点）

带有 !important 的权重为 10000

在行内写的css样式权重为1000

id选择器的权重为100

类选择器的权重为10

标签选择器的权重为1
11

**margin-top塌陷解决方法**

１.当我们页面布局时，经常会遇见margin-top塌陷问题
　　margin-top塌陷是在CSS的盒子模型中出现的一种现象，描述的是当父div包裹着一个div的时候，当给子div设置margin-top属性时，此时只是想让子div的边框距离父div边框有一段距离，而却出现了父div的顶端距离出现了位移，这就是margin-top塌陷的现象。

常用的方法
　　1.给父盒子设置溢出隐藏 overflow:hidden;
12
4.盒子模型的各部分组成

区分padding-left和margin-left的区别简单的说padding是内边距，margin是外边距