带你学前端（一）：html+css篇

最近个人也带过几个算是学徒吧，在教他们的过程中，一方面也发现了一些自己的不足，一方面也发现了一些新手在学习过程中比较容易发生问题的一些地方。自己就会找一些比较经典的例题，帮助他们理解问题，解决问题。

首先是内联元素和块级元素的区别。大家普遍知道的区别是，块级元素占一行。但是，我们在实际应用当中，通常会遇到比较复杂的html结构，块级元素和内联元素混合搭配使用。

举个例子：

天猫截图

这是从天猫截图下来的，"更多"后面有个图标。按照要求是整行都要垂直对齐。其实整行对齐很简单，暴力点就line-height等于高度，就可以实现垂直对齐，利用margin或padding都可以实现。

这里需要请注意一点，内联元素如果直接给height是不起任何效果的。这里给大家举个例子

源码 页面渲染效果

这里虽然规定了span的高度和内外补白，但是高度显然没有起作用，原因是因为span作为内联元素是不能直接接收height属性的。

针对这样的问题，我们需要将span的默认display属性设置为inline-block，那么inline-block到底是什么意思呢？

首先我们来总结一下display属性的常用值都是什么意思

block  元素会默认占新起一行，简而言之就是会将元素改变成为块级元素。

inline   与block相反，元素不会独占一行，多个元素会一直向后排列，意思就是内联元素。

none   意思就是此元素不会显示，也不会占用占位符。这里需要特别说明一下css中有visibility也是用来设置元素可见性的，当visibility为hidden时，元素是不可见的，但是元素还是会占用原来的位置，而display：none这不会占用占位符，就是说不会占用原来的位置。

inline-block  这个值简单来说就是将元素作为inline来呈现，但是其内容做为block来呈现。也就是结合了inline和block，所以当元素的display属性是inline-block时，就可以接受height等css属性。

需要注意的是，将内联元素设置浮动也可以解决我们的问题，但是需要对float属性理解同样深。

我们继续说我们上面的需求。

是不是我们解决了垂直剧中就可以完成了上面的需求呢，答案是并不一定。因为在更多后面，还有一个小图标。通常初学者还没有掌握，雪碧图，字体图标这种技术，所以我们会使用一张图片来代替。但是图片和文字并排时，文字并不会与图片垂直剧中，这是初学者在布局时会经常碰到的问题。在给img标签设置完margin后，会发现文字也跟着图片一起发生了位置上的变化。

简单暴力的方法我们可以通过给图片添加position：relative;将top值设为负数后微调即可实现，但是治标不治本。

这里推荐给新手一个方法，将img标签外，再包一层内联元素，如<i>标签这样的元素，将其display设置为inline-block，这样做的好处是，可以将图片与文字剥离开，那么如果我们想要单独控制img标签的位置时，只需要控制<i>标签的位置就可以了。

初学者在制作各种各样的页面时，会碰到不同的问题，希望大家能够在初学时就树立起一个最佳配置的代码习惯。当然，一千个人心中有一千个哈姆雷特，笔者所教的方法并不一定是最佳方案，但是希望各位同学能在本着的内容中吸收一些有用的东西，能够确确实实的帮助大家在学习过程中遇到的问题。

笔者会一直更新内容，希望能切切实实的帮助到一些正在入门的同学。html和css是前端的重中之重，希望大家在学习的时候能够扎扎实实的打好自己的基础，不要盲目的渴望学习js而丢弃这些基础，因为js最终也是为页面的dom树服务的，所以请不要盲目激进，稳扎稳打。