㈠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. 用vs2008打开sln项目总是说没有对应的，打不开vs2008的工程文件提示不支持项目类型（.csproj）

    找了很多解决办法都搞不定,最后找了个老司机问了一下,原来是组件没有安装完整!!!只是安装了个vs2008的外壳...下次先检查开发工具是否完整!下载安装包安装vs再说吧!

  2. Java中对比单继承与多继承的优劣，以及java的解决方案

    继承是一种面相对象的基本特征之一,但在具体语言的语法设计中有两种方式:单继承和多继承. 所谓多继承是指一个子类可以拥有多个父类:单继承则是一个子类只拥有一个父类. 单继承与多继承的优劣: 多继承优点在 ...

  3. PTA(Basic Level)1014.福尔摩斯的约会 && PTA(Advanced Level)1061.Dating

    大侦探福尔摩斯接到一张奇怪的字条:我们约会吧! 3485djDkxh4hhGE 2984akDfkkkkggEdsb s&hgsfdk d&Hyscvnm.大侦探很快就明白了,字条上奇 ...

  4. ABC133F Small Products

    考虑 DP. 状态 令 $f[\ell][x]$ 表示长度为 $\ell$,首项不超过 $x$ 的序列的个数. 答案是 $f[K][N]$. 有递推 $f[\ell][x] = f[\ell][x - ...

  5. typescript中类型断言好理解也好用

    类型断言是个好用的玩意,虽然typescript很强大,但是有时还不如我们知道一个值的类型,导致在开发过程中总是报一些令人头痛的类型错误.使用断言,简单来说就是先做好一个假设,使得编译通过. 我一开始 ...

  6. P1828香甜的黄油

    这是一道关于最短路的绿题. 题目给出一些农场,每个农场有奶牛,农场与农场之间存在边,要使所有奶牛到达其中一个农场的总距离最短,输出他们到达这个农场的距离.首先我想到了最小生成树,但我发现其实并不是,因 ...

  7. React应该如何优雅的绑定事件？

    前言 由于JS的灵活性,我们在React中其实有很多种绑定事件的方式,然而,其实有许多我们常见的事件绑定,其实并不是高效的.所以本文想给大家介绍一下React绑定事件的正确姿势. 常见两种种错误绑定事 ...

  8. 使用openresty实现按照流量百分比控制的灰度分流控制

    安装好以后直接就可以配置实践了,openresty将lua都集成好了,nginx配置文件无需特殊声明引入lua file. 1.nginx.conf 添加两个灰度发布的环境 #grey 灰度环境地址 ...

  9. ASP.NET Core[源码分析篇] - Authentication认证

    原文:ASP.NET Core[源码分析篇] - Authentication认证 追本溯源,从使用开始 首先看一下我们通常是如何使用微软自带的认证,一般在Startup里面配置我们所需的依赖认证服务 ...

  10. luogu P5504 [JSOI2011]柠檬

    bgm(雾) luogu 首先是那个区间的价值比较奇怪,如果推导后可以发现只有左右端点元素都是同一种\(s_x\)的区间才有可能贡献答案,并且价值为\(s_x(cnt(x)_r-cnt(x)_{l-1 ...