静态页面的各种问题

静态页面的各种问题

（1）当两个容器嵌套时,如果外层容器和内层容器之间没有别的元素,firefox会把内层元素的margin-top作用与父元素。

解决方法：给子盒子设置浮动或者给父盒子设paddi-top：20px；

（2）外层DIV设置了高与宽，内层DIV如果设置maring-top不起作用

1、把margin-top改成padding-top,不过,前提是内层的Div没有设置边框
2、给外层的Div加padding-top
3、给外层DIV加：

A、float: left或right

B、position: absolute

C、display: inline-block或table-cell或其他 table 类型

D、overflow: hidden或auto

相对定位：relative 相对他自身原来的位置
绝对定位: absolute 相对他最近的有定位的父元素
固定定位: fixed 浏览器 页面

不同元素的区别
行内元素特征：(1)设置宽高无效 (2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效 (3)不会自动进行换行

span a i

超链接
斜体斜体
加粗加粗
块状元素特征：(1)能够识别宽高 (2)margin和padding的上下左右均对其有效 (3)可以自动换行 (4)多个块状元素标签写在一起，默认排列方式为从上至下

div，p、ul、li、ol、dl、dt、dd、nav等
标题标签

段落标签

• 无序列表

1. 有序列表

表格 表单 行内块元素：特征：(1)不自动换行 (2)能够识别宽高(3)元素排列在一行;

img input

图片
文本框
文本域
下拉菜单
按钮

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

常用的方法
　　1.给父盒子设置溢出隐藏 overflow:hidden;