盒子模型  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. Codeforces 809E Surprise me! [莫比乌斯反演]

    洛谷 Codeforces 非常套路的一道题,很适合我在陷入低谷时提升信心-- 思路 显然我们需要大力推式子. 设\(p_{a_i}=i\),则有 \[ \begin{align*} n(n-1)an ...

  2. 项目启动，main函数之前的代码执行两次 restartedMain

    https://blog.csdn.net/qq_35981283/article/details/78925146

  3. 有标号的DAG计数I~IV

    题解: https://www.cnblogs.com/zhoushuyu/p/10077241.html 看到这么一篇,发现挺不错的..

  4. 3.RNN推导

    1.基本RNN结构 这几天想入门NLP,所以开始了解RNN以及一系列变体.首先RNN最原始的结构如下图(图是按自己的理解用visio画的,有错麻烦提一下), 首先我们来说明一下各个符号的定义: 各个变 ...

  5. P4147 玉蟾宫 二维DP 悬线法

    题目背景 有一天,小猫rainbow和freda来到了湘西张家界的天门山玉蟾宫,玉蟾宫宫主蓝兔盛情地款待了它们,并赐予它们一片土地. 题目描述 这片土地被分成N*M个格子,每个格子里写着'R'或者'F ...

  6. Servlet（七）：session

    Session 学习:问题: Request 对象解决了一次请求内的不同 Servlet 的数据共享问 题,那么一个用户的不同请求的处理需要使用相同的数据怎么办呢?解决: 使用 session 技术. ...

  7. CodeForces 959E Mahmoud and Ehab and the xor-MST (MST+找规律)

    <题目链接> 题目大意: 给定一个数n,代表有一个0~n-1的完全图,该图中所有边的边权为两端点的异或值,求这个图的MST的值. 解题分析: 数据较大,$10^{12}$个点的完全图,然后 ...

  8. line-height:1.5和line-height:150%的区别

    1. 给你个数,孩子自己算吧  line-height:1.5 父元素设置line-height:1.5会直接继承给子元素,子元素根据自己的font-size再去计算子元素自己的line-height ...

  9. django-request对象

    HTTP 应用的信息是通过 请求报文 和 响应报文 传递的,关于更多的相关知识,可以阅读<HTTP权威指南>获得. 其中 请求报文 由客户端发送,其中包含和许多的信息,而 django 将 ...

  10. Leetcode 记录（201~300）

    实习面试前再完成100题,争取能匀速解释清楚题 204. Count Primes 素数筛 class Solution { public: int countPrimes(int n) { ) ; ...