盒子模型  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. linux 乌班图 nginx php直接下载下来

    location ~ \.php(.*)$ { include snippets/fastcgi-php.conf; # # # With php-fpm (or other unix sockets ...

  2. C#+EntityFramework编程方式详细之Model First

    Model First Model First模式即“模型优先”,这里的模型指的是“ADO.NET Entity Framework Data Model”,此时你的应用并没有设计相关数据库,在VS中 ...

  3. Kafka生产者发送消息的三种方式

    Kafka是一种分布式的基于发布/订阅的消息系统,它的高吞吐量.灵活的offset是其它消息系统所没有的. Kafka发送消息主要有三种方式: 1.发送并忘记 2.同步发送 3.异步发送+回调函数 下 ...

  4. Round#534 div.2-B Game with string

    唔,第一次参加,掉了好多分. http://codeforces.com/contest/1104/problem/B 不用考虑太多,string真的好厉害. #include<stdio.h& ...

  5. Python3虚拟环境--venv

    Python3.3以上的版本通过venv模块原生支持虚拟环境,可以代替之前的virtualenv. 该venv模块提供了创建轻量级“虚拟环境”,提供与系统Python的隔离支持.每一个虚拟环境都有其自 ...

  6. js两个箭头 =>()=>()

    request(_ action)let withStatus =status =>action=> R.merge(action, (status])let request = with ...

  7. Python编程中出现ImportError: bad magic number in 'numpy': b'\x03\xf3\r\n'

    在终端输入ls -a 会出现一个.pyc的文件,将文件删掉

  8. 将ActiveX打包成CAB发布的注意事项

    1.在实现ActiveX组件时,注意VS必须使用管理员身份运行,否则会提示不成功 2.在解决方案中添加一个安装项目 a.在View中点击文件系统,添加对ActiveX项目的输出 b.注册表HKEY_C ...

  9. VB进行RGB分色

    Option Explicit Private Type RGBA R As Byte G As Byte B As Byte A As Byte End Type Private Declare S ...

  10. css加载动画...

    加载动画... <p>加载动画...</p> <p> </p> <p> </p> <style><!-- .c ...