CSS Box Model（盒子模型）

一、简介

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

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

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

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

不同部分的说明：

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

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

二、元素的宽度和高度

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

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

div {

    width: 300px;

    border: 25px solid green;

    padding: 25px;

    margin: 25px;

}

效果:

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

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

div {

    width: 220px;

    padding: 10px;

    border: 5px solid gray;

    margin:;

}

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

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

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

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

三、浏览器的兼容性问题

一旦为页面设置了恰当的 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. WEB安全番外第四篇--关于SQL盲注

    一.SQL盲注: 看不到回显的,无法从返回直接读取到数据库内容的对数据的猜解,属于盲注. 二.第一种--基于布尔类型的盲注: 这种很简单,最典型的例子,就是挖SQL注入的时候常用的: ''' http ...

  2. ios 让两个tableView同时处于选中状态

    - (void)tableView:(UITableView *)tableView didHighlightRowAtIndexPath:(NSIndexPath *)indexPath { [_l ...

  3. 修改DedeCMS图片上传路径命名规则的具体方法步骤

    收藏到:0时间:2013-08-23   文章来源:马海祥博客   访问次数:2350 最近在整理网站根目录下文件的时候,发现马海祥博客网站已经有上千个文件夹了,其中光图片文件夹就占了近一半.这个主要 ...

  4. Spring-AOP的五种通知和切面的优先级、通知变量声明

    SpringAOP的通知分为以下五种: 1前置通知(@before)在连接点执行之前执行的代码 2后置通知(@after)在连接点执行之后执行的代码,不管连接点执行后是否出现异常,后置通知都会执行,但 ...

  5. 模拟Push和Pop动作

    //利用CATransition来作模拟 //模拟Push - (void)pushView:(UIView *)pushView inView:(UIView *)inView { CATransi ...

  6. Ta-lib K线模式识别

    1, CDL2CROWS (Two Crows 两只乌鸦) 简介:三日K线模式,第一天长阳,第二天高开收阴,第三天再次高开继续收阴,收盘比前一日收盘价低,预示股价下跌. 例子:integer = CD ...

  7. Tomcat 下 mysql的连接池配置和使用

    最近维护的一个项目出了问题,最后分析是卡在数据库连接池上,然后就做了些学习. 先把我自己的方法写出来,再说下网上其他的没有成功的方法. 1.首先当然是先把mysql的jar包放在lib目录下,tonc ...

  8. 原！linux脚本统计

    #! /bin/sh first=$ first2=$ input2=$ let second=`date -d "-1 days ago ${input2}" +%Y%m%d` ...

  9. 年假小 Plan

    Learn 董伟明 课程 https://www.pycourses.com/ Learn 500 Lines or Less https://github.com/HT524/500LineorLe ...

  10. python 通过文件路径获取文件hash值

    import hashlib import os,sys def CalcSha1(filepath): with open(filepath,'rb') as f: sha1obj = hashli ...