码迷,mamicode.com
首页 > Web开发 > 详细

关于CSS布局的一些经验

时间:2015-06-01 18:37:16      阅读:143      评论:0      收藏:0      [点我收藏+]

标签:

为了防止浏览器宽度变化影响内容的显示 通常会这样做

<body>
  <div class="wrapper">

    ……

  </div>
</body>

 

.wrapper {
  width:960px;
  margin:auto;
}

这样内容就有了一个固定的宽度 而且能居中显示 

当窗口宽度小于960px就要考虑响应式布局了

 

CSS定位默认static布局 按照从上往下排列

relative是相对于static布局设置位置

absolute是确切位置

fixed是固定位置 网页滚动时不会移动

 

box1浮动 box2不浮动 那么box2会呆在默认的位置 无视box1的存在:

<body>
  <div class="box1"></div>
  <div class="box2"></div>
</body>

.box1 {
  float:right;
  width:80px;
  height:80px;
  background-color:red;
}
.box2{
  width:80px;
  height:80px;
  background-color:green;
}

技术分享

box1浮动 box2浮动:

.box1 {
float:right;
width:80px;
height:80px;
background-color:red;
}
.box2{
float:right;
width:80px;
height:80px;
background-color:green;
}

技术分享

Keep Going

关于CSS布局的一些经验

标签:

原文地址:http://www.cnblogs.com/tangyongjie/p/4544340.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!