盒子模型


  • 关于CSS重要的一个概念就是CSS盒子模型。它控制着页面这些元素的高度和宽度。盒子模型多少会让人产生一些困惑,尤其当涉及到高度和宽度计算的时候。真正盒子的宽度(在页面呈现出来的宽度)和高度,需要加上一些其它的属性,例如:

    • padding + border + width= 盒子的宽度
    • padding+ border + height = 盒子的高度
  • 这看起来并不是那么直观,那么我们看一个图:
 
 
  • 这意味着,如果我们设置一个宽度为200px,而实际呈现的盒子的宽度可能会大于200px(除非没有左右边框和左右补白)。这可能看起来比较怪,CSS设置的宽度仅仅是内容区的宽度,而非盒子的宽度。同样,高度类似

  • 这导致的直接结果是当我们希望页面呈现的盒子的宽度是200px的时候,我们需要减去它的左右边框和左右补白,然后设置为对应的CSS宽度。例如上图,我们设置希望盒子宽度为200px,则需要先减去左右补白各20px,左右边框各1px,然后设置对应的CSS宽度158px

  • 幸运的是,我们有更好的方法达到我们想要的目的

box-sizing

  • 语法:box-sizing: content-box | border-box | inherit;

  • 与上面不同的是,当你设置box-sizing:border-box以后,这就能达到你想要的目的。例如,上面我们想要一个宽度为200px的盒子,那么我们直接设置宽度为200px。是不是看起来清晰多了。当再设置它的左右边框和左右补白后,它的内容区会自动调整。这可能更直接和一目了然。CSS代码如下:

div {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 1px solid #DDD;
}
 
 
  • 实际上,这更被设计者和开发者推崇

  • 一些开发人员觉得box-sizing使用起来十分方便,所以他们主张通过通用选择器将这个属性应用于每个元素

  • 但这样的观点未免有些偏激,而且还会导致不必要的困难,所以更好的方法是只在实际需要时才使用这个属性

*{
margin:0;
padding:0;
box-sizing:border-box;
}
  • 写上 box-sizing: border-box; ,设置padding值 也不用担心没有减小宽度值而变形

box-sizing其它的值

  • content-box

    • 描述:在宽度和高度之外绘制元素的内边距和边框。
 
 
  • border-box

    • 描述:为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制
 
 
  • inherit

    • 描述:继承 父元素 box-sizing属性的值

浏览器兼容性

  • IE8及以上版本支持该属性,Firefox 需要加上浏览器厂商前缀-moz-,对于低版本的IOSAndroid浏览器也需要加上-webkit-。实际上,很多reset.css或者normal.css里都包含如下CSS语句,也是比较赞成的用法:
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  }

box-sizing 布局三栏目案例

div{
height:700px;
float:left;
}
div.left{
width:25%;
background:red;
}
div.cent{
width:50%;
box-sizing:border-box;/*可以改变元素以使其宽度包含填充*/
/* 现在整个元素,包括填充在内,占页面总宽度的50%,所以元素的组合宽度为100%,这全程它们很好地适应于它们的容器.*/
background:yellow;
padding:0 20px;/*加了这个会使盒子内容溢出 但是box-sizing很好的自适应了*/
}
div.right{
width:25%;
background:blue;
}
<div class="left"></div>
<div class="cent"></div>
<div class="right"></div>
  • 效果
 
 
 

作者:poetries
链接:http://www.jianshu.com/p/e2eb0d8c9de6
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

