一、盒模型

一个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. 【.Net架构】BIM软件架构03:Web管控平台MVC架构

    一.前言        上一篇讲述的是将BIM平台后台架构CoreService.sln,该解决方案主要作用是对管控平台的核心业务进行封装,然后让前端的ApiController去调用该解决方案中的对 ...

  2. Go中string转[]byte的陷阱

    Go中string转[]byte的陷阱html {overflow-x: initial !important;}#write, body { height: auto; }#write, #writ ...

  3. linux环境安装svn并进行多个源码库区分管理

    关于svn的文档有很多大部分已Windows为例子,因公司没有Windows服务器经过一天的曲折终于初步安装了解了svn.下面一些经验希望能帮助新手 本文采用的yum安装(简单快速没必要源码) 1.y ...

  4. Java容器:List

    集合类的层次关系 List接口简介 List的常用方法 List实例 Vector ArrayList Vector和ArrayList的扩容 LinkedList 参考文章 今天开始更新Java集合 ...

  5. java后台服务器实现极光推送

    一.添加极光推送所需要的jar包,项目使用的maven,所以只需要在pom文件里添加jar包依赖 <dependency> <groupId>cn.jpush.api</ ...

  6. JavaScript的数组知识案例之随机点名器

    本次分享JavaScript主要知识点涉及到for循环.if选择结构判断语句.数组的定义.定时器.清除定时器.日期对象的使用. 执行后效果图: 思路: 1.网页结构搭建: HTML 2.网页布局美化: ...

  7. Oracle12c中SQL优化(SQL TUNING)新特性之SQL计划指令

    SQL计划指令是Oracle12c中自适应查询优化的功能之一.SQL计划指令就像“额外的提醒” ,用以提醒优化器你先前选择了的计划并不是最优的,典型的是因为错误的势评估.错误的势评估往往是由统计信息缺 ...

  8. sniffer 软件的使用方法

    一.捕获数据包前的准备工作 在默认情况下,sniffer将捕获其接入碰撞域中流经的所有数据包,但在某些场景下,有些数据包可能不是我们所需要的,为了快速定位网络问题所在,有必要对所要捕获的数据包作过滤. ...

  9. MySQL提示“too many connections”的解决办法

    今天生产服务器上的MySQL出现了一个不算太陌生的错误"Too many connections".平常碰到这个问题,我基本上是修改/etc/my.cnf的max_connecti ...

  10. PHP入门小练习

    1.编写字符串检查函数,判断一个字符串是否为有效电话号码.要求:手机号码的长度为11位的数字,固定电话为开头三或四个数字后跟一个短横线后接8位数字. <? function isTel($tel ...