1、box-sizing属性功能

官方说明文档为：http://www.w3school.com.cn/cssref/pr_box-sizing.asp

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

通俗来说就是：定义盒模型尺寸。

box-sizing属性有一下三种值：
box-sizing: content-box|border-box|inherit;

2、本文主要讲解：border-box值

盒模型的宽度元内边距（padding）和边框（border）。

示例代码：

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <title>box-sizing 属性应用</title>

        <style type="text/css">

            *{

                padding: 0;

                margin: 0;

                /*关键属性配置*/

                box-sizing: border-box;

            }

            #test{

                width: 200px;

                height: 200px;

                padding: 10px;

                border: 2px solid green;

            }

        </style>

    </head>

    <body>

       <div id="test">

           box-sizing 属性应用

       </div>

    </body>

</html>

F12审查元素：

box-sizing: border-box; 在移动端应用很多！

在bootstrap框架中也应用，所有的元素的默认盒模型均为 box-sizing: border-box;：

3、兼容性

http://caniuse.com/#search=box-sizing

兼容IE8以上主流浏览器！

box-sizing 属性应用的更多相关文章

  1. css display:box 新属性

    一.display:box; 在元素上设置该属性,可使其子代排列在同一水平上,类似display:inline-block;. 二.可在其子代设置如下属性 前提:使用如下属性,必须在父代设置displ ...

  2. CSS3与页面布局学习总结（二）——Box Model、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  3. Box Model,边距折叠，内联和块标签，CSSReset

    一.盒子模型(Box Model) 1.1.宽度测试 1.2.溢出测试 1.3.box-sizing属性 1.4.利用CSS画图 二.边距折叠 2.1.概要 2.2.垂直方向外边距合并计算 三.内联与 ...

  4. CSS3与页面布局学习笔记（二）——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  5. 移动端布局,C3新增属性

    <html5拖拽> 1.给元素设置 draggable="true" 属性,这个元素就可以被拖拽了 <拖拽元素事件> 2.ondragstart 拖拽前触发 ...

  6. CSS Display属性与盒模型

    由于HTML流式文档的特性,页面布局往往是新手最为头疼的问题之中的一个. 每一个HTML元素都会渲染为一个Box,可分为inline Box和block Box. 依据display属性的不同.Box ...

  7. CSS魔法堂：重新认识Box Model、IFC、BFC和Collapsing margins

    前言   盒子模型作为CSS基础中的基础,曾一度以为掌握了IE和W3C标准下的块级盒子模型即可,但近日在学习行级盒子模型时发现原来当初是如此幼稚可笑.本文尝试全面叙述块级.行级盒子模型的特性.作为近日 ...

  8. 重新认识Box Model、IFC、BFC和Collapsing margins

    尊重原创,转载自: http://www.cnblogs.com/fsjohnhuang/p/5259121.html 肥子John^_^ 前言   盒子模型作为CSS基础中的基础,曾一度以为掌握了I ...

  9. CSS属性一览

    CSS 属性 CSS 属性组: 动画 背景 边框和轮廓 盒(框) 颜色 内容分页媒体 定位 可伸缩框 字体 生成内容 网格 超链接 行框 列表 外边距 Marquee 多列 内边距 分页媒体 定位 打 ...

  10. css 参考属性大全

    动画属性 属性 描述 CSS @keyframes 定义一个动画,@keyframes定义的动画名称用来被animation-name所使用. 3 animation 复合属性.检索或设置对象所应用的 ...

随机推荐

  1. stringsteam使用之整型转字符串

    最近需要用到整型转字符串的操作,学习了stringstream一些皮毛. 首先需要包含头文件. #include<sstream> 然后用流操作的方式将值传递给stringstream对象 ...

  2. Chapter 3. Video Coding Concepts

    本章主要介绍一些有关视频编码的概念 时域模型(Temporal Model) 时域模型的作用是去除帧间冗余.如:将第二帧减去第一帧,得到的剩余信息,其能量会远小于第二帧本身. 基于块的运动估计和补偿 ...

  3. 真机调试方法- IOS/Android移动设备

    真机调试 调试安卓 方法一 开启手机的USB调试 安装运行项目 使用chrome步骤如下图 打开开发者工具 打开设备管理 选择设备进行debug 方法二: 直接在地址栏输入chrome://inspe ...

  4. angular.extend、angular.$watch、angular.bootstrap

    1.angular.extend:依次将第二个参数及后续的参数的第一层属性(不管是简单属性还是对象)拷贝给第一个参数的第一层属性,即如果是对象,则是引用的是同一个对象,并返回第一个参数对象. 直接上代 ...

  5. 如何删除 SQL Server 表中的重复行

    第一种:有主键的重复行,就是说主键不重复,但是记录的内容重复比如人员表tab ,主键列id,身份证编号idcard当身份证重复的时候,保留最小id值的记录,其他删除delete a from tab ...

  6. 4，JPA-Hibernate

    一,什么是JPA JPA全称Java Persistence API.JPA通过JDK 5.0注解或XML描述对象-关系表的映射关系,并将运行期的实体对象持久化到数据库中. JPA(Java Pers ...

  7. 怎么在linux ubuntu 上的nginx 绑定域名

    前一篇介绍了,如果在ubuntu上运行nodejs,毕竟访问的时候都是用ip地址+端口号,但是上production 环境都需要域名的,IP地址当然不行 读过上一篇的朋友知道了,如果在upstart ...

  8. tar+pigz+ssh实现大数据压缩传输

    磁盘读取---->打包---->压缩------>传输---->解压缩-->拆包---->落盘 |->tar     |->gzip      |-&g ...

  9. 文本三剑客---gawk基础

    gawk程序是Unix中原始awk程序的GNU版本.gawk程序让流编辑器迈上了一个新的台阶,它提供了一种编程语言而不只是编辑器命令.在gawk编程语言中,可以完成下面的事情: (1)定义变量来保存数 ...

  10. ARKit 初体验

    ARKIT是苹果公司在今年发布的一个AR开发包,用于现有的IOS设备,是的,就是用在手机或者平板上,类似于pokemon go的效果.看了下演示视屏,嗯,看起来很厉害. 对于一个资深软粉,居然被要求研 ...