css+div知识温馨

居中的两种方式:

直接对盒子设置margin-left:auto; margin-right:auto  ,如果要设置垂直居中,发现这种方法无效,无法通过设置margin:auto让垂直也居中

相对于页面居中的另一种写法
#login{
width:300px;
height:200px;
background:green;
position:absolute;
top:50%;
left:50%;
margin-left: -150px;
margin-top:-100px;

}


对于区块元素 都定义display:inline IE里显示的是漂浮状态,火狐里根本就不显示任何东西

对于IE 漂浮不漂浮是在同一个文档流下, 而火狐是显示的不同文档流

让所有区块都漂浮就可以解决这两个兼容问题 (IE9已经解决以上问题 )

line-height 属性: 对文字可以设置水平居中,却无法实现垂直居中,如果希望文字垂直居中,不要设置文字外框的height,而是设置line-height属性, 这样文字会居中在这个高度。

关于position
position:relative ,position:absolute可以自动激活z-index ,
如果没有定义position:relative ,position:absolute 及时添加了z-index属性也不起作用
position:relative 是相对于自己在z-index=0的位置,position:absolute是相对于自己最近的设置了position:relative 或者position:absolute的父元素的位置
 
 
关于z-index
z-index为负值的时候,javascript将不起作用
 
 
一个站点的css结构建议采用 base.css+common.css+page.css的模式
其中base.css 定义CSS reset 以及一些原子类
common.css 可以定义页面的框架
page.css可以定义具体页面中的布局


你可能感兴趣的:(css+div知识温馨)