HTML5学习笔记 - 第04天

盒模型

一、认识盒子模型

盒模型的概念

• (1)如果CSS对HTML文档元素生成了一个描述该元素在HTML文档布局中所占空间的矩形元素框(element box),那么我们可以形象地将其看作一个盒子。
• (2)CSS围绕这些盒子产生了一张"盒子模型"概念,通过定义一系列与盒子相关的属性(内容、填充、边框、边界),可以控制各个盒子乃至整个HTML文档的表现效果和布局结构。虽然CSS中没有盒子这个单独的属性对象,但它却是CSS中无处不在的一个重要组成部分。

在css中,块元素都可以看成一个盒模型。

二、盒模型的组成部分

盒模型的概念:

盒模型

盒模型是css布局的基石,它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间,即都包含边框、边界、补白、内容区、这就是盒模型。

盒模型的组成:
填充(padding)、边框(border)、边界(margin)、内容(content)

三、学习盒模型的相关属性

1.padding属性:
在设定页面中一个元素内容(content)到元素的边缘(边框)之间的距离。也称补白。
用法:

• (1)用来调整内容在容器中的位置关系。
• (2)用来调整子元素在父元素中的位置关系。注:padding属性需要添加在父元素上。
• (3)padding值是额外加载元素原有大小之上的,如想保证元素大小不变,需从元素宽或高上减掉后添加的padding属性。

padding属性值得四种方式:

• (1)四个值: 上 右 下 左 {padding:10px 20px 30px 40px;}
• (2)三个值: 上 左右 下 {padding:10px 20px 30px;}
• (3)二个值: 上下 左右 {padding:10px 20px;}
• (4)一个值: 四个方向 padding:2px; /定义元素四周填充为2px/

说明:可单独设置一方向填充,如: padding-top、padding-right、padding-bottom、padding-left。

2.border属性:
(1)border:边框宽度 边框风格 边框颜色;例如: border:5px solid #f00;
(2)边框: border,网页中很多修饰性线条都是有边框来实现的。

过渡

transition:表示过渡 1、过渡的属性 过渡的时间