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,一经查实,立即删除!

相关文章

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

原文地址: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)} //输…

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…

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

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

如何给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专…

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

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

HashMap实现原理及源码分析

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

使用NetBeans Lambda支持在Java 8中使用Lambda表达式对列表进行排序

作为JSR 335的一部分&#xff0c; Lambda表达式已从Java 8开始引入Java语言&#xff0c;这是Java语言的一个重大变化。 如果您想了解更多关于Lambda表达式以及JSR 335的信息&#xff0c;可以访问以下资源&#xff1a; 在OpenJDK上的Lambda项目 。 Lambda常见问题解答 。 另一…

qq物联网 android sdk,物联网在腾讯:QQ物联

原标题&#xff1a;物联网在腾讯&#xff1a;QQ物联在物联网方面的一些产品&#xff0c;作为BAT三巨头之一&#xff0c;腾讯自然不能落后。本文就介绍一下腾讯的物联网平台&#xff0c;QQ物联。QQ物联&#xff1a;让每个设备成为一个QQ好友QQ物联的最大特点&#xff0c;就是让每…

Vue-cli 搭建项目

Vue框架学习--使用 vue-cli 搭建项目vue-cli 是一个官方发布 vue.js 项目脚手架&#xff0c;使用 vue-cli 可以快速创建 vue 项目&#xff0c;GitHub地址是&#xff1a;https://github.com/vuejs/vue-cli一、安装node.js 首先需要安装node环境(必须)&#xff0c;可以直接到中文…

HTML音乐标签和滚动

<!-- 音乐标签 --><embed src"1.mp3" type""><embed src"1.mp3" type"" hidden"true"> <!-- 滚动 --><marquee behavior"alternate" >gun</marquee><marquee behavior&qu…

响应式框架Bootstrap栅格系统

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。Bootstrap 提供了一些辅助类&#xff0c;以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备&#xff0c;实现内容对设备的显示和隐…

int定义源码 python_python学习(第一章)

1.print输出语句# 输出字符串 print(hello) # 输出数字 print(234) print("I come from China") print("I come from China") # 输出表达式 print(71) # 将数据输出到文件中 file fp open(D:/pythoncode.txt, a) print("I come from China",…

使用Specs2和客户端API 2.0进行富有表现力的JAX-RS集成测试

毫无疑问&#xff0c; JAX-RS是一项杰出的技术。 即将发布的规范JAX-RS 2.0带来了更多的强大功能&#xff0c;尤其是在客户端API方面。 今天的帖子的主题是JAX-RS服务的集成测试。 有很多出色的测试框架&#xff0c;例如REST可以确保提供帮助&#xff0c;但是我要展示的方式是使…

python web开发-flask访问请求数据request

Request对象在web应用的开发中是一个非常重要的对象&#xff0c;主要用来获取用户发来的请求数据。 常用属性参考&#xff1a;http://docs.jinkan.org/docs/flask/api.html#flask.request 下面我们以一个表单提交的例子来说明一些常用request属性的使用。 创建一个表单的templa…

Showplan 逻辑运算符和物理运算符参考

本文档已存档&#xff0c;并且将不进行维护。运算符说明了 SQL Server 如何执行查询或数据操作语言 (DML) 语句。 查询优化器使用运算符生成查询计划&#xff0c;以创建在查询中指定的结果或执行在 DML 语句中指定的操作。 查询计划是由物理运算符组成的一个树。 您可以使用 SE…

在win10中通过Anaconda3安装tensorflow

安装Anaconda3&#xff0c;然后在所有程序中启动“Anaconda Navigator”&#xff0c;如图&#xff1a; 切换到“Enviroments"(环境)中&#xff0c;在右边有个显示环境的列表&#xff0c;默认有"base(root)"&#xff0c;然后单击底部的”Create"按钮创建一个…