border-sizing属性详解和应用
box-sizing
用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。它有content-box
、border-box
和inherit
三种取值。inherit
指的是从父元素继承box-sizing
表现形式,不再冗赘。
1. 属性讲解
content-box
默认值,也是css2.1中的盒子模型。在计算width
和height
时候,不计算border
、padding
和margin
。高度、宽度都只是内容高度。
border-box
css3
新增。 width
和height
属性包括内容,内边距和边框,但不包括外边距。
计算公式:
- width = width = border + padding + 内容宽度
- height = border + padding + 内容高度
2. 考虑盒子模型的margin
从上面可以知道,即时是border-box
也是不计算margin
,只是多余计算了border
和padding
。因为border
和padding
都是盒子模型的一部分,但是margin
标记的是盒子和盒子的间距。所以,border-box
的解释很符合常理。
问题来了,如果有时候一定要设置
margin
,怎么做到自由控制来保证兼容?例如,我们下面要设置一个撑满页面的盒子元素,而且有外边距干扰,怎么做?
实现如下效果图:
代码:源码下载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>yuanxin.me</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#app {
box-sizing: border-box; /* 指定计算方式 */
margin: 10px; /* 外边距干扰 */
/* 利用 css3 的 calc */
width: calc(100vw - 2*10px);
height: calc(100vh - 2*10px);
}
</style>
</head>
<body>
<div id="app">
</div>
</body>
</html>
所以,当需要计算外边距(margin),可以配合css3中的四则运算(calc
)来使用。
3. 使用建议
根据项目中的使用经验和w3c的建议,推荐将
box-sizing
属性设置为border-box
。
* {
margin: 0;
padding: 0;
}
div {
box-sizing: border-box;
}
4. 关于
欢迎技术交流,引用请注明出处。
个人网站:godbmw.com
原文链接:border-sizing属性详解和应用
border-sizing属性详解和应用的更多相关文章
- [转]CSS vertical-align属性详解 作者:黄映焜
CSS vertical-align属性详解 posted @ 2014-08-26 17:44 黄映焜 前言:关于vertical-align属性. 实践出真知. 垂直居中. 第二种用法. ...
- HTML中元素的position属性详解
HTML中元素的position属性详解 转载自:https://blog.csdn.net/wangzunkuan/article/details/81540935 HTML中DOM元素有5种定 ...
- CSS2.1SPEC:视觉格式化模型之width属性详解(下)
本文承接CSS2.1SPEC:视觉格式化模型之width属性详解(上),继续分析CSS视觉格式化模型中width以及相关值的计算问题: 注:与上节不同,本节的demo中由于出现了float,absol ...
- Css盒模型属性详解(margin和padding)
Css盒模型属性详解(margin和padding) 大家好,我是逆战班的一名学员,今天我来给大家分享一下关于盒模型的知识! 关于盒模型的属性详解及用法 盒模型基本属性有两个:padding和marg ...
- css 14-CSS3属性详解:Web字体
14-CSS3属性详解:Web字体 #前言 开发人员可以为自已的网页指定特殊的字体(将指定字体提前下载到站点中),无需考虑用户电脑上是否安装了此特殊字体.从此,把特殊字体处理成图片的方式便成为了过去. ...
- css 12-CSS3属性详解:动画详解
12-CSS3属性详解:动画详解 #前言 本文主要内容: 过渡:transition 2D 转换 transform 3D 转换 transform 动画:animation #过渡:transiti ...
- css 11-CSS3属性详解(一)
11-CSS3属性详解(一) #前言 我们在上一篇文章中学习了CSS3的选择器,本文来学一下CSS3的一些属性. 本文主要内容: 文本 盒模型中的 box-sizing 属性 处理兼容性问题:私有前缀 ...
- android:exported 属性详解
属性详解 标签: android 2015-06-11 17:47 27940人阅读 评论(7) 收藏 举报 分类: Android(95) 项目点滴(25) 昨天在用360扫描应用漏洞时,扫描结果, ...
- OutputCache属性详解(一)一Duration、VaryByParam
目录 OutputCache概念学习 OutputCache属性详解(一) OutputCache属性详解(二) OutputCache属性详解(三) OutputCache属性详解(四)— SqlD ...
随机推荐
- Merge Parts of Rar/7z Package in Linux
When file is too large, we will compress it and split it into several parts. Now Let me show you how ...
- IMAGE WATCH工具安装与学习
1.下载安装 从下载地址搜索IMAGE WATCH,即可下载自己所需要的IMAGE WATCH工具. 安装ImageWatch,双击ImageWatch.vsix进行安装即可: 2.使用示例 这里首先 ...
- 内置函数_map()、reduce()、filter()
map().reduce().filter() map()内置函数把一个函数func依次映射到序列或迭代器对象的每个元素上,并返回一个可迭代的map对象作为结果,map对象中每个元素是原序列中元素经过 ...
- two sum --无脑法
public class Solution { /* * @param numbers: An array of Integer * @param target: target = numbers[i ...
- 多态&虚函数
(1).对象类型: a.静态类型:对象声明时的类型,编译的时候确定 b.动态类型:对象的类型是运行时才能确定的 class A {}; class B:pub ...
- MyBatis 源码分析 - 配置文件解析过程
* 本文速览 由于本篇文章篇幅比较大,所以这里拿出一节对本文进行快速概括.本篇文章对 MyBatis 配置文件中常用配置的解析过程进行了较为详细的介绍和分析,包括但不限于settings,typeAl ...
- 【接口时序】4、SPI总线的原理与Verilog实现
一. 软件平台与硬件平台 软件平台: 1.操作系统:Windows-8.1 2.开发套件:ISE14.7 3.仿真工具:ModelSim-10.4-SE 硬件平台: 1. FPGA型号:Xilinx公 ...
- 每日分享!canvas的使用~
今天大概的说下canvas的使用~ canvas是H5新增的一个元素,可以用来在canvas上绘制一些图形! 如何使用canvas呢? 首先我们用canvas绘制一条直线! <!DO ...
- PHP基础架构
PHP基础架构 一.PHP简介 PHP是一种非常流行的高级脚本语言,尤其适合Web开发,快速.灵活和实用是PHP最重要的特点.PHP自1995年由Lerdorf创建以来,在全球得到了非常广泛的应用. ...
- Eclipse 中 Debug 调试 java 代码一直报 Source not found
今天使用eclipse的debug调试代码,一直没法正常调试,一按F6就提示Source not found 根据提示发现可能是另一个项目影响了,所以把另一个项目Close Project,这次直接t ...