前端基础知识总结【重点】

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: 高度的一半

41. 文字属性连写 font: italic 700 16px/30px “Microsoft Yahei”
    font: 字体斜体 粗细 大小/行高 字体家族
    其中 字体大小和 字体家族是必写属性，顺序不能够调换位置

42. 子绝父相 子元素绝对定位 父元素相对定位

43. 绝对定位、固定定位、浮动不占位置，脱离标准流
    脱离标准流的元素默认宽度高度由内容撑开
    默认转换为块级元素
    margin: 0 auto;无法使其居中
    不会发生外边距塌陷的问题
    相对定位占位置
    浮动永远不会压住文字

44. 权重 ： 继承 * 通配符选择器 0 < 标签选择器、伪元素选择器 1 < 类选择器、伪类选择器、属性选择器、结构伪类选择器 10 < ID选择器 100 < 行内样式 < 1000 < !important 正无穷

45. 浮动 一般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;
       }

46. 元素的显示与隐藏

    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; 完全不透明

47. 过渡：
    transition: 过渡的属性 过渡时间(带单位) 速度曲线 过渡延迟时间
    transition: width 2s linear 1s; 让宽度 延迟1s后 以linear线性的方式 持续2s的时间过渡
    通常写法
    transition: all 2s;

48. 背景尺寸 背景大小
    background-size: 背景宽 背景高;
    background-size: 100px 200px; 代表设置背景宽度为100px 高度为200px

49. 设置版心
    .w {
    width: 1200px;
    margin: 0 auto;
    }

50. css3 新增盒子模型 box-sizing: border-box;

51. 文字阴影 text-shadow: 0 0 0 #000; 分别代表水平偏移 垂直偏移 阴影模糊程度 颜色;

52. 盒子阴影 box-shadow: 0 0 0 #000; 同上

53. 鼠标悬停 .box:hover { }

54. 超出文字省略号显示
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

55. 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