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. 利用MUI滑动进行利息计算（移动端APP显示）

    在开发移动端的应用时,会用到很多的手势操作,比如滑动.长按等,为了方便开放者快速集成这些手势,mui内置了常用的手势事件,其中滑动应用是比较常见的应用操作,本篇文章将讲述如何利用滑动改变对应值进行计算 ...

  2. 由form表单来说说前后台数据之间的交互

    为什么从表单提交说起呢?因为大部分与后台的交互都是在form表单中实现,恰巧我入职一个月来都是在处理与后台交互的数据整合中度过,期间也发现一些小坑,出于喜欢总结,所以才想写这篇小博客. 各位童鞋,可以 ...

  3. 最新的极光推送服务器端代码（java服务器后台向手机端自定义推送消息）

    一共两个类 一个Jdpush  一个JpushClientUtil 代码如下   注解都写的很清楚 package com.sm.common.ajpush; import org.slf4j.Log ...

  4. （转）基于 Token 的身份验证

    原文:https://ninghao.net/blog/2834 最近了解下基于 Token 的身份验证,跟大伙分享下.很多大型网站也都在用,比如 Facebook,Twitter,Google+,G ...

  5. Oracle数据迁移-系统数据合并笔记

    创建临时表:execute immediate 'sql'; 通过临时表和关联查询解决循环处理效率低下,大数据操作移植时时间太长的问题. 结构相同的系统数据库表移植,案例如下: create or r ...

  6. 流畅python学习笔记：第十章：序列的修改，散列和切片

    前面在介绍了类的很多内置方法,比如__add__,__eq__,这里继续介绍类的两个内置方法,这2个内置方法可以将一个类实例变成一个序列的形式.代码如下 class vector(object):   ...

  7. jvm004 解析与分派

    解析 所有方法调用中的目标方法在Class文件里面都是常量池中的符号引用,在类加载的解析阶段,会将其中的一部分符号引用转化为直接引用.这种解析的前提是:方法在程序真正运行之前就有一个可确定的调用版本, ...

  8. 集合的定义，操作及运算 （Python）

    集合的定义: 集合和列表([  ]) 与  字典 ( {    }) 不同,没有特别的特别的语法格式.可以使用set () 创建. 集合同字典一样是无序的.也是不具有重复性的.因此可以把列表变成集合进 ...

  9. cocos2dx之WebView踩过的坑（android返回键处理问题）

    最近游戏接入了一个私服平台,由于没有sdk,所以支付相关的操作需要在网页端进行,也就是说点击充值需要在游戏内部弹出一个网页,并定位到平台充值的地址.查阅相关资料后决定使用cocos2dx自带的WebV ...

  10. PHP安装sqlsrv扩展步骤，PHP如何连接上SQL

    今天捣鼓了一天,终于把PHP的sqlsrc扩展给弄好了.为了让PHP能够顺利连接上MSSQL,实在不易. 第一步:安装Wampserver 我安装的是Wampserver 2.4.17版本.注意:安装 ...