杂七杂八

记录一些前端开发中，有用的小技巧，便于问题的定位和拆解

简单 且 重要的知识

在body中增加初始化样式

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;  /* 目的：使得边框、内容区域、外边距等不超出 */
}

/* 通常一个块级元素实际所占宽高度=外边距（margin）+ 边界宽度(border-width) + 内边距（padding）+ 高度（height） / 宽度（width） */

/* box-sizing是css3的新属性，对容器宽高进行定义：引入box-sizing: border-box的容器的内边距和边框不再会增加它的宽度和高度，即padding和border的值算在指定宽高内部的，但外边距依然时算作外部 */

/* 设置了box-sizing: border-box的容器实际所占宽高度 = 设置的高度（height）/ 设置的宽度（width）+ 外边距（margin） */

颜色的 alpha 通道

注意

background-color: rgba(255, 0, 0, 0.5); 只会影响背景颜色的透明度，不会影响子元素的透明度。
opacity 属性设置整个元素的透明度，包括文本、背景、边框等。

.element{
    /* 一个完全透明的颜色 */
    background-color: rgba(0, 0, 0, 0);
    /* 一个完全不透明的颜色 */
    background-color: rgba(0, 0, 0, 1);
    /* 一个半透明的颜色 */
    background-color: rgba(0, 0, 0, 0.5);
}

.element {
    /* / 表示法 */
    background-color: rgba(0 0 0 / 50%)
}

.element {
    /* 16进制表示法 {000000前六位表示颜色，80后两位表示透明度} */
    background-color: #00000080
}