CSS布局的一些技巧

最新推荐文章于 2025-06-09 22:31:27 发布

weixin_34232363

最新推荐文章于 2025-06-09 22:31:27 发布

阅读量58

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/cckui/p/7456202.html

本文介绍了使用max-width代替width来改善小窗口浏览体验的方法，探讨了box-sizing属性如何避免内边距和边框增加元素宽度的问题，并展示了如何利用Flexbox实现居中布局。

max-width

通常使元素水平居中用的较多的方法为：

#main {
  width: 600px;
  margin: 0 auto; 
}

但是，当浏览器窗口比元素的宽度还要窄时，浏览器会显示一个水平滚动条来容纳页面，从而影响页面可观性。

用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。这点在移动设备上显得尤为重要。

#main {
  width: 600px;
  margin: 0 auto; 
}

目前所有的主流浏览器包括IE7+在内都支持 max-width。

box-sizing

当你设置一个元素为 ==box-sizing: border-box;== 时，此元素的内边距和边框不再会增加它的宽度。

下面的div1和div2宽度相同：

.div1{
  width: 500px;
  margin: 20px auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.div2 {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border: solid blue 10px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

一些CSS开发者想要页面上所有的元素都有如此表现。所以开发者们把以下CSS代码放在他们页面上：

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

这样可以确保所有的元素都会用这种更直观的方式排版。

flexbox

使用 Flexbox 居中布局非常方便（详见：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html）：

.div {
  height: 300px;
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}

注：文章参考了http://zh.learnlayout.com/

转载于:https://www.cnblogs.com/cckui/p/7456202.html