标准盒子模型简单讲解

今天给大家介绍一下盒子模型，首先盒子模型是什么？盒子模型是我们html布局中都会用到的，盒子模型顾名思义，就是装东西的，在html里面任意一个元素都可以当做一个盒子来看待，HTML中盒子就是用来装各种内容的。接下来给大家介绍一下盒子模型的基本内容。

盒子模型的基本组成部分：在符合w3c的下由外到内分别是margin border padding和元素content，标准盒子模型符合w3c的标准，所以在任意方向添加border padding content的宽高都会使元素整体占用空间变大。正常情况下width定义的是content的宽度，为了使大家更明白我用代码和图片表示一下：

首先我们先定义一个div：

<body>
<div id="div"></div>
</body>

在给他写一个css样式：

#div{width: 300px;height: 300px;background-color: red;margin: 0 auto;border:10px solid blue ;padding: 20px;}

给一个图为了使大家更明白：

通过代码和图给大家简单讲解一下，最中间就是我们定义的宽度也就是content的宽度，当我们给padding加一个宽度的时候整个整体也变宽了，padding的距离就是蓝色区域到里面虚线的部分，在外面就是border，由图也很明显的看出也增加了整个整体的宽度，所以在任意方向添加border padding content的宽高都会使元素整体占用空间变大。

标准盒子模型简单讲解相关推荐

标准盒子模型和怪异盒子模型（详解）
一.盒子模型定义盒子模型是css技术所使用的一种思维模型.盒子模型是指将网页设计页面中的内容元素看作一个个装了东西的矩形盒子.每个矩形盒子都由内容.内边距.边框和外边距4个部分组成.除去内容部分,其 ...
CSS中的标准盒子模型和怪异盒子模型
一.什么是盒子模型(Box Model) 盒子想必大家都是知道的吧! 生活中我们的快递有盒子包装着,买的蛋糕也是有盒子包装着,我们的礼品也是被盒子包装着. 模型是什么呢? 它是主观意识借助实体或者虚拟 ...
前端基础(八)_盒子模型（标准盒子模型和怪异盒子模型）
盒子模型什么是盒子模型网页设计中常听的属性名:内容(content).内边距(padding).边框(border).外边距(margin), CSS盒子模型都具备这些属性.这些属性我们可以用日常 ...
【什么是盒模型】标准盒子模型、怪异盒子模型
一.上图标准盒子模型和IE盒子模型什么是盒子模型 CSS盒子模型(Box model)就是在网页设计中经常用到的CSS技术所使用的一种思维模型.网页中所有元素都具备以下四个属性: 内容(cont ...
前端学习——css盒子模型简单布局
<html><head><title>盒子模型简单布局</title><meta charset="UTF-8"/>&l ...
关于标准盒子模型的（border、 margin和padding）属性的讲解
让新手琢磨不透的(margin:外边距)and(padding:外边距)这两个属性学过盒子模型的同学都应当知道(margin和padding)这两个用于盒子模型的两个重要属性吧.其实一开始我也不太明 ...
标准盒子模型与怪异盒子模型
通俗的讲,盒模型是css布局的基础,它的作用是规定了网页元素在网页上如何显示以及元素之间的相互关系,css定义所有的元素都可以拥有像盒子一样的外形和平面空间.即都包含内容区.补白(填充).边框.边界( ...
box-shadow属性四个值_重学前端：什么是盒子模型？标准盒子模型有哪些属性和尺寸计算？...
盒模型盒子模型是网页布局的基石.它有边框.外边距.内边距.内容组成. 盒子由上到下依次分为五层,它们自上而下的顺序是: border 边框 content + padding 内容与内边距 back ...
盒子模型详细讲解(图码交融）
HTML基础知识总结 1.盒子模型我们常说的盒子模型一般有四个属性 Border 值为边框的宽度,相当于现实中盒子的包装. Padding 值为内边距,指盒子内容距离盒子边框的距离 Content ...
Diffusion Models扩散模型简单讲解与简单实现
Diffusion Models 图中: x 0 x_0 x0为图像, z z z为采样自正态分布的噪音扩散模型**是受非平衡热力学的启发.它们定义一个扩散步骤的马尔可夫链,逐渐向数据添加随机噪声 ...

标准盒子模型简单讲解

标准盒子模型简单讲解相关推荐

最新文章

热门文章