• none,hidden,dotted,dashed,solid,double,groove,ridge,in set,outset
▪ 实践: 设置盒子的边框

背景设置 ▪ backgroud属性 ▪ 注意不同浏览器的基准点

属性简写
▪ border-color: red green

padding内边距 ▪ 盒子中加入图片 ▪ padding:20px 20px 10px

Margin外边距 ▪ margin： 元素与元素的距离 ▪ 与 body元素的关系

盒子排列-标准流
▪ 什么是标准流?
▪ 在不使用其它的排列和定位相关的特殊CSS规则时，各 种元素的排列规则
▪ red表示上下边框的属性 ▪ green表示左右边框的属性
▪ border-width: 1px 2px 3px
▪ 1px 上， 2px 左右, 3px 下
▪ border-style: dotted dashed solid double
▪ 按顺时针方向
▪ border: 3px green dashed 宽度 颜色 样式 ▪ border-left: 2px red solid 左边框 ▪ 实践：属性缩写
小结

width

边框-border
▪ border属性
▪ color 颜色 ▪ width 宽度 ▪ style 样式
▪ border设置
▪ border-width 指定border粗细
• thin,medium,thick,<length>(具体数值如3px)
▪ border-style
padding-left border-left margin-left
▪ content ▪ border ▪ padding ▪ margin
盒子模型的组成
margin-top border-top padding-top
content padding-bottom border-bottom margin-bottom
▪ 标准流就是CSS规定的默认的块级元素和行内元素的排 列方式
▪ 块级元素
▪ 纵向排列原则 ▪ 行内元素之间的水平margin ▪ 块级元素之间的竖直margin ▪ 嵌套盒子之间的margin ▪ 设置margin为负值

“实践出真知”
盒子模型
理解盒子模型
TOMGO
本章内容
1
什么是盒子模型?
2
盒子属性设置
3
盒子定位原则

什么是盒子模型? ▪ padding-border-margin描述矩形对象布局形式
的方法， 每一个矩形对象都可以称为盒子

height
margin-right border-right padding-right