CSS基础知识总结

1. 设置宽度 width: 100px;
2. 设置高度 height: 100px;
3. 设置外边距 上下左右均有100px的外边距（盒子与盒子之间的距离）margin: 100px;
3.1 设置上外边距 margin-top: 100px;
3.2 设置下外边距 margin-bottom: 100px;
3.3 设置左外边距 margin-left: 100px;
3.4 设置右外边距 margin-right: 100px;
3.5 有宽度的块级元素(占一整行的元素)水平 横向 居中
    margin: 0 auto;
    margin: auto;
    如果只写两个值
    margin: 上下外边距 左右外边距
3.6 垂直方向上相邻的两个元素外边距会发生合并现象：
上面盒子设置margin-bottom: 100px;
下面盒子设置margin-top: 200px;
则会取较大的值，最终垂直方向上相邻的两个元素之间有200px的距离，不会发生叠加。
3.7 垂直方向上嵌套的两个元素外边距会发生塌陷现象：
外面大盒子包裹里面小盒子，
里面小盒子设置margin-top: 100px;
则大盒子会和小盒子一起距离顶部100px距离，发生塌陷现象。
解决办法: 给大盒子设置overflow: hidden;(推荐)
或者
给大盒子设置1px的透明边框
或者
给大盒子设置1px的padding
4. 设置内边距（盒子边框与内容之间的距离）上下左右均有100px的内边距 padding: 100px;
4.1 设置上内边距 padding-top: 100px;
4.2 设置下内边距 padding-bottom: 100px;
4.3 设置左内边距 padding-left: 100px;
4.4 设置右内边距 padding-right: 100px;
    padding: 上下内边距 左右内边距
5. 取消ul li 列表的小圆点 list-style: none;
6. 取消下划线 text-decoration: none;
6.1 添加下划线 text-decoration: underline;
7. 搜索文档中的内容 ctrl+f
8. 设置背景颜色 background-color: #000;
8.1 background-color: rgb(0,0,0);
8.2 设置背景颜色透明：background-color: rgba(0,0,0,.3);
8.3 透明度中a的取值范围是从0(完全透明) - 1(完全不透明)
9. 元素向左浮动 float: left
10. 元素向右浮动 float: right
10.1 清除浮动：子元素浮动了，脱离标准流不占位置 父元素没有设置高度的情况下
无法被子元素撑开，高度会变成0，所以需要清除浮动带来的影响
隔墙法：给最后一个浮动的元素后添加一个块级元素 同时添加clear: both;
给浮动的父元素添加overflow: hidden;
伪元素清除浮动
.clearfix::after{
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}
11. 设置边框
    border: 边框的粗细 线形状 颜色
    border: 1px solid #000
    设置上边框 border-top: 1px solid #000
    设置下边框 border-bottom: 1px solid #000
    设置左边框 border-left: 1px solid #000
    设置右边框 border-right: 1px solid #000
    设置透明颜色边框
    border: 1px solid transparent;
12. 单行文字垂直居中： line-height: 高度值
13. 去掉边框 border: 0;
    去掉外轮廓线 outline: 0;
14. 设置文字颜色 color: #000;
15. 设置行高 line-height: 20px;
16. 文字水平居中 text-align: center;
17. 设置css3的盒子模型： box-sizing: border-box;
18. 设置版心 .w{width: 1200px; margin: 0 auto;}
19. 设置文字大小 font-size: 14px;
20. 设置文字粗细 font-weight: 700; 加粗
21. 设置文字变细 font-weight: 400; 变细
22. 设置字体 font-family: '微软雅黑';
23. 设置斜体文字正常显示 font-style: normal;
    设置文字倾斜显示 font-style: italic;
24. 设置相对定位 position: relative; 相对于自身移动 占位置
25. 设置绝对定位 position: absolute; 相对于最近一层有定位的父辈元素 不占位置
26. 设置固定定位 position: fixed; 相对于浏览器可视窗口移动 不占位置
27. 设置定位的方位值：top: 1px; 远离上面1px
                        bottom: 1px 远离下面1px
                        left: 1px 远离左面1px
                        right: 1px 远离右面1px
