盒模型
一、认识盒子模型
盒模型的概念
- (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、过渡的属性 过渡的时间
