css学习-布局
css学习-布局
bosscheng 发表于3年前
css学习-布局
  • 发表于 3年前
  • 阅读 67
  • 收藏 2
  • 点赞 0
  • 评论 0

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

css布局技术的根本都是三个基本概念:定位,浮动,外边距操纵。


在页面中水平居中

width:920px
margin:0 auto;

body{
    text-align:center // ie会误解让所有东西居中,而不只是文本。
}

创建两列和三列的基于浮动的布局

主要都是使用float来实现。

但是最好添加display:inline 来预防ie中的双外边距浮动产生的bug.

可以对

.content{
    overflow:hidden;
}

创建固定宽度、流式和弹性布局。

对于流式布局 : 尺寸是使用百分比而不是像素设置的。这使得流式布局能够相对于浏览器窗口进行伸缩。

但是在变小到时候 可以添加像素或者添加min-width.从而防止问题呢。

对于弹性布局:对于字号而不是浏览器宽度来设置元素宽度。以em为单位设置宽度,以确保在字号在增加的时候整个布局随着扩大。

创建高度相等的列

对于css3 可以通过 

column-count

column-witdh

column-gap

column-rule



css框架和css系统


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