如何高效学习HTML和CSS，构建策略？
摘要：HTMLCSS学习笔记 定义版心类 .wrapper{ width: 1200px; margin: 0 auto; } <div class='wrapper'&
HTMLCSS学习笔记
定义版心类
.wrapper{
width: 1200px;
margin: 0 auto;
}
<div class='wrapper'></div>
透明的背景颜色
background-color: rgba(0,0,0, 0.3)
里面的0.3就是透明度
垂直居中属性
vertical-align:middle
垂直居中需要定义父级组件高度
清楚浮动通用代码
/* .clearfix::before 作用：解决外边距塌陷问题 */
/* 清除浮动 */
.clearfix::before,
.clearfix::after {
content: '';
display: table;
}
/* 真正清除浮动的标签 */
.clearfix::after {
clear: both;
}
<div class='clearfix'></div>
定位position
相对定位：relative
相对定位是根据自己本身的位置来做位置偏移
绝对定位：absolute
绝对定位根据上一个定位的组件来发生偏移的。所以在使用的时候一般都会在上一个组件的css属性上添加一个相对定位来做坐标起始点。
绝对定位水平垂直都居中
/*基于窗口的水平垂直都居中的盒子*/
.box{
position:absolute;
left:50%;
/* margin-left: -150px; */
top:50%;
/* margin-top: -150px; */
/* 位移：自己定位宽度高度的一般 */
transform: translate(-50%, -50%);
width:300px;
height:300px;
background-color:pink;
}
精灵图
同一个透明的png图片，用背景定位去选取对应哪个需要的图标
.one{
display:inline-block;
width: 18px;
height: 24px;
background-image: url(./images/taobao.png);
/*
背景图位置属性：改变背景图的位置
水平方向位置 垂直方向的位置
background-position: x y;
*/
background-position: -3px -20px;
}
css自定义变量
css变量有作用域，所以根据需要来定义变量，如下代码所示作用域为整个页面
html{
/*定义css变量*/
--main-color: #C00000;
}
.box{
background-color: var(--main-color);
}