css盒模型

何为盒子模型?
以盒子为例子,每一个块级元素(div)都可以看做是一个盒子,其中的内容可以为文字或图片
或其他标签元素


盒子和元素之间的距离为内边距padding,padding有四个值padding-top、padding-right、padding-left、padding-bottom
两个盒子之间的距离为外边距margin
盒子自身的边框为border
内容的高度height、宽度weight
盒子的实际高度:内容的height+padding-top+padding-bottom+border*2

一、元素分类
了解css布局之前我们应当先知道一些HTML中的标签元素。
在HTML中标签元素被分为三种不同的类型
分别为:块状元素、内联元素(行内元素)和内联块状元素
以下为常用的元素
(1)块状元素:

,

,

,
    ,
      ,
      ,,
      ,
      ,

      (2)内联元素:,,
      ,,,,
      ,

      ,

      ,,

      你可能感兴趣的:(css盒模型)