ylbtech-CSS：CSS 盒子模型
1.返回顶部
1、

CSS 盒子模型

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>即可。

2、
2.返回顶部
 
3.返回顶部
 
4.返回顶部
 
5.返回顶部
1、
2、
 
6.返回顶部
 
作者：ylbtech
出处：http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

CSS：CSS 盒子模型的更多相关文章

  1. 深入理解CSS系列（一）：理解CSS的盒子模型

    接触前端也有好几个年头了,但是,讲实话,对于CSS的理解真的是不敢恭维,相信很多同行也有类似的感受吧!这是为什么呢?因为我们都认为CSS太简单了,没有必要深入学习,果真如此?其实,只不过是自己图样图森 ...

  2. 这些HTML、CSS知识点，面试和平时开发都需要 No1-No4（知识点：HTML、CSS、盒子模型、内容布局）

    这些HTML.CSS知识点,面试和平时开发都需要 No1-No4   系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) ...

  3. 使用css弹性盒子模型

    提示: 当期内容不充实, 修改后再来看吧 以下称:弹性子元素: 子元素, 弹性容器: 容器 弹性盒子的属性 1. css弹性盒子模型规定了弹性元素如何在弹性容器内展示 2. 弹性元素默认显示在弹性容器 ...

  4. #CSS的盒子模型、元素类型

    CSS的盒子模型.元素类型   本文首先介绍了CSS元素的统一内部结构模型,盒子模型:然后介绍了CSS元素基于不同分类标准定义的元素类型,包括基于不同内容设置方式定义的replaced元素和non-r ...

  5. 深入了解CSS中盒子模型

    CSS中盒子模型介绍 什么是盒子? 盒子是用来存储物品,我们可以将盒子理解为酒盒,酒盒有什么组成的呢? 有酒可以喝.有填充物保护酒防止酒被摔坏.纸盒子. 我们怎么理解CSS中的盒子呢,CSS中盒子有什 ...

  6. CSS 弹性盒子模型

    CSS 弹性盒子模型 https://www.w3.org/TR/2016/CR-css-flexbox-1-20160526/ CSS Flexible Box Layout Module Leve ...

  7. css 大话盒子模型

    什么是盒子模型? CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content).内边距(padding).边框(border) 和 ...

  8. CSS系列：CSS中盒子模型

    盒子模型是CSS控制页面时一个很重要的概念.所有页面中的元素都可以看成是一个盒子,占据着一定的页面空间.可以通过调整盒子的边框和距离等参数,来调节盒子的位置和大小. 1. 盒子的内部结构 在CSS中, ...

  9. CSS之盒子模型及常见布局

    盒子模型的综合应用 CSS提高1 Div   ul    li 的综合应用很多的网页布局现在都用到这种模式 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTM ...

  10. CSS之盒子模型

    CSS核心内容 源文件目录: D:\Users\ylf\Workspaces\MyEclipse 10 标准流 盒子模型 浮动 定位 标准流/非标准流: 标准流:就是普通的 非标准流:实际工作中要打破 ...

随机推荐

  1. LiveTelecast直播平台技术图谱skill-map

    #直播平台技术图谱 ----##直播 ----###采集- **iOS** * HTTP Live Streaming * DirectShow- **Android** * setPreviewCa ...

  2. mybatis plus CRUD

    首先我们的项目建立之后我们要建立一个实体类来对应我们的数据裤中的信息 employee import com.baomidou.mybatisplus.annotation.IdType; impor ...

  3. idea Maven 一键 mvn clean package

    文章目录 方法一 方法二 方法一 方法二

  4. appium 环境搭建（不推荐安装此版本appium，推荐安装appium desktop）

    一:安装node.js 1.双击这个软件 2.一键安装,全都下一步,不要私自更改安装路径 3.打开cmd,输入npm,出现如下截图表示成功 二:安装appium 1.双击appium-installe ...

  5. 201⑨湘潭邀请赛 Chika and Friendly Pairs(HDU6534)

    原题链接:http://acm.hdu.edu.cn/showproblem.php?pid=6534 题意: 给你一个数组,对于第i个数来说,如果存在一个位置j,使得j>i并且a[j]-k&l ...

  6. upc组队赛7 Slimming Plan

    Slimming Plan 题目描述 Chokudai loves eating so much. However, his doctor Akensho told him that he was o ...

  7. linux基础--目录介绍

    Windows和Linux文件系统区别 在 windows 平台下,打开“计算机”,我们看到的是一个个的驱动器盘符: 每个驱动器都有自己的根目录结构,这样形成了多个树并列的情形,如图所示: 在 Lin ...

  8. Qt5.2中使用ping命令实现Ip扫描功能

    在实现类似于Free IP Scanner 2.1的Ip扫描器软件中,会用到ping命令.如果使用Qt编程实现,主要会用QThread.QProcess这两个类.关于这两个类的具体用法可以查阅Qt助手 ...

  9. ERROR 1290 (HY000): Unknown error 1290

    如有需要可以加我Q群[308742428]大家一起讨论技术,提供有偿服务. 后面会不定时为大家更新文章,敬请期待. 喜欢的朋友可以关注下. 记录一次在连接数据库报的一个错误信息: 原因是MySQL正使 ...

  10. ReentrantLock的相关方法使用

    获取锁定 void lock():常用获取锁定的方法 void lockInterruptibly():如果当前线程未被中断,则获取锁定:如果当前线程被中断,则出现异常 boolean tryLock ...