盒子模型  box-sizing 属性

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

属性值：

content-box 为(w3c标准盒子模型)

border-box 为（ie标准盒子模型）

inherit：继承父级盒子模型

区别：

w3c模型 中height= 内容的高度;

ie 模型 height=边框+内边距+内容的高度

如图：

例子：写两个div，设置 box-sizing 属性分别为content-box/border-box，其他属性完全相同。

 <!doctype html>

 <html lang="en">

 <head>

     <title>box-sizing</title>

     <meta charset="UTF-8">

     <style>

         .model-w3c{

             box-sizing: content-box;

             float: left;

             width: 100px;

             height:100px;

             border:10px solid #aeeeff;

             margin: 10px;

             padding: 10px;

         }

         .model-ie{

             box-sizing: border-box;

             float: left;

             width: 100px;

             height:100px;

             border:10px solid #aeeeff;

             margin: 10px;

             padding: 10px;

         }

     </style>

 </head>

 <body>

     <div class="model-w3c">

         padding

         <div>

             w3c标准

         </div>

     </div>

     <div class="model-ie">

         ie标准

     </div>

 </body>

 </html>

运行效果如图：

over!!

CSS盒子模型 box-sizing 用法的更多相关文章

  1. 教你吃透CSS的盒子模型(Box Model)

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

  2. 学习css盒子模型

    在这一周,我学习了css,在没有学习css之前,我一直都觉得布局很难,样式特别难调,但是学习了css盒子模型之后我就觉得欸,其实还挺简单的,下面就来看看我学习的css吧. CSS 盒子模型(Box M ...

  3. CSS盒子模型（框模型）

     一.如何理解盒子模型  盒子模型(框模型)是css部分非常重要的一部分知识,CSS在处理网页的时候,认为每个元素都处在一个不可见的盒子中.盒子模型的构想,把所有的元素都想象成盒子,那么对网页进行布局 ...

  4. CSS：CSS 盒子模型

    ylbtech-CSS:CSS 盒子模型 1.返回顶部 1. CSS 盒子模型 CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model&quo ...

  5. 1.26学习总结——css盒子模型

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

  6. CSS 盒子模型（Box model）中的 padding 与 margin

    本文将讲述 HTML 和 CSS 的关键—盒子模型 (Box model) .理解 Box model 的关键便是 margin 和 padding 属性,而正确理解这两个属性也是学习用 CSS 布局 ...

  7. HTML和CSS的盒子模型(Box model)

    本文作为属性篇的最后一篇文章, 将讲述HTML和CSS的关键—盒子模型(Box model). 理解Box model的关键便是margin和padding属性, 而正确理解这两个属性也是学习用css ...

  8. CSS盒子模型之CSS3可伸缩框属性（Flexible Box）

    CSS盒子模型(下) 一．CSS3可伸缩框(Flexible Box) 可伸缩框属性(Flexible Box)是css3新添加的盒子模型属性,有人称之为弹性盒模型,它的出现打破了我们经常使用的浮动布 ...

  9. 盒子模型(Box Model)

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

  10. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

随机推荐

  1. VMware虚拟机安装Linux后忘记root密码怎么办(三)

    第一种方法如下: 1.Linux开机 按键盘e今日GRUB界面如下:(GRUB管理引导启动盘) 切换到原系统目录: chroot /sysroot/ 2.重新启动客户机 3.使用新密码登录成功! 第二 ...

  2. vue中html模板使用绑定的全局函数

    我们知道在script中使用vue绑定的全局函数时, 我们需要用这种方式使用: this.Util.Fun(e) 那在模板中, 比如v-if中想使用Fun函数怎么办呢?你应该这样做 <i v-i ...

  3. const 成员函数

    我们知道,在成员函数中,如果没有修改成员变量,应该给成员函数加上 const 修饰符,例如 #include <iostream> using namespace std; class F ...

  4. Crypto支付宝模块的安装

    沙箱环境地址:https://openhome.alipay.com/platform/appDaily.htm?tab=info 1.将Crypto放到site-packages下 2.OSErro ...

  5. elasticsearch单机部署多个节点

    cp -r elasticsearch-2.4.4 elasticsearch-2.4.4-2 mv elasticsearch-2.4.4 elasticsearch-2.4.4-1 总共cp了三个 ...

  6. 安全体系（一）—— DES算法详解

    本文主要介绍了DES算法的步骤,包括IP置换.密钥置换.E扩展置换.S盒代替.P盒置换和末置换. 安全体系(零)—— 加解密算法.消息摘要.消息认证技术.数字签名与公钥证书 安全体系(二)——RSA算 ...

  7. spark rdd df dataset

    RDD.DataFrame.DataSet的区别和联系 共性: 1)都是spark中得弹性分布式数据集,轻量级 2)都是惰性机制,延迟计算 3)根据内存情况,自动缓存,加快计算速度 4)都有parti ...

  8. Jboss getshell

     Jboss 的安装需要 JDK 环境 JDK+JBOSS 包  初始环境配置 系统变量名        变量值 PATH                  %JAVA_HOME%\bin:%JAVA ...

  9. 《团队作业第一周》五小福团队作业——UNO

    <团队作业第一周>团队作业--UNO 一.团队展示 队员学号 队名:五小福 (真是个红红火火恍恍惚惚的队名)> 拟作的团队项目描述 基于安卓开发的有趣味性的UNO纸牌小游戏 队员风采 ...

  10. [Web]ORM模式的看法

    在看各种语言建站Web资料的时候,无一例外的都使用了ORM的设计模式.一直百思不得其解. 从个人实践来说,ORM带来了更高的学习成本和更低的性能,并且还无法满足复杂的查询需求. 之前一直认为自己在大型 ...