28. 溢出隐藏： overflow: hidden;
29. 标签/元素隐藏不占位置 display: none;
30. 让标签/元素隐藏的元素显示出来 display: block;
31. 标签/元素隐藏占位置 visibility: hidden;
32. 标签/元素隐藏占位置 visibility: visible;
33. 文本首行缩进 text-indent: 2em;
34. 透明颜色 transparent
35. 设置背景 属性连写 background: 背景颜色 背景路径 是否平铺 水平偏移值 垂直偏移值；
例如 background: pink url('../images/sprites.png') no-repeat -10px -20px;
注意精灵图移动背景位置 都是负值或0 不可能为正值
除此之外水平偏移值和垂直偏移值还可以用方位坐标值来显示
top 靠顶显示背景图片 bottom 靠底显示背景图片 left 靠左显示背景图片 right 靠右显示背景图片
**！！！一定注意给背景图片的盒子一定要有宽高值！！！没有宽高和内容的盒子是无法显示背景图片的！！！**
36. ul li:nth-child(1){}            选中ul下的第一个li
    ul li:first-child{}             选中ul下的第一个li
    ul li:last-child{}              选中ul下的最后一个li
    ul li:nth-child(2n){}           选中ul下偶数个li 比如第2个 第4个 第6个 li
    ul li:nth-child(even){}         选中ul下偶数个li 比如第2个 第4个 第6个 li
    ul li:nth-child(2n+1){}         选中ul下奇数个li 比如第1个 第3个 第5个 li
    ul li:nth-child(odd){}          选中ul下奇数个li 比如第1个 第3个 第5个 li
    ul li:nth-child(n+3){}          选中ul下从第3个开始到最后的li 包括第三个
    ul li:nth-child(-n+3){}         选中ul下从开始到第三个的li    包括第三个
37. 行内块元素和行内元素的垂直居中对齐     vertical-align: middle; 同时可以解决img底部3px的问题
38. 设置边框圆角 border-radius: 10px;
39. 创建一个圆形 border-radius: 50%;
40. 创建一个胶囊形状 border-radius: 高度的一半
50. 文字属性连写 font: italic 700 16px/30px "Microsoft Yahei"
                font: 字体斜体 粗细 大小/行高 字体家族
                其中 字体大小和 字体家族是必写属性，顺序不能够调换位置
51. 子绝父相 子元素绝对定位 父元素相对定位
52. 绝对定位、固定定位、浮动不占位置，脱离标准流
    脱离标准流的元素默认宽度高度由内容撑开
    默认转换为块级元素
    margin: 0 auto;无法使其居中
    不会发生外边距塌陷的问题
    相对定位占位置
    浮动永远不会压住文字
53. 权重 ：  继承 * 通配符选择器 0 < 标签选择器、伪元素选择器 1 < 类选择器、伪类选择器、属性选择器、结构伪类选择器 10 < ID选择器 100 < 行内样式 < 1000 < !important 正无穷
54. 浮动 一般li包裹着a都是让li左浮动 float: left;
    右浮动: float: right;
    浮动的元素不占位置。无法撑开父元素高度，所以要清除浮动：本质是闭合浮动
    常见的清除浮动的方式有4种：
    1. 隔墙法：在浮动的元素后面插入一个块级元素，同时设置clear: both;
    2. 溢出隐藏法：在浮动元素所在的父元素设置overflow: hidden; 触发BFC 实现清除浮动
    3. 单伪元素清除浮动
    .clearfix:after{
        content: "";
        display: block;
        height: 0;
        visibility: hidden;
        clear: both;
    }
        /*兼容IE的写法*/
        .clearfix{
            *zoom:1;
        }
    4. 双伪元素清除浮动
    
        .clearfix:before,.clearfix:after{
            content:"";
            display:table;
        }
        .clearfix:after{
            clear:both;
        }
        /*兼容IE的写法*/
        .clearfix{
            *zoom:1;
        }

55. 元素的显示与隐藏
    1. display: block; display: none; 元素显示隐藏不占位置
    2. visibility: visible; visibility: hidden; 元素显示隐藏占位置
    3. overflow: hidden; 元素溢出隐藏 可解决清除浮动和外边距塌陷问题 原理是触发了BFC
    4. overflow: auto; 根据内容自动添加滚动条
    5. overflow: scroll; 添加滚动条
    6. opacity: 0; 完全透明占位置 opacity: 1; 完全不透明 
56. 过渡：
    transition: 过渡的属性 过渡时间(带单位) 速度曲线 过渡延迟时间
    transition: width 2s linear 1s;  让宽度 延迟1s后 以linear线性的方式 持续2s的时间过渡
    通常写法
    transition: all 2s;
57. 背景尺寸 背景大小 
    background-size: 背景宽  背景高;  
    background-size: 100px 200px; 代表设置背景宽度为100px 高度为200px
58. 设置版心
    .w {
           width: 1200px;
           margin: 0 auto;
    }
59. css3 新增盒子模型 box-sizing: border-box;
60. 文字阴影 text-shadow: 0 0 0 #000; 分别代表水平偏移 垂直偏移 阴影模糊程度 颜色;
61. 盒子阴影 box-shadow: 0 0 0 #000; 同上
62. 鼠标悬停  .box:hover { }
63.  /* 超出文字省略号显示 */
     white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
64. CSS书写顺序：
    1.能够改变元素显示模式的代码/控制显示与隐藏的：position,display,float
    2.关于盒子模型的：width,height,border,padding,magin
    3.关于文本内容和位置的：font-,text,color,lh
    4,。有关于CSS3小书写/小修饰：border-radius,cursor,box-shadow,transtion,transform