学会使用box-sizing布局的更多相关文章

  1. Flex box弹性布局 及 响应式前端设计的优化

    Flex box弹性布局 Flex box是CSS3新添加的一种模型属性,它的出现有力的打破了我们常常使用的浮动布局.实现垂直等高.水平均分.按比例划分,可以实现许多我们之前做不到的自适应布局.如果你 ...

  2. css3盒模型学习--利用box自适应布局

    box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典   的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box-flex属性还没 ...

  3. 十天学会DIV+CSS(DIV布局)

    一列布局: 一列固定宽度.一列固定宽度居中.一列自适应宽度.一列自适应宽度居中 一列固定宽度 <head> <style type="text/css"> ...

  4. CSS3与页面布局学习总结(二)——Box Model、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  5. CSS3与页面布局学习笔记(二)——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  6. 30 分钟学会 Flex 布局

    30 分钟学会 Flex 布局 有酒   617 人赞同了该文章 为什么我要写这一篇关于 Flex 布局的教程? 因为它十分简单灵活,区区简单几行代码就可以实现各种页面的的布局,以前我在学习页面布局的 ...

  7. flutter系列之:把box布局用出花来

    目录 简介 LimitedBox SizedBox FittedBox 总结 简介 flutter中的layout有很多,基本上看layout的名字就知道这个layout到底是做什么用的.比如说这些l ...

  8. Box Model,边距折叠,内联和块标签,CSSReset

    一.盒子模型(Box Model) 1.1.宽度测试 1.2.溢出测试 1.3.box-sizing属性 1.4.利用CSS画图 二.边距折叠 2.1.概要 2.2.垂直方向外边距合并计算 三.内联与 ...

  9. 移动端布局,C3新增属性

    <html5拖拽> 1.给元素设置 draggable="true" 属性,这个元素就可以被拖拽了 <拖拽元素事件> 2.ondragstart 拖拽前触发 ...

  10. 这些HTML、CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML、CSS、盒子模型、内容布局)

    这些HTML.CSS知识点,面试和平时开发都需要 No1-No4   系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) ...

随机推荐

  1. Spark源码系列:DataFrame repartition、coalesce 对比

    在Spark开发中,有时为了更好的效率,特别是涉及到关联操作的时候,对数据进行重新分区操作可以提高程序运行效率(很多时候效率的提升远远高于重新分区的消耗,所以进行重新分区还是很有价值的).在Spark ...

  2. LeetCode - Min Remaining Chess Pieces

    假设有一个棋盘(二维坐标系), 棋盘上摆放了一些石子(每个石子的坐标都为整数). 你可以remove一个石子, 当且仅当这个石子的同行或者同列还有其它石子. 输入是一个list of points. ...

  3. jquery考试成绩统计系统

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. linux 域名解析

    vi /etc/hosts  中添加ip地址和域名  111.111.111.111   aa.swddjtc.cn   然后重启 /etc/init.d/network restart

  5. web.py模块使用

    web.py模块 import time import web urls=("/",'hello') class hello(): def GET(self): return (t ...

  6. Sqlserver 计算两坐标距离函数

    mark if exists (select * from dbo.sysobjects where id = object_id(N'UF_ETL_GetDistance') and xtype i ...

  7. idea 的方法上面注释在格式化后换行问题

    通过/**生成的方法上面的模板样式是: /** * 楼盘 * @param build * @return */ 格式化代码后是: /** * 楼盘 * * @param build * @retur ...

  8. Ubuntu平台rm误删的文件如何恢复

    安装:Ubuntu下也可以直接用apt-get来获取extundelete 以我自己的Ubuntu14.04.3来看: df 命令是linux系统上以磁盘分区为单位来查看文件系统的命令,后面可以加上不 ...

  9. 如何启用小米手机5c的ROOT权限

    小米手机5c怎么样开通了root超级权限?大家都知道,android设备有root超级权限,一旦手机开通了root相关权限,能够实现更强大的功能,举个例子大家部门的营销部门的同事,使用某些营销应用都需 ...

  10. 怎么安装Scrapy框架以及安装时出现的一系列错误(win7 64位 python3 pycharm)

    因为要学习爬虫,就打算安装Scrapy框架,以下是我安装该模块的步骤,适合于刚入门的小白: 一.打开pycharm,依次点击File---->setting---->Project---- ...