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是一样的

这样我们就可以任意的

把这个圆角矩形的这个类

添加到我们想要添加的盒子上

好 这个盒子就也满足了

圆角矩形的这个类形式