第四章.盒子模型重难点详解(上)

第四章 盒子模型

第一讲.盒子模型简介

盒子模型(box model)也叫框模型

CSS将页面中的所有元素都设置为了一个矩形的盒子.

将元素设置为矩形的盒子后,对页面的布局就变成了将不同的盒子摆放到不同的位置

每一个盒子都有以下几个部分组成:

1. 内容区

   元素中的所有子元素和文本内容都在内容区中排列

   内容区的大小由width和height的大小决定.

   width:200px;
   height:200px;
   

2. 边框

   边框属于盒子的边缘,边框里面是盒子内部,边框外边是盒子的外部

   要设置边框,需要:border-width边框宽度,border-color边框颜色,border-style边框风格

   border-width:10px;
   border-color:red;
   border-style:solid;(实线)
   

3. 内边距

   内容和边框的距离

4. 外边距,两个盒子之间的距离

1,2,3确定了盒子的大小,4确定了盒子的位置