盒子模型  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. jxl应用事例

    实例中主要目的是解析jxl使用流程以及jxl绘制Excel的写法思路,代码掩去了项目中的真实数据,请根据需求酌情修改,如果有帮助到有需要的人,不胜欢喜. Dao层为查询数据库,返回list数据,此处省 ...

  2. 怎么给PDF文件交换页面

    在使用PDF文件的时候有文件页面的排版错误的时候,这个时候就需要交换页面了,那么怎么给PDF文件交换页面呢,在使用PDF文件的时候需要交换页面的时候要怎么做呢,下面小编就为大家分享一下PDF文件交换页 ...

  3. Android Studio打开项目，停在gradle的解决方案

    之所以停留,是因为打开项目时,Android Studio解析项目使用的gradle,并下载对应版本的gradle,但是由于下载gradle的服务器在国外,这个下载速度非常不稳定,从而导致停留在这一步 ...

  4. CF121E Lucky Array

    题解: 这个题好像暴力+线段树就能过 就是对修改操作暴力,线段树维护查询 为啥呢 因为保证了数$<=1e4$,于是这样复杂度$n*1e4=1e9$ 那么特殊数只有30个 又因为操作是只加不减的, ...

  5. tensorflow激励函数-【老鱼学tensorflow】

    当我们回到家,如果家里有异样,我们能够很快就会发现家中的异样,那是因为这些异常的摆设在我们的大脑中会产生较强的脑电波. 当我们听到某个单词,我们大脑中跟这个单词相关的神经元会异常兴奋,而同这个单词无关 ...

  6. call、apply、bind

    ***call,apply,bind 替换this 何时: 只要this不是想要的都可用call,apply,bind替换 选择: call/apply: *调用*函数,在调用时,*临时*替换函数中的 ...

  7. UVA 10474 - Where is the Marble?--vector

    https://vjudge.net/problem/UVA-10474 https://blog.csdn.net/xiyaozhe/article/details/81081344 简单用法 so ...

  8. leetcode刷题第一日<两数和问题>

    开始就用到了c++的哈希表是真的恶心,首先学习一波基础知识 https://blog.csdn.net/u010025211/article/details/46653519 下面放下大佬的代码 cl ...

  9. Angularjs 跨域请求

    不知道什么意思修改了service 参考http://blog.csdn.net/hj7jay/article/details/51767805 http://blog.csdn.net/tangsl ...

  10. matplotlib 命令行画图保存

    服务器上没有图形界面,需要用matplotlib画图并直接保存成图片,然后下载到客户端查看. 1. 首先安装matplotlib: python -m pip install -U matplotli ...