一、盒模型

一个web页面由许多html元素组成,而每一个html元素都可以表示为一个矩形的盒子,CSS盒模型正是描述这些矩形盒子的存在。

MDN的描述:

When laying out a document, the browser's rendering engine represents each element as a rectangular box according to the standard CSS basic box model. CSS determines the size, position, and properties (color, background, border size, etc.) of these boxes.

Every box is composed of four parts (or areas), defined by their respective edges: the content edgepadding edgeborder edge, and margin edge.

CSS盒模型有四条边:外边距边、边框边、内填充边、内容边(Content edge、Padding edge、Border edge和Margin edge),四条边由内到外把它划分为四个区域:内容区域、内边距区域、边框区域、外边距区域(Content area、Padding area、Border area和Margin area)。

  • 内容区域(content area )是包含元素真实内容的区域。
  • 内边距区域(padding area) 延伸到包围padding的边框。如果content area设置了背景、颜色或者图片,这些样式将会延伸到padding上。
  • 边框区域(border area )是包含边框的区域,扩展了内边距区域。
  • 外边距区域(margin area)用空白区域扩展边框区域,以分开相邻的元素。

通过CSS属性(width、height、padding、border和margin)来控制它们的尺寸。

二、box-sizing(css3属性)

1.box-sizing的值

 /* 关键字 值 */
box-sizing: content-box;/*默认值*/
box-sizing: border-box; /* 全局 值 */
box-sizing: inherit;
box-sizing: initial;
box-sizing: unset;

2.box-sizing的作用

box-sizing的作用就是告诉浏览器,使用的盒模型是W3C盒模型,还是IE盒模型。

a.当 box-sizing 的值为 content-box(默认值) 时,其尺寸计算公式为:

width = content-width;
height = content-height;

b.当 box-sizing 的值为 border-box 时,其尺寸计算公式为:

width = content-width + padding-left + padding-right + border-left-width + border-right-width;
height = content-height + padding-top + padding-bottom + border-top-height + border-bottom-height;

无论取何值,盒子尺寸是一样的,改变的是盒子的容量(盒子内部的width和height的计算方式)。

补充:IE6、7为W3C盒模型。

3.对于box-sizing属性值的选择

在项目里,究竟该使用哪种盒模型?我也不知道啊

在MDN上有这样一句话:

Some experts recommend that web developers should consider routinely applying box-sizing: border-box to all elements.

一些专家甚至建议所有的Web开发者们将所有的元素的 box-sizing 都设为 border-box。

Twitter的开源框架Bootstrap3就全局设置了box-sizing: border-box,由此可见IE盒模型的是比较受欢迎的。

补充:

W3C在CSS3中,加入了 calc() 函数。

CSS函数calc()可以用在任何一个需要<length><frequency><angle><time><number>、或<integer>的地方。有了calc(),你就可以通过计算来决定一个CSS属性的值了。

/* property: calc(expression) */
width: calc(100% - 80px);

使用 calc() 函数,我们可以在 content-box 里实现 border-box,相对的,在 border-box 里实现 content-box 也是可以的。

