默认 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. Java面向对象练习

    1.定义长方形类,含: 属性:宽.高(整型): 方法:求周长.面积: 构造方法3个:(1)无参——宽.高默认值为1:(2)1个参数——宽.高均为参数值:(3)2个参数——宽.高各为参数值. 要求:进行 ...

  2. 前端编码风格规范之 HTML 规范

    HTML 规范 文档类型 推荐使用 HTML5 的文档类型申明: <!DOCTYPE html>. (建议使用 text/html 格式的 HTML.避免使用 XHTML.XHTML 以及 ...

  3. 浅谈 php 采用curl 函数库获取网页 cookie 和 带着cookie去访问 网页的方法！！！！

    由于近段时间帮朋友开发一个能够查询正方教务系统的微信公众平台号.有所收获.这里总结下个人经验. 开讲前,先吐槽一下新浪云服务器,一个程序里的   同一个函数  在PC测试可以正常运行,在它那里就会挂的 ...

  4. Microsoft Message Analyzer （微软消息分析器，“网络抓包工具 - Network Monitor”的替代品）官方正式版现已发布

    来自官方日志的喜悦 被誉为全新开始的消息分析器时代,由MMA为您开启,博客原文写的很激动,大家可以点击这里浏览:http://blogs.technet.com/b/messageanalyzer/a ...

  5. IE滤镜及其使用技巧

    Gradient Filter和AlphaImageLoader Filter 这两个属性是legend IE(IE6,7,8)中的渐变滤镜和透明滤镜,我们先详细介绍下这两个属性的用法,详情 可查看M ...

  6. 读取SD卡文件夹下的MP3文件和播放MP3文件

    首先获取SD卡path路径下的所有的MP3文件,并将文件名和文件大小存入List数组(此代码定义在FileUtils类中): /** * 读取目录中的Mp3文件的名字和大小 */ public Lis ...

  7. Linux上的SQL Server——预告片

    大家可能都听说了,微软在几个星期前宣布发布可以在Linux上完整运行的SQL Server!如果你想看下在Linux上SQL Server如何运行,进行查询是什么样的体验,可以看下下面的视频.

  8. 【原创】基于日志增量，统计qps，并基于ip排序

    增量统计日志行数(只统计上一秒) dns_qps.py #!/usr/bin/env python #_*_coding:utf-8_*_ import datetime import re impo ...

  9. 服务器Config文件不能查看的问题

      由于某种需求,需要从IIS发布的服务中下载扩展名为config的文件,但是发布文件后,在浏览器无法查看文件.根据反馈的的错误提示,大致说config属于配置文件,处于安全考虑,不能随便浏览. 如果 ...

  10. hdu-1179-二分图最大匹配

    Ollivanders: Makers of Fine Wands since 382 BC. Time Limit: 2000/1000 MS (Java/Others)    Memory Lim ...