(HTML+CSS基础)ife-task0001 总结！

第一次写这样的总结，轻喷！！！写写这个任务里面遇到的自己遇到的问题和解决办法！！

因为不是边写代码边写总结的，所以想到什么写什么了！！

1、刚刚开始写样式的时候，最后给一些元素重置一下样式（是不是这么说的？？？）

浏览器自带边距，首先消除。

margin:0;
padding:0;

<li>标签默认有一个点

list-style:none;

<a>标签默认有下划线，一般我们不用，颜色一般默认为黑色，大多数时候用白色，然后让它成为一个块状元素，可以省略一个div

text-decoration:none;
color: #ffffff;
display: block;

<img>标签最好也让它成为一个块状元素，可以省略一个div，有时候浏览器可能给它一个边框，一般我们不用，防止最好去除了

display: block;
border:none;

2、一般一个网站好几个网页的头部跟底部都是一样的，所以我们可以单独引入一个公共样式表，这样可以省略许多不必要的代码（这句我也不确定是不是这么说的！！！）

困得不行了，明天补完.....0.0

一般网页有一个可视化的区域（真的别喷我，我只能这么编），所以给它设一个公共的容器比较好，然后样式我就不说了。

3、清除浮动！！！

.clearfloat{
    zoom:1;
}

.clearfloat:after{
    display: block;
    clear:both;
    content:"";
    visibility:hidden;
    height: 0;
}

这两段代码是我看慕课视频的时候抄的，超级好用，很多时候我们给公共的容器都不会设高度，然后往里面放东西的时候如果脱离了文档流，说的简单点，就是容器里面的东西都是浮动的或者用了绝对定位，它就不会撑开，布局就会很乱，容器里面的东西可能就浮在你的header或者footer上面。

虽然我到现在还不是特别明白它的意思，反正就很好用，以后总会明白的是不是！！！

4、position定位的问题

以前在学校做网页的时候，感觉静态的不就那样吗，谁都会，真的，这几天从新学了一下，感觉什么都不会，以前就是div，div，div的套就是了，从来没用过定位....我真的是傻的可以，absolute绝对定位，分四个方向设它的位置，有一个参照物，参照物一般是父容器，参照物的选择是relative，它选择离他最近有relative属性的父容器。

5、居中

容器居中用，margin:0 auto ，我以前一直不知道！！！！我勒个天啊。

文字居中，没用过多行的那个，就说单行吧，text-align:center ，这个是居中，如果有高度的话，它会在贴着顶部居中，在容器*加上line-height:容器高度，就行了。

绝对定位居中，设了绝对定位以后，left:50%，这是它的左边应该是居中的，整体偏右吧，加上margin-left:负容器一般的宽度，它整体就会在中间了，负边距也是超好用的。

表格居中，父容器设display:table，想要居中的容器设，display:table-cell，vertical-align:middle,这个也是从别人那儿学的，6的不行

还有一个flex居中，不是特别明白，应该是CSS3里的，以后弄懂了在补吧，自行搜索吧！

6、负边距

这个太好用了，我也解释不清楚，搜索吧！

7、不用border-radius实现圆角矩形

http://blog.csdn.net/cindy_rain/article/details/49951799 链接在此，其实看了图大概就知道是怎么实现的了。

8、如何实现几个容易等高

有时候我们需要实现几个容器并排等高的方式，很多时候我们都不能给容器设固定高度，需要随内容增加高度，这时候，内容的不同多少都会影响它们不等高，学了一招，

给它设一个特别大的内边距，然后再用同等的外负边距拉回来，这招的原理我没懂，欢迎指点

padding-bottom:9999px;
margin-bottom:-9999px;

写这个的时候遇到一个问题就是拉不回来了是怎么回事，我当时也捣鼓了好久，父容器必须设overflow:hidden这个属性才能来回来，记得哦！

9、关于选择器

有时候有一堆相同的标签，比如说<li>吧，是吧，我们肯定会给他设相同的属性，比如上下左右的边距啊，到最后一个的时候怎么办呢，这时候选择器就很有用了，它可以帮你选到你在一群相同的标签中唯一想要改变得那一个，不举例了。。。。

10、瀑布流

我刚刚开始用的时候确实没明白，一会宽，一会高，反正都是些参差不齐的盒子要怎么排，我不知道现在理解的对不对哦，在他里面是一列一列一列的排的，如果第一例的宽度是330px，它可能第一个自容器就是330px，但是下面的又变窄了，其实是下面它又给它分开了，可能是分左右，但是整体还是330px，大概就是这样。。。。。

11、然后就没啥了，以后想起来在补吧

圆形的图片，正方形的盒子，border-radius:50% 圆图。。。

附上task0001最后的几个问题

doctype是什么，它是干啥用的？自答：声明文档类型，让浏览器知道你是用的什么版本的语言写的。。

ul，ol，dl都适合用在什么地方？自答：ul导航菜单，ol排行榜，dl底部的链接，我就知道这几个

能够娓娓道来你是怎么理解HTML语义化的？自答：让机器和人都明白你写的是什么，好像不能娓娓道来

CSS选择器有哪些？自答：我就记得我用过的那几个，其他查吧。

position都有什么值，区别是什么？自答：relative，absolute，fixed，（默认值？？？），区别？？我会用就行呗，说不出来！！太笨

经典的清除浮动代码中每一行语句都是干什么用的，为什么少了它不行？自答：我上面那个算是吗？有几句我还是说的出来的。

让一个HTML节点居中的各种实现方式？自答：会两三种吧。

神马圣杯布局，双飞翼布局都是些什么东西？自答：大概就是两边固定，中间自适应的东西。

强大的负外边距都能干嘛？自答：干的事太多了，居中，图片外延伸。。。好用的不行

不小心提起文档流的时候还能接着解释到底啥事文档流？自答：我能不小心提到我不会的吗，虽然我也不是很明白，大概就是像写文档一样挨着挨着排的，就是文档流？哈哈哈哈，当我瞎说好了

真的很多不是明白的特别清楚，欢迎给我指错，指点，刚刚起步，轻轻喷就好，谢谢！

https://github.com/yudaren007007/ife-task 我还不是很会用github，不知道地址贴错没有，别笑我！！！！这个是原封的task0001，和重构的task0001。

努力努力再努力，借借张艺兴的微博名，加油！！！！

秒客网