Day.4 「CSS 基础中的基础！」 —— CSS 盒模型 box-model & 距离单位
人是视觉动物
当网页架构用得差不多了，想自己安排布局，会开始想办法把网页变得更漂亮。
Google Chrome 很好用，有提供开发者工具给我们除错，点开 elements 标签最下面会有个方形的图案。
这就是我们今天的主角 —— CSS 的基础盒模型 box-model
什麽是 CSS？
CSS 是 Cascading Style Sheets 的简写，中文翻译为阶层式样式表。
名字内有阶层两个字，顾名思义，他可以使用多个选择器组合，来达到阶层式的管理样式。
如何使用 CSS？
先教两个最简单最基本的 CSS 使用方法。
-
在
<head>标签内添加<style>标签，如红色框，标签内使用你要套用 CSS 样式的标签名，如橘色框，在里面撰写属性值，如红色框内的橘色框。 -
或着直接在标签内添加
style属性，并在里面赋予属性值，如绿色框。
盒模型
盒模型能帮助我们更加了解如何操控网页并进行排版。
每个标签都有独立的盒模型，看盒模型我们可以观察到有三个英文单字，四个颜色
- 红色：
margin，外边距，可以想成与下一个标签的距离 - 橘色：
border，边框，就是内容的外框 - 绿色：
padding，内边距，可以想成内容与外框的留白距离 - 蓝色：内容
距离单位
在学习盒模型语法时，必须先了解 CSS 的距离单位。
不管在哪都固定大小的单位
- px 是绝对单位，为萤幕中最基础单位，1px 代表 1 个点，如下图：字的大小 24px，固定在视窗内占 24 位元的大小
- rem 是相对单位，每个元素都依据根元素的 px 值乘以倍数，如下图：字的大小 1.5rem，固定比祖先大 1.5 倍的大小，浏览器内建字体原始大小为 16px。
取决於父元素单位大小的单位
- em 是相对单位，每个子元素都依据父元素的 px 值乘以倍数，如下图：字的大小 1.5em，比老爸大 1.5 倍。
- % 是相对单位，每个子元素都依据父元素的 px 值乘以百分比，如下图：字的大小 150%，比老爸大 150 %。
取决於视窗大小的单位
- vh 是相对单位，每个元素都依据视窗的（像素高度 / 100）乘以倍数，如下图：字的大小 5vh，视窗的 1 / 20 高的大小。
- vw 是相对单位，每个元素都依据视窗的（像素宽度 / 100）乘以倍数，如下图：字的大小 5vw，视窗的 1 / 20 宽的大小。
图片为示意图
盒模型通用语法
可以看到盒模型在margin、border、padding，都可以在四个方位设定距离
而设定的语法也很简单直白，在此用margin做示范：
-
margin-top: 上距，上外边距 -
margin-right: 右距，右外边距 -
margin-bottom: 下距，下外边距 -
margin-left: 左距，左外边距
一行程序码简化的语法
-
margin: 上距 右距 下距 左距，四个值的顺序不能错，分别设定上、右、下、左 -
margin: 上距 水平距 下距，三个值的顺序不能错，分别设定上、左右、下 -
margin: 垂直距 水平距，两个值的顺序不能错，分别设定上下 与 左右 -
margin: 距离，一个值你也很难错，四个方向一起设定
以上 margin 也可以提替成 border 来设定 border 或 padding 来设定 padding
Margin 的特色
因为 Margin 毛最多，所以先来说 Margin，搞定 Margin，後面就轻松了！
上下相隔的距离会重叠。
左右相隔的距离不会重叠。
行内元素的垂直 margin 没有效果。
可以使用负值，让元素重叠，注意 在同个层级，右边会压过左边，下面会压过上面
同层级下，右边盖住左边
父子元素 Margin 外边距重叠
当父元素包着子元素，同时都有使用 margin 时，垂直 margin 会取最大的 margin 值
但当父元素有设定 padding 或 border 时，就不会重叠了。
还有属於不同的 BFC 元素，如：子元素使用 float 浮动元素
什麽是 BFC？ BFC 是 Block formatting context 简写，简单的说就是定位的方式改变。想更了解可以看MDN 官方文件
这个部分要等到认识更多 CSS 才比较好解释。
简单说，就是脱离老爸的控制（脱离文档流）
什麽是脱离文档流？ 简单说，原本每个元素都是一个个盒模型，依次排列在网页上面，看起来像流水般由上而下依序排下来，称之为「文档流」。而脱离文档流，顾名思义就是脱离出来的意思。
Border 的特色
可以设定边框的宽度、样式与颜色
此外还可以使用 border-radius 来设定外围的圆滑程度。
border: 宽度 样式 颜色;
border-radius: 圆滑程度;
宽度、样式、颜色上网查，比较容易理解易学，就不多加琢磨了。
稍微介绍圆滑程度border-radius。
/* 这个是没有字母的最基本型态 */
.border { border: 10px solid #f88; }
/* 当设定一个值，四个角都会依据设定值为半径做弧度 */
.a { border-radius: 20px; }
/* 当设定为 % 数，会依照内容宽度乘以百分比为半径做弧度 */
.b { border-radius: 50%; }
/* 当有两个值，第一个值对应的是左上与右下，第二个值对应的是右上与左下 */
.c { border-radius: 0 50%; }
/* 当有三个值，第一个值对应左上，第二个值对应的是右上与左下，第三个值为右下 */
.d { border-radius: 0 100% 50%; }
/* 当有四个值，就顺时针从右上开始分别对应值 */
.e { border-radius: 0 25% 50% 100%; }
/* 当要做特别形状时，参数会更麻烦 */
.f { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
上面的英文字母分别对应形状
Padding 的特色
Padding 就相对单纯许多。
可以设定内容留白的宽度，与 margin 语法差不多，颜色则取自内容的背景色，背景颜色也是很简单易学的语法，可以上网查，更进阶的渐层背景颜色、多重背景、滤镜背景，如果未来有时间会补充。
在行内元素状态下，padding 水平会正常，但垂直就跟 margin 一样会失效。如图：
此外值得一提的是，margin 是元素之间的距离，所以不能算在元素内，padding 则是在元素内留白的距离，算是元素的一份子，常见的例子就是按钮。
想要把元素推到中间置中？
盒模型还有 auto 这个值
除了写数字值外，我们也可以请浏览器帮忙我们计算
- auto 是让浏览器决定自动调整的距离单位，通常用在水平置中或自动推移
怎麽设定的大小跟我想像的不一样？
这里要介绍一个现在很多人都会使用的盒模型语法box-sizing: border-box
以往的网页切版充满了数学计算，
因为 border 与 padding 要另外计算，如下图content-box，
宽度总共 border10×2+padding10×2+width100 = 140px
想要把总宽度变 100px 就要往回扣 width。
但把 CSS 全域设成 box-sizing: border-box;，
就可以设定宽度 100px ，浏览器会帮我们计算，
可以更直觉性的设定内容的宽高！
至於 width 和 height 基础语法，这个语法也很简单，主要难是在判断对的时机使用，这要多做才知道哪些情况要使用。
总结
没想到如此基础的 盒模型，也有很多重要观念，明天将介绍 CSS 如何更精准的套用样式。
EP20 - [Ruby on Rails] 捐款网站
Youtube 频道：https://www.youtube.com/c/kaochenlong ...
今天学习flask怎麽做一个blog
由於没有经验 所以我决定学习的顺序是 一开始多看把所有基础的影片都看一遍 在脑子里面建构一遍後 再动...
Day 12: Structural patterns - Bridge
目的 将程序分离成服务与对外窗口（介面），当外界要使用时，呼叫窗口即可，服务的一切不用知道。 说明 ...
其实，我还在这里，但不会一直在这里。
你确定现在是 12 点吗？嘿嘿，我这里才六点。 欧洲时区醒来打开电脑，纷纷看到许多人的铁人赛完赛感...
求救! 网站背景无法显示
我的网站在电脑上显示的画面是正常的，但是一上传到服务器上，背景和影片就无法显示了，到底是为什麽~~ ...