标准盒模型和怪异盒模型小结

标准盒模型和怪异盒模型

盒子模型分由外边距（margin）、边框（border）、内边距（padding）和内容（content）四部分组成。
标准盒模型是指在CSS中设置width（宽）、height（高）属性时，是给内容（content）区域设置；
怪异盒模型是指在CSS中设置width（宽）、height（高）属性时，是给边框（border）、内边距（padding）和内容（content）设置。

如果给盒子模型设置200 * 200的宽高，两种盒模型的区别如下：

标准盒模型设置宽高

怪异盒模型设置宽高

即标准盒模型的content区域为200 * 200, 而怪异盒模型则是content、padding、border三个区域加起来才是200 * 200。

如果我们给盒子设置边框和内边距，CSS代码如下所示：

.box1{float: left;width: 200px;height: 200px;border: 10px solid #000;background-color: aquamarine;}.box2 {float: left;width: 200px;height: 200px;padding: 10px;background-color: palegreen;}.box3 {float: left;/* 设置盒模型为怪异盒模型 */box-sizing: border-box;width: 200px;height: 200px;background-color: palegreen;}

<div class="box1">盒子1</div>
<div class="box2">盒子2</div>
<div class="box3">盒子3</div>

显示效果：

可以看到，标准盒模型中，不论是设置边框还是设置内边距都会改变盒子大小。

小结

我认为在实际编程中，使用怪异盒模型更好，因为怪异盒模型设置好宽高之后再设置边框和内边距不会改变盒子的大小，在布局时可以避免出现设置边框和内边距改变盒子的大小，从而导致影响整个页面布局。

标准盒模型和怪异盒模型小结相关推荐

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

标准盒模型和怪异盒模型小结

标准盒模型和怪异盒模型

小结

标准盒模型和怪异盒模型小结相关推荐

最新文章

热门文章