当前课程知识点：界面设计导论 > 第四章：从设计到实现：H5网页基础概念 > （7）CSS盒子模型 > CSS盒子模型
大家好
上节课我们初步认识css样式表的概念
学习了样式表的使用方法
本节课我们来学习一下
样式表中的盒子模型理论
在CSS样式表的技术中
有一个非常经典的概念
就是css盒子模型的概念
我们想象一个盒子
它有外边距margin
边框border
内边距padding
内容content
四个属性
让我们来俯视这个盒子
它有上下左右四条边
每个属性除了内容部分
都包括四个部分
上下左右
这四个部分都可以同时设置
也可以分别设置
内边距padding
可以理解为盒子里装的东西
和边框的距离
边框有薄厚和颜色之分
内容就是盒子中间装的东西
外边距就是边框
和外面自动流出的一段空白
我们现在呢就回到编程环境当中来
来编写一些css的代码
进一步了解一下css
在html页面当中的布局的效果和作用
刚才呢我们讲到了css的盒子模型
那么现在我们就来实现一下
首先呢我们先看一下
现在页面当中有三个盒子
看一下现在的效果
是这样的
有四个盒子1 2 3 4
我们现在拿第一个盒子来举例子
我们在先来看一下盒子模型的这张图示
首先绿色的部分就是这个盒子
中间黄色的这部分呢
是盒子当中的内容
周围的这一圈叫做内边距是padding
也就是在盒子和内容之间的
向内的一个边距
再向外是这个黑条
这个是border 是这个盒子的边框
再向外呢这个就是外边距
是margin
是盒子向外扩展的一个边距
好 现在呢我们在代码当中
给第一个盒子先增加一个边框border
那么我们要先在css当中
找到我们第一个盒子所对应的样式
是这个id=header
也就是在css当中找到井号
header这个样式
这里呢给增加一个border属性
border属性呢包含三个部分的值
第一个是它的宽度
我们设一个3像素
第二个呢是它的类型
可以是这种实线型的
也可以是虚线型的
第三个部分呢是颜色
好
这个颜色仍然可以从前面的小方块当中修改
好 我们来看一下效果
我们要先回到html页面当中
然后在右侧选择相应的浏览器查看效果
好 现在第一个盒子外面
就增加了一个border的边框
那么我们现在呢也依然可以通过调整
这个css相关的样式
比如调整颜色
或者调整这个边框的类型
例如是这种虚线型的
以及它的宽度
来调整相关的样式
好
这样呢我们就可以根据我们自己的设计
来制作我们需要的这个边框样式
接下来呢我们
给这个盒子里增加一些内容
我增加了一些文字
我们看一下效果
它是顶头 顶格的形式
上面也是顶的
左边也是顶的
好 下面我们给它增加一个内边距
来看一下效果
内边距是padding
例如增加一个10像素的内边距
好 看一下效果
好
大家看到现在已经不是顶头了
现在是上下左右
下暂时还看不出来
上左右
都留了一个10像素的边距
我们也可以通过调整边距的大小
来调整我们元素的显示形式
好 现在大家看
已经这个内边距变宽了
对于这个边距呢
如果我们不想
让它上下左右都是一样宽的
我们可以对上下左右
进行分别的设置
比如我们只是对上面
进行了一个内边距是20像素
然后对左边让它宽一点
是50像素
我们再回来看一下效果
好 大家看向上是20
向左是50 向右是零
向下也是零
好 我们都可以分别单独的设置
上左下右是这种写法
好 大家可以根据自己的设计稿
来调整一下或者试验一下
接下来呢我们再对margin
也就是外边距进行一下设置
margin和padding的写法是很类似的
例如我们先整体给它设置一个像素
它的宽度是20像素
回来看一下效果
好 现在这个盒子它的周围
上下左右跟其他元素之间的关系
就有了一个20像素的一个空白
这个呢就是我们的外边距
也就是margin所起到的效果和作用
好 接下来呢我们再把
这个margin分别设置一下
好 我们再来看一下效果
好 现在我们看出来
距离上面是50像素
左面是30像素下面是10像素
这就是我们刚才设置的不同的
对于周围的上下左右的一个外边距的宽度
好 我们在学习了对元素
所设置的盒子模型的理论之后呢
我们再来学习一下
在html页面中
元素与元素之间的定位关系
在我们的定位关系中有三种形式
第一种呢叫浮动形式
它是以流的方式
顺序的在页面当中排列
我们来试一下
现在可以在每一个元素的样式中
给它增加一个float
是left的形式
这样就是浮动的形式
好 看一下效果
好 现在我们看到了
刚才是竖向的
现在呢变成了横向的
它就像流的形式一样
一个元素结束
就会再横向排列一个元素
再排列一个元素
直到遇到了最右侧的边框
才会转行
是一种普通流的形式
存在于网页当中
这种浮动的排列形式呢
在内容稍多的网页中非常实用
它比较容易排列规整以及延展
并且会适用于各种显示平台
那么我们可以在现在这个三个盒子
旁边给它增加一个外边距margin
然后让它们有一点缝隙
好 我们再来看一下
现在我们的这三个盒子
就都有了外边距
有了它们之间的缝隙
它们呢就可以根据
实际的这个页面尺寸
来决定自己的排列位置
那么如果我们是一个
类似图片展示的网站的话
我们可以依次向下
布置多个这种设置好的盒子
可以再复制一些
好
它就会按照我们的排列顺序
依次向下排列
相对都会比较整齐
我们来试验一下另外一种定位方式
是绝对定位的形式
它的写法是在css当中
去掉这个flloat=left
增加position 冒号
是absolute这种形式
它呢是与流无关
它相当于是浮在页面的上方
与其它的元素位置都不发生关系
只与它显示区域的左侧
和上侧的位置相关
我们要给它在左侧设置一个位置
距离显示左边距的距离
再给它一个上端一个距离
好 我们来看一下效果
好 大家看到现在这个盒子
已经跟其他盒子没有任何关系了
它相当于是浮在了页面的上方
而在调整显示区域的时候
这个盒子的位置并不发生改变
那么它的位置始终是
距离显示区域左侧是100像素
距离显示区域的上侧是200像素
这个一个固定的位置
这种绝对定位的这种固定的布局方法呢
通常会用于对单一元素
并且在页面当中
是固定位置的这种元素才会使用
那么对于absolute的这种绝对定位呢
它是固定在页面的某一个位置
如果我们的页面
有这种滚动条上下移动的话
它会跟着页面来移动
保持它在页面的某一个位置
那么还有一种固定的这种布局方式
就是叫静态定位方式
它的方法呢就是
这个absolute改成fixed
它的布局方式是这样的
我们再来看一下效果
好 表面上看起来没有任何区别
但是它会保持在屏幕当中的某一个位置
它不会随着页面的移动而改变位置
这种布局方式叫静态的定位方式
一种固定的布局方式当中呢
就有了层的概念
我们可以在这里增加一个盒子
因为id是不能重名的
所以我们把id的名字给它增加一个1
做一下区分
这里再对应的
给header1做一个样式
为了区别呢我们给它换一个颜色
我们把位置错开一点
好 来看一下效果
现在呢就有了两个盒子
我们看现在下面这个盒子
因为是后写的
所以它暂时在上面那一层
如果我们想把上面这个盒子
让它被前面这个盒子覆盖
我们可以用z-index这个属性
这个呢相当于纵轴
这个数值是越大
它就会越在上层
看一下
好 现在因为我们把第一个盒子的
Z-index设成了10
比下面这个盒子的Z-index是9
比它大
所以它在了上层
覆盖了它
最后呢还有一种定位方式
叫做相对定位的方式
是这个position
是relative这种定位方式
我们现在呢先把left和top去掉
先来看一下这种定位方式的效果
它呢会跟其它的元素产生关系
就像什么都不设置一样
如果我们设置了float这种浮动方式
float等于left的话
我们可以试一下
它就会依照这种float等于left这种
浮动的定位方式来排列
所以这种relative相对定位的方式呢
它不影响
一个盒子所在页面当中的位置
依然是用流的方式来存在在页面当中
但是它现在呢
可以通过设置top和left
给这个盒子设置偏移值
left
好看一下效果
好 现在这个盒子呢改变了一个位置
是在它原有位置的基础上
有了一个偏移值
刚才说的左边偏移了50
上面偏移了100
但是它原来的这个位置还是被占有的
不会被其它元素所顶替
这个呢就是相对布局的
相对定位的一个作用
那么在本节课的最后呢
我们再来学习一下
用CSS加上DIV的方法
来画几个几何图形
我们先来画一个三角形
先定义一个三角形的类
首先把它的宽度和高度都设成0
然后利用border的这个属性
设置一下
例如把这个边框border的宽度
上下左右设成50像素
好 现在这是上 右 下 左
然后我们把下设成了0像素
然后它就会变成一个三角形
再来设置一下它的颜色
最后设置它的类型
是实线型
好 现在我们一个三角形的写法就写完了
然后我们把它应用到html当中
某一个盒子里
例如把第一个盒子改成三角的这个类
好 看一下效果
好 在这里我们就绘制了一个三角形
那么我们可以通过改变相关的参数
例如我们现在把三角形
刚才是一个倒三角
现在把它变成一个向上的正三角
就把上改成0
好
它就变成了一个向上的正三角
以及把左侧变成一个直角三角形
例如把右侧也变成零
就变成了一个向左的这种直角三角形
好 大家可以来调整一下相关的参数
体会一下绘制三角形的各种情况
接下来呢我们再绘制一个圆形
大家看一下
因为这个三角形是完全用边框组成的
所以在三角形当中是不能加内容的
我们在这里增加一个内容
看一下效果
大家看这个盒子里边的内容
和边框是没有关系的
所以在三角形当中是不能加内容的
如果我们需要在三角形当中加内容的话
那不能使用这种方法
接下来呢我们再来绘制一个圆形
它利用的是这个边框的圆角的原理
例如我们的圆角是50%的话
那么正好就是一个圆形
好
我们再来把它添加到某一个盒子上
看一下效果
好
现在我们就绘制了一个圆形
这个圆形呢并不是完全用边框组成的
所以它里面是可以加内容的
好 看一下效果
好 现在我们的添加的文字
其实就放在了圆形的中间
我们呢还可以
回来通过调整圆形的相关参数
把它变成圆角矩形
例如我们圆角部分把它设成5像素
来看一下效果
好
大家看现在就是一个圆角矩形
我们呢还可以把这个圆角矩形
通过类的组合方式
把它放到某一个盒子上
这样我们用空格的方式把两个类隔开
这样
我们这个盒子就可以既满足第一个类
也满足第二个类
这样的方式叫做类的组合形式
我们看一下效果
好 那么我们看到第一个盒子
它就变成了符合圆角矩形的这种样式
然后它的宽度和之前那个header是一样的
这样我们就可以任意的
把这个圆角矩形的这个类
添加到我们想要添加的盒子上
好 这个盒子就也满足了
圆角矩形的这个类形式
-课程简介
--课程简介
-（1） 什么是界面
--什么是界面
-（2）界面设计为什么重要
-（3）UI的进化
--UI的进化
-（4）设计师的自我修炼
--新手的疑问
-第一章总结
--第一章总结
-第一章：界面设计概述--课后习题
-本章概述
--本章概述
-（1） 为什么设计？
-- 为什么设计？
-（2）界面设计流程
--界面设计流程
-（3）视觉优化原理
--视觉优化原理
-（4）可用性评估的基本原则
-第二章：GUI设计心法--课后习题
-本章概述
--本章概述
-（1）信息结构与交互设计（1-4）
--第一讲
--第二讲
--第三讲
--第四讲
-（2） 界面草图与原型设计
-（3）视觉设计原则
--视觉设计原则
-（4） 文字与阅读
--字体设计
-（5）图标
--图标
-（6） 色彩
--色彩
-（7） 动效
--动效设计概述
--动效小制作1
--动效小制作2
-（8）第三章小结
--第三章小结
-（9）学生个人作品网站主页设计体会
--张铁汉
-第三章：界面设计元素--大作业
-前言
--前言
-（1）什么是网页
--什么是网页
-（2）标签与元素
--标签与元素
-（3）文本格式化、块级元素与行内元素
-（4）如何使用H5进行网页布局
-（5）目录、目录结构及在页面中插入图片
-（6）CSS样式表
--CSS样式表
-（7）CSS盒子模型
--CSS盒子模型
-（8）CSS控制文本
--CSS控制文本
-（9）CSS背景、特效、动画
-（10）初识javascript及jquery
-总结
--总结
-邱艺芸-清华大学艺术博物馆APP设计
--邱艺芸
-潘俊丞-阿甘跑步改版界面设计——“趣跑”
--潘俊丞
-王婧-星巴克改版设计
--王婧
-李向阳-DIY服装app设计
--李向阳
-相宸卓-效率软件改版设计
--相宸卓
-周文欣-“你好，安德烈”app设计
--周文欣
-走近游戏交互设计
--走近游戏交互设计
-《稻之道》(作者：于汉杰)
--稻之道-于汉杰
-《思想咖啡》(作者：艾瑞雯)
--思想咖啡-艾瑞雯
-《稻香村京八件销售网页设计》(作者：王依柳)
