理解盒子模型.

width
www.tomgo.net
边框-border border属性
color 颜色 width 宽度 style 样式
border设置
border-width 指定border粗细
• thin,medium,thick,<length>(具体数值如3px)
border-style
margin-top border-top padding-top
padding-right
margin-right
padding-left
border-right
margin-left
border-left
height
content
padding-bottom border-bottom margin-bottom
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 左边框 实践：属性缩写
• none,hidden,dotted,dashed,solid,double,groove,ridge,in set,outset
实践: 设置盒子的边框
www.tomgo.net
背景设置 backgroud属性 注意不同浏览器的基准点
www.tomgo.net
属性简写 border-color: red green
www.tomgo.net
padding内边距 盒子中加入图片 padding:20px 20px 10px
www.tomgo.net
Margin外边距 margin： 元素与元素的距离 与 body元素的关系
www.tomgo.net
盒子排列-标准流 什么是标准流?
在不使用其它的排列和定位相关的特殊CSS规则时，各 种元素的排列规则 标准流就是CSS规定的默认的块级元素和行内元素的排 列方式
块级元素
纵向排列
来自百度文库行内元素
横向排列
www.tomgo.net
设计实践-盒子定位原则 行内元素之间的水平margin 块级元素之间的竖直margin 嵌套盒子之间的margin 设置margin为负值
www.tomgo.net
小结
www.tomgo.net
“实践出真知”
盒子模型
理解盒子模型
TOMGO
本章内容
1
2 3
什么是盒子模型?
盒子属性设置
盒子定位原则
www.tomgo.net
什么是盒子模型? padding-border-margin描述矩形对象布局形式 的方法， 每一个矩形对象都可以称为盒子
www.tomgo.net
盒子模型的组成
content border padding margin