I can 前端-03 盒子模型

概述

        不论是简单的页面还是负责的页面，都是一堆的盒子，无非是盒子里面包含盒子，或者是盒子和盒子肩并肩

【从CSDN来看布局】

【从京东来看布局】

【从网易云课堂看布局】

理论模型

模型的落地

        标准盒子模型的宽度/高度 = content + padding + border + margin

        兼容IE6~9的非标准盒子模型用hack标签,hack就是*号，原理是在标准盒子模型的浏览器解析不了，不了了之；在IE6~9，先赋值200px，又解析300重新赋值。

#div1{ width:200px; *width:300px;}

容器div标签

• 自动换行
• 可以容纳任何元素

margin（间隔）

• margin-top
• margin-bottom
• margin-left
• margin-right

可以使用这样一次性的写法

#div1{ margin:20px; }

border（边框）

• width：边框粗细
• color：边框颜色
• style：边框样式（solid-实线，dotted-点画线，dashed-虚线，none-无线）

可以使用这样一次性的写法

#div1{border: 1px blue soild}

padding（间隙）

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

可以使用这样的一次性写法

#div1{ padding:20px; }

盒子与盒子的关系

左右