前端面试题-10

1. display：none和visibility：hidden的区别

             

1、作用不同

            visibility: hidden----将元素隐藏，但是在网页中该占的位置还是占着。

            display: none----将元素的显示设为无，即在网页中不占任何的位置。

2、使用后HTML元素有所不同

            visibility:hidden，使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。

            display:none，使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”。

3、定义不同

            visibility 属性指定一个元素是否是可见的。

            display这个属性用于定义建立布局时元素生成的显示框类型。

2.CSS的引用方式有哪些？它们的区别？

      

1. 外部样式引入方式: link 与 @import 两种方式 。

            优势：

                一个CSS文件可控制多个页面

                易改版、便于维护

                减少代码量、代码简洁规范易于分工协作

                有效利用缓存机制

            劣势：

                相对于单页有垃圾代码

                外部引入中的href属性会给服务器造成请求的压力

 2. 内联方式: 在 HTML 标签中的 style 属性 中添加 CSS;

            优势：

                速度快，没有服务器请求压力      

                相对于外部引入单页代码量少          

            劣势：

                不易改版与维护  

                代码较乱不易前后台沟通

 3. 嵌入方式: 在 HTML 头部中的 标签 下书写 CSS 样式代码 。

            优势：

            优先级最高  

            劣势：