盒子模型


  • 关于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. 一张图看懂AI、机器学习和深度学习的区别

    AI(人工智能)是未来,是科幻小说,是我们日常生活的一部分.所有论断都是正确的,只是要看你所谈到的AI到底是什么. 例如,当谷歌DeepMind开发的AlphaGo程序打败韩国职业围棋高手Lee Se ...

  2. myBatis---接口代理开发(demo)

    一.概述 使用接口代理开发,可以不用写接口的实现类,而采用的是MapperFactoryBean代理的实现类. * 接口代理方式开发,遵循四大原则 * 1.方法名 == mapper.xml的id名 ...

  3. gtest 三种事件机制

    前言: 1.首先说明gtest中事件的结构层次: 测试程序:一个测试程序只有一个main函数,也可以说是一个可执行程序是一个测试程序.该级别的事件机制会在程序的开始和结束执行. 测试套件:代表一个测试 ...

  4. jQuery案例2

    $(this).index用来获取取到的所有元素的序号 省市联动 <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xh ...

  5. bond-vlan-bridge

    拓扑介绍 Eth-Trunk5 down down 0% 0% 0 0 10GE1/0/5 down down 0.01% 0.01% 0 0 10GE2/0/5 down down 0.01% 0% ...

  6. 创建一个dynamics 365 CRM online plugin (五) - Images in Plugin

    Snapshots of the primary entity's attributes from database before(pre) and after (post) the core pla ...

  7. intval — 获取变量的整数值

    echo intval ( '-42' ); // -42

  8. chrony配置的和相关命令

    ntp命令 查看时间同步源: $ chronyc sources -v 查看时间同步源状态: $ chronyc sourcestats -v 设置硬件时间 硬件时间默认为UTC: $ timedat ...

  9. C语言之一维数组与指针

    一维数组: 假如有一维数组如下: ]; 该数组有3个元素,数据类型为char型,地址空间如下. 如果想访问数据,直接使用a[0].a[1].a[2]取出相应地址空间的值即可 一级指针: 指针即地址,c ...

  10. ELK实践-Kibana定制化扩展

    纵观任何一家大数据平台的技术架构,总少不了ElasticSearch:ES作为溶合了后端存储.快速检索.OLAP分析等功能的一套开源组件,更绝的是提供了一套集数据采集与前端展现为一体的框架(即ELK) ...