盒子模型


  • 关于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. buildroot管理uboot+kernel+rootfs

    鉴于自己制作根文件系统太麻烦了,所以想用buildroot管理uboot,kernel,另外还可以自动生产rootfs,于是花了两天研究了下buildroot的框架和使用,在自己的2440开发板上也跑 ...

  2. Python 汉诺塔

    在汉诺塔游戏中,有三个分别命名为A.B.C得塔座,几个大小各不相同,从小到大一次编号得圆盘,每个原盘中间有一个小孔.最初,所有得圆盘都在A塔座上,其中最大得圆盘在最下面,然后是第二大,以此类推. 游戏 ...

  3. Dotnetty 的心跳

    只要你不按照实例中使用libuv,就不会有问题了. 主要区别在于 WorkerEventLoopGroup 和 MultithreadEventLoopGroup 之间.

  4. Linux系统安装IonCube的方法详解教程

    ioncube是业内优秀的php加密解密解决方案.和zend guard相比,ioncube具有如下优势: 1. 安全:zend guard的版本不是非常安全,网络上有破解使用zend,下面我们来看I ...

  5. cordova闪屏插件插件使用:cordova-plugin-splashscreen

    欢迎页本地插件,默认建议包含.启动本地应用时显示指定的图片(启动页) 1. 添加插件:cordova plugin add cordova-plugin-splashscreen 2. 调用方法:

  6. docker WARNING: IPv4 forwarding is disabled. 解决方法

    WARNING: IPv4 forwarding is disabled. Networking will not work. 在宿主机添加如下信息 echo net.ipv4.ip_forward= ...

  7. MARK DOWN 书写格式说明

    MarkdownPad2 书写格式说明: Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式,而MarkdownPad2是其中一种支持M ...

  8. hiero.ui获取实例名的方法

    在hiero.ui中经常会通过hiero.ui.windowManager().windows()来获取当前QMainWindow中的QWidget子窗口,而这些子窗口是以实例对象的方式返回的,如果想 ...

  9. Spark环境准备

    Ubuntu: 1.下载spark-2.2.1-bin-hadoop2.7.tgz,解压即可使用. 2.下载jdk-8u151-linux-x64.tar.gz,解压. 3.执行spark-2.2.1 ...

  10. Browser Page Parsing Details

    Browser Work: 1.输入网址.  2.浏览器查找域名的IP地址.  3. 浏览器给web服务器发送一个HTTP请求  4. 网站服务的永久重定向响应  5. 浏览器跟踪重定向地址 现在,浏 ...