目标大纲

一.语法声明

 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. Uiautomator 2.0之Until类学习小记

    1. 状态条件-Uiobject2Condtion 1.1 一个UiObject2Condition代表UiObject2满足某个条件的特定状态,主要用于获取到组件释放处于某种状态. 1.2 简单示例 ...

  2. Security1:Create Login

    Login 用于登陆SQL Server,语法是 -- Syntax for SQL Server CREATE LOGIN login_name { WITH <option_list1> ...

  3. 群福利：百度云管家-本地SVIP

    效果 如果不想登录破解版的百度云(防止泄密)==>复制AppSettingApp.dat和users文件夹,这样你就可以免登录了 最稳定版本:https://yunpan.cn/cBTQc9Iu ...

  4. javascript运动系列第七篇——鼠标跟随运动

    × 目录 [1]眼球转动 [2]苹果菜单[3]方向跟随 前面的话 运动除了直线运动和曲线运动两种运动形式外,还有一种运动形式是鼠标跟随运动,而这种跟随运动需要用到三角函数的相关内容或者需要进行比例运算 ...

  5. SubSonic3.0使用例子

    前段时间开发的框架使用了SubSonic2.2以后,觉得开发效率提高了不少,后期维护起来也非常方便,不由的喜欢上了SubSonic.中间有想过升级到更高版本,但度娘一下就放弃了,只有极少的中文版说明, ...

  6. ZOJ Problem Set - 1292 Integer Inquiry

    题目本身属于简单题,但是注意在输出的时候,题目很变态的对格式做了很多要求: 1.输入的N与下面的block有一个空行 2.每次输出与下一个输入的block有一个空行 3.但是特别注意,当是最后一个输出 ...

  7. ZOJ Problem Set - 1115 Digital Roots

    水题记录: 注:此题题目并没有限定数值的大小,所以要用字符串进行处理 #include <stdio.h> #include <string.h> int main() { ] ...

  8. java基础--java.util.Date类型小结

    首先先来了解一下Date数据类型: . Date类型通常要和另一个 java.text.SimpleDateFormat类联合使用. 把long-->Date: public Date(long ...

  9. 重温JSP学习笔记--El函数库

    EL函数库(由JSTL提供的) * 导入标签库:<%@ tablib prefix="fn" uri="http://java.sun.com/jsp/jstl/f ...

  10. 判断点是否落在面中的Oracle存储过程描述

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 公司在乐亭的项目中,工程同事提出了需要在对接车辆GPS上报点 ...