盒子模型
作用:盒子模型是用来描述一个元素的宽高,边框,内容,距离,边框的大小以及元素与元素的距离
从内到外盒子模型有这几个属性组成
- width 内容宽度 height 内容高度
- padding-top、padding-right、padding-bottom、padding-left
==padding是内边距,内容距离盒子内边缘的距离== - border 边框 边框只有厚度(高度),没有宽高,border也分别为四个方向
- margin-top、margin-right、margin-bottom、margin-left
==margin是位边距 元素元素之间的距离==
-
widht/height 内容的宽度和高度,和整个盒子的宽高四两个概念
-
padding 内容边缘距离盒子边框内边缘的距离,有四个方向,有不同的写法
- padding-top、padding-right、padding-bottom、padding-left
- padding: 10px 20px 30px 40px; 上 右 下 左
- padding: 10px 20px 30px; 上 左右 下
- padding: 10px; 四个方向都是10px;
-
border 边框 由宽度 样式 颜色,默认一个盒子的边框宽度为3px,样式为无,颜色为黑色
这三个属性如果没有设置样式,边框也不会出现
网友评论