diff --git a/blog/front-end-learn/css-product-2.md b/blog/front-end-learn/css-product-2.md index e5f7e0d4a5773540dadd9eb800705078dbde20f5..d0da8cb8cdd0314bc1fcf692a46b60ec7b9cfacd 100644 --- a/blog/front-end-learn/css-product-2.md +++ b/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 diff --git a/blog/front-end-learn/demo/css-decorate-4.html b/blog/front-end-learn/demo/css-decorate-4.html index 84259e9d5afcfb85d744a2b753b76e4476391633..4e784f31f1239b547ed9196c11b5f358343aa412 100644 --- a/blog/front-end-learn/demo/css-decorate-4.html +++ b/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; /*方式二*/