CSS练习三

简答题

1. 请介绍一下盒子模型

   答：
   

2. 详细描述 CSS 优先级的计算方式。

   答：
   

3. 详细描述 block 与 inline 的区别。

   答：
   

4. 详细描述各种 position 的布局过程，并阐述每种定位的特点。

   答：
   

5. 详细描述 float 的布局过程。

   答：
   

6. 解释一下清除浮动含义以及为什么要清除浮动。

   答：
   

7. 请列举几种隐藏元素的方法（至少三种），并列出它们的区别

   答：
   第一种：display:none,
   第二步：visibility: hidden;
   第三种：opacity:0
   第四种：外层套元素，height:0px;overflow:hidden
   第五种:transform旋转+backface-visibility:hidden
   

8. 请列举几种可以清除浮动的方法（至少两种）

   答：
   

9. 介绍一下什么是雪碧图(精灵图)，并描述雪碧图的使用方式。

   答：
   指多张图像放在一个图片里面，
   这样做的优点就是方便图片管理，同时如果是多个小图片，这样可以避免后期页面上线以后，页面要从服务器上面多次加载图片
   同时也可以方便动画的处理
   

10. 为什么 relative 要保留文档流？

    答：
    

11. 详细描述父级高度坍塌现象，并答出如何解决。

    答：
    造成高度坍塌的现象只有一种情况，那就是脱流
    1.浮动脱流
      清除浮动以后就可以
    2.定位脱流
    

    TODO：BFC(block format content)

12. 详细描述外边距(margin)重合和穿透现象。

    答：
    

13. 详细描述两个图像标签并排放置时为什么中间会有缝隙产生以及解决办法。

    答：
    1.float
    2.定位
    3.父级元素display:flex
    

14. 详细描述图像标签在一个块父级元素中时底边为什么会有缝隙产生以及解决办法。

    答：
    

15. 详细描述 box-sizing 在现代浏览器中的使用场景。

    答：
    

16. 详细描述 before|after 伪类的性质与使用场景。

    答：
    

17. 详细描述动画与过度之间的区别.

    答：
    

18. CSS中动画的属性有那些

    答：
    

19. 详细描述创建 3d 变幻的必备条件。

    答：
    

20. 详细谈谈你对媒体查询的理解与使用。

    答：
    

21. 一个元素如果设置宽高属性不起作用，会是什么原因以及如何解决。

    答：
    1.元素类型为inline
    2.元素放在了弹性盒子里面，并且出现了压缩情况
    

22. 详细描述 head 与 body 的作用。

    答：
    

23. 当一个元素设置为display:flex以后，其子级元素会发生什么变化

    答：
    1.子级元素会沿着主轴排列
    2.子级元素不会换行
    3.子元素的表现类型为块级元素(block)
    

24. meta viewport是做什么用的，怎么写？

    答：
    

25. 在table里面，怎么样去掉边框与边框之间的外间距，同时，请写出table里面你所使用的标签

    答：
    

26. 请列出CSS选择器下面nth-child与nth-of-type的几种使用方法，以及这两个选择器的区别

    答：
    

27. 单行文本溢出加"…"如何实现？

    答：
    

程序题

1. 使用 CSS 绘制出一个三角形。

2. 写出至少三种让一个块元素居中的方案。

   1.内转行内块级，
     vertical-align:middle
   2.外加line-height:height
   

   弹性盒子
   

   定位+transform
   

   1.内转行内块级
   2.父外加text-align:center左右居中
     display:table-cell;
     vertical-align:middle;
   

3. 使一个浮动元素水平居中。

4. 使用CSS完成一个正方体

发挥题

1. 根据给出的效果以及素材完成页面。

素材下载

![完成效果]

1. 请使用给定的素材完成如下布局