CSS Box Model（盒子模型）

一、简介

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：

不同部分的说明：

  • Margin(外边距) - 清除边框外的区域，外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域，内边距是透明的。
  • Content(内容) - 盒子的内容，显示文本和图像。

为了正确设置元素在所有浏览器中的宽度和高度，你需要知道的盒模型是如何工作的。

二、元素的宽度和高度

重要: 当您指定一个CSS元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完全大小的元素，你还必须添加填充，边框和边距。.

下面的例子中的元素的总宽度为300px：

  1. div {
  2.     width: 300px;
  3.     border: 25px solid green;
  4.     padding: 25px;
  5.     margin: 25px;
  6. }

效果:

让我们算算：
300px (宽)
+ 50px (左 + 右填充)
+ 50px (左 + 右边框)
+ 50px (左 + 右边距)
= 450px

试想一下，你只有250像素的空间。让我们设置总宽度为250像素的元素:

  1. div {
  2.     width: 220px;
  3.     padding: 10px;
  4.     border: 5px solid gray;
  5.     margin:;
  6. }

最终元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

三、浏览器的兼容性问题

一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。

虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。

IE8 及更早IE版本不支持设置填充的宽度和边框的宽度属性。

解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可。

CSS Box Model（盒子模型）的更多相关文章

  1. CSS Box Model 盒子模型

    1. 介绍 1.1 什么是 Box Model 在HTML中的每个element(元素)都可以看作一个矩形的盒子,矩形从内到外依次由元素的内容(content).内边距(padding).边框(bor ...

  2. Box Model 盒子模型

    Box Model盒子模型,是初学者在学习HTMl5时会学到的一个重要的模型,也有一些人称它为框模型,因为盒子是属于3维,而框是平面的.称之为盒子模型,是因为其结构和盒子十分相似,其最外面是margi ...

  3. CSS学习系列1 - CSS中的盒子模型 box model

    css中有一个盒子模型的概念. 主要是用来告诉浏览器如何来计算页面元素的宽度和高度, 比如该元素的宽度/高度 是否包括内边距,边框,外边距.  盒子模型有一个属性box-sizing属性来说明是否包括 ...

  4. CSS学习之盒子模型

    1. 前言 盒子模型,英文即box model.无论是div.span.还是a都是盒子. 但是,图片.表单元素一律看作是文本,它们并不是盒子.这个很好理解,比如说,一张图片里并不能放东西,它自己就是自 ...

  5. CSS Box Model All In One

    CSS Box Model All In One CSS 盒子模型 All In One CSS Box Model CSS Box Model Module Level 3 W3C Working ...

  6. DIV+CSS两种盒子模型（W3C盒子与IE盒子）

    在辨析两种盒子模型之前.先简单说明一下什么叫盒子模型. 原理: 先说说我们在网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS ...

  7. css中的盒子模型

    css中的盒子模型 css中的盒子模型,有两种,一种是“标准 W3C 盒子模型”,另外一种是IE盒子模型.   1.w3c盒子模型 从图中可以看出:w3c盒子模型的范围包括了:margin,borde ...

  8. 【CSS学习】--- 盒子模型

    一.前言:这篇只作为本人的笔记,以后慢慢再补充. 页面中的所有元素都可以被看作一个一个的“盒子”.这些盒子都包含了:内容(content).内边距(padding).边框(border)以及外边距(m ...

  9. CSS Flexbox 弹性盒子模型

    CSS Flexbox 弹性盒子模型 设置元素样式为 display: flex 或 display: inline-flex, 让元素变成flex容器, 从而可以通过flex模式布局它的子元素. f ...

随机推荐

  1. 解决 Unable to load native-hadoop library for your platform

    安装hadoop启动之后总有警告:Unable to load native-hadoop library for your platform... using builtin-java classe ...

  2. java框架---->RxJava的使用（一）

    RxJava是响应式程序设计的一种实现.在响应式程序设计中,当数据到达的时候,消费者做出响应.响应式编程可以将事件传递给注册了的observer.今天我们就来学习一下rxJava,并分析一下它源码感受 ...

  3. 02.Elasticsearch入门

        Elasticsearch支持Http类型的Restful风格API请求,需要打开9200端口.Elasticsearch服务会监听两个端口9200和9300,9200提供Http Restf ...

  4. spring-boot Web集群

    SpringBoot启动类增加注解 @EnableRedisHttpSession @SpringBootApplication @ImportResource({"classpath:co ...

  5. Javascript-const 常量

    const 常量 常量是块级作用域,很像使用 let语句定义的变量.常量的值不能通过重新赋值来改变,并且不能重新声明. 此声明创建一个常量,其作用域可以是全局或本地声明的块. 与var变量不同,全局常 ...

  6. Zabbix监控Windows主机

    一,下载zabbix-agent 下载地址:http://www.zabbix.com/downloads/3.0.0/zabbix_agents_3.0.0.win.zip 已经下载好的文件 zab ...

  7. CodeForces 732D Exams

    D. Exams time limit per test 1 second memory limit per test 256 megabytes input standard input outpu ...

  8. HDU 5876 大连网络赛 Sparse Graph

    Sparse Graph Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others) T ...

  9. 使用 Apache Commons CLI 解析命令行参数示例

    很好的输入参数解析方法 ,转载记录下 转载在: https://www.cnblogs.com/onmyway20xx/p/7346709.html Apache Commons CLI 简介 Apa ...

  10. Python 3.5 中的异步HTTP请求写法

    Python 3.5 增加了对async def and await的支持,同样的异步代码看起来干净了很多,也更易读. import aiohttp import asyncio async def ...