[Day 05 - CSS] 玩转CSS样式，进入网页美丽新世界

在上一篇学到了 CSS 的基本语法、使用选择器以及档案的套用方法。接着就让我们来学习如何运用样式属性！首先来简单了解一下 CSS 是如何去进行网页的排版和调整元素的样式。

Box Model

在 CSS 里面，所有 HTML 元素都会由一个盒子构成，这个盒子就称为 Box Model，针对这个盒子去做调整，就能慢慢建构出网页想要的排版。

可以用属性 display 来设定元素的 Box Model 类型，通常会预设成两种：

display: inline | block;

• 行内元素 (Inline类型)
  元素不会换行，并且盒子的大小由元素的内容撑开，因此不能设定盒子的宽度和高度。常见的元素有：<a>、<img>、<span>...。
• 区块元素 (Block类型)
  元素会自动换行，在不设定盒子大小的情况下和包裹它的容器一样宽，也可以另外设定盒子的宽度和高度。常见的元素有：<h1>、<p>、<div>...。

除了 inline / block，display 还有更多设定值可以改变元素的布局

设定盒子的样式

盒子分成四个区块：Content（蓝区） / Padding（绿区） / Border（黄区） / Margin（橘区）

试着为四个区块新增样式属性：

• 设定内容Content 的宽 / 高 / 背景颜色 — width / height / background-color

  width: 150px;
  height: 80px;
  background-color: yellow;
  

• 设定内边距Padding — padding

  padding: 10px;
  
  /* 等同於： 
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  */
  

• 设定边框Border — border：

  /* border: 粗细 颜色 样式 */
  border: 5px blue solid;
  

• 设定与其他元素的边距Margin — margin

  margin: 20px;
  
  /* 等同於： 
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 20px;
  margin-right: 20px;
  */
  

网页就是由这样一个一个的盒子堆砌而成的喔！

盒子宽高的计算方式

盒子预设采用的元素宽高的计算方式还有不一样？一般情况下，当设定 width 和 height ，其实并不是完全代表看到的宽高度，只是设定盒子 Content 的大小，padding 和 boder 的部分一样会让盒子看起来变大，，而这个计算方式就是 Content-box。

Content-box 的清况下，设定 width: 200px;、height: 100px;

但我们通常会想要直接通过 width / height 就可以直接设定外观的大小，所以就有了 Border-box，它的宽高设定就会等於 Content + Padding + Border。

Border-box 的情况下，设定 width: 200px;、height: 100px;

可以透过 box-sizing 这个属性来设定元素要采用的计算方式：

box-sizing: content-box | border-box;

常用样式

知道网页元素是如何进行排列了，但我们还没了解 CSS 的真正的能耐，接下来就直接动手做，认识一些常用的样式属性。

首先在 HTML 里新增一个元素：

<div id="test">HELLO<div>

移动位置

• position：设定元素的定位方式
• top / bottom / left / right：设定元素移动的距离

position: relative;    //相对定位：相对调整本身的位置
top: 100px;            //向下相对移动 100 pixel

改变颜色

• color：设定文字颜色
• background-color：设定背景颜色

color: #FAC9B8;
background-color: #C5DECD;

设定文字

• font-family：设定字型（找字体可以到 Google Fonts）
• font-size：设定字体大小
• font-weight：设定字体粗细
• text-align：设定文字对齐方式

font-family: "Noto Sans CJK TC";
font-size: 28px;
font-weight: bold;  //粗体字
text-align: center;  //文字置中对齐

怎麽样，是不是跟原本不一样了呢！这就是 CSS 的魔力，当你熟悉更多样式属性，你就能更灵活的美化你的网页。

小结

今天讲到 CSS 的本体 Box Model、还有一些常用的样式。如果你还想学习更多的属性，你可以参考 CSS Reference 或是 w3schools-css 网站，上面有详尽的样式表还有画面范例供你学习，建议可以透过边学边做的方式，会更容易快速熟悉 CSS 的样式属性。明天的文章会进一步提到如何用 CSS 的排版方式之一的 Flexbox，来实现多样化的网页布局，那就下章再会罗！

如果文章中有错误的地方，要麻烦各位大大不吝赐教；喜欢的话，也要记得帮我按赞订阅喔❤️

参考资料

• MDN Web Docs - CSS