CSS布局盒模型

元素在文档流中的特点： 块元素 行内元素

块元素

• 独占一行
• 默认宽度是它父元素的宽度
• 默认高度是被内容撑开

1.内容区 content

width height决定内容区的大小

内边距 padding

padding-top padding-right padding-bottom padding-left

• 1个值 上右下左
• 2个值 上 下  左右
• 3个值 上  左右  下
• 4个值 上  右  下  左

边框 border

border-width 边框宽度

border-style 边框样式 solid实线 dashed虚线 dotted点状虚线 double双线

border-color 边框颜色  rgb(255,0,0) #ff0000

单独设置边框宽度：border-top/right/bottom/left-width

外边距 margin

会影响盒子的位置 不会影响盒子可见框的大小

值可以为负值（负值往相反的方向移动）  

可见框的大小 = content + padding + border

2.块元素水平方向的布局：

margin-left + border-left + padding-left + content + padding-right + border-right + margin-right = 父元素内容区的宽度

• 7个值中 没有auto 则浏览器自动调整margin-right 0+0+0+100+0+0+auto=600 auto=500
• 1个auto  width=auto 0+0+0+auto+0+0+200=600 auto=400
• 2个auto 2个外边距是auto 此时外边距被设为相同的值(重要的居中方法) auto+0+0+200+0+0+auto=600 auto=200
• 2个auto 1个width 1个外边距auto 此时宽度会最大 外边距为0 auto+0+0+auto+0+0+100=600  第一个auto=0  第二个auto=500
• 3个auto 此时宽度最大 两个边距都为0 auto+0+0+auto+0+0+auto=600  宽度auto=600 外边距auto=0

box-sizing:content-box 默认值 标准盒子模型 width=content

border-box    width = border + padding +content

2.块元素垂直方向的布局

兄弟元素

• 相邻的垂直外边距都是正值 折叠时取二者较大值
• 相邻的垂直外边距 一正一负 折叠取二者之和
• 相邻的垂直外边距都是负值 折叠时取绝对值较大值

父子元素

• 子元素的外边距会传递给父元素(尽量要使用父元素的padding，不使用子元素的margin)

行内元素

• 不会独占一行 只占自身大小
• 默认高度和宽度是被内容撑开的

不支持设置宽高，可设置padding（垂直方向设置padding border margin不影响布局）