CSS学习 --盒子模型

CSS 元素分类

• 替换元素replaced element
  
  • 替换元素往往在文档中没有实际的内容，浏览器会根据这些元素的标签类型和属性来显示这些元素
  • 大多数表单元素是替换元素,
  • 举例 : <img>，<input>,<textarea>,<select>,<object>等，
• 不可替换元素 nonreplaced element
  
  • 不可替换元素的内容就在文档自身中这个元素里面，浏览器会直接呈现这些元素的内容给用户;
  • HTML的大多数元素是不可替换元素;
  • 举例 : <p>,<span> 等

CSS中,每个元素(element)产生一个矩形盒子(rectangular box),该盒子叫做元素盒子 element box。

每个元素盒子 element box 由外到内由以下部分组成 :

• 边缘区域 margin area （可有可无）
  
  • 总是透明 (从而允许父元素背景可见)
  • 可以使用负值表示长度
• 边框区域 border area （可有可无）
• 填充区域 padding area （可有可无）
  
  • 不能使用负值表示长度
• 内容区域 content area （可有可无）

盒子模型概览

盒子模型属性构成图示

盒子模型水平格式属性

• 七个属性 margin-left, border-left,padding-left, width, padding-right, border-right,margin-right
  
  • 这7个属性的值加起来必须等于元素容器块(containg block)的宽度
  • 7个属性中3个可以设置为auto:margin-left,width, margin-right
  • margin-left,margin-right可以是负数,其他属性的值都不能是负值
• 在水平方向,盒子的边缘(margin)没有坍塌/重叠效应 (collapse/overlap)

盒子模型竖直格式属性

• 七个属性 margin-top, border-top,padding-top, width, padding-bottom, border-bottom,margin-bottom
  
  • 这7个属性的值加起来必须等于元素容器块(containg block)的高度
  • 7个属性中3个可以设置为auto:margin-top,width, margin-bottom
  • margin-top,margin-bottom可以是负数,其他属性的值都不能是负值
• 在竖直方向,盒子的边缘(margin)有坍塌/重叠效应 (collapse/overlap)

盒子分类

• 块级盒子 block box
  
  • 特点
    
    • 总是在新行上开始
    • 高度height，行高line-height以及顶和底边距都可控制
    • 宽度width缺省是它的容器的100%，除非设定一个宽度
  • 该类元素举例 ： p,h,div,table
• 行内盒子 inline box
  
  • 特点
    
    • 和其他元素共用一行,不另起新行
    • 高height，行高line-height及顶和底边距不可改变
    • 宽度width就是它的文字或图片的宽度，不可改变
  • 该类元素举例 : strong,span,img
• 行内块级盒子 inline-block box
  
  • 特点
    
    • 将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。
  • 可以通过CSS display定义将一个块级盒子元素显示为一个行内块级盒子
    
    • CSS 定义方法 : display : inline-block
• table-cell 盒子 (table-cell box)
  
  • 复杂，不多介绍，慎用