1.css基础

1.块级元素、行级元素、行内块级元素

名称	关键代码	效果
（1）块级元素（div、h、p） 　　· 可以设置宽高 　　· 不能和其他元素待在一行 　　· 当没有设置宽高时，宽度和父级宽度一样，高度由元素内容高度决定	<div>块级元素1</div> <div>块级元素2</div>
（2）行级元素（span、a） 　　· 不可以设置宽高 　　· 可以和其他元素待在一行 　　· 宽高由元素内容决定	<span>行级元素1</span> <span>行级元素2</span>
（3）行内块级元素（img） 　　· 可以设置宽高 　　· 可以和其他元素待在一行 　　· 当没有设置宽高时，宽高由元素内容决定	<img src="../../../static/img3.jpg" width="50px"> <img src="../../../static/img3.jpg" width="50px">
（4）问题：display:inline-block会产生4px的间隙？ 　　  解决：给父元素设置font-size:0	<div style="font-size:0"> <div style="display:inline-block;">1</div> <div style="display:inline-block;">2</div> </div>

 

 

2.水平垂直居中

（1）块级元素：margin: auto + 绝对定位　　

<div style="position: relative">
    <div style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;"></div>
</div>

（2）行级元素：text-align:center;line-height:80px

<div style="text-align: center;line-height: 80px;">
    <span>行内</span>
</div>

（3）通用：display:flex弹性盒子、display:grid网格

//方式一：display:flex弹性盒子（原理是都变成块级元素）
<div style="display: flex;justify-content: center;align-items: center;">
    <div>通用</div>
</div>

//方式二：display:grid网格（原理是都变成块级元素）
<div style="display: grid;">
    <div style="justify-self: center;align-self: center;">通用</div>
</div>

 

3.像素

（1）px（像素）

<p style="width:160px">像素</p>

（2）em（1em=本元素文字大小 * 1）

<p style="font-size:20px;width:8em">像素</p>

（3）rem（1rem=html文字大小,默认16px * 1）

<p style="width:10rem">像素</p>

 

4.表示颜色的几种方式

（1）颜色名称

<input type="text" style="background:blue">

（2）颜色编码

<input type="text" style="background:#0e15dd">

（3）rgb/rgba

<input type="text" style="background:rgb(14,21,221)">
//rgba增加了alpha参数，介于0~1之间（完全透明~不透明）
<input type="text" style="background:rgba(14,21,221,0.5)">

（4）hsl/hsla
    · h色调：取值区间在0~360之间，0或360代表红色，120代表绿色，240代表蓝色
    · s饱和度：取值在0%~100%之间
    · l亮度：取值在0%~100%之间

//hsl(色调,饱和度,亮度)
<input type="text" style="background:hsl(238,88%,46%)">
//hsla增加了alpha参数，介于0~1之间（完全透明~不透明）
<input type="text" style="background:hsla(238,88%,46%,0.5)">

 

5.样式重置

步骤一：创建一个reset.css文件

步骤二：将以下代码复制进去

*{
    margin: 0; //去除所有元素的外边距
    padding: 0; //去除所有元素的内边距
    box-sizing: border-box; //让边框和内外边距在设定的宽高之内绘制
    -moz-box-sizing: border-box; //火狐浏览器
    -webkit-box-sizing: border-box; //webkit内核的浏览器
}
body{
    font-size: 16px;
    font-family: "微软雅黑";
    color: #222;
}
b{
    font-weight: normal;
}
i{
    font-style: normal;
}
a,a:hover,a:active{
    text-decoration: none;
    color: #222;
}
input,textarea,select{
    outline: none;
}
//去除img上下左右之间的空白
img{
    border: none;
    vertical-align: top;
}