border-box与content-box的区别
㈠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的区别的更多相关文章
- display:box和display:inline-box的区别
display:box我想大家很熟悉,那么display:inline-box呢,今天在项目中需要设置这样的属性box-align:center,那么就想到用 display:box;如果设置BOX, ...
- Vagrant 手册之 box - 创建基础 box
原文地址 有一种特殊的 box 被称为"base box".这些 box 包含 Vagrant 运作所需的最低限度,通常不是对现有的 Vagrant 环境("base b ...
- 关于line box,inline box,line-height,vertical-align之间的关系
1.content area 围绕着文字的一种box,高度由font-size和font-family决定.在chrome控制器里,你用鼠标志向某个内敛元素,显示的高度值. 2.inline box的 ...
- [04-05]box框模型(Box Model)定义了元素框处理元素内容、内边距、边框和外边距的方式
实际占有的宽 = width + 2padding(内边距) + 2border(边框) + 2margin(外边距) 实际占有的高 = height + 2padding + 2border + 2 ...
- [UE4]Vertical Box结合Horizontal Box创建出类似微信的经典手机界面
头部标题,中部为自动填充,底部为一个Horizontal Box,其中的“通讯录”文字比较宽,需要设置Size.Fill=1.5
- 解读SSD中的Default box(Prior Box)
1:SSD更具体的框架如下: 2: Prior Box 缩进在SSD中引入了Prior Box,实际上与anchor非常类似,就是一些目标的预选框,后续通过softmax分类+bounding box ...
- [转]text和content方法的区别
r.text str #字符串方式的响应体,会自动根据响应头部的 字符编码进行解码 r.content bytes #字节方式的响应体,会自动为你解码 gzip 和 deflate 压缩 reques ...
- requests方法中content和text区别
requests对象的get和post方法都会返回一个Response对象,这个对象里面存的是服务器返回的所有信息,包括响应头,响应状态码等.其中返回的网页部分会存在.content和.text两个对 ...
- python中requests里.text和.content方法的区别
requests对象的get和post方法都会返回一个Response对象,这个对象里面存的是服务器返回的所有信息,包括响应头,响应状态码等.其中返回的网页部分会存在.content和.text两个对 ...
- Content Template & DataTemplate 区别
转一篇很好的博客: http://www.cnblogs.com/lzhp/p/3250786.html 介绍 listbox 的 Template.ItemsPanel.ItemContainerS ...
随机推荐
- Java第七周课堂示例总结
一.super();调用基类构造方法 代码: class Grandparent{ public Grandparent(){ System.out.println("GrandParent ...
- 忘记虚拟机中Linux的登录密码解决办法
一.重启系统,在开机过程中,快速按下键盘上的方向键↑和↓.目的是告知引导程序,我们需要在引导页面选择不同的操作,以便让引导程序暂停. 2.使用↑和↓将选择行设置为第一行(背景高亮即为选中),按下键盘上 ...
- python-day31(正式学习)
一.单机架构 应用领域: 植物大战僵尸 office 二.CS架构 应用领域: QQ 大型网络游戏 计算机发展初期用户去取数据,直接就去主机拿,从这里开始就分出了客户端和服务端. 客户端:用户安装的软 ...
- Python接口开发
一.flask flask是一个python编写的轻量级框架,可以使用它实现一个网站.web服务. 用flask开发接口的流程为: 1.定义一个server server=flask.Flask(__ ...
- API 网关性能比较:NGINX vs. ZUUL vs. Spring Cloud Gateway vs. Linkerd
前几天拜读了 OpsGenie 公司(一家致力于 Dev & Ops 的公司)的资深工程师 Turgay Çelik 博士写的一篇文章(链接在文末),文中介绍了他们最初也是采用 Nginx 作 ...
- TCP 三次握手和四次挥手
TCP 三次握手和四次挥手 作为面试会被经常考察的的点,自己复习了一下,总结如下: TCP 三次握手 先上图: 所谓三次握手,是指建立一个 TCP 连接时,需要客户端和服务器总共发送 3 个包. 第一 ...
- asp.net core在发布时排除配置文件
使用命令发布 dotnet restore dotnet publish -c Release -r win-x64 -o "D:\services" 这样发布总是是将配置文件覆盖 ...
- docker在mac下安装及配置阿里云镜像加速
安装 brew cask install docker 配置 关于阿里云加速地址,下面会有详细说明 阿里云官方镜像加速 官方文档:https://help.aliyun.com/document_de ...
- O023、理解Nova架构
参考https://www.cnblogs.com/CloudMan6/p/5410447.html Compute Service Nova 是OpenStack最核心的服务,负责维护和管理云环 ...
- loj 2392「JOISC 2017 Day 1」烟花棒
loj 答案显然满足二分性,先二分一个速度\(v\) 然后显然所有没有点火的都会往中间点火的人方向走,并且如果两个人相遇不会马上点火,要等到火快熄灭的时候才点火,所以这两个人之后应该在一起行动.另外有 ...