㈠box-sizing 属性

⑴box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

⑵语法：box-sizing: content-box|border-box|inherit;

⑶取值

 

㈡content-box相关内容

⑴padding和border不被包含在定义的width和height之内。

对象的实际宽度等于设置的width值和border、padding之和；

即 ( Element width = width + border + padding )

此属性表现为标准模式下的盒模型。

⑵审查元素看示例

①代码部分

 

②盒模型部分

 

㈢border-box相关内容

⑴padding和border被包含在定义的width和height之内。

   对象的实际宽度就等于设置的width值，

   即使定义有border和padding也不会改变对象的实际宽度；

   即 ( Element width = width )

   此属性表现为怪异模式下的盒模型。

⑵审查元素看示例

①代码部分

 

②盒模型部分

 

㈣具体示例对比两者区别

⑴content-box的示例代码如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>content-box示例</title>

<style>

.one{

    background-color:red;

    width:200px;

    height:200px;

    float:left;

    border:solid 1px;

    padding:10px

}

.two{

    background-color:yellow;

    width:200px;

    height:200px;

    float:left;

    border:solid 1px;

    padding:10px;

    box-sizing:content-box;

}

img{

    width:200px;

    height:200px;

}

</style>

</head>

<body>

      <div class=one>

           <img src=ym.jpg>

      </div>

      <div class=two>

      <img src=ym.jpg>

      </div>

</body>

</html>

效果图：

 

⑵border-box的示例代码如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>border-box示例</title>

<style>

.one{

      background-color:red;

      width:200px;

      height:200px;

      float:left;

      border:solid 1px;

      padding:10px;

    }

.two{

     background-color:yellow;

     width:200px;

     height:200px;

     float:left;

     border:solid 1px;

     padding:10px;

     box-sizing:border-box;

    }

img{

     width:200px;

     height:200px;

    }

</style>

</head>

<body>

      <div class=one>

            <img src=ym.jpg>

      </div>

      <div class=two>

            <img src=ym.jpg>

      </div>

</body>

</html>

效果图：

★通过对比发现：

content-box 的 width 不包括 padding 和 border

border-box 的 width 包括 padding 和 border

㈤js测试box-sizing属性

<style>

div{

    background-color:red;

    width:200px;

    height:200px;

    border:solid 1px;

    padding:10px;

}

img{

     width:200px;

     height:200px;

    }

</style>

<div id="cs">

<img src="ym.jpg">

</div>

<hr>

<button onclick="document.getElementById('cs').style.boxSizing='content-box'">content-box</button>

<button onclick="document.getElementById('cs').style.boxSizing='border-box'">border-box</button>

效果如下：

⑴点击按钮 ：

⑵点击按钮：

border-box与content-box的区别的更多相关文章

  1. display:box和display:inline-box的区别

    display:box我想大家很熟悉,那么display:inline-box呢,今天在项目中需要设置这样的属性box-align:center,那么就想到用 display:box;如果设置BOX, ...

  2. Vagrant 手册之 box - 创建基础 box

    原文地址 有一种特殊的 box 被称为"base box".这些 box 包含 Vagrant 运作所需的最低限度,通常不是对现有的 Vagrant 环境("base b ...

  3. 关于line box，inline box，line-height，vertical-align之间的关系

    1.content area 围绕着文字的一种box,高度由font-size和font-family决定.在chrome控制器里,你用鼠标志向某个内敛元素,显示的高度值. 2.inline box的 ...

  4. [04-05]box框模型(Box Model)定义了元素框处理元素内容、内边距、边框和外边距的方式

    实际占有的宽 = width + 2padding(内边距) + 2border(边框) + 2margin(外边距) 实际占有的高 = height + 2padding + 2border + 2 ...

  5. [UE4]Vertical Box结合Horizontal Box创建出类似微信的经典手机界面

    头部标题,中部为自动填充,底部为一个Horizontal Box,其中的“通讯录”文字比较宽,需要设置Size.Fill=1.5

  6. 解读SSD中的Default box（Prior Box）

    1:SSD更具体的框架如下: 2: Prior Box 缩进在SSD中引入了Prior Box,实际上与anchor非常类似,就是一些目标的预选框,后续通过softmax分类+bounding box ...

  7. [转]text和content方法的区别

    r.text str #字符串方式的响应体,会自动根据响应头部的 字符编码进行解码 r.content bytes #字节方式的响应体,会自动为你解码 gzip 和 deflate 压缩 reques ...

  8. requests方法中content和text区别

    requests对象的get和post方法都会返回一个Response对象,这个对象里面存的是服务器返回的所有信息,包括响应头,响应状态码等.其中返回的网页部分会存在.content和.text两个对 ...

  9. python中requests里.text和.content方法的区别

    requests对象的get和post方法都会返回一个Response对象,这个对象里面存的是服务器返回的所有信息,包括响应头,响应状态码等.其中返回的网页部分会存在.content和.text两个对 ...

  10. Content Template & DataTemplate 区别

    转一篇很好的博客: http://www.cnblogs.com/lzhp/p/3250786.html 介绍 listbox 的 Template.ItemsPanel.ItemContainerS ...

随机推荐

  1. xshell设置

    登录脚本: #定义rz,sz自动下载路径 #保持窗口活动状态, 空闲时每120秒发送一个回车

  2. 查找担保圈-step1-担保圈表函数

    USE [test]; GO /****** Object: UserDefinedFunction [dbo].[f_findrecycle] Script Date: 2019/7/8 14:37 ...

  3. 设计模式:模板方法(Template method)

    首先我们先来看两个例子:冲咖啡和泡茶.冲咖啡和泡茶的基本流程如下: 所以用代码来创建如下: 咖啡:Caffee.java public class Coffee { void prepareRecip ...

  4. Java 中的动态代理

    一.概述 1. 什么是代理 我们大家都知道微商代理,简单地说就是代替厂家卖商品,厂家“委托”代理为其销售商品.关于微商代理,首先我们从他们那里买东西时通常不知道背后的厂家究竟是谁,也就是说,“委托者” ...

  5. [HDU517] 小奇的集合

    题目链接 显然有贪心每次选择最大的两个数来做. 于是暴力地把最大的两个数调整到非负(暴力次数不超过1e5),接下来使用矩阵乘法即可. \[ \begin{pmatrix} B'\\S'\\T' \en ...

  6. ORM中的锁和事务

    锁 sql语句加锁 select * from book where id=1 for update; begin; start transaction; select * from t1 where ...

  7. RPC 框架 介绍 （转）

    出处: 谁能用通俗的语言解释一下什么是 RPC 框架? 知乎: 问题:了解到最近 Java 的 Netty 很火,只知道它是这样类型的一种框架.想了解一下它主要用于解决了什么问题?适用于什么样的场景? ...

  8. EJB通过注解方式注入并使用其它EJB或者服务、配置JBoss数据源

    版权声明:本文为博主原创文章,转载请注明出处. https://blog.csdn.net/Jerome_s/article/details/37103171 通过注解方式注入并使用其他EJB或者服务 ...

  9. Gsview裁剪EPS文件

    (1)菜单栏  “options--show bounding boxs”  选中. (2)打开eps图,然后File->PS TO EPS,不选择Automatically calculate ...

  10. leetcode 1266. Minimum Time Visiting All Points

    On a plane there are n points with integer coordinates points[i] = [xi, yi]. Your task is to find th ...