box-sizing -- 盒模型

  项目开发中,在浏览同事的代码,发现他经常用一个属性--box-sizing,很好奇是什么,于是乎,上网查阅资料学了起来。
  首先我们先复习一下盒模型的组成:一个div通常由 content(内容) margin padding border组成。

     
  浏览器有两种盒模型:w3c说的标准模型和ie下的传统模型。也就是css3中box-sizing中对应的属性值。

  拿盒子的尺寸来说: box-sizing
    w3c的标准模型: content-box     
      盒子的高度= conent的height padding margin border   
      盒子的宽度= content的width padding margin border
    ie下的传统模型:   border-box
      盒子的高度= content的height margin (height 包含了padding border content)
      盒子的宽度= content的width margin (width 包含了padding border content)

  看这理论感觉很乱,动手实践才是真道理。
    看一下w3下的标准模型:box-sizing:content-box

              

    这意思就是你给div本身的宽度和高度是100px,但是因为margin,padding和border的添加,导致这个div的宽度和高度随之变大。可以想象一下,一排上正好可以放5个等大的div,但是半路上给一个div添加了margin或padding或border,一排还能放下5个div吗,也许是3个或者2个,总之放不下5个。    
  box-sizing:content-box  是浏览器默认的样式,即使不添加,也会 遵遁content-box。
  看一下ie下的传统模型: box-sizing:border-box

  

      这意思就是你给div的高度和宽度是100px,不管你加了padding和border,其宽度和高度不会改变,改变的是里面(content)内容的高度和宽度。举个例子:一排上可以放5个等大的div,你给其中的一个div添加了padding或者border(没有margin),这一排上还是5个div,只不过你添加padding或border的div里的内容缩小了。

  关于这两者的区别,只要仔细观察一下layout图,就会恍然大悟,原来是这样啊。在项目开发中,我们经常遇到一行上放等大的li时,只要添加了padding或者border时,容易往下排,右边一片空白,我们不得不调一下li的height和width,现在不用啦,通过box-sizing:border-box就可以直接解决了。
  box-sizing:border-box主要用于:布局以及表单元素,表单中不同类型type的默认宽度不一致,可以通过border-box解决。

  兼容性:
  box-sizing是css3的新属性,会有兼容性问题。

    
   box-sizing现代浏览器都支持,但IE家族只有IE8版本以上才支持,虽然现代浏览器支持box-sizing,但有些浏览器还是需要加上自己的前缀,Mozilla需要加上-moz-,Webkit内核需要加上-webkit-,Presto内核-o-,IE8-ms-,所以box-sizing兼容浏览器时需要加上各自的前缀。例如:

  

div{-moz-box-sizing: content-box;  -webkit-box-sizing: content-box; -o-box-sizing: content-box; -ms-box-sizing: content-box; box-sizing: content-box; 
}div {-moz-box-sizing: border-box;  -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }

  css3的计算属性calc()的意思和box-sizing=border-box一样。简单用box-sizing,复杂可以用calc()

  另外,有一位大神对box-sizing的理解以及讲解特别好,我也是看他的文章才搞明白的,如果想了解更深,可以去访问他的文章 http://blog.sina.com.cn/s/blog_877284510101kt87.html

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369383.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

有温度传感器的风机控制系统C语言,毕业论文--基于单片机的工业风机控制器设计与实现.doc...

大连东软信息学院本科毕业设计(论文)论文题目论文题目:基于单片机的工业风机控制器设计与实现系 所:电子工程系专 业:电子信息工程(嵌入式系统工程方向)学生姓名:学生学号:指导教师:导师职称:讲…

JAXB和java.util.Map

具有讽刺意味的是,可能很难在JAXB(JSR-222)中映射java.util.Map类? 在这篇文章中,我将介绍一些使其变得更容易的项目。 Java模型 以下是我们将用于此示例的Java模型。 顾客 Customer类具有Map类型的属性。 我之所以…

转载大神的一篇文章----【如何选择开源许可证?】

原文地址:http://www.ruanyifeng.com/blog/2011/05/how_to_choose_free_software_licenses.html 如何为代码选择开源许可证,这是一个问题。 世界上的开源许可证,大概有上百种。很少有人搞得清楚它们的区别。即使在最流行的六种----GPL、BSD、…

教你如何用 lib-flexible 实现移动端H5页面适配

