css+div知识温馨
博客专区 > lilugirl 的博客 > 博客详情
css+div知识温馨
lilugirl 发表于3年前
css+div知识温馨
  • 发表于 3年前
  • 阅读 22
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

居中的两种方式:

直接对盒子设置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可以定义具体页面中的布局


共有 人打赏支持
粉丝 85
博文 292
码字总数 92227
×
lilugirl
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: