目标大纲

一.语法声明

 box-sizing ： content-box | border-box | inherit

二.属性值说明

content-box 在宽度和高度之外绘制元素的内边距和边框

border-box  为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制

inherit   继承 父元素 box-sizing属性的值

三.浏览器的兼容性

说明IE8及以上版本支持该属性，Firefox 需要加上浏览器厂商前缀-moz-，对于低版本的IOS和Android浏览器也需要加上-webkit-

推荐写法

   *, *:before, *:after {

　　   -moz-box-sizing: border-box;

　   　-webkit-box-sizing: border-box;

　　   box-sizing: border-box;

　　}

测试代码

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>box-sizing</title>

         <style>

              * {

                  margin: 0;

                  padding: 0;

              }

             .box {

                 background-color: #fff;

                 font-size: 12px;

                 width: 200px;

                 height: 200px;

                 border-width: 10px;

                 border-color: #34538b;

                 border-style: solid;

                 padding: 20px;

                 box-sizing: border-box;

                 -moz-box-sizing: border-box;

                 -webkit-box-sizing: border-box;

             }

         </style>

     </head>

     <body>

         <div class="box">

             该盒子边框是10px像素,内边距是20px像素,是算在盒子的宽高内的

             即：<span style="color: red;">box-sizing:border-box</span><span style="color: red;">内边距和边框</span>都将<span style="color: red;">在已设定的宽度和高度内进行绘制</span>

         </div>

     </body>

 </html>

参考资料

Css3 使用参考指南

学会使用box-sizing布局

box-sizing重置盒子模型计算规则的更多相关文章

  1. CSS Box Model（盒子模型）

    CSS Box Model(盒子模型) 一.简介 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封 ...

  2. 深入理解CSS盒子模型

    在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...

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

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

  4. 盒子模型(Box Model)

    盒子模型(Box Model) ■ 盒子模型——概念 在网页设计中常用的属性名:内容(content),填充(padding),边框(border),边界(margin),CSS 盒子模式都具备这些属 ...

  5. css 大话盒子模型

    什么是盒子模型? CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content).内边距(padding).边框(border) 和 ...

  6. 聊聊css盒子模型

    css盒子模型原理: 在网页设计中常听的属性名:内容(content).填充/内边距(padding).边框(border).外边距(margin), CSS盒子模式都具备这些属性. 这些属性我们可以 ...

  7. 从CSS盒子模型说起

    前言 总括: 对于盒子模型,BFC,IFC和外边距合并等概念和问题的总结 原文地址:从CSS盒子模型说起 知乎专栏:前端进击者 博主博客地址:Damonare的个人博客 为学之道,莫先于穷理:穷理之要 ...

  8. 【转】CSS（10）盒子模型

    CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content).内边距(padding).边框(border) 和 外边距(marg ...

  9. CSS 盒子模型（转）

    CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content).内边距(padding).边框(border) 和 外边距(marg ...

随机推荐

  1. Atitit 深入理解软件的本质 attilax总结 软件三原则"三次原则"是DRY原则和YAGNI原则的折

    Atitit 深入理解软件的本质 attilax总结 软件三原则"三次原则"是DRY原则和YAGNI原则的折 1.1.1. 软件的本质:抽象  1 1.2. 软件开发的过程就是不断 ...

  2. Security2:Create User

    User 用于访问DB Users based on logins in master (This is the most common type of user.) User based on a ...

  3. 一篇通俗易懂的CSS层叠顺序与层叠上下文研究

    网上有很多这方面的教程,但不是苦涩难懂就是从哪copy过来的,反正很长一段时间我是没看懂,时间长了也没打算去研究了,主要原因是,基本上很少会遇到那些问题(所以说啊,要是没有研究精神的才懒得管它).但自 ...

  4. li 前面的缩进怎么去除？

    异常处理汇总-前端系列 http://www.cnblogs.com/dunitian/p/4523015.html 设置margin和padding为0或者为比较小的值就可以了

  5. SQL Server 错误日志过滤（ERRORLOG）

    一.背景 有一天我发现SQL Server服务器的错误日志中包括非常多关于sa用户的登陆错误信息:“Login failed for user 'sa'. 原因: 评估密码时出错.[客户端: XX.X ...

  6. OpenCascade Primitives BRep-Torus

    OpenCascade Primitives BRep-Torus eryar@163.com Abstract. BRep is short for Boundary Representation. ...

  7. 关于css中pointer-events属性的怪异行为

    在我的记忆中pointer-events就是用来进行事件穿透的,也就是说,如果给父元素设置了pointer-events:none,那么父元素不再监听鼠标事件事件(类似于touch,click这样的) ...

  8. PJAX实现

    一.浏览器历史API 浏览器历史就像一堆卡片,如下所示:

  9. 1Z0-053 争议题目解析698

    1Z0-053 争议题目解析698 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 698.In your production database, you: -Are using ...

  10. 如何设置 Panorama 控件的只读 SelectedIndex 属性？

    在 OnNavigatedTo() 方法中设置: panoramaControl.DefaultItem = panoramaControl.Items[indexToSet];