一、文本类型css
1.字体颜色 color:red;
2.字体大小 font-size:16px;
3.水平对齐方式 text-align:left/center/right;
4.行高 line-height:22px;
使用分为2种情况：
a.针对多行文本的上下间距(ps中的测量：第一行文字的头部到第二行文字头部之间的距离)
b.针对单行文本做垂直居中效果，给到对应元素添加行高值，就是当前盒子的高度。
二、背景类型css
1.背景颜色 background-color:red;
2.背景图片 background-image:url(路径);
3.背景平铺 background-repeat:no repeat / repeat-x / pepeat-y
4.背景定位 background-position:left / center / right / 值 /top bottom
5.背景大小 background-size:cover; 覆盖
6.背景固定 background-attachment:fixed
三、其他类型css
1.宽度 width:200px;
2.高度 height:300px;
类名的使用：当页面中的标签一样的时候，又想样式不一样的时候，就必须给标签取名字。
1.取类名 class名字 class="名字" class名允许有重名且可以有多个名字，多个名字之间需要空格隔开
css写法 .名字{样式}
class类名的高级使用：当页面中很多的标签有公共样式的时候，可以取一个公共的类名，然后给到对应的样式，最后将这个类名给到需要的标签添加即可。
四、浮动
float:none/left/right;
浮动的特点：给元素添加浮动之后，元素就飘了，原来的位置就不要了
浮动的作用：可以实现竖着的元素横着排列
浮动使用要注意的事情：
如果想让所有的子元素都横着排列，就需要给所有的子元素都添加float;并且要给这些子元素的父元素添加宽高。
浮动虽好，但有副作用。
五、外边距
margin 分为四个方位 上top 下bottom 左left 右right
左外边距 margin-left
右外边距 margin-right
上外边距 margin-top
下外边距 margin-bottom
margin的使用：谁要移动，就给谁添加margin
margin-top的使用是有bug的。
产生的原因：给子元素添加了margin-top之后，导致了父元素整个下移
问题解决：给父元素添加属性overflow:hidden; (bfc)
margin:0 auto; auto表示自适应
主要可以实现一个有宽度并且宽度生效的大标签（盒子）做水平居中
{width:1000px;margin:0 auto;}
六、边框 border
1.边框的宽度(粗细) border-width
2.边框的样式 border-style 实线solid 虚线dashed 点划线dotted 双线double
3.边框的颜色 border-color
边框也分为4个方向
左边框 border-left:5px solid green;
右边框 border-right:5px solid green;
上边框 border-top:5px solid green;
下边框 border-bottom:5px solid green;
边框的特点：
在默认的W3C标准盒模型情况下，给元素添加边框之后，会把元素给撑大，border值会计算在元素原有的宽高之上。
使用边框要注意的点：如果想保持元素原有大小，就需要减去添加的border值。
七、内边距
补白、内填充 padding 盒子里面的内容距离盒子边边的距离
也分为4个方向 上 下 左 右
左内边距 padding-left
右内边距 padding-right
上内边距 padding-top
下内边距 padding-bottom
特点：在默认的W3C标准盒模型情况下，给元素添加padding之后，会把元素给撑大，padding值会计算在元素原有的宽高之上。
使用内边距要注意的点：如果想保持元素原有大小，就需要减去添加的padding值。
padding的使用：一般是给父元素添加比较多的
八、display转换属性
display:block; 转为块状元素
display:inline; 转为行内元素
display:inline-block; 转为行内块元素
display:none; 彻底消失
其他使用方法
一、单行文本超出显示省略号效果
1.width 设置宽
2.white-space:nowrap 设置文本不换行，让文本一行显示
3.overflow：hidden 超出隐藏
4.text-overflow：ellipsis 添加省略号
二、搜索框的书写方法
搜索框实现思路：
1.搭建页面的基本结构 首先一个大盒子里面放1个input框和1个按钮；
2.给大盒子设置宽高大小等其他样式；
3.去掉input和button之间的默认间距，给他们两个都添加浮动；
4.给input和button添加宽高大小，并且去掉他们自带的边框border:0;
5.再稍微调整input和button的细节样式即可。
outline: none 去掉谷歌自带的外框线
cursor: pointer 鼠标变手型
三、行内块元素做水平垂直居中
1.给外层的大盒子添加text-align:center;让行内块元素实现水平居中；
2.给外层的大盒子添加line-height:盒子高度;且给行内块元素本身添加vertical-align: middle;实现垂直居中效果。
四、浮动的副作用
父元素高度塌陷(父元素的高度为0)
问题的产生：当给所有的子元素都添加了float,父元素以及所有外层元素都没有高度的情况下，就出现高度为0
问题的解决：
1.给浮动元素的父元素添加height; 遇到父元素需要高度自适应的时候就不好用了
2.给浮动元素的父元素添加overflow:hidden/auto/scroll; (bfc)遇到定位就不好用了
3.给浮动元素的下方添加一个空的块元素，并且给这个空的块元素添加clear:both;(清除浮动);会造成代码的冗余
4.万能清除法，取一个公共的类名，将这个公共类名给道浮动元素的父元素添加即可。
clear:after{
content:"";
display:block;
clear:both;
height:0;
overflow:hidden;
visibility:hidden;
}
.clear{
zoom:1;
}
5.给父元素添加float;不推荐，只了解，会产生新的浮动问题；
6.给父元素添加display:table;不推荐，只了解，会产生新的未知问题；
五、伪对象
box1::after{ /*在后面添加内容*/
box3::before{ /*在前面添加内容*/
box4::first-letter{/*针对第一个字设置样式*/
box5::first-line{/*针对第一行文本设置样式*/
box6::selection{/*设置内容选中之后的样式*/
