前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >css+div知识温馨

css+div知识温馨

作者头像
lilugirl
发布2019-05-26 20:36:11
1.6K0
发布2019-05-26 20:36:11
举报
文章被收录于专栏:前端导学

居中的两种方式:

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档