CSS从基础到深入

清除浮动：

清除默认样式
*{
	margin:0px;
	padding:0px;
	list-style:none;
	text-decoration:none;
}
.zhuce::after{
    display: block;
    content: "";
    clear: both;
}

这里的zhuce是指想要清除浮动的父元素类名

关于边框边距

如果想要控制两个元素之间的距离用margin如果控制元素内部的显示效果的话用padding 应用布局的时候margin用得多一些。图片处理时用padding多一些
设置块元素首行居中：
首先确定块元素的范围大小 wight和hight
然后margin：0px auto；
设置文字居中：

 margin: auto;
 hight:30px;
    text-align: center;
    line-hight:30px;

效果如图

清除浮动

div,h1,a,li{
    margin: 0px;
    padding: 0px;
    text-decoration: none;
    list-style: none;
}

两个div想要出现在同一行只需要设置左浮动和右浮动即可。
背景图居中：

    background-position: center;

outline不占空间
border占空间

在背景图上设置模糊蒙版：

background: linear-gradient(to right,rgba(0,0,0,1),rgba(255,255,255,0));

rgba设置透明度（前三个值表示红、绿、蓝，最后一个表示透明度）
rgb设置颜色

相对定位和绝对定位

relative和absolute
子元素用绝对定位，父辈元素用相对定位

通过父盒子控制子盒子的位置

写在父元素里的代码
    display: flex;
    justify-content: center;（主轴）
    1.center：居中对齐
    2.flex-start：开始位置对齐
    3.flex-end：结束位置对齐
    4.space-between：等间距，开始和结束贴边
    5.space-around：盒子等间距，盒子和父盒子之间是间距的一半
    6.space-evenly：盒子之间等间距，盒子和父盒子之间也是等间距
    
    align-items: center;（交叉轴）
    flex-direction：column（column-reverse）；方向
    flex-direction：row（水平方向，给宽不给高)column(竖直方向，给高不给宽)；

ul li快速生成多个带字的标签
ul>li{$理财服务}*5

icont图标展现出来
background:url() no-repeat center;
background-size:contain;

posion里absolute和fixed区别
fixed:qq注册页（左侧固定后，右侧滚动左侧不会动）
absoult:滚动时左右两侧会一起动

定位中间
先定位上面的50%，再减去高度的一半

.right{
    background: rgb(179, 216, 144);
    height: 100%;
    position: relative;
}
.right-card{
    width: 500px;
    height: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -250px;
}

display: none;和visibility: hidden;的区别
都能隐藏元素，但是前者不占位置，后者仍会保留原先位置

在原先的盒子里加padding后，盒子会变胖，content里面包括padding和div
display:‘flex’;用法

        .container{
            display:flex;
            /* 默认水平 ，最好写上*/
            flex-direction: row;
            height: 100%;
        }
        .left{
            width: 200px;
            background: #bd2b2b
        }
        .right{
        	display:flex;
            flex: 1;
            background: #000;
        }

权重问题
id选择器权重100
类选择器权重10
标签选择器权限1
开发者工具中，如果给标签画上横线，要么是没选中；要么是权限不够；
图片问题：
1.背景

 background: url("") no-repeat center;
 background-size:contain;

2.引用图片

<img :src=""  style="width:50px; height:50px; border-radius:50%; ">