html+css小常识总结

1. 应用CSS暗藏HTML元素的4种罕用办法

1) visibility: hidden是许多人在暗藏某个HTML元素时的首选。如页面中图片不见了，然而也没中原来图片的地位留下了一片空白区域。这个属性只是简略的暗藏某个元素，然而元素占用的空间任然存在。
设置visibility: visible能够使暗藏的元素变为可见。

2) 设置opacity: 0能够使一个元素变得齐全通明，从而制作出和visibility: hidden一样的成果。opacity和visibility相比，其劣势在于它能够被transition和animate。
通常能够应用opacity属性来制作元素的淡入淡出成果。
设置opacity:1能够使通明元素变得可见。

3) position: absolute
最古老和最规范的做法是设置元素的相对定位来暗藏元素。这种技术使元素脱离文档流，处于一般文档之上，并给它设置一个很大的left负值定位，使元素定位在可见区域之外。float和margin都不能影响到position: absolute的元素，因而它们能够很好的被暗藏起来。
在制作一些元素的直线动画时，应用这种技术是最好的办法。
要使元素再次变得可见，能够增大left的值，使元素呈现在屏幕上。

4) display: none
display: none也是一个十分老的技术，它是position: absolute和visibility: hidden; 的折中办法，元素会变得不可见，并且不会再占用文档的空间。
display: none在制作手风琴成果时非常有用。
将元素设置为display: block或其它值能够使元素再次可见。

除了下面形容的4种办法之外，还有其它办法能够暗藏元素，特地是应用CSS3的时候。例如：你能够应用scale属性来缩小元素的尺寸直到它隐没。然而scale属性和opacity: 0和visibility: hidden一样，不可见的元素会占用文档的空间。

2.晓得的网页制作会用到的图片格式有哪些？

png-8，png-24，jpeg，gif，svg。然而下面的那些都不是面试官想要的最初答案。面试官心愿听到是 Webp。（是否有关注新技术，陈腐事物）

科普一下 Webp：WebP 格局，谷歌（google）开发的一种旨在放慢图片加载速度的图片格式。图片压缩体积大概只有 JPEG 的 2/3，并能节俭大量的服务器带宽资源和数据空间。Facebook Ebay 等出名网站曾经开始测试并应用 WebP 格局。在品质雷同的状况下，WebP 格局图像的体积要比 JPEG 格局图像小 40%。

3.简述一下 src 与 href 的区别。

src 用于替换以后元素，href 用于在以后文档和援用资源之间确立分割。 src 是 source 的缩写，指向内部资源的地位，指向的内容将会嵌入到文档中以后标签所在地位；在申请 src 资源时会将其指向的资源下载并利用到文档内，例如 js 脚本，img 图片和 frame 等元素。 <script src =”js.js”></script> 当浏览器解析到该元素时，会暂停其余资源的下载和解决，直到将该资源加载、编译、执行结束，图片和框架等元素也如此，相似于将所指向资源嵌入以后标签内。这也是为什么将 js 脚本放在底部而不是头部。 href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建设和以后元素（锚点）或以后文档（链接）之间的链接，如果咱们在文档中增加 <link href=”common.css” rel=”stylesheet”/> 那么浏览器会辨认该文档为 css 文件，就会并行下载资源并且不会进行对以后文档的解决。这也是为什么倡议应用 link 形式来加载 css，而不是应用@import 形式。

4.垂直居中一张图片

html代码：<div class="pic">    <img src="./wyyx/img/bg_2.png" alt="">  </div>css代码：.pic {      width: 300px;      height: 300px;      background-color: aqua;      text-align: center;      /* line-height: 500px; */      display: table-cell;      vertical-align: middle;    }

5.折叠后果遵循下列计算规定：

两个相邻的外边距都是负数时，折叠后果是它们两者之间较大的值。
两个相邻的外边距都是正数时，折叠后果是两者绝对值的较大值。
两个外边距一正一负时，折叠后果是两者的相加的和。