CSS 盒模型与box-sizing的更多相关文章

  1. CSS盒模型(Box Model)

    阅读目录 1. 什么是CSS盒模型 2. IE盒模型和W3C盒模型 3. CSS3属性box-sizing 4. 关于盒模型的使用 在最初接触CSS的时候,对于CSS盒模型的不了解,撞了很多次的南墙呀 ...

  2. css盒模型(Box Model)

    所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和 ...

  3. [k]css盒模型

    box-sizing :  content-box || border-box || inherit 1.content-box:此值为其默认值.元素的宽度/高度(width/height)等于元素边 ...

  4. 尖刀出鞘的display常用属性及css盒模型深入研究

    一:diplay:inline-block 含义:指元素创建了一个行级的块级元素,该元素内部(内容)被格式化成一个块级元素,同时元素本身则被格式化成一个行内元素.更简单的说就是说inline-bloc ...

  5. CSS3盒模型display:box详解

    display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box ...

  6. 浅谈css盒模型

    在我们网页上的每一个元素,一个按钮,一段文本,一张图片等等,浏览器都将它们当做一个“盒子”看待,并把这样的盒子称为盒模型(box model).使用Chrome的右键>审查元素对某个网页上的元素 ...

  7. 从零开始学习前端开发 — 3、CSS盒模型

    ★  css盒模型是css的基石,每个html标签都可以看作是一个盒模型. css盒模型是由内容(content),补白或填充(padding),边框(border),外边距(margin)四部分组成 ...

  8. CSS盒模型的深度思考及BFC

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 题目:谈一谈你对CSS盒模型的认识 专业的面试,一定会问 CSS 盒模型 ...

  9. 面试汇总——说一下CSS盒模型

    本文是面试汇总分支——说一下CSS盒模型. 基本概念:W3C标准盒模型和IE盒模型 CSS如何设置这两种模型 JS如何获取盒模型对应的宽和高 根据盒模型解释边距重叠 BFC(边距重叠解决方案) 一. ...

随机推荐

  1. 关于前端本地压缩图片,兼容IOS/Android/PC且自动按需加载文件之lrz.bundle.js

    一.介绍说明主要特点: ①在前端压缩好要上传的图片可以更快的发送给后端,因此也特别适合在移动设备上使用. ②兼容IOS/Android,修复了IOS/Android某些版本已知的BUG. ③按需加载文 ...

  2. 有终将被编程潮流淹没的程序员,那是因为没学python人工智能吧?

    2017年被称为中国人工智能元年--在两会时期,人工智能曾经成为国度计策,同时被写进当局报告.在从前的一年里,人工智能获得注重,已逐步浸透到别的行业,无人超市.主动驾驶.人脸识别.智能家居等" ...

  3. lintcode 链表求和

    题目要求 你有两个用链表代表的整数,其中每个节点包含一个数字.数字存储按照在原来整数中相反的顺序,使得第一个数字位于链表的开头.写出一个函数将两个整数相加,用链表形式返回和. 样例 给出两个链表 3- ...

  4. 构建具有用户身份认证的 Ionic 应用

    序言:本文主要介绍了使用 Ionic 和 Cordova 开发混合应用时如何添加用户身份认证.教程简易,对于 Ionic 入门学习有一定帮助.因为文章是去年发表,所以教程内关于 Okta 的一些使用步 ...

  5. PCB布线要求

    时钟线要求 时钟驱动器布局在PCB中心而非电路板外围,布局尽量靠近,走线圆滑.短,非直角.非T形,布线可选4~8mil,过窄会导致高频信号衰减,并降低信号之间电容性耦合. 避免时钟之间.与信号之间的干 ...

  6. ArcGIS 产品体系结构

    1. 开篇 本文主要从以下几个方面介绍 ArcGIS 的产品体系 2. 详细介绍 2.1 ArcGIS Desktop 参考:[https://blog.csdn.net/hphone/article ...

  7. day12 EL 表达式和国际化开发

    day12 EL 表达式和国际化开发 1. EL(Expression Language) 表达式简介 1.1 执行运算 1.2 获取web开发常用对象(el 中定义了11个隐式对象) 1.3 使用 ...

  8. cmd命令行下登陆备份导入导出msql数据

    1.进入服务,找到mysql服务,在属性里找到mysql的安装路径 2.登陆  mysql -h 192.168.0.11 -P 3310 -u root -p 如果是访问的本机并且端口是默认的,那么 ...

  9. dubbo-admin和dubbo-monitor的安装

    一.安装dubbo-admin 去这里 http://download.csdn.net/download/u013081610/10044744 下载dubbo-admin.war 部署dubbo- ...

  10. 将sqlserver导出的csv数据导入到ubuntu和mac上的mysql

    最近在捣鼓一些数据相关的东西.将sql server里的数据导入到ubuntu和mac上的mysql,方法有很多.不过我选择了最简单的一种:将sql server的数据导成csv,然后将csv导入到m ...