前话 好久没写教程了(可能会误导新手的菜鸟教程( ̄▽ ̄)")。 这是我的github,欢迎前端大大们和我一起学习交流 https://github.com/pwcong 最近入职公司做前端实习,这几个星期来学到了移动端H5页面适配…

使用GlassFish 3.1.2.2和Primefaces 3.4的JDBC领域和基于表单的身份验证

我的博客上最受欢迎的帖子之一是有关JDBC安全领域和带有Primefaces的GlassFish上基于表单的身份验证的简短教程。 在收到有关它不再适用于最新的GlassFish 3.1.2.2的评论后,我认为可能是时候重新访问它并提出更新的版本了。 开始了: 制备 就像在原始教程…

thinkcmf常用标签

1、图片地址&#xff1a;{:cmf_get_image_url($vo.icon)} 2、模板控件 模板变量调用&#xff1a;$theme_vars.title <widget name"aboutUs">{$widget.title} //控件标题 {$widget.vars.subTitle} //控件变量 subTitle {:nl2br($widget.vars.content)} //输…

esplise自定义快捷代码补全_【Eclipse】_Eclipse自动补全增强方法 常用快捷键

一&#xff0c;Eclipse自动补全增强方法在Eclipse中&#xff0c;从Window -> preferences -> Java -> Editor -> Content assist -> Auto-Activation下&#xff0c;我们可以在"."号后面加入我们需要自动提示的首字幕&#xff0c;比如"abc"&…

ubuntu下docker安装,配置python运行环境

参考自: 1.最详细ubuntu安装docker教程 2.使用docker搭建python环境 首先假设已经安装了docker&#xff0c;卸载原来的docker 在命令行中运行&#xff1a; sudo apt-get updatesudo apt-get remove docker docker-engine docker.io containerd runc 安装docker依赖 apt-get…

android前置拍照镜像代码,从Android的前置摄像头拍摄的镜像翻转视频

我有一个能够拍摄图像和录制视频的摄像头应用程序。但是&#xff0c;当从设备前置摄像头捕捉图像或录制视频时&#xff0c;结果会翻转&#xff0c;就像您在看镜子一样。我想再次翻转&#xff0c;所以看起来很正常。我设法与图像要做到这一点&#xff0c;通过使用Matrix翻转Bitm…

python 打造一个sql注入脚本 (一)

0x00前言&#xff1a; 昨天刚刚看完小迪老师的sql注入篇的第一章 所以有了新的笔记。 0x01笔记&#xff1a; sql注入原理&#xff1a; 网站数据传输中&#xff0c;接受变量传递的值未进行过滤&#xff0c;导致直接带入数据库查询执行的操作。 sql注入对渗透的作用&#xff1a; …

文档声明和HTML样式表

文档声明 不是注释也不是元素&#xff0c;总是在HTML的第一行 书写格式&#xff1a;<!DOCTYPE HTML> 是用于通知浏览器目前文档正使用哪一个HTML版本&#xff08;相关属性 lang&#xff09; 若不写文档声明&#xff0c;浏览器渲染页面时会进入怪异模式 HTML元素又叫根元素…

JSF –渴望的CDI bean

每个人都知道JSF 2中热切的托管bean。 ManagedBean具有eager属性。 如果eager true并且范围是application&#xff0c;那么必须在应用程序启动时而不是在第一次引用该bean时创建此bean。 当您要在应用程序启动期间加载应用程序范围的数据&#xff08;例如&#xff0c;菜单的某些…

mybatis添加方法可以传map吗_Mybatis中传递多个参数的4种方法总结

前言现在大多项目都是使用Mybatis了&#xff0c;但也有些公司使用Hibernate。使用Mybatis最大的特性就是sql需要自己写&#xff0c;而写sql就需要传递多个参数。面对各种复杂的业务场景&#xff0c;传递参数也是一种学问。下面给大家总结了以下几种多参数传递的方法。方法1&…

java面向对象(五)之多态

多态 面向对象编程有三大特性&#xff1a;封装、继承、多态。 封装隐藏了类的内部实现机制&#xff0c;可以在不影响使用的情况下改变类的内部结构&#xff0c;同时也保护了数据。对外界而已它的内部细节是隐藏的&#xff0c;暴露给外界的只是它的访问方法。 继承是为了重用父类…

android最新知识点总结,学习android之 知识点总结

开发andorid程序必备&#xff1a;Eclipse 3.5以上版本SDK类似于java中的jdk。Adt 是开发Eclipe上的一个插件。组件使用&#xff1a;TestView:为文本设置超链接,需设置该属性andorid:autoLink”all”&#xff0c; 具体如下&#xff1a;android:id"id/myTxtView01"andr…

如何给VirtualBox虚拟机的ubuntu LVM分区扩容

我在VirtualBox安装的ubuntu里安装Cloud Foundry时遇到错误信息&#xff0c;磁盘空间不够了&#xff1a; 使用这三个命令做了清理之后&#xff0c;结果依然不够理想&#xff1a; (1) sudo apt-get autoclean&#xff08;已卸载软件的安装包&#xff09; (2) sudo apt-get clean…

您好GroovyFX

GroovyFX汇集了我最喜欢的两件事&#xff1a; Groovy和JavaFX 。 GroovyFX项目主页面将GroovyFX描述为“ [为JavaFX 2.0提供Groovy绑定”。 该页面上进一步描述了GroovyFX&#xff1a; GroovyFX是一个API&#xff0c;它使在Groovy中使用JavaFX变得更加简单和自然。 GroovyFX专…

tf 如何进行svd_Tensorflow快餐教程(6) - 矩阵分解

摘要&#xff1a; 特征分解&#xff0c;奇异值分解&#xff0c;Moore-Penrose广义逆矩阵分解特征向量和特征值我们在《线性代数》课学过方阵的特征向量和特征值。定义&#xff1a;设A∈Fnn是n阶方阵。如果存在非零向量X∈Fn1使AXλX对某个常数λ∈F成立&#xff0c;则称λ是A的…

calc() ---一个会计算的css属性

最近这个月一直在赶项目开发&#xff0c;遇到的问题和学到的前端知识没有更新到博客园&#xff0c;现在闲了下来&#xff0c;就整理一下前端知识。  在项目开发中&#xff0c;在样式这方面花费的时间较多&#xff0c;因为针对于数字的变化特别多&#xff0c;本人不爱记数字&a…

HashMap实现原理及源码分析

HashMap实现原理及源码分析 哈希表&#xff08;hash table&#xff09;也叫散列表&#xff0c;是一种非常重要的数据结构&#xff0c;应用场景及其丰富&#xff0c;许多缓存技术&#xff08;比如memcached&#xff09;的核心其实就是在内存中维护一张大的哈希表&#xff0c;而H…