小白前端游（第二篇：视觉大师CSS）_html/css_WEB-ITnose

楼主接触前端一个月，是一只前端小白妹子，以下所说都是查阅资料听前辈讲解再加自己理解总结出来的，如果有哪里说的不对，并不介意被喷，但有问题请一定帮忙指正！万分感谢^ ^ 文章是楼主一字一字码出来的，转载请注明。本文是系列教程中的一篇，适合前端新手入门，如果感兴趣可以关注。

在上一篇中楼主简单的描述了一下对前端的看法，并对HTML做了一个描述，因为接触时间不长所以必定会有认知上的局限性，欢迎大家吐槽指正。上一篇文章的名字叫做小白前端游（第一篇：我见前端多妩媚，料前端见我应如是）感兴趣的同学可以搜一下或者点我关注查看。

---

既然上一篇提到了HTML，那这一篇就不得不说说它的好基友CSS了。江湖人常常说有人的地方就有江湖，而有HTML的地方肯定会有CSS。CSS与HTML之间的关系就好像调料包之于方便面，没有调料包的方便面虽然能吃，但是很难吃...（请无视我粗犷的语言风格，在选择了计算机专业的那一刻心中那个文青的我就已经挥刀自宫——哦不，是自杀了TAT）。

CSS，英文全称Cascading Style Sheets ，中文译作层叠样式表。

利用CSS技术可以对HTML中的元素进行修饰，例如设定颜色，字体，大小，排列等等，功能相当强大。有多强大呢？大家应该知道前端跟设计师经常闹矛盾，往往是因为设计师脑海中的设计理念跟想要传达的视觉效果被前端曲解，从而呈现出另一番样子，当然我不是说谁错，只是领域不同关注的方面不同而已。这时候CSS的功能强大就体现出来了。一句话来说，HTML与视觉设计本无缘分，全靠CSS的颜值死撑。

1.CSS是怎么定位到想要修改的元素？

通过选择器来对元素进行选择。常用的选择器有类选择器，id选择器，属性选择器，后代选择器等等。CSS中是存在继承关系的，子元素会继承父元素的样式，如果想要脱离父元素的样式，则需要为子元素重新设定样式。不理解的小伙伴可以去看一下W3School中的例子。如果并非必要，少用id选择器，因为类选择器允许重复存在，而id选择器只能唯一。而项目可能并非只有一个程序员在做。

2.浮动是什么？

浮动，float是CSS为元素添加的样式，被设置为float的元素将会漂浮起来，不再接受容器的控制，唯一的例外情况是当容器与子元素一起浮动时，子元素会接受容器的束缚，跟未浮动时一样。浮动是为页面布局时经常用到的元素。浮动的元素不在容器中时，容器将会没有内容，这时往往新手小伙伴会通过为容器设置高度来从视觉上解决这个问题，表面上解决了但是容器内依然是空的。正确的方法可以通过添加一个空的div块，设置clear：both属性来解决。

3.页面布局时需要用到哪些知识？

不讲颜色字体等等只讲布局的话，应该要注意的有以下几点：-块级元素的内边距padding，外边距margin的设定，以及通过auto来为元素进行居中处理的小技巧。-浮动：float。上面说过了，现在不多说。-绝对定位，相对定位。并不建议使用绝对定位。-覆盖，在相对定位的前提下，使用z-index为元素添加数值。数值大的优先展示。-等我想到了再补充...

4.绝大部分问题都可以通过网上查找资料解决。前端最重要的不是学会了多少知识，而是是否具备解决问题的能力。 5.一个真正的前端，永远都做不出“完美”的页面。 6.以上全是我在胡说八道。谢谢大家看到这里。