每周实习总结之HTML和CSS实战一

  临近毕业了，由于自己的水平关系；投了一些大厂的校招，因为自己水平太浅基本上都挂在了笔试这一关；于是放弃了大厂这条路。开始决定好好找个公司学习沉淀一段时间，这是刚到公司的第一个周六；这一个星期基本上都在切页面，最开始的时候是给了我一张原型图练手；后面切了两天觉得我有一点点基础，于是乎把公司给客户切的模板站交给了我来切。

   遂在此记录一下切模板站时，自己遇到的但是平时没有经历的一些问题；并分享一下我是如何一步步解决我碰到的这些问题。以及问题发生的原因是什么？

1.多个span标签并列时可能(注意这里是可能)出现无法对齐的情况，就算设置了相同的高度。

出现问题的原因：因为行内块元素默认是基线对齐，如:span标签中的文字，我们有4条线进行对齐；分别是顶线、中线、基线以及底线；而我们的span默认的对齐方式就是基线对齐。所以会出现多个span或其他行内元素并列时不对齐的情况。我们可以通过vertical-align来设置对齐位置。顺便补充一句，当我们将span设置为浮动之后；就不会出现这个问题。因为浮动元素的display为block

具体有关的详细信息可以看看这篇博客的介绍：https://www.cnblogs.com/qiangspecial/p/4126842.html

2.button自带样式会多出4px高度

因为我是用的谷歌浏览器，所以谷歌默认样式button下面会多出4px的宽度(其实是border的宽度)；其他浏览器的表现形式可能有所不同。这里只讲下我的解决办法，之前一直只关注了a li标签的自带样式；button也会自带样式；我们设置border：none即可将其清除。

3.padding以及border会撑大盒模型

这里我们需要了解的是两个概念：标准盒模型和怪异盒模型  标准盒模型指的是符合w3c标准的盒模型，他的宽高由本身的content+padding+margin+border组成；而怪异盒模型宽高则由content+margin组成。一般说来使用何种盒模型由浏览器的CSS解析器决定，比如IE中使用的是IE盒模型(又称为怪异盒模型)而其他浏览器中大部分使用的都是标准盒模型。

但是我们可以通过对CSS的属性进行设置来改变默认的盒模型，从而影响我们的布局；这个属性就是box-sizing。我使用的是谷歌浏览器，在谷歌中这个值默认为:content-box。如果我们设置其为:border-box则会变为标准盒模型。

box-sizing的应用场景，目前我一般用在两个地方:1.防止padding来撑大盒子  2.当盒子需要设置边框线，又不希望边框线影响本来的宽度；特别是在百分比宽高中。

4.CSS类名不能使用数字开头，否则无效；但是不会报错 和JS类似

5.媒体查询无法生效：  空格的问题  运算符后前后要加上空格

6.浏览器横向滚动条之后出现白边的问题

因为我这里没有做自适应，写的宽度为100%；而其他地方又设置了宽度导致横向滚动条出现，默认的浏览器的宽度为视口宽度；所以其他地方会出现白边以及切割内容。解决办法，目前不怎么友好的一个方法是，设置最小宽度；这样浏览器出现水平滚动条时。设置宽度的内容区域不会被切割，最好的解决办法是将网站写成自适应。

7.inline-block元素会产生上下边距的问题

最近写网页时，写了一个有多个li的列表；并设置li的hover效果。发现每个li之间都有大约几个PX的留白，当时很纳闷在写其他列表时从来没有遇到过这个问题。后来经过检查，发现是外面包裹了一层inline-block元素；而inline-block元素会产生上下边距。所以会出现上下留白的问题，后来通过搜索 发现设置line-height设置为0即可解决

8.通过JS获取外链样式表中元素的样式时出现获取不到的情况。

最开始的时候习惯性的通过element.style.xx来获取元素的样式，但是当现在元素的样式处于外联样式表中的时候无法获取到。经过查询，发现element.style.xx只能获取到行内样式和内联样式 ；后来我找到一个方法getComputedStyle。我们可以通过这个方法来获取页面中样式最终的计算值。但是只能读不能进行更改，所以我们最后还是需要使用element.style.xx来进行设置。

需要注意getComputedStyle是window对象上的一个方法,而element.style是元素element.style上的一个属性；这是两者的区别。也是为什么getComputedStyle能够读取页面最终值样式的一个原因，关于其他的一些差别。这里先留个坑，日后再来补emmmm

关于getComputedStyle的具体介绍查看：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/getComputedStyle

9.img下部留白问题

这个问题我在这几天切图的过程中还没遇到过图片和上下元素之间没有间隙的情况，但是之前在面试题中碰到过；这个问题个人感觉其实也可以归结到span中基线对齐，原因是一样的 具体的解决方案可以查看这篇博客https://www.jianshu.com/p/2af064692505

10.span标签的水平方向间隙问题

多个span标签进行水平排列时不仅会出现不对齐的问题，而且我还碰到了两个span元素之间相隔大概2-4px间隙的问题，这里查找了一些资料；可能还是因为和span作为inline元素有关系(没有验证，只是猜测)。我们的解决办法是:1.设置font-size:0然后再在内容中设置font-size  2.多个span标签之间不换行和空格 3.可以使用float来将其变为block类型，达到了水平排列的效果

另外有兴趣的童鞋可以看一下这一片文章：http://demo.doyoe.com/css/inline-block-space/ 关于inline-block元素的间隙问题。

以上文章中由于本人水平有限，如有错误可以评论指正；欢迎大家对于技术的探讨。