CODE大全
版权声明:本文为博主原创文章,未经博主允许不得转载。

前端布局 margin:auto、max-width属性和盒子模型使用详解

发布时间:『 2016-11-18 11:19』  博客类别:WEB前端  阅读(1578) 评论(0)

在《前端布局 display、inline-block 属性使用详解》这篇文章中,我重点讲到了display和inline-block,并对他们的特点进行了效果实战。

本章我们将对常用的 margin:auto、max-width属性和盒模型的使用进行详细的讲解!希望大家喜欢!

margin:auto 和 max-width

margin:auto:

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

设置块级元素的 width 可以阻止它从左到右撑满容器。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度,然后剩余的宽度会一分为二成为左右外边距。

唯一的问题是,当浏览器窗口比元素的宽度还要窄时,浏览器会显示一个水平滚动条来容纳页面。

max-width:

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

在这种情况下使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。这点在移动设备上显得尤为重要,调整下浏览器窗口大小检查下吧!

顺便提下, 所有的主流浏览器包括IE7+在内都支持 max-width ,所以放心大胆的用吧。

盒模型

在我们讨论宽度的时候,我们应该讲下与它相关的一个重点知识:盒模型当你设置了元素的宽度,实际展现的元素却能够超出你的设置因为元素的边框和内边距会撑开元素。看下面的例子,两个相同宽度的元素显示的实际宽度却不一样。

.simple {
  width: 500px;
  margin: 20px auto;
}
.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border: 10px #6AC5AC solid;
}

效果展示

class="simple"

盒子模型

class="fancy"

盒子模型


——— 全文完 ———
如有版权问题,请联系532009913@qq.com。
关键字:   HTML5     web前端     margin     max-width     盒子模型  
评论信息
暂无评论
发表评论
验证码: 
Powered by CODE大全 | 鄂ICP备14009759号-2 | 网站留言 Copyright © 2014-2016 CODE大全 版权所有