HTML5中盒子模型的基础知识

本章摘要 : 主要是了解盒子模型的基础知识,了解相关的概念.

• 1, 什么是盒子模型?
  网页上的每一个标签都是一个盒子,每个盒子都有四个属性

• 内容（content）
  盒子里装的东西
  网页中通常是指文字和图片

• 填充（padding，内边距）
  比如说是我们买酒,怕酒在物流过程中损坏，而添加的泡沫或者其它抗震的辅料

• 边框（border）：盒子本身

• 边界（margin，外边距）
  盒子摆放的时候的不能全部堆在一起，盒子之间要留一定空隙保持通风，同时也为了方便取出

• 标准的盒子模型图 (注意:它和IE浏览器的标准不同):

  
  
  

  标准的盒子模型图.png

• 2, 盒子模型几个属性的介绍

  • 1, 内容属性

    
    
    

    内容属性.png

• 2, 内边距

  
  
  

  内边距.png

• 注意内边距的书写格式需要掌握,它和iOS中设置内边距一样(注意是:上右下左,而且参数之间是没有逗号的)

  
  
  

  内边距属性的书写格式.png

• 3, 边框

  
  
  

  边框.png

• 注意 : 设置圆角有几种方式,详情可以去看官网

• 4, 设置外边距

  
  
  

  外边距.png

  • 注意 :设置外边距也有几种方式,需要去官网上了解一下,和内边距一样,需要知道外边距的几种写法所表示的什么意思.

    
    
    

    外边距的格式.png

4, 简单使用上述几个概念

ALEXWilliam

5, 居中显示

谷歌一下吧