没有合适的资源?快使用搜索试试~ 我知道了~
在设计网页的时候,利用css样式进行布局
资源详情
资源评论
资源推荐
c
LOGO
HTML&XML 网页设计
第 12 章 用 CSS 样式进行布局
12.1 盒式模型
12.2 定位
12.3 堆叠顺序
12.4 浮动
12.5 溢出
12.6 修改光标
your family site
your site here
LOGO
12.1 盒式模型
盒状模型由内至外的顺序是:
content (内容,它可以是文字、图片等)
padding (内边距,也称之为内补丁等)
border (边框)
margin (外边距,也可称为边界)
盒状模型中内容是必备的,其他的几项都是可选的
padding 设置的是内容到边框之间的距离,就像一
个缓冲带
border 设置内容的边框线粗线和样式等。
margin 设置的是一块内容与另一块内容之间的距离
your family site
your site here
LOGO
12.1 盒式模型
如果给盒状模型定义背景,定义后背景将在内容
( content )区域和内边距( padding )区域显示,
就是图上的蓝色区域,外边框是无法设置背景的。
盒状模型宽度 = 左 margin 宽度 + 左 border 宽
度 +
左 padding 宽度 +content 宽度 + 右 padding 宽
度 +
右 border 宽度 + 右 margin 宽度
高度的计算方法和宽度计算方法相同,
只要把左、右改为上、下即可。
your family site
your site here
LOGO
内边距 (padding) 就是边框内元素的内容周围的额外空间。可以改变内边距
的厚度,但不可以改变它的颜色或质感。
12.1.1 内边距
提示:
1. padding 的属性可以接受长度
和百分比值
2. 此属性不允许使用负值
padding-top ,设定内容上方的内边距 pa
dding-right ,设定内容右方的内边距
padding-bottom ,设定内容下方的内边距
padding-left ,设定内容左方的内边距
.box1 {
padding-top:10px;
padding-right:1em;
padding-bottom:20%;
padding-left:1cm;
}
your family site
your site here
LOGO
padding 是一个简写属性,只用它一个属性即可设置上下左右四个方向的外
边距宽度,它的作用顺序是上 - 右 - 下 - 左。
12.1.1 内边距
提示:
1. 如果对 padding 属性使用 1 个
值,那么这个值应用于所有 4 个
边。
2. 如果使用 2 个值,那么第 1 个
值应用于上下边,第 2 个值应用
于左右边。
3. 如果使用 3 个值,第 1 个值应
用于上边,第 2 个值应用于左右
边,第 3 个值应用于下边。
4. 如果使用 4 个值,那么它们按
照时钟顺序依次应用于上、右、
下、左边。
设置内边距的最简单的方法就
是使用属性 padding:x
这里的 x 是要添加的空间量,
可以标识为带单位的长度或父
元素的百分比。
.wrap {padding:30px 20px 0 0}
剩余31页未读,继续阅读
xiexiaoqiong
- 粉丝: 0
- 资源: 8
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0