原文网址：CSS--盒子模型(box)--使用/教程/实例_IT利刃出鞘的博客-CSDN博客

简介

说明

本文介绍CSS中的盒子模型的用法。

盒子模型介绍

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

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

图示

不同部分的说明：

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

box-sizing的取值

box-sizing 最主要的用法是规定容器元素的最终尺寸计算方式。

box-sizing的默认值（content-box）会得到一个比我们预期（100px）还要更大的容器，结果就是会破坏网页布局。

所以，一般会将box-sizing设置为“border-box”，一般这样写：

* {box-sizing: border-box;
}

box-sizing的取值的说明

值	说明
content-box	默认值。示例： `<div style="width: 100px; border: 10px solid blue; padding: 10px;">这是Demo </div>` 内容宽度：100px 最终元素宽度：100px(width) + 2 * 10px(padding) + 2 * 10px(border) = 140px
border-box	要设置的边框和内边距的值是包含在 width 内的。示例： `<div style="box-sizing: border-box; width: 100px; border: 10px solid blue; padding: 10px;">这是Demo </div>` 最终元素宽度：100px 内容宽度：100px(width) - 2 * 10px(padding) - 2 * 10px(border) = 60px
inherit	指定 box-sizing 属性的值，应该从父元素继承

示例1：默认值（content-box）

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>This is title</title>
</head><body><div style="width: 100px; border: 10px solid blue; padding: 10px;">这是Demo
</div><script>
</script>
</body>
</html>

结果

示例2：border-box

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>This is title</title>
</head><body><div style="box-sizing: border-box; width: 100px; border: 10px solid blue; padding: 10px;">这是Demo
</div><script>
</script>
</body>
</html>

结果

其他网址

CSS 盒子模型 | 菜鸟教程

CSS 框模型

CSS--盒子模型(box)--使用/教程/实例相关推荐

教你吃透CSS的盒子模型(Box Model)
目录 CSS 盒子模型(Box Model) 元素的宽度和高度浏览器的兼容性问题 CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model&q ...
初识HTML（五）进阶：CSS盒子模型、页面布局
目录 CSS 盒子模型(Box Model) 页面布局浮动流制作导航栏如何页面布局定位流 relative相对定位 absolute绝对定位 fixed固定定位 CSS 盒子模型(Box Mo ...
php盒子模型,CSS 盒子模型
CSS 盒子模型 CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个 ...
详细认识一下CSS盒子模型
定义 CSS把每个元素看成是一个个单独的框,这里就叫它"元素框"吧.而CSS 盒子模型 (Box Model) 可以理解成一种规范,它规定了元素框处理其"最里边的内容区域 ...
CSS盒子模型和水平、竖直方向的布局
一.块元素.行内元素和行内块元素行内元素特征: (1)设置宽高无效 (2)对margin仅设置左右方向有效,上下无效:padding设置上下左右都有效,即会撑大空间 (3)不会自动进行换行块状元素 ...
CSS 盒子模型、边框
CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的H ...
CSS盒子模型之CSS3可伸缩框属性（Flexible Box）
CSS盒子模型(下) 一．CSS3可伸缩框(Flexible Box) 可伸缩框属性(Flexible Box)是css3新添加的盒子模型属性,有人称之为弹性盒模型,它的出现打破了我们经常使用的浮动布 ...
CSS 盒子模型（Box model）中的 padding 与 margin
编辑自 http://www.x6x8.com/IT/199.HTML 本文将讲述 HTML 和 CSS 的关键-盒子模型 (Box model) .理解 Box model 的关键便是 margin ...
转HTML+CSS总结/深入理解CSS盒子模型
原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...

CSS--盒子模型(box)--使用/教程/实例

简介

图示

box-sizing的取值

示例1：默认值（content-box）

示例2：border-box

其他网址

CSS--盒子模型(box)--使用/教程/实例相关推荐

最新文章

热门文章