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的区别
看的时候社么都明白,只有自己动手才会发现问题,实践出真知
相关资源已上传,需要的可以自行下载,共勉
上一篇: 前端html——float元素浮动规则
下一篇: 【栈的应用】迷宫算法(栈和回溯思想)