盒模型的相关介绍及作用

CSS样式里盒模型的概念以及作用

盒模型的概念

盒模型是css布局的基石,它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。即都包含内容区、补白(填充)、边框、边界(外边距)这就是盒模型。
作用:规定了网页元素如何显示以及元素间相互关系
举个例子
利用CSS样式表实现盒模型范例

盒模型的组成

content(我爱学习)+padding(红色区域)+border(黑色边框区)+margin(白色外边界区)
盒模型示意图padding的作用:用来控制父元素和子元素之间的位置关系;
padding的用法:
padding-top 上填充
padding-right 右填充
padding-bottom 下填充
padding-left 左填充
css样式表里padding值的写法:
padding: 1 2 3 4
1、上 2、右 3、下 4、左
padding: 1 2 3
1、上 2、左和右 3、下
padding: 1 2
1、上和下 2、左和右
padding: 1
1、上 右 下 左
注意:
1.添加了padding值之后,padding值会把元素原有的大小撑大; 如果让元素原本大小不变得话,需要在元素的宽高上减掉所加的padding;
2.padding属性对背景图片 是不起作用的,可以说背景图片的位置,是不受padding的影响的。
margin的作用:
作用:控制同辈元素之间的位置关系。
特点: margin是现在是在元素边框以外的空白区
margin的写法同padding。
CSS样式表如何用代码实现:
在这里插入图片描述

发布了1 篇原创文章 · 获赞 0 · 访问量 17

猜你喜欢

转载自blog.csdn.net/yang3656/article/details/104481345