box | 易学教程

50道 CSS 经典题

阅读更多关于 50道 CSS 经典题

1 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin 低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin 2 box-sizing属性？用来控制元素的盒子模型的解析模式，默认为content-box context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽 border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽 3 CSS选择器有哪些？哪些属性可以继承？ CSS选择符：id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel=”external”]）、伪类选择器（a:hover, li:nth-child）可继承的属性：font-size, font-family, color 不可继承的样式：border, padding, margin, width, height 优先级（就近原则）：

background-clip和background-origin 详解

阅读更多关于 background-clip和background-origin 详解

<div class="box border-box"/> <div class="box padding-box"/> <div class="box content-box"/> <div class="box clip-border-box"/> <div class="box clip-padding-box"/> <div class="box clip-content-box"/> .box{ padding: 20px; margin: 30px; height: 200px; width: 200px; border: 20px dashed red; display: inline-block; background: yellow url(./assets/border.jpg) no-repeat; } .border-box{ background-origin: border-box; } .padding-box{ background-origin: padding-box; } .content-box{ background-origin: content-box; } .clip-border-box{ background-clip: border-box; } .clip-padding-box{ background-clip:

目标检测中IOU的计算，python代码

阅读更多关于目标检测中IOU的计算，python代码

def compute_iou(gt_box,b_box): ''' 计算iou :param gt_box: ground truth gt_box = [x0,y0,x1,y1]（x0,y0)为左上角的坐标（x1,y1）为右下角的坐标 :param b_box: bounding box b_box 表示形式同上 :return: ''' width0=gt_box[2]-gt_box[0] height0 = gt_box[3] - gt_box[1] width1 = b_box[2] - b_box[0] height1 = b_box[3] - b_box[1] max_x =max(gt_box[2],b_box[2]) min_x = min(gt_box[0],b_box[0]) width = width0 + width1 -(max_x-min_x) max_y = max(gt_box[3],b_box[3]) min_y = min(gt_box[1],b_box[1]) height = height0 + height1 - (max_y - min_y) interArea = width * height boxAArea = width0 * height0 boxBArea = width1 * height1 iou = interArea

columns分栏与flex弹性盒模型

阅读更多关于 columns分栏与flex弹性盒模型

columns 分栏值：column-width:设置每列的宽度 column-count:设置列数例：columns{200px 3} 列数和宽度固定 columns{200px} 列宽固定，根据容器宽度动态分布列数 column-width 默认auto,定义列宽，不能为负值 column-count 默认值auto,定义列数，不能为负值 column-gap 定义列与列之间的缝隙，默认是字体的宽度，不能为负值 column-rule : column-rule-width column-rule-style column-rule-color; 设置列之间边框的厚度，样式，颜色。 column-span : none all; 设置元素是否横跨所有列。对某个元素进行设置，让其横跨所有列或不横跨。 column-fill : auto balance; 列高度自适应内容，列高度以其中最高的一列统一。 column-break-before : 设置是否在对象之前进行断行 auto(不强迫不禁止) always(总是在元素之前断行产生新列) avoid(避免在元素之前断行并产生新列) column-break-after : 设置对象之后是否断行 auto(不强迫不禁止) always(总是在元素之后断行产生新列) avoid(避免在元素之后断行并产生新列) column

Css3 box-sizing属性

阅读更多关于 Css3 box-sizing属性

box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。 content-box，border和padding不计算入width之内 chrome和firefox默认这种模式 padding-box，padding计算入width内 border-box，border和padding计算入width之内，其实就是怪异模式了~ ie默认这种模式 ie8+浏览器支持content-box和border-box； ff则支持全部三个值。使用时： -webkit-box-sizing: 100px; // for ios-safari, android -moz-box-sizing:100px; //for ff box-sizing:100px; //for other <style type="text/css"> .content-box{ box-sizing:content-box; -moz-box-sizing:content-box; width: 100px; height: 100px; padding: 20px; border: 5px solid #E6A43F; background: blue; } .padding-box{ box-sizing:padding-box; -moz

MFC获取电脑硬盘序列号（附源代码）

阅读更多关于 MFC获取电脑硬盘序列号（附源代码）

在新建的project里面加入一个类即：下面一个类 GetHDSerial.cpp <code class="hljs cs has-numbering" style="font-family: 'Source Code Pro', monospace; display: block; padding: 0px; color: inherit; box-sizing: border-box;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-comment" style="font-family: 宋体 !important; margin: 0px; padding: 0px; color: rgb(136, 0, 0); box-sizing: border-box;">// GetHDSerial.cpp: implementation of the CGetHDSerial

04-3-object类型

阅读更多关于 04-3-object类型

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="box"></div> <script> //类 //函数在数据类型上是属于object的 // function a() {} // a.goudan = '狗蛋'; // console.dir(a); // function是可以存储数据的，但是一般不用 function a() { alert(1); console.log(2); document.getElementById('box').innerHTML = 'box'; } //直接定义function是不会执行的,就是封装 //调用的时候会执行,可以多次调用 //a()主动执行调用也可以被动执行但是不加() a(); document.onclick = a; </script> </body> </html> 来源： https://www.cnblogs.com/zhangyu666/p/11477684.html

字符串提取出键值对

阅读更多关于字符串提取出键值对

1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>基本包装类型</title> 6 </head> 7 <body> 8 <p>以"&"、"="提取字符串键值对，注意Signature中有多个"=",这里使用了indexOf()取第一个"="。</p> 9 <script src="http://www.vscss.com/dm/jquery.js"></script> 10 <script > 11 var oString = "respMsg=交易流水不存在&Signature=a738qN9BNqYfaYG8W+6BZHup9mqGudIap5PjAowuhrjFk8QJ6b3PPsTaRu5GS8xIl7gIYN/WI3b9FVrGVgUa2SP2BtEJ3dp55PDgnRWBI+9hp6mlRwixQ3FXB1gmjvt546HLpWZDEFMhxABkq9LkGZziNIMq2IjmRWQkcYdM=&respCode=3275" 12 var box = oString.split("&") 13 alert(box); 14 for(var i=0;i<box.length;i++){ 15 alert(box[i]); 16 var pos=box[i].indexOf('

vagrant导出box文件

阅读更多关于 vagrant导出box文件

1.进入到homestead文件中，右键bash进入命令行 2.打开Oracle VM VirtualBox管理器，查看当前需要导出的box名称 3.在bash中输入导出命令，进行导出box操作 4.在homestead文件中查看导出的box文件来源： CSDN 作者：菜鸡Cheney的架构师之路链接： https://blog.csdn.net/qq_39535807/article/details/104037515

理解 BFC

阅读更多关于理解 BFC

网上有太多关于BFC的文章，看了很多，还是不能理解。想想还是看全英文的官方文档，关于BFC的规则，在w3c文档中的第9章和第10章全局搜一下Block formatting context，就能找到。什么是BFC CSS中每个元素都会根据盒模型生成0个或多个Box，Box是布局的对象和基本单位，Visual formatting model描述了一套规则，决定元素如何对其内容进行布局，以及与其他元素的关系和作用。盒布局由以下几个方面组成：盒的尺寸和类型（明确指定、受限或没有指定行内级盒、块级盒）盒布局方案（常规流、浮动、绝对定位）文档树中元素之间的关系其他如视口、图片大小等对于浮动布局，由float属性决定对于绝对定位布局，由position属性决定而对于常规流的布局，则与display属性有很大关系根据display属性的计算值，可以将box分为块级盒和行内级盒块级盒 display的计算值为 block, list-item 或 table 行内级盒 display的计算值为 inline, inline-block 或 inline-table 在常规流中，不同的Box会参与不同formatting context（在这个格式化上下文中有一套渲染规则），block-level box（块级盒）参与block formatting context

订阅 box