关于box-sizing的理解
---恢复内容开始---
box-sizing
属性允许您以特定的方式定义匹配某个区域的特定元素。
例如,假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。
语法
box-sizing: content-box|border-box|inherit;
content-box :w3c标准(默认) border-box :IE传统标准
content-box:
.test1{ box-sizing:content-box; width:200px; padding:10px; border:15px solid #eee; }
test1 中的宽度200px 指的是 content的宽度,同理高度也是。
border-box:
.test2{ box-sizing:border-box; width:200px; padding:10px; border:15px solid #eee; }
test2 中的宽度200px指的是border的宽度,同理高度也是。
借助上面的例子可以理解 padding-box
---恢复内容结束---
关于box-sizing的理解的更多相关文章
- bounding box的简单理解
1. 小吐槽 OverFeat是我看的第一篇深度学习目标检测paper,因为它是第一次用深度学习来做定位.目标检测问题.可是,很难懂...那个bounding box写得也太简单了吧.虽然,很努力地想 ...
- CSS3与页面布局学习总结(二)——Box Model、边距折叠、内联与块标签、CSSReset
一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...
- Box Model,边距折叠,内联和块标签,CSSReset
一.盒子模型(Box Model) 1.1.宽度测试 1.2.溢出测试 1.3.box-sizing属性 1.4.利用CSS画图 二.边距折叠 2.1.概要 2.2.垂直方向外边距合并计算 三.内联与 ...
- CSS3与页面布局学习笔记(二)——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset
一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...
- 理解浏览器的重绘与回流(repaint&&reflow)
今天在做练习的时候,遇到了重绘与回流这个词,表示连个毛都没有听过.遂查之,首先将网上的(http://blog.sina.com.cn/s/blog_8dace7290102wezv.html)关于这 ...
- 我对CSS vertical-align的一些理解与认识(一)
一.关于今天,本文,及其他 今天是个特殊的日子,因为今天是汶川地震两周年的日子,我很悲鸣:今天又是国际护士节,看到微博上护士照横流,我很欣慰. 一段放松的YY后,进入正题.上个月21号,有位同行留言想 ...
- CSS 盒子模型(Box model)中的 padding 与 margin
本文将讲述 HTML 和 CSS 的关键—盒子模型 (Box model) .理解 Box model 的关键便是 margin 和 padding 属性,而正确理解这两个属性也是学习用 CSS 布局 ...
- Normalize.css源码注释翻译&浏览器css兼容问题的理解
版本v5.0.0源码地址: https://necolas.github.io/normalize.css/5.0.0/normalize.css 翻译版: /*! normalize.css v5. ...
- 原 CNN--卷积神经网络从R-CNN到Faster R-CNN的理解(CIFAR10分类代码)
1. 什么是CNN 卷积神经网络(Convolutional Neural Networks, CNN)是一类包含卷积计算且具有深度结构的前馈神经网络(Feedforward Neural Netwo ...
- get到的新技能
1.重拾选择器 (一)类选择器与id选择器的区别 W3C标准这样规定的,在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class. 这样,一般网站分为头,体,脚部分,因为考虑到它们 ...
随机推荐
- 【转载】"library not found for - "解决办法
[摘要:正在我们编译的时间偶然候会报那个毛病"library not found for - " 因为是我们正在项目中应用了一些第三圆的库,便比方我再应用百度的静态库文件的时间,报 ...
- .Net Memory -- Windbg基本命令
命令 解释 .cls 清空命令窗口屏幕 .load dllfullpath 加载debugger扩展dll如SOS sosex psscor. .loadby dll moduleName 加载deb ...
- C++服务器设计(三):多线程模型设计
多线程探讨 如今大多数CPU都具有多个核心,为了最大程度的发挥多核处理器的效能,提高服务器的并发性,保证系统对于多线程的支持是十分必要的.我们在之前的设计都是基于单线程而言,在此章我们将对系统进行改进 ...
- OpenCV——IplImage
IplImage结构: typedef struct _IplImage { int nSize; /* IplImage大小 */ int ID; /* 版本 (=0)*/ int nChannel ...
- 那些我希望在一开始使用 Zsh(oh-my-zsh) 时就知道的
原文地址:http://segmentfault.com/a/1190000002658335 作者:xavier 自带的插件 其实我用了 oh-my-zsh 快三个月后才知道原来他自带了很多插件没 ...
- Bootstrap的响应式,当文字超过div长度,换行问题的处理!
(1)overflow: hiddenoverflow 属性规定当内容溢出元素框时发生的事情.这个属性定义溢出元素内容区的内容会如何处理.hidden 表示内容会被修剪,并且剪掉的内容是不可见的. ( ...
- thinkphp使用模块/控制器/操作访问时出现No input file specified.解决方式
thinkphp使用 http://serverName/index.php/模块/控制器/操作 访问时,出现了 No input file specified. 的错误 解决办法: 一: 开启cgi ...
- python 连接操作数据库(一)
一.下面我们所说的就是连接mysql的应用: 1.其实在python中连接操作mysql的模块有多个,在这里我只给大家演示pymysql这一个模块(其实我是感觉它比较好用而已): pymysql是第三 ...
- winform 窗口点击窗体任意位置移动窗体
private bool _isDown; private Point _mousePoint; private void Users_MouseDown(object sender, MouseEv ...
- 不同服务器数据库之间的数据操作 sp_addlinkedserver
--创建链接服务器 exec sp_addlinkedserver 'ITSV ', ' ', 'SQLOLEDB ', '远程服务器名或ip地址 ' exec sp_addlinkedsrv ...