阿嬷都看得懂的基础 CSS 样式－区块篇

图片标签 <img> 和区块标签 <div> 可以一起谈，因为我们可以把图片想成很大的区块，只是这个区块的背景是那张图片。想到区块，会想到需要哪些属性呢？宽度、高度、位置应该是最核心的区块属性，毕竟我们使用区块，就是为了要确定内含元素的分布范围嘛！不过，我们也会需要知道这个区块的背景颜色、背景图片、还有边框，这样我们才可真正看见这个区块长怎样。背景相关的属性，都有 background- 前缀，而边框相关的属性，都有 border- 前缀喔！当然，区块相关的属性也不只这边介绍的这些，这边只是列举出比较常用的喔！

• 高度、宽度：height, width，值是数字加上长度单位。我们前面提过相对长度单位 %，是以父元素的比例为准。

• 位置的问题比较麻烦，因为在 CSS 中，position 属性并不是用来告诉浏览器这个区块的实际位置，而是这个区块决定位置的方式。目前先知道 3 种值就可以了：

  • static 是预设值，区块该在哪里就在哪里，没办法另外决定位置喔！
  • relative 相对位置，是允许区块进行相对移动，不过会在原本的位置留下空白。移动相对位置的方式，是另外使用 top, bottom, left, 或者 right 属性，值是数字加上长度单位，会让区块从原本应该在的地方，做出往上或下或左或右的偏移。
    我们先写四个区块元素出来。为了方便展示起见，我先将区块放上背景颜色。

    <div>
    	<div style="margin:2px; height:100px; width:100px; background-color:red; color:white; text-align:center; line-height:100px;">区块一</div>
    	<div style="margin:2px; height:100px; width:100px; background-color:violet; color:white; text-align:center; line-height:100px;">区块二</div>
  	<div style="margin:2px; height:100px; width:100px; background-color:red; color:white; text-align:center; line-height:100px;">区块三</div>
  	<div style="margin:2px; height:100px; width:100px; background-color:red; color:white; text-align:center; line-height:100px;">区块四</div>
    </div>
  

  样式多了以後，标签是不是看起来超长超难读的？这个我们会在後天告诉各位阿嬷该怎麽处理，标签看起来才会像阿嬷帮乖孙整理过的房间一样整洁清爽！
  
  让我们把区块二放上相对位置，并且距离原本区块上边与左边各 20px。CSS 是这样写：

    	position: relative;
    	top: 20px;
    	left: 20px;
  

  我们会看见，区块二被往下与往右推了，而且在原本区块二的位置，留下了尺寸和区块二相同的空白：
  

  • absolute 绝对位置，是直接让区块放飞自我，想去哪就去哪，也不会在原本的位置留下空白。移动绝对位置的方式，也另外是使用 top, bottom, left, 或者 right 属性，值是数字加上长度单位。不过，因为整个区块已经放飞自我，没有原本的位置了，所以这里的上下左右，会是和父元素边框的距离喔！也因为这样，父元素的 position 属性不能是 static 预设值，必须指定成 relative 或 absolute 才行！
    因此，让我们把上面区块二的位置改为绝对位置，

    	position: absolute;
    	top: 20px;
    	left: 20px;
  

  我们会看见，区块二从父元素的左上边框往右下推了 20px，而原本区块二的位置完全消失，完全没留下空白：
  

• 背景颜色：background-color，值目前也是先用颜色对应的英文文字就可以了。

• 边框：border，值是颜色、宽度、以及线条样式。线条样式的值可能是实线 solid, 虚线 dashed, 双线 double 等等。记得各项值间是用空白隔开喔！
  值得注意的是，这些多值的属性，都可以分开写定个别属性。分开写定的好处，是可以指定是上下左右哪条边框。只写 1 个值的时候，就是 4 条边框都共享这个属性。写 2 个值时，第一个值表示垂直边 (左、右)，第二个值表示水平边 (上、下)。写 3 个值时，分别是上边、水平边、下边。写 4 个值时，分别是上、右、下、左。「上、右、下、左」这个顺序满重要的，推荐各位阿嬷可以记忆起来，因为很多 CSS 的属性顺序都是长这样。例如，我们有

• 边框宽度 border-width，值是数字加上长度单位。

• 边框颜色 border-color。

• 边框样式 border-style。

• 边框圆角 border-radius，值是数值加上长度单位，表示边框圆角的半径长度。
  例如，我们可以这样写：

border:black 5px;
border-style: dashed solid double dotted;
border-radius:20px;

而把上面的样式套入 div 标签後，再指定宽高都为 200px 後，看起来就会像这样：

<div style="height: 200px; width: 200px; border:black 5px; border-style: dashed solid double dotted; border-radius:20px"></div>

上面这个标签，渲染出来就会长这样：

对於区块比较熟悉以後，我们就可以来放入背景图片罗！背景图片的放置是这样的：

• 背景图片：background-image，那值呢？我们可以想想，既然是背景图片，那值当然就是某张图片吧？你是对的，但是我们也说过，我们都只能够用文字与浏览器沟通，那这边要怎麽办呢？我们会告诉浏览器存放图片的位址，这个位址可以是网址。不过，在使用网址的时候，我们的写法比较特别，必须用 url 字样加上一对括弧，并且把网址填在括弧中。看起来会像这样：

	background-image: url(https://i.imgur.com/4ndjo3V.png)

好的，那我们就写出这样的 HTML 标签就对了吧：

<div style="background-image: url(https://i.imgur.com/4ndjo3V.png); height: 100px; width: 100px;"></div>

结果好像很不对啊啊啊：

因为我的原图是长这样的才对：

为什麽会这样呢？我们可以把 div 标签对应的区块元素当成一个相框，背景图片当作里面的相片。当我们的照片宽高大过这个区块的时候，就自动会被剪裁掉了。那这个问题应该怎麽解呢？就等我们明天详细解释该怎麽处理背景图片罗！