-
AppScan安全扫描工具之安装及配置GlassBox
2017-10-24 12:41:552、菜单栏,点击配置选中GlassBox,配置GlassBox(配置的目的呢,就是比不配置GlassBox能找到更多web程序的漏洞) 3、启动安装GlassBox安装程序,下一步进行安装:(前提代理服务器需要java环境及运行代理服务器的...1、安装Appscan高版本,不要问为什么(高版本攻击特征库会比较多);安装破解版;复制破解文件到安装目录,启动Appscan
2、菜单栏,点击配置选中GlassBox,配置GlassBox(配置的目的呢,就是比不配置GlassBox能找到更多web程序的漏洞)
3、启动安装GlassBox安装程序,下一步进行安装:(前提代理服务器需要java环境及运行代理服务器的中间件tomcat
、jboos、Weblogic)本地随意使用一种:
选择一种本机安装的中间件代理GlassBox:
选择安装的中间件路径
设置访问代理程序的用户名和密码:
选择安装路径:
点击安装,直到安装完毕:
下一步,安装完成,程序自动把GBootStrap.war放到/webapps目下解压,启动服务:http://localhost:8081/GBootStrap
注意的是端口号,不要被别的程序占用了,不然启动会报错,无法访问代理程序;
在桌面会有启动服务的快捷方式
set CATALINA_OPTS=-javaagent:C:\Glassbox\gbAgent.jar %CATALINA_OPTS%
set CATALINA_HOME=D:\ProgramFiles\apache-tomcat-7.0.65
"D:\ProgramFiles\apache-tomcat-7.0.65\bin\startup.bat"
启动完成后,访问代理路径:http://localhost:8081/GBootStrap
-
从box-sizing:border-box属性入手,来了解盒模型
2018-06-20 14:02:00从最开始学习CSS的时候,就了解了盒模型的概念,今天,我们从其中的box-sizing:border-box;的属性入手,来重新认识一下盒模型在实际项目中的运用。 背景:先声明一下运用的场景,假如项目布局使用的是自适应的布局...从最开始学习CSS的时候,就了解了盒模型的概念,今天,我们从其中的box-sizing:border-box;的属性入手,来重新认识一下盒模型在实际项目中的运用。
背景:先声明一下运用的场景,假如项目布局使用的是自适应的布局方式,div给出的宽度是百分比的形式,即框占窗口宽度的50%,但边界和内边距是用像素来表示的怎么办?为了避免这种问题,可以使用属性box-sizing来调整框模型。使用border-box,来将框模型更改成这个新的模型。
注意:回顾一下,框的总宽度是width,padding-right,padding-left,border-right以及border-left属性之和,这就是造成上述背景下,样式不好调整的原因。
box-sizing属性用于更改用于计算元素的宽度和高度默认的CSS盒子模型,可以使用此属性来模拟不正确支持CSS盒子模型规范的游览器行为。
一、回顾基础
(1)框属性的基本规范:
文档的每个元素被构造成文档布局内的一个矩形框,框每层的大小都可以使用一些特定的CSS属性调整。相关属性如下:
即width=content
①width和height设置内容框(content box)的宽度和高度。内容框是框内容显示的区域--包括框内的文本内容,以及表示镶嵌子元素的其他框;
②padding表示一个CSS框内边距--这一层位于内容框的外边缘与边界的内边缘之间;
③border即CSS框的边界是一个分割层,位于内边距的外边缘以及外边距的内边缘之间;
④margin即外边距代表CSS框周围的外部区域。
(2)运用box-sizing:border-box属性下,框模型的变化
即width=content+padding+border(此时,当div的宽度为50%时,而border和padding为px时,那么content会随着实际的宽度进行自动缩放;)
(3)来看看实际的例子:
①设计稿如下所示:
②实际代码:
本例子中,采用的是flex布局的方式,为了自适应,宽度width采用的是百分比%的形式,border,padding,margin采用的是px尺寸,所有外层的盒子运用了box-sizing:border-box;属性来改变盒子的结构,从而实现需求。
<body> <div class="clear_float"> <div class="goods_cell"> <div> <img class="img_goods" src="../images/img_goods.png" alt=""> </div> <div class="text_goods"> 双宫茧桑蚕丝被 </div> <div class="goods_price"> <div class="price_span">活动秒杀价:</div> <div class="price_num">¥ 499.00</div> </div> <div class="goods_seckill"> <div class="seckill_left">仅剩<span>23:59:00</span></div> <div class="seckill_right">秒杀</div> </div> </div> <div class="goods_cell"> <div> <img class="img_goods" src="../images/img_goods.png" alt=""> </div> <div class="text_goods"> 双宫茧桑蚕丝被 </div> <div class="goods_price"> <div class="price_span">活动秒杀价:</div> <div class="price_num">¥ 499.00</div> </div> <div class="goods_seckill"> <div class="seckill_left">仅剩<span>23:59:00</span></div> <div class="seckill_right">秒杀</div> </div> </div> <div class="goods_cell"> <div> <img class="img_goods" src="../images/img_goods.png" alt=""> </div> <div class="text_goods"> 双宫茧桑蚕丝被 </div> <div class="goods_price"> <div class="price_span">活动秒杀价:</div> <div class="price_num">¥ 499.00</div> </div> <div class="goods_seckill"> <div class="seckill_left">仅剩<span>23:59:00</span></div> <div class="seckill_right">秒杀</div> </div> </div> <div class="goods_cell"> <div> <img class="img_goods" src="../images/img_goods.png" alt=""> </div> <div class="text_goods"> 双宫茧桑蚕丝被 </div> <div class="goods_price"> <div class="price_span">活动秒杀价:</div> <div class="price_num">¥ 499.00</div> </div> <div class="goods_seckill"> <div class="seckill_left">仅剩<span>23:59:00</span></div> <div class="seckill_right">秒杀</div> </div> </div> </div> </body>
<style> .clear_float{ margin-bottom:20px; } .goods_cell{ width: 47%; box-sizing: border-box; padding: 10px; float: left; box-shadow: 0 0 6px 0 rgba(0,0,0,0.20); border-radius: 10px; font-size:13px; color: #333333; margin-left:15px; margin-bottom:20px; } .clear_float>.goods_cell:nth-of-type(2n+1){ margin-left: 0; } .img_goods{ width:78.5px; height:96px; display: block; margin: 0 auto; } .text_goods{ margin:10px 0; color:#333333; font-size:13px; } .goods_price{ font-size:18px; color: #FF0845; display: flex; align-items: center; justify-content: space-between; margin-bottom:1px; } .goods_price .price_span{ font-size:8px; color:#fa5754; line-height:8px; } .goods_price .price_num{ font-size:16px; color:#fa5754; line-height:18px; } .goods_seckill{ display: flex; align-items: center; justify-content: space-between; box-sizing:border-box; line-height:15px; width:100%; height:15px; } .goods_seckill .seckill_left{ width:70%; padding:2.5px 0px; font-size:10px; color:#2d2d2d; line-height:10px; border:1px solid #999999; border-right:1px solid #ff0845; text-align:center; } .goods_seckill .seckill_right{ width:30%; color:#ffffff; background-color:#ff0845; border:1px solid #ff0845; font-size:10px; line-height:10px; padding:2.5px 8px; text-align:center; } </style>
③在游览器上模拟的320px,375px和414px尺寸下,显示的效果图:
二、盒模型的其他属性
(1)margin,padding设置为百分比形式:
给<main>元素的内边距和外边距的各个边设置为5%,意味着“包含元素宽度的5%”,因此,随着示例输出窗口的大小增加,内边距和外边距也增加了。
(2)margin可以接受负数,可以用来引起元素框的重叠:
(3)背景裁剪(Background clip)属性:
background-clip:border-box;背景被裁剪到边框盒;
background-cilp:padding-box;背景被裁剪到内边距框;
background-clip:content-box;背景被裁剪到内容框。
可以看看以下效果图比较一下:
(4)轮廓(Outline):
一个框的outline是一个看起来像是边界但又不属于框模型的东西。它的行为和边界差不多,但是并不改变框的尺寸(更准确的说,轮廓被勾画于在框边界之外,外边距区域之内)。
相关实例:在引入bootstrap框架时,input在360游览器(兼容模式)下显示,在获得焦点时外边框变蓝,这就是outline造成的影响,去掉只需要添加一个CSS样式即可,input:focus{outline:none;}。
详情介绍可以查看之前的文章:实现输入框input在获得焦点时外边框不变蓝 点击打开链接
(5)CSS框类型,通过display属性来设定元素的框类型:
最常见的display类型是:block,inline,inline-block,即块框(block box),行内框(inline box),行内块状框(inline-block box).
注意:默认状态下display属性值,块级元素display:block,行内元素display:inline。
不常见的类型display类型是:table,flex,grid.
①display:table--允许你像处理table布局那样处理非table元素,而不是滥用HTML的<table>标签来达到同样的目的;
②display:flex--允许你处理一些困扰CSS已久的一些传统布局问题,如布置一系列弹性等宽容器或者垂直居中内容(目前,flex布局在移动端使用较为广泛);
③display:grid--给出一种简单实现CSS网络系统的方式,而在传统上它依赖于一些棘手难以处理的CSS网络框架。
(6)框的高度
框的高度不遵守百分比的长度;框的高度总是采用框内容的高度,除非指定一个绝对的高度(如:px或者em),它会比在页面上默认是100%高度更实用。
(7)盒的高级属性--设置宽和高的约束
①通过min-width,max-width,min-height,max-height 属性,来设置大小约束,以更灵活的方式控制内容盒的大小:
这类情况通常用于响应式网页设计,将一个布局的外层容器的宽度设置为百分比形式。
width:70%; max-width:1280px; min-width:480px;
然后,添加下句CSS使该容器在它的父容器内居中显示:
margin:0 auto;
那么最终呈现的效果是:当父容器在最小和最大宽度限制内时,它将填满整个视口宽度;当父容器超过1280px宽度时,布局将保持在1280px宽,并开始在可用空间内居中。当宽度低于480px时,视口将小于容器,您必须滚动才能看到完全的内容。
②max-width属性的另一个好处是可以将容器内的媒体(如图像和视频)控制在容器内(响应式图片):
在上述例子中,图像会引起一个问题--起初它的显示正常,但当容器变得比图像更窄时,图像开始溢流容器(因为它是一个固定的宽度)。解决这类问题,可以用以下CSS:
display:block; margin:0 auto; max-width:100%;
前两条属性display:block,margin:0 auto,使它的展示行为像一个块元素并且在父容器内居中。而max-width:100%限制了图像的宽度使它的最大宽度与父容器的宽度相等。因此,当父容器宽度缩小到小于图像的宽度时,图像会一起缩小。(这样,可以让图片最大只能是自己的宽度,成为响应式的图片)
而这类运用最好的实例就是bootstrap框架中,图像的img-responsive类名的属性,在框架下,图像添加了img-responsive类名,就能达到在视口宽度不断变化的情况下,图像都可以达到响应式的缩放形式,这也是图像响应式的秘诀所在。
三、总结
关于盒模型的总结,是从运用实例的角度来引入的,并未按照常规的顺序来进行梳理,如果大家想了解盒模型的完整知识,推荐查看MDN的盒模型讲解完整篇,点击打开链接,以及MDN再述盒模型篇,点击打开链接。
如文章哪里有问题,欢迎大家留言进行指正,谢谢!
参考博客:框模型--学习WEB开发 点击打开链接
版权声明:本文为博主原创文章,未经博主允许不得转载。
-
边框回归(Bounding Box Regression)详解
2017-08-31 22:38:05Bounding-Box regression最近一直看检测有关的Paper, 从rcnn, fast rcnn, faster rcnn, yolo, r-fcn, ssd,到今年cvpr最新的yolo9000。这些paper中损失函数都包含了边框回归,除了rcnn详细介绍了,其他的paper都是...Bounding-Box regression
最近一直看检测有关的Paper, 从rcnn, fast rcnn, faster rcnn, yolo, r-fcn, ssd,到今年cvpr最新的yolo9000。这些paper中损失函数都包含了边框回归,除了rcnn详细介绍了,其他的paper都是一笔带过,或者直接引用rcnn就把损失函数写出来了。前三条网上解释比较多,后面的两条我看了很多paper,才得出这些结论。
- 为什么要边框回归?
- 什么是边框回归?
- 边框回归怎么做的?
- 边框回归为什么宽高,坐标会设计这种形式?
- 为什么边框回归只能微调,在离Ground Truth近的时候才能生效?
为什么要边框回归?
这里引用王斌师兄的理解,如下图所示:
对于上图,绿色的框表示Ground Truth, 红色的框为Selective Search提取的Region Proposal。那么即便红色的框被分类器识别为飞机,但是由于红色的框定位不准(IoU<0.5), 那么这张图相当于没有正确的检测出飞机。 如果我们能对红色的框进行微调, 使得经过微调后的窗口跟Ground Truth 更接近, 这样岂不是定位会更准确。 确实,Bounding-box regression 就是用来微调这个窗口的。
边框回归是什么?
继续借用师兄的理解:对于窗口一般使用四维向量
(x,y,w,h) 来表示, 分别表示窗口的中心点坐标和宽高。 对于图 2, 红色的框 P 代表原始的Proposal, 绿色的框 G 代表目标的 Ground Truth, 我们的目标是寻找一种关系使得输入原始的窗口 P 经过映射得到一个跟真实窗口 G 更接近的回归窗口G^ 。
边框回归的目的既是:给定
(Px,Py,Pw,Ph) 寻找一种映射f , 使得f(Px,Py,Pw,Ph)=(Gx^,Gy^,Gw^,Gh^) 并且(Gx^,Gy^,Gw^,Gh^)≈(Gx,Gy,Gw,Gh) 边框回归怎么做的?
那么经过何种变换才能从图 2 中的窗口 P 变为窗口
G^ 呢? 比较简单的思路就是: 平移+尺度放缩- 先做平移
(Δx,Δy) ,Δx=Pwdx(P),Δy=Phdy(P) 这是R-CNN论文的:G^x=Pwdx(P)+Px,(1) G^y=Phdy(P)+Py,(2) - 然后再做尺度缩放
(Sw,Sh) ,Sw=exp(dw(P)),Sh=exp(dh(P)) , 对应论文中:G^w=Pwexp(dw(P)),(3) G^h=Phexp(dh(P)),(4)
观察(1)-(4)我们发现, 边框回归学习就是
dx(P),dy(P),dw(P),dh(P) 这四个变换。下一步就是设计算法那得到这四个映射。线性回归就是给定输入的特征向量 X, 学习一组参数 W, 使得经过线性回归后的值跟真实值 Y(Ground Truth)非常接近. 即
Y≈WX 。 那么 Bounding-box 中我们的输入以及输出分别是什么呢?Input:
RegionProposal→P=(Px,Py,Pw,Ph) ,这个是什么? 输入就是这四个数值吗?其实真正的输入是这个窗口对应的 CNN 特征,也就是 R-CNN 中的 Pool5 feature(特征向量)。 (注:训练阶段输入还包括 Ground Truth, 也就是下边提到的t∗=(tx,ty,tw,th) )Output:
需要进行的平移变换和尺度缩放
dx(P),dy(P),dw(P),dh(P) , 或者说是Δx,Δy,Sw,Sh 。 我们的最终输出不应该是 Ground Truth 吗? 是的, 但是有了这四个变换我们就可以直接得到 Ground Truth, 这里还有个问题, 根据(1)~(4)我们可以知道, P 经过dx(P),dy(P),dw(P),dh(P) 得到的并不是真实值 G, 而是预测值G^ 。 的确, 这四个值应该是经过 Ground Truth 和 Proposal 计算得到的真正需要的平移量(tx,ty) 和尺度缩放(tw,th) 。
这也就是 R-CNN 中的(6)~(9):
tx=(Gx−Px)/Pw,(6)
ty=(Gy−Py)/Ph,(7)
tw=log(Gw/Pw),(8)
th=log(Gh/Ph),(9) 那么目标函数可以表示为
d∗(P)=wT∗Φ5(P) ,Φ5(P) 是输入 Proposal 的特征向量,w∗ 是要学习的参数(*表示 x,y,w,h, 也就是每一个变换对应一个目标函数) ,d∗(P) 是得到的预测值。 我们要让预测值跟真实值t∗=(tx,ty,tw,th) 差距最小, 得到损失函数为:Loss=∑iN(ti∗−w^T∗ϕ5(Pi))2 函数优化目标为:
W∗=argminw∗∑iN(ti∗−w^T∗ϕ5(Pi))2+λ||w^∗||2 利用梯度下降法或者最小二乘法就可以得到
w∗ 。为什么宽高尺度会设计这种形式?
这边我重点解释一下为什么设计的
tx,ty 为什么除以宽高,为什么tw,th 会有log形式!!!首先CNN具有尺度不变性, 以图3为例:
x,y 坐标除以宽高
上图的两个人具有不同的尺度,因为他都是人,我们得到的特征相同。假设我们得到的特征为
ϕ1,ϕ2 ,那么一个完好的特征应该具备ϕ1=ϕ 。ok,如果我们直接学习坐标差值,以x坐标为例,xi,pi 分别代表第i个框的x坐标,学习到的映射为f ,f(ϕ1)=x1−p1 ,同理f(ϕ2)=x2−p2 。从上图显而易见,x1−p1≠x2−p1 。也就是说同一个x对应多个y,这明显不满足函数的定义。边框回归学习的是回归函数,然而你的目标却不满足函数定义,当然学习不到什么。宽高坐标Log形式
我们想要得到一个放缩的尺度,也就是说这里限制尺度必须大于0。我们学习的
tw,th 怎么保证满足大于0呢?直观的想法就是EXP函数,如公式(3), (4)所示,那么反过来推导就是Log函数的来源了。为什么IoU较大,认为是线性变换?
当输入的 Proposal 与 Ground Truth 相差较小时(RCNN 设置的是 IoU>0.6), 可以认为这种变换是一种线性变换, 那么我们就可以用线性回归来建模对窗口进行微调, 否则会导致训练的回归模型不 work(当 Proposal跟 GT 离得较远,就是复杂的非线性问题了,此时用线性回归建模显然不合理)。这里我来解释:
Log函数明显不满足线性函数,但是为什么当Proposal 和Ground Truth相差较小的时候,就可以认为是一种线性变换呢?大家还记得这个公式不?参看高数1。
limx=0log(1+x)=x 现在回过来看公式(8):
tw=log(Gw/Pw)=log(Gw+Pw−PwPw)=log(1+Gw−PwPw) 当且仅当
Gw−Pw =0的时候,才会是线性函数,也就是宽度和高度必须近似相等。对于IoU大于指定值这块,我并不认同作者的说法。我个人理解,只保证Region Proposal和Ground Truth的宽高相差不多就能满足回归条件。x,y位置到没有太多限制,这点我们从YOLOv2可以看出,原始的边框回归其实x,y的位置相对来说对很大的。这也是YOLOv2的改进地方。详情请参考我的博客YOLOv2。
总结
里面很多都是参考师兄在caffe社区的回答,本来不想重复打字的,但是美观的强迫症,让我手动把latex公式巴拉巴拉敲完,当然也为了让大家看起来顺眼。后面还有一些公式那块资料很少,是我在阅读paper+个人总结,不对的地方还请大家留言多多指正。
-
利用DOSBox运行汇编超详细步骤!!
2020-05-19 22:46:22最近学校要求用汇编写课设,笔试取消,无奈只有配置环境自己写课设了。起初是利用VS2017进行配置,但后面运行好像有些问题,就想到用DOS...第四步,双击DOSBox文件夹下DOSBox 0.74 Options.bat文件,打开dos-box.conf文最近学校要求用汇编写课设(本来复习的好好的,结果笔试取消),无奈只有配置环境自己写课设了。起初是利用VS2017进行配置,但后面运行好像有些问题,就想到用DOSBox了。以下是详细步骤:
第一步:下载好相关文件,文件我放在下面链接里:
资源文件
提取码:edtx第二步,将masm文件夹里面所有文件放到一个特定的文件夹,比如我的f:\masm
第三步,安装DOSBox,里面有个压缩包,直接打开安装就行。
第四步,双击DOSBox文件夹下DOSBox 0.74 Options.bat文件,打开dos-box.conf文件,这里可以配置启动步骤,如下所示:
第五步,在打开的conf文件最后一行写入以下代码:
启动DOSBox后就会运行这两句话。第一行f:\masm视自己情况而定。第六步,打开DOSBox,如下所示:
可以看到,刚打开时就运行了我们刚刚写入的两行代码,我已经事先在masm文件夹中放入了一个match.asm文件,这里可以直接运行。第七步,输入masm match.asm,如下所示:
接着输入link match;这里一定一定要注意,一定要有分号,否则不能运行。
最后输入match:
最后是输出了一个Hello World,大功告成。 -
JVM 相关 - 深入 JVM 的钥匙 WhiteBox API
2020-12-25 17:07:54什么是 WhiteBox API WhiteBox API 是 HotSpot VM 自带的白盒测试工具,将内部的很多核心机制的 API 暴露出来,用于白盒测试 JVM,压测 JVM 特性,以及辅助学习理解 JVM 并调优参数。WhiteBox API 是 Java 7 引入的... -
通过 JFR 与日志深入探索 JVM - 调试 JVM 的工具 WhiteBox API
2021-01-06 21:34:34在之后的 JFR 事件学习以及调试的过程中,我们会经常用到 WhiteBox API 来触发 JVM 的一些机制或者临界点。例如强制 JVM 现在立刻进行 FullGC 等等。 什么是 WhiteBox API WhiteBox API 是 HotSpot VM 自带的白盒... -
理解box-sizing属性border-box,content-box
2016-09-16 10:54:58普通盒模型与怪异盒模型对比。box-sizing:content-box,box-sizing:border-box;对比。 如何使用普通盒模型与怪异盒模型,如何让浏览器只支持标准盒模型。 -
PentestBox
2018-05-11 14:41:561. 下载 PentestBox PentestBox 官网 PentestBox -
CSS3box-shadow属性详解
2019-04-27 19:18:37CSS3 --添加阴影(盒子阴影的使用) CSS3 - 给div或者文字添加阴影(盒子阴影、文本阴影的使用) CSS3定义了两种阴影:盒子阴影和文本阴影。...box-shadow属性向box添加一个或多个阴影。 语法: box-shadow: of... -
Voicebox
2018-07-13 17:59:50Voicebox官网http://www.ee.ic.ac.uk/hp/staff/dmb/voicebox/voicebox.html Voicebox下载http://www.ee.ic.ac.uk/hp/staff/dmb/voicebox/voicebox.zipmatlab中voicebox工具箱的添加... -
box-sizing中content-box和border-box的区别
2017-08-08 15:19:33盒模型box-sizing尺寸基准有两种:content-box 和 border-box; 默认的是 content-box content-box与border-box区别是两者的盒子的宽度是否包含边框和内边距; 下面用两个图来说明: 下图为box-sizing:... -
dosbox+masm汇编环境的安装和使用
2018-05-11 23:47:18一、dosbox+masm环境的配置1. 下载dosbox安装程序:DOSBox0.74-win32-installer.exe链接:https://pan.baidu.com/s/1gXPKTT-xKb6BpjOJdhmudA 密码:khqs2. 安装。注意它是32位的。我装在了C盘program files(X86)。3.... -
什么是Bounding Box、anchor box?
2020-10-30 17:47:28由于最近在看YOLOv3算法,感觉老是不清楚bounding box和anchor box的概念,看完吴恩达的视频后准备写一篇博客记下笔记。em...所以也会用吴恩达视频中的例子来讲。 在视频中,有一张图片,假设要检测的目标类别有... -
关于ancher box 和bounding box的区别
2020-07-02 17:38:43那么,在这里,ancher box(以下称为abox)的种类为2,而bounding box(以下称为bbox)的种类为3。 为什么要这么设计呢? 假如现在有一个任务,需要预测男人,女人,汽车,那么根据他们的形状,你会想到两种框来... -
BOX类
2018-01-03 18:18:29#pragma once #include #include class BOX { public: BOX(double width, double length, double height); void show(); //打印 double Super(); //表面积 double Bulk(); //体积 -
CSS中box-sizing: border-box;的作用
2018-08-29 19:12:57box-sizing 属性可以被用来调整这些表现: content-box 是默认值。如果你设置一个元素的宽为100px,那么这个元素的内容区会有100px宽,并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。 border-... -
CSS样式box-sizing,-moz-box-sizing:border-box;-ms-box-sizing:border-box;-webkit-box
2017-03-08 16:15:53[size=medium]box-sizing box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。 语法 box-sizing:content-box | border-box 默认值:content-box 取值 content-box: padding和border不被包含在... -
box-sizing
2017-02-21 15:29:42以前就知道box-sizing这个属性,一直没用过,用默认的盒模型多省事,再怪异只要记住不就行了吗?看到 Bootstrap 的 CSS 里出现了box-sizing,又细细一想,还是很有用处的,还是弄清楚比较好html { -webkit-box-... -
box-sizing border-box 的理解
2016-05-27 00:09:32-webkit-box-sizing: border-box; 则div 设置的宽高将包含 边框及 padding box-sizing .testdiv{ padding: 10px;; width:100px; border: 10px solid -
浅谈CSS3中的box-sizing(content-box与border-box)
2017-12-02 19:46:19CSS3中的box-sizing 属性允许以特定的方式来指定盒模型,有两种方式: content-box、border-box。默认值是content-box。 语法格式:box-sizing:content-box | border-box 区别: 1.content-box:padding和... -
css3中box-sizing属性用法详解-content-box-padding-box-border-box
2018-03-23 10:59:32box-sizing属性概述box-sizing的CSS属性是用来改变默认的CSS框模型,用于计算元素的宽度和高度。它可以使用这个属性来模拟浏览器的行为不正确支持CSS盒模型的规范。说到 IE 的 bug,在 IE6以前的版本中,IE对盒模型... -
去除全局设置的box-sizing:border-box
2019-07-08 16:46:19只需要给不需要box-sizing:border-box的元素上加上box-sizing:content-box 就行 -
Layabox 2 使用其它编辑器开发layabox2d
2019-08-14 23:11:27由于我习惯了使用webstorm进行代码的编写,所以尝试使用webstorm进行环境搭建一下layabox。 此开发环境是我通过webpack和layabox来实现的一个示例搭建。官方也有引擎代码下载,但是下载下来以后没有查到相应的使用... -
WhiteBox学习
2019-12-02 00:57:03WhiteBox学习 String myPrivateString = Whitebox.<String> getInternalState(instanceOfA, "myPrivateString", B.class); String myPrivateString = Whitebox.getInternalState... -
box-sizing: border-box的疑问
2019-04-13 01:16:08box-sizing: border-box; 当box-sizing值为 border-box时候 定义的高度height值为:css定义的盒子高度,其中定义的盒子高度: 即css中定义的height =padding(上)+padding(下)+边框宽度 实际height = 定义的... -
全局box-sizing:border-box;设置方法
2020-03-05 17:04:36box-sizing: border-box; } *::before,*::after{ box-sizing: border-box; } </style> 如果设置了border-box,实际所占宽高度 = 设置的高度(height)/ 设置的宽度(width)+ 外边距(margin... -
ObjectBox
2017-11-18 17:41:59ObjectBox 笔记 chauI 关注 2017.07.20 18:37* 字数 552 阅读 303评论 0喜欢 2 EventBus 和 GreenDao 的老东家 GreenRobot 推出的移动端数据库架构。 优点: 速度快,号称比目前... -
box-shadow详解
2019-02-21 00:22:49box-shadow详解: 我们可以看到box-shadow的属性如下 /* offset-x | offset-y | blur-radius | spread-radius | color */ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); 第一个值代表x轴的offset 第二值代表y轴... -
box-sizing: border-box;的作用
2018-01-31 13:40:05box-sizing 属性可以被用来调整这些表现: content-box 是默认值。如果你设置一个元素的宽为100px,那么这个元素的内容区会有100px宽,并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。 ...