web前端入门之html+css实例④之浮动（float与inline-block）

web前端入门之html+css实例④

实例④
浮动练习
思路：

1、背景+内含块
2、顶端红线+head标题
红线是图片，直接导入即可，也可以自己绘制
head为图+文字两部分
3、图标+文本*5
因为样式都是重复的，所以直接写一个就好
html

<div id="one">
	<img src="img/信息管家.gif" >
	<p>信息管家</p>
</div>

css：

.content img{
	width: 95px;
	height: 80px;
	margin-top: 9px;
	margin-left: 2px;
}
.content p{
	text-align: center;
	color: #000000;
}

4、虚线
导入图片或者自行绘制
5、底部超链接*2
同理样式重复做一个就ok
html：

<a href="">国际漫游</a>

css：

a:hover, .active{
    color: #e7788d;
}
a:link {
	color: blue;
	text-decoration:none;
}
a{
	font-size: 18px;
}

成品图：

总结一些要点：
同样也是我在做的过程之中遇到的一些问题
1、div的class和id的区别
class是一个大的类，id是一个独特的个体，定义个体时是基于class的基础之上的，所以有时候定义会不生效，应该是跟class大类的定义冲突了，class用.调用而id用#
2、block和inline
block是块类，但独占一行，如：div属于块，一个div就单独占一行，从上往下排列
而inline是从左往右排，如：span并不会但独占一行
3、a标签的四个伪类：
a:link，定义正常链接的样式；
a:visited，定义已访问过链接的样式；
a:hover，定义鼠标悬浮在链接上时的样式；
a:active，定义鼠标点击链接时的样式。

  示例：
  a:link {
    color:#FF0000;
    text-decoration:underline;
    }
    a:visited {
    color:#00FF00;
    text-decoration:none;
    }
    a:hover {
    color:#000000;
    text-decoration:none;
    }
    a:active {
    color:#FFFFFF;
    text-decoration:none;
    }

4、float和inline-block
float
缺点：全部浮动之后父类会丢失高度
解决方法，清除浮动：
1、浮动元素父类之后加一个空盒子
然后进行清除

{clear:both};

2、对父类的伪类:after进行操作：
:after{ content: ''; display: block; clear: both; }
未列举全部，很感兴趣的可以自行找来看一看
inline-block
缺点：块间空白间隙
解决方法：
1、去除代码空白：

<ul>
    <li>one</li  
    ><li>two</li  
    ><li>three</li>
</ul>

2、换行之间加上注释：

<ul>
    <li>one</li><!--  
    --><li>two</li><!--  
    --><li>three</li>
</ul>

3、父元素设置font-size为0，子元素单独再设置字体大小
未列举全部，很感兴趣的可以自行找来看一看
总结：
文档流:浮动元素会脱离文档流，并使得周围文本元素环绕这个元素。而inline-block元素仍在文档流内，因此inline-block不需要清除浮动的操作。

水平位置：因为浮动元素脱离了文档流，所以在父元素中设置定位元素对其是不生效的，但是设置inline-block的元素依然会受到父元素定位的影响，比如text-align: center，因为其本质上没有脱离文档流。

垂直对齐：inline-block元素是基线对齐，当盒子内有字体时，会根据字体对齐，如果没有字体的话，基线会默认移到盒子的底部，则该盒子会以底部对齐，可以设置vertical来改变默认基线。而float一直都是顶部对齐，使用vertical无法解决。

使用场景：有的时候我们需要对高矮不一的图片进行排列，这时候就应该用inline-block，还有制作横向导航栏时，用inline-block也会更好，因为不必处理浮动。其实两种方法都各有好处，根据自己的需求来即可，但是在一些易出问题的点子上要注意处理，比如上面的父元素坍塌问题。

实例可参考博客inline-block和float的区别

看的时候社么都明白，只有自己动手才会发现问题，实践出真知
相关资源已上传，需要的可以自行下载，共勉