html网站重构中遇到的问题

  1、定位布局与浮动布局的搭配使用，清除样式污染问题
            热销榜与人气推荐双重浮动样式影响产生
  2、具体样式
            在页面中使用查看元素查看具体样式的
  3、选择器的合理应用
            不必逐层写选择器查看，只要能保证所写的选择器找到具体的标签添加样式即可
  4、文字不换行，超出的长度用省略号代替
            {width: 160px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;}
            说明：
            white-space: nowrap 保证文本内容不会自动换行，如果多余的内容会在水平方向撑破单元格。
            overflow: hidden 隐藏超出单元格的部分。
            text-overflow: ellipsis 将被隐藏的那部分用省略号代替。

  5、使用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一样，不可见的元素会占用文档的空间。
  6、知道的网页制作会用到的图片格式有哪些？
            png-8，png-24，jpeg，gif，svg。 但是上面的那些都不是面试官想要的最后答案。面试官希望听到是 Webp。（是否有关注新技术，新鲜事物）

            科普一下 Webp：WebP 格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。 图片压缩体积大约只有 JPEG 的 2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay 等知名网站已经开始测试并使用 WebP 格式。 在质量相同的情况下，WebP 格式图像的体积要比 JPEG 格式图像小 40%。
  7、简述一下 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 方式。
  8、1）垂直居中一张图片
    vertical-align: middle

        2）文本垂直居中
            1.line-height与盒子高度一致
            2.盒子添加::after{
                    content: "";
                    display: inline-block;
                    height:     ;
                    vertical-align: middle;
                }
  9、折叠结果遵循下列计算规则：
    1. 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
    2. 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
    3. 两个外边距一正一负时，折叠结果是两者的相加的和。