【CSS】标准盒模型和怪异盒模型

盒模型的组成：

content（内容）
padding（内边距）
border（边框）
margin（外边距）

那常见的盒子模型有哪些呢？

主要是两种：标准盒模型和怪异盒模型。

它俩有什么区别呢？区别主要在于宽高的计算。

1、标准盒模型

如上图，我们可以很明显的看到这里的宽高就是content的宽高。

宽：width = content（内容）的宽

高：height = content（内容）的高

2、怪异盒模型（IE盒模型）

如图所示，怪异盒模型的宽高是包括了content、padding和border的。

宽：width = content（内容）的宽 + padding-left （左内边距）+ padding-right （右内边距）+ border-left（左边框） + border-right（右边框）

高：height = content（内容）的高 + padding-top （上内边距）+ padding-bottom（下内边距）+ border-top（上边框） + border-bottom（下边框）

在大多数情况下我们用到的都是标准盒模型，当然盒子模型之间也是可以相互转换的。

在这里，就要用到box-sizing这个属性了。

content-box 标准盒模型
border-box 怪异盒模型

【CSS】标准盒模型和怪异盒模型相关推荐

css盒模型（css的两种盒模型：标准盒模型、怪异盒模型）和 css3指定盒子模型种类的box-sizing属性
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin ...
CSS标准盒模型和怪异盒模型区别
盒模型都是由四个部分组成的,分别是margin.border.padding 和 content.即外边距,边框,内边距,内容. 一:标准盒模型 1. box-sizing: content-box ...
标准盒模型和怪异盒模型的区别？
什么是怪异盒模型?今天我帮大家整理一篇详细的有关于标准盒模型和怪异盒模型的区别在哪里. 首先要知道,什么是盒模型? 盒模型是css布局的基石,它规定了网页元素如何显示以及元素间相互关系.css定义所有 ...
【什么是盒模型】标准盒子模型、怪异盒子模型
一.上图标准盒子模型和IE盒子模型什么是盒子模型 CSS盒子模型(Box model)就是在网页设计中经常用到的CSS技术所使用的一种思维模型.网页中所有元素都具备以下四个属性: 内容(cont ...
盒子模型（标准盒模型、怪异盒模型）
一.盒子模型的组成部分: 内容区域: content 边框 : border 内边距: padding 外边距 margin ✳ 图中的蓝色部分即为content区域二.盒模型的分类: 1.W3C盒 ...
盒子模型--标准盒模型和怪异盒模型
盒子模型由content(内容).margin(外边距).padding(内边距).border(边框)组成 <div style=" ...
标准盒模型和怪异盒模型
怪异盒子模型 box-sizing :border-content; 标准盒子模型,平常不设置就默认是标准盒子模型 box-sizing :border-box; 怪异盒子模型标准盒子模型与怪异盒子 ...
普通盒模型和怪异盒模型
一.什么是盒模型? 1.根据盒子模型的概念,每个在页面上的元素都是一个拥有宽,高,内边距,边框和外边距的长方形盒子. 2.盒模型分为两种:分别是W3C标准盒模型(普通盒模型)和IE盒模型(怪异盒模型) ...
前端学习-盒模型和怪异盒模型
盒模型图片出自网上侵权删. 从里到外:content(宽高) +padding (内填充) +border(边框)+margin(外边距) padding <style>p{//单方向p ...

【CSS】标准盒模型和怪异盒模型

【CSS】标准盒模型和怪异盒模型相关推荐

最新文章

热门文章