背景定位浮动转换的总结

原创 2018-11-17 15:07:58 294
摘要:  通过盖章的学习让我对该课程有了更深入的认识,知道了background的复合写法,block inline inline-block三种元素之间的转换关系,也对position的相对定位relative和绝对定位absolute的认识,同时也知道float属性的两个值left和right,知道只要有浮动就一定要用clear属性的both值去清除浮动的影响;   

  通过盖章的学习让我对该课程有了更深入的认识,知道了background的复合写法,block inline inline-block三种元素之间的转换关系,也对position的相对定位relative和绝对定位absolute的认识,同时也知道float属性的两个值left和right,知道只要有浮动就一定要用clear属性的both值去清除浮动的影响;

    另外通过这一段的学习感觉HTML5他的一下属性不用直接在标签里直接写了,大部分都是通过内部样式和外部样式通过CSS去写的,后续还有JS 等知识的学习,是不是这些学过之后也会把CSS给替代掉呀?还是前段这些东西都要用的到?

小案例:

<!DOCTYPE html>

<head>

<meta charset="utf-8">

<title>float</title>

<link rel="shortcut icon" type="image/x-icon" href="../element/cat.jpg">

<link rel="stylesheet" type="text/css" href="../css/css.css">

<style type="text/css">

ul li{width:200px;height:50px;line-height:50px;background:#ccc;text-align:center;float:left;margin:0px 2px;list-style:none;}

/*用无序列表做的一个左浮动*/

.clear{clear:both;}

/*清除float影响的Div,只要有浮动必须要有清除float的影响*/

.box1{width:300px;height:100px;background:black;/*float:left;*/float:right;margin:50px 5px;}

/*用div做的一个right float,该浮动必须有class名,要与清除float效果的class区分开*/

</style>

</head>

<body>

<ul>

<li>音乐</li>

<li>电影</li>

<li>综艺</li>

<li>娱乐</li>

</ul>

<div class="clear"></div>

<div class="box1"></div>

<div class="box1"></div>

<div class="box1"></div>

<div class="box1"></div>

</body>

</html>


批改老师:灭绝师太批改时间:2018-11-17 15:13:58
老师总结:代替不掉的……清除浮动也要分情况,高度给够的情况下也可以不清除,这些后期布局的时候你会体会到

发布手记

热门词条