㈠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. java 给不同成绩分等级

    题目:利用条件运算符的嵌套来完成此题:学习成绩>=90分的同学用A表示,60-89分之间的用B表示,60分以下的用C表示. 程序分析:(a>b)?a:b这是条件运算符的基本例子. pack ...

  2. JAVA break、continue和return的区别

    控制跳转:continue和break的区别,以为return Continue在循环中使用,一般在for中使用 Break:跳出单重循环,常和switch搭配使用. 效果区别 Break的结果如下: ...

  3. Eslint报错整理与解决方法

    1.‘Unexpected tab character’ 字面意思理解呢就是意想不到的制表符,当时出现的时候就是我习惯的使用Tab键去打空格,但是eslint默认不认可Tab,所以解决方法很简单: 在 ...

  4. 15、R语言聚类树的绘图原理

    聚类广泛用于数据分析.去年研究了一下R语言聚类树的绘图原理.以芯片分析为例,我们来给一些样品做聚类分析.聚类的方法有很多种,我们选择Pearson距离.ward方法. 选择的样品有: "GS ...

  5. python网络爬虫（4）结构与基本概念

    基本模型 请求与响应 import urllib.request as urllib2 request=urllib2.Request('http://www.zhihu.com') response ...

  6. [Next] 五.next自定义内容

    自定义 head 这是默认的 head 这样的 head 并不能满足我们的需求.next 公开了一个内置组件,用于将元素追加到<head>标签的.我们可以通过这个自定义 head 新建 c ...

  7. springboot(二十)-配置文件 bootstrap和application区别

    用过 Spring Boot 的都知道在 Spring Boot 中有以下两种配置文件 bootstrap (.yml 或者 .properties) application (.yml 或者 .pr ...

  8. 浅析HBase：为高效的可扩展大规模分布式系统而生

    什么是HBase Apache HBase是运行在Hadoop集群上的数据库.为了实现更好的可扩展性(scalability),HBase放松了对ACID(数据库的原子性,一致性,隔离性和持久性)的要 ...

  9. 梳理common-io工具包

    title: 梳理common-io工具包 comments: false date: 2019-08-28 14:21:58 description: 对common-io工具包中的常用类进行整理, ...

  10. 本人亲测-Setup Factory打包教程(整理并优化)

    Setup Factory 9 总结 一:安装完毕立刻启动 result = Shell.Execute(SessionVar.Expand("%AppFolder%\\消息助手.exe&q ...