跟随黑马学前端-10，CSS盒子模型

第十天：CSS盒子模型

程序是写来给人读的，只会偶尔让机器执行一下

学习目标

  • 盒子模型

  • PS基本操作

  • 综合案例

  • 圆角边框

  • 盒子阴影

  • 文字阴影

盒子模型

看透网页布局的本质：所有网页布局都是由一个个盒子模型组成的

网页布局过程：

  1. 准备好相关的网页元素，网页元素基本都是盒子Box

  2. 利用好CSS设置好相关样式。然后摆放到相应位置

  3. 往盒子里面装填内容

网页布局的核心本质：利用CSS摆盒子

盒子模型（BoxModel）组成

所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容等

img

边框：盒子的边框

内容：可以是文字、图片甚至是其他的盒子

内边距：内容与边框 的距离

外边距：盒子与盒子之间的距离

边框Border:

border可以设置元素的边框、边框有三部分组成：边框宽度（粗细）、边框样式、边框颜色

语法：

1
border: border-width || border-style || border-color;
属性 作用
border-width 定义边框粗细，单位为px
border-style 边框的样式
border-color 边框的颜色

复合写法：

1
border：1px solid red;			没有顺序，先写那个后写哪个都可以的

上下边框：border-top,border-bottom，可以单独进行设置

表格的边框

1
border-collapse: collapse;

collapse单词是合并的意思。

border-collapse: collapse;表示讲相邻边框合并在一起。表格就可以看作很多方框