box-sizing重置盒子模型计算规则
目标大纲
一.语法声明
box-sizing ： content-box | border-box | inherit
二.属性值说明
content-box 在宽度和高度之外绘制元素的内边距和边框
border-box 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制
inherit 继承 父元素 box-sizing属性的值
三.浏览器的兼容性
说明IE8及以上版本支持该属性，Firefox 需要加上浏览器厂商前缀-moz-，对于低版本的IOS和Android浏览器也需要加上-webkit-
推荐写法
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
测试代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>box-sizing</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
background-color: #fff;
font-size: 12px;
width: 200px;
height: 200px;
border-width: 10px;
border-color: #34538b;
border-style: solid;
padding: 20px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box">
该盒子边框是10px像素,内边距是20px像素,是算在盒子的宽高内的
即：<span style="color: red;">box-sizing:border-box</span><span style="color: red;">内边距和边框</span>都将<span style="color: red;">在已设定的宽度和高度内进行绘制</span>
</div>
</body>
</html>
参考资料
box-sizing重置盒子模型计算规则的更多相关文章
- CSS Box Model（盒子模型）
CSS Box Model(盒子模型) 一.简介 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封 ...
- 深入理解CSS盒子模型
在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...
- CSS3与页面布局学习笔记（二）——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset
一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...
- 盒子模型(Box Model)
盒子模型(Box Model) ■ 盒子模型——概念 在网页设计中常用的属性名:内容(content),填充(padding),边框(border),边界(margin),CSS 盒子模式都具备这些属 ...
- css 大话盒子模型
什么是盒子模型? CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content).内边距(padding).边框(border) 和 ...
- 聊聊css盒子模型
css盒子模型原理: 在网页设计中常听的属性名:内容(content).填充/内边距(padding).边框(border).外边距(margin), CSS盒子模式都具备这些属性. 这些属性我们可以 ...
- 从CSS盒子模型说起
前言 总括: 对于盒子模型,BFC,IFC和外边距合并等概念和问题的总结 原文地址:从CSS盒子模型说起 知乎专栏:前端进击者 博主博客地址:Damonare的个人博客 为学之道,莫先于穷理:穷理之要 ...
- 【转】CSS（10）盒子模型
CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content).内边距(padding).边框(border) 和 外边距(marg ...
- CSS 盒子模型（转）
CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content).内边距(padding).边框(border) 和 外边距(marg ...
随机推荐
- Nodejs学习笔记（二）--- 事件模块
目录 简介及资料 事件常用函数及使用 emitter.on(event, listener) emitter.emit(event, [arg1], [arg2], [...]) emitter.on ...
- iOS------苹果设备处理器指令集（iPhone初代到iPhone5s）
(via 雅香小筑) Arm处理器,因为其低功耗和小尺寸而闻名,几乎所有的手机处理器都基于arm,其在嵌入式系统中的应用非常广泛,它的性能在同等功耗产品中也很出色. Armv6.armv7.armv7 ...
- 薪资至少10K的一道题，你能拿下吗
我所了解的华为: 应届本科生8k+ 应届硕士生10k+ 应届博士生12k+ 看到后什么感想?有没有只恨生不逢时运不佳的感觉? 很多人做3年多甚至更久,才能达到这个薪资水平,还不如一个新生. 在我看来, ...
- SQL Server 日期函数：EOMonth、DateFormat、Format、DatePart、DateName
一,月份的最后一天 函数 EOMonth 返回指定日期的最后一天 EOMONTH ( start_date [, month_to_add ] ) 1,对于start_date 有两种输入方式,能够转 ...
- Entity Framework Code First属性映射约定
Entity Framework Code First与数据表之间的映射方式有两种实现:Data Annotation和Fluent API.本文中采用创建Product类为例来说明tity Fram ...
- Android文件下载之进度检测
近期因为项目的需要,研究了一下Android文件下载进度显示的功能实现,接下来就和大家一起分享学习一下,希望对广大初学者有帮助. 先上效果图: 上方的蓝色进度条,会根据文件下载量的百分比进行加载,中部 ...
- 细说Linq之Aggregate
前言 Linq中有关常见的方法我们已经玩的得心应手,而对于那些少用的却是置若罔闻(夸张了点),但只有在实际应用中绞尽脑汁想出的方法还不如内置的Linq方法来的实际和简洁,不喜勿喷,怪我见识短. 通过R ...
- MySQL utf8mb4 字符集：支持 emoji 表情符号
转载地址:http://www.linuxidc.com/Linux/2013-05/84360.htm 我用他的方法解决了问题,亲测可用,不要用Nnvicat for Mysql去查询编码,在服务器 ...
- SubSonic3.0.0.4.3源码包与调用Dll
版本修改历史 3.0.0.4.3版修复了下面问题: 修正多表关联查询时,使用左关联和右关联出错问题修正DbDataProvider.cs类的ToEnumerable函数打开数据库链接后没有关闭的问题添 ...
- 分享一个 @user 前端插件
开源地址:https://github.com/yuezhongxin/Mention.js 插件效果:类似于微博或 github 中 @user 列表效果. 这是个二次开发的插件,花了几天时间,对 ...