盒模型

box：盒子，每个元素在页面中都会生成一个矩形区域（盒子）

盒子类型：

行盒，display等于inline的元素
块盒，display等于block的元素

行盒在页面中不换行、块盒独占一行

display默认值为inline

浏览器默认样式表设置的块盒：容器元素、h1~h6、p

常见的行盒：span、a、img、video、audio

盒子的组成部分

无论是行盒、还是块盒，都由下面几个部分组成，从内到外分别是：

内容 content

width、height，设置的是盒子内容的宽高

内容部分通常叫做整个盒子的内容盒 content-box

填充(内边距) padding

盒子边框到盒子内容的距离

padding-left、padding-right、padding-top、padding-bottom
padding: 简写属性
padding: 上右下左

填充区+内容区 = 填充盒 padding-box

边框 border

边框 = 边框样式 + 边框宽度 + 边框颜色

边框样式：border-style 简写属性
边框宽度：border-width 简写属性
边框颜色：border-color 默认为字体颜色

边框+填充区+内容区 = 边框盒 border-box

外边距 margin

边框到其他盒子的距离

margin-top、margin-left、margin-right、margin-bottom

速写属性margin

参考资料

【渡一教育】袁进老师的html+css基础课程
【渡一教育】袁进老师相关课程源代码

CSS基础（7）- 盒模型相关推荐

CSS 基础框盒模型介绍
当对一个文档进行布局(lay out)的时候,浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型(CSS basic box model),将所有元素表示为一个个矩形的盒子(box).CSS 决定 ...
CSS基础必备盒模型及清除浮动
盒模型盒模型是有两种标准的,一个是标准模型,一个是IE模型. css如何设置两种模型这里用到了CSS3 的属性 box-sizing /* 标准模型 */ box-sizing:content-b ...
CSS基础(二)--盒模型与浮动
盒模型认识width和height 一个盒子中主要的属性有5个:width.height.padding.border.margin. width是"宽度"的意思,CSS中wid ...
CSS 学习笔记 - 盒模型
CSS学习笔记 - 盒模型外边距margin 内边距padding 背景background 背景图background-image 边框border 样式宽度颜色圆角边框图片border- ...
深入css布局 (1) — 盒模型元素分类
深入css布局(1)-- 盒模型 & 元素分类 " 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深 ...
CSS基础(part12)--盒子模型之外边距
学习笔记,仅供参考,有错必纠参考自:某不知名网课文章目录盒子模型外边距属性设置块级盒子水平居中文字居中以及盒子居中插入图片和背景图片的区别清除元素的默认内外边距外边距合并(只存在垂 ...
css --- [读书笔记] 盒模型(边框、内外边距)
说明源代码学习盒子模型(css重点) css学习三大重点: css盒子模型. 浮动. 定位目标: 能说出盒子模型由哪四部分组成: 内容.边框.内外边距能说出内边距的作用,设置不同数值分别代表 ...
（10）CSS 常用样式--盒模型扩展应用
一.清除默认样式大部分标签都有一个浏览器加载的默认样式,会对布局造成一些影响.为了避免默认样式对整体布局效果造成影响,一定要清除默认样式. 盒模型属性中内外边距:大部分容器级标签都有默认边距,要么用 ...
html 在盒子中字体垂直,第五章,css行内盒模型和文字样式
一,盒模型发现默认样式,会破坏布局,比如p标签的默认样式 p标签默认样式从图片中我们可以看到我们并没有加margin值,可是左边依然有空隙出现,这就是p标签的默认样式,那我们怎么去掉一些会破坏我们 ...
CSS基础、盒子模型、选择器与权重
CSS基础.选择器与权重.盒子模型一.CSS的字体属性 CSS Fonts(字体)属性用于定义字体系列,例如大小.粗细.和文字样式(斜体之类). 1.字体 CSS使用font-family属性定义文 ...

CSS基础（7）- 盒模型

文章目录

盒模型

盒子的组成部分

参考资料

CSS基础（7）- 盒模型相关推荐

最新文章

热门文章