【学习笔记】CSS中的HTML Tag Box设定

HTML的每个标签(元素)都是一个Box，因此都由content、padding、border、margin构成。详细关系如下：

from CSS 盒子模型 | 菜鸟教程

padding

padding: contain到border间的距离。
参数：
padding-top、bottom、left、right: 上下左右的距离设定。
padding: 可输入4、2、1个数字
4个数字: 上右下左(顺时针)
2个数字: 上下、左右
1个数字: 所有方向

margin

margin: border到其他元素的距离。
参数：
margin-top、bottom、left、right: 上下左右的距离设定。
padding: 可输入4、2、1个数字
4个数字: 上右下左(顺时针)
2个数字: 上下、左右
1个数字: 所有方向
要注意的是，margin虽然可以作用在所有的元素上，但margin -top、margin-bottom不会作用在inline 元素。

border

边界，介於padding和margin之间。
语法:
border: px solid/dashed color

width/height

设定元素的宽、高。

绝对单位：
width跟height可以使用绝对单位设定，像是cm、px(像素)等。
相对单位：
%: 根据parent元素的width、height，依比例设定宽、高。
vw: view width
vh: view height
vw和vh会根据可见视窗的大小作调整。也就是说，若网页画面跟萤幕一样大，则元素就会根据萤幕的宽高调整；若视窗只有萤幕一半大，则元素也会依比例缩小。
跟%最不同的是，vw、vh不是根据母元素，而是视窗大小，因此在使用上仍有不同。

补充: vmin和vmax

另外，还有一个补充的单位是vmin，这个的意思是帮我抓取「长或宽较小的那个的百分比」，另一个相对的就是vmax意思就是抓取「长或宽较大的那个的百分比」。

from [笔记] 好用的css 3新单位vh vw ─ 让你的图片可以随着萤幕大小而不同

display设定

display可以调整HTML元素的显示状态，也能调整box的状态。
若要调整box的状态，可输入这三种参数:
inline:
将元素调整成inline，也就是宽度及高度依据content而定，若宽度未超过母元素的宽度，则下一个inline元素会在同行。
inline元素无法调整宽度及高度，margin也仅能调整左右，上下会失去作用，要注意。
block:
将元素调整为block，可适用block的设定。
inline-block:
inline-box是比较特别的状态，在width和height可以做调整，适用block的设定；在网页排版上则是inline的设定。预设为inline-block的有<img>、<input>、<button>、<select>、<textarea>这五个。