盒子模型

内容的宽度和高度

• 作用：利用 width 和 height 属性默认设置是盒子 内容区域 的大小
• 属性：width/height
• 常见取值：数字 + px

边框(border)-连写形式

• 属性名：border
• 属性值：单个取值的连写，取值之间以空格隔开
• • 如：border：10px solid red;
• 快捷键：bd=tab

边框(border)-单方向设置

• 场景：只给盒子的某个方向单独设置边框
• 属性名：border-方位名词
• 属性值：连写的取值
• 作用给设置边框粗细，边框样式，边框颜色效果
• • 单个属性
• • 作用： 边框粗细，属性名：borde-windth， 数字+px
• • 作用：边框样式，属性名：border-style，实线solid，虚线 dashed， 点线 dotted
• • 作用：边框颜色，属性名：border-color，颜色取值

新浪导航案例

• 需求：根据设计图，通过pxcook量取数据，通过代码在网页中完成一致的效果
• 布局顺序：
• • 从外往内，从上往下
• 每一个盒子的样式：
• • 宽高
• • 辅助的背景颜色
• • 盒子模型的部分：border，padding，margin
• • 其他样式：color，font-，text-，......

CSS3盒模型(自动内减)

• 盒子属性：box-sizing：border-box;即可
• 优点：浏览器会自动计算多余大小，自动在内容中减去

目标：能够认识盒子模型的组成，能够掌握盒子模型 边框，内边距，外边距 的设置方法

• 学习路径：
• • 盒子模型的介绍
• • 内容区域的宽度和高度
• • 边框(border)
• • 内边距(padding)
• • 外边距(margin)

外边距折叠现象-1.合并现象

• 场景：垂直布局的块级元素，上下的margin会合并
• 结果：最终两者距离为margin的最大值
• 解决方法：避免就好
• • 只给其中一个盒子设置margin即可