默认 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. # Hawk：开源贡献计划，设计，反思

    Hawk在发布之后,收到了不少朋友的感谢和使用反馈,沙漠君表示非常开心.软件肯定有很多的问题和不足,还有很多可扩展的空间,因此我希望更多的朋友,能够参与到改进Hawk的计划中来,为开源世界作出努力. ...

  2. iOS开发之SQLite-C语言接口规范(一)——Ready And Open Your SQLite

    为什么要搞一搞SQLite的C语言接口规范呢? 因为在做iOS开发中难免会遇到操作数据库的情况,你可以使用第三方的FMDB等,或者使用CoreData.但我们还是有必要去搞清楚如何去使用SQLite的 ...

  3. 关于有默认值的字段在用EF做插入操作时的思考（续）

    问题描述 今天下午(看现在这时间,应该是昨天下午了哈),园友 choon 写了这样一篇博文<关于有默认值的字段在用EF做插入操作时的思考>. 博文内容主要记录的是 choon 使用 EF ...

  4. 一种C#生成符合Java规则的二进制文件方法

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.一个项目中的真实问题 实际项目中,本想通过C#制作小工具生成SHP ...

  5. JS代码实现的聊天框

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. Solr学习总结（三）Solr web 管理后台

    前面讲到了Solr的安装,按道理,这次应该讲讲.net与数据库的内容,C#如何操作Solr索引等.不过我还是想先讲一些基础的内容,比如solr查询参数如何使用,各个参数都代表什么意思? 还有solr ...

  7. Spark计算均值

    作者:Syn良子 出处:http://www.cnblogs.com/cssdongl 转载请注明出处 用spark来快速计算分组的平均值,写法很便捷,话不多说上代码 object ColumnVal ...

  8. 使用Unified Communications Managed API获取Lync在线会议的链接地址

    最近在项目上遇到一个问题,需要能够在程序中获取Lync会议的链接地址.Lync是微软出品的一套即时通信(IM)客户端软件,配合Microsoft Lync Server使用,其前身是Microsoft ...

  9. Oracle Client安装与基本配置

    1. 安装Oracle Client, 访问Oracle站点下载Oracle Database 11g Release 2 Client 或者(直接下载Oracle 11gR2 Client) 2. ...

  10. 7.7 数据注解特性--Table

    大家可能注意到,有几个特性,我没有翻译,因为实在是太简单了,看一下就知道,之前也学过,现在只是系统学一下,所以就粗略的看一下就行了. 现在学习数据注解特性的--Table特性. Table 特性可以被 ...