默认 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. Visual Studio常用小技巧一：代码段+快捷键+插件=效率

    用了visual studio 5年多,也该给自己做下备忘录了.每次进新的组换新的电脑,安装自己熟悉的环境又得重新配置,不做些备忘老会忘记一些东西.工具用的好,效率自然翻倍. 1,代码段 在Visua ...

  2. 利用pixi.js制作精灵动画

    CSS Sprites 技术对于广大的前端工程师来说应该是一点也不陌生.国内开发者昵称为CSS精灵,通过一定的技术手段,让精灵动起来,我称其为精灵动画,那么目前有哪些实现方式 呢?下面让我们详细的聊聊 ...

  3. MongoDB碎碎念

    1. 如何从备份节点读取数据 默认是不允许的,会报如下错误: testReplSet:SECONDARY> show dbs --19T10:: E QUERY [thread1] Error: ...

  4. MySQL官方.NET Core驱动已出，支持EF Core

    千呼万唤始出来MySQL官方.NET Core驱动已出,支持EF Core. 昨天MySQL官方已经发布了.NET Core 驱动,目前还是预览版,不过功能已经可用. NuGet 地址:https:/ ...

  5. js ES6 对字符的操作注意事项

    1.codePointAt方法是测试一个字符由两个字节还是由四个字节组成的最简单方法. function is32Bit(c) { return c.codePointAt(0) > 0xFFF ...

  6. 《selenium2 Java 自动化测试实战（第二版）》 更新2016.5.3

    java 版来了!! 本文档在<selenium2 Python 自动化测试实战>的基础上,将代码与实例替换为java ,当然,部分章节有变更.这主要更语言本身的特点有关.集合和java下 ...

  7. Web API与文件操作

    前段时间,一直有练习ASP.NET MVC与Web API交互,接下来,Insus.NET再做一些相关的练习,Web API与文件操作,如POST文件至Web API,更新或是删除等. 不管怎样,先在 ...

  8. NanUI for Winform 使用示例【第一集】——山寨个代码编辑器

    NanUI for Winform从昨天写博客发布到现在获得了和多朋友的关注,首先感谢大家的关注和支持!请看昨天本人的博文<NanUI for Winform发布,让Winform界面设计拥有无 ...

  9. java中的String

    String作为java最常用的类,被广大程序员们蹂躏已久,让我们又爱又恨,应该如何正确的使用它呢,老姜带你一起来揭开它神秘的面纱. 一.String类定义时被冠上了final的标识符,决定了它终生不 ...

  10. 《疯狂Java讲义》学习笔记——第2章 理解面向对象

    面向对象的三种基本特征:继承,封装,多态 UML(统一建模语言) 2.1 面向对象 2.1.1 结构化程序设计简介 图2.1  结构化软件的逻辑结构示意图 从图2.1可以看出,结构化设计需要采用自顶向 ...