默认 width 、height的 content-box 的宽高.

box-sizing 经常用来设置 width、height指定的区域

box-sizing 经常用做一些自适应的布局。

语法：

box-sizing：content-box | border-box

默认值：content-box

适用于：所有接受 <' width '> 和 <' height '> 的元素

继承性：无

动画性：否

计算值：指定值

取值：

content-box：
padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding )
此属性表现为标准模式下的盒模型。
border-box：
padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )
此属性表现为怪异模式下的盒模型。

说明：

设置或检索对象的盒模型组成模式。

  

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>box-sizing</title>

    <style type="text/css">

    div{

        width: 260px;

        height: 260px;

        padding: 30px;

        background-color: pink;

        border: 5px solid blue;

    }

    .sample0{

        box-sizing: content-box;

    }

    .sample1{

        box-sizing: border-box;

    }

    </style>

</head>

<body>

<div class="sample0">

    width: 260px;<br>

    height: 260px;<br>

    padding: 30px;<br>

    background-color: pink;<br>

    border: 5px solid blue;<br>

</div>

<br>

<div class="sample1">

width: 260px;<br>

    height: 260px;<br>

    padding: 30px;<br>

    background-color: pink;<br>

    border: 5px solid blue;<br>

</div>

</body>

</html>

width 、 height 与 box-sizing : border-box ,content-box 的关系的更多相关文章

  1. CSS——【元素内边距padding、元素外边距margin、元素边框border-width、元素大小width/height】与【元素显示大小】的关系

    一.基本知识 padding:元素内边距,指的是元素内边框到元素中内容的距离. 用法: padding:长度|百分比 padding-top:长度|百分比 padding-bottom:长度|百分比 ...

  2. offset[Parent/Width/Height/Top/Left] 、 client[Width/Height/Top/Left] 、 Element.getBoundingClientRect()

    开篇提示:以下内容都经个人测试,参考API文档总结,但还是不能保证完全正确,若有错误,还请留言指出___________________________________________________ ...

  3. 正则：img的url,width,height 和 a标签的url以及替换

    代码:// 内容:$detail['content'] //img的url,width,height $img = array(); $matches = array(); $regeImg = '/ ...

  4. Width Height -- (2)

    上回说到,宽高对于块级元素和行内元素发生的改变,结果是块级元素会接受宽高属性所发生的改变的,而行内元素不接受宽高属性所发生的改变. 但是,事无绝对 —— CSS属性display 通过上回进行的测试我 ...

  5. client/scroll/offset width/height/top/left ---记第一篇博客

    client/scroll/offset width/height/top/left (盒模型为contentBox,定位原点是元素左上角边框最外层的交点) clientWidth  width+左p ...

  6. as3:sprite作为容器使用时，最好不要指定width,height

    除 TextField 和 Video 对象以外,没有内容的显示对象(如一个空的 Sprite)的高度为 0,即使您尝试将 height 设置为其它值,也是这样. 如果您设置了 height 属性,则 ...

  7. ffmpeg按比例缩放--"width / height not divisible by 2" 解决方法

    最近在处理视频的时候,有这么一个需求 如果视频的分辨率宽度大于960的话,就把宽度设为960,而高度按其比例进行缩放 如果视频的分辨率高度大于540的话,就把高度设为540,而宽度按其比例进行缩放 之 ...

  8. 如何理解VB窗体中的scale类属性及width height属性之间的关系

    如何理解VB窗体中的scale类属性及width height属性之间的关系 VB中的SCALEHIEGT,SCALEWIDTH,与窗体中的WIDTH,HEIGHT的区别及关系是许多VB初学者难以理解 ...

  9. css 行内元素 块元素 替换元素 非替换元素 以及这些元素的width height margin padding 特性

    一.各种元素的width height margin padding 特性(具体css元素的分来参看二) 1.块级元素 width. height. margin的四个方向. padding的四个方向 ...

  10. css中的width,height，属性与盒模型的关系

    这段话很容易记住盒模型: css中盒子模型包含属性margin.border.padding.content,他们可以把它转移到我们日常生活中的盒子(箱 子)上来理解,日常生活中所见的盒子也具有这些属 ...

随机推荐

  1. tn文本分析语言(三)：高级语法

    标签(空格分隔): 未分类 高级操作 1.脚本表达式 用双引号包含的脚本被称为脚本表达式,目前支持嵌入Python. 脚本表达式只能在顺序表达式中使用.代码可以在三个位置存在: |位置|功能|例子| ...

  2. GROUP BY的扩展

    GROUP BY的扩展主要包括ROLLUP,CUBE,GROUPING SETS三种形式. ROLLUP rollup相对于简单的分组合计增加了小计和合计,解释起来会比较抽象,下面我们来看看具体事例. ...

  3. MySQL入门03-MySQL配置安全性、易用性

    一.设定管理员用户和密码 二.处理test库权限隐患 三.自定义脚本提升易用性 中间定义文件 启动MySQL服务 关闭MySQL服务 快捷登录MySQL 四.设置开机自动启动MySQL服务 Refer ...

  4. ThinkPHP学习（一）

    下载3.2框架后,解压缩到web目录下面,可以看到初始的目录结构如下: 3.2版本相比之前的版本自带了一个完整的应用目录结构和默认的应用入口文件,开发人员可以在这个基 础之上灵活调整.其中, Appl ...

  5. 大数据下的Distinct Count（二）：Bitmap篇

    在前一篇中介绍了使用API做Distinct Count,但是精确计算的API都较慢,那有没有能更快的优化解决方案呢? 1. Bitmap介绍 <编程珠玑>上是这样介绍bitmap的: B ...

  6. Elasticsearch 教程--分布式集群

    集群 补充章节 正如前文提到的,这就是第个补充的章节,这里会介绍 Elasticsearch 如何在分布式环境中运行. 本章解释了常用术语,比如 集群 (cluster), 节点 (node) 以及  ...

  7. MVC学习系列11---验证系列之客户端验证

    前面学习了,服务端验证,这篇文章中,我们接着学习客户端验证,客户端的验证,使用Jquery和Jquery插件来实现[jquery.validate.min.js and jquery.validate ...

  8. xml html entity 列表

    Name Character Unicode code point (decimal) Standard Description quot " U+0022 (34) XML 1.0 dou ...

  9. [Asp.net 5] Logging-新日志系统目录

    楼主有个美好的愿望——把asp.net 5所有能看懂的代码一一呈现给大家(比如C++,楼主就看不懂).现在已经做完了依赖注入.多语言.配置文件三部分,比较基础的日志就成为了楼主的下一个目标.下面是楼主 ...

  10. 各种JS模板引擎对比数据(高性能JavaScript模板引擎)

    最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据:通过测试artTemplate.juicer与doT引擎模板整体性能要有绝对优势: js模板引擎 Ja ...