fix

blog/front-end-learn/css-product-2.md

@@ -80,4 +80,112 @@ uploads/      非固定使用的图片素材
 
 ```
 
-https://www.bilibili.com/video/BV1Kg411T7t9?p=177&spm_id_from=pageDriver
+base.css
+
+```css
+/* base.css 清除默认样式*/
+
+/*清除常见标签的margin和padding*/
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+ol,
+li,
+dl,
+dt,
+dd,
+input {
+  margin: 0;
+  padding: 0;
+}
+
+/*内减模式*/
+* {
+  box-sizing: border-box;
+}
+
+/*设置网页统一的字体大小，行高，字体系列 */
+body {
+  font: 16px/1.5 Arial, 'Microsoft Yahei', sans-serif;
+  color: #333;
+}
+
+/*去除列表默认样式*/
+ul,
+ol {
+  list-style: none;
+}
+
+/*去除默认倾斜*/
+i,
+em {
+  font-style: normal;
+}
+
+/*去除a标签下划线，并设置默认文字颜色*/
+a {
+  text-decoration: none;
+  color: #333;
+}
+
+/*设置img垂直对齐方式为居中对齐，去除默认下间隙*/
+img {
+  vertical-align: middle;
+}
+
+/* 去除input默认样式 */
+input {
+  border: none;
+  outline: none;
+  color: #333;
+}
+
+/*左浮动*/
+.fl {
+  float: left;
+}
+/*右浮动*/
+.fr {
+  float: right;
+}
+
+/*双伪元素清除浮动*/
+.clearfix::before,
+.clearfix::after {
+  content: '';
+  display: table;
+}
+
+.clearfix::after {
+  clear: both;
+}
+```
+
+common.css
+
+```css
+/* 版心居中 */
+.wrapper {
+  width: 1240px;
+  margin: 0 auto;
+}
+
+/* 让文字看不见 */
+font-size: 0;
+```
+
+绝对定位，盒子具备行内块特点
+
+对齐方式：
+
+1. vertical-align
+2. 行高
+3. 定位
+
+https://www.bilibili.com/video/BV1Kg411T7t9?p=187&spm_id_from=pageDriver

blog/front-end-learn/demo/css-decorate-4.html

@@ -3,7 +3,6 @@
         width: 400px;
         height: 400px;
         background-color: skyblue;
-
         /* 水平居中 */
         text-align: center;
     }
@@ -19,6 +18,7 @@
         height: 200px;
         width: 200px;
         /* 垂直居中 */
+
         /*方式一*/
         vertical-align: middle;
         /*方式二*/