㈠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. mac环境提示：make sure that /usr/local/bin is in your path

    今天我在Mac环境下安装了Homebrew和node.js后,输入node -v.brew.npm都提示: command not found,然后我查看了下Homebrew的安装日志,发现日志里有个 ...

  2. 微信多开脚本(Windows,Mac)

    微信多开 以下内容仅用于学习使用.严禁用于非法用途,违者自负. Windows 多开 Windows 版本的微信在一些比较新的版本好像限制了多开,我们这里提供一个版本(也是官方的).https://p ...

  3. Microsoft SQL server 2012数据库学习总结（一）

    一.Microsoft SQL Server2012简介 1.基本概要 Microsoft SQL Server 2012是微软发布的新一代数据平台产品,全面支持云技术与平台,并且能够快速构建相应的解 ...

  4. 啃掉Hadoop系列笔记(01)-Hadoop框架的大数据生态

    一.Hadoop是什么 1)Hadoop是一个由Apache基金会所开发的分布式系统基础架构 2)主要解决,海量数据的存储和海量数据的分析计算问题. 3)广义上来说,HADOOP通常是指一个更广泛的概 ...

  5. Kinect开发-Hello Kinect

    置好开发环境后,首先测试下是否真的完成,也就是能够正常进行开发.此时,当然就得祭出Hello World大法! 1.首先创建一个WPF Application工程,之后添加对Microsoft.Kin ...

  6. js获取url上的指定参数

    function getAllUrlParams(url) { // get query string from url (optional) or window var queryString = ...

  7. 富文本编辑器--使用textarea即时更新文本域同步编辑器内容

    使用 textarea wangEditor 从v3版本开始不支持 textarea ,但是可以通过onchange来实现 textarea 中提交富文本内容. <div id="di ...

  8. Hyperledger Fabric（1）基础架构

    前言 在区块链的家谱里,第一代区块链系统是以比特币为代表的公链,主要实现的是数字货币的功能:第二代区块链系统是以以太坊平台为代表的公链,创造性的实现了智能合约.而第三代区块链系统,则是HyperLed ...

  9. php后门简单检测脚本

    # coding:utf-8 import os import sys import re rulelist = [ '(\$_(GET|POST|REQUEST)\[.{0,15}\]\(\$_(G ...

  10. HttpClient 释放连接

    Release the Connection:释放连接 This is a crucial step to keep things flowing. We must tell HttpClient t ...