CSS盒模型

CSS盒模型

盒子模型的内容

• content
• border
• padding
• margin

width和height

• 只能设置块级元素,对行内元素无效;
• 针对的是content区域;
• 不设置数值,默认为容器的值auto

border

• border-style
  • 常用样式:solid,dashed,dotted,double
  • border-top-style
  • border-right-style
  • border-bottom-style
  • border-left-style
  • 样式值提供顺序:top-right-bottom-left
• border-width
• border-color
• 简写形式:border:width style color(无顺序之分,常用)

padding

• 对行内元素,在水平方向有效,垂直方向无效(padding-top/bottom)
• div在浏览器实现居中,margin=0 auto;

margin

• 两个div上下布局时,垂直方向会发生重叠,上div的margin-bottom和下div的margin-top中取较大的值
• 对行内元素,水平方向有效,无重叠,垂直方向无效.
• 顺序是上-右-下-左
• 两div布局,外div无边框,内div有边框时,设置内div的margin-top无法实现,原因是浏览器默认两个div是同一个边框,解决方法:style="overflow:hidden"

元素的实际大小=margin2+border2+padding*2+height(width)