<div class=”v-align has-img-and-text”><img src=”./accept.png” align=”absmiddle” class=”has-text” />有图片有字</div>
垂直Margin 叠加
Html代码
<style tyep=”text/css”>
body, div {padding:0;margin:0;}
div, span {padding: 10px;margin: 10px;border: 10px solid #000;}
#div1 {background-color: red;}
#div2 {background-color: green;}
#div3 {background-color: blue;}
</style>
<div id=”div1″><div>div1</div></div>
<div id=”div2″><div>div2</div></div>
<div id=”div3″><span>span1</span><span>span2</span></div>
Background position
Html代码
<style tyep=”text/css”>
body, div {padding:0;margin:0;}
div {border:1px solid #ccc;height: 200px;width: 300px;}
#div1 {background: url(http://huoche.7234.cn/images/jb51/ixxh02tvopw.jpg) no-repeat 20px 20px;}
#div2 {background: urlhttp://huoche.7234.cn/images/jb51/ixxh02tvopw.jpg) no-repeat 20% 20%;}
#div3 {background: url(http://huoche.7234.cn/images/jb51/0pr55sucmkx.jpg) no-repeat 20% 20%;}
</style>
<div id=”div1″>20px</div><br/>
<div id=”div2″>20%</div><br/>
<div id=”div3″>20%</div>
Float 占地问题
1.父子TAG都Float以父能包含子
Html代码
<style type=”text/css”>
div.parent {border: 1px solid red;width: 600px;float: left; }
div.child {border: 1px solid green;float: left;}
</style>
<div class=”parent”>
<div class=”child”>child</div>
<div class=”child”>child</div>
<div class=”child”>child</div>
</div>
Html代码
<style type=”text/css”>
div.parent {border: 1px solid red;width: 600px;float: left; }
div.child {border: 1px solid green;float: left;}
</style>
<div class=”parent”>
<div class=”child”>child</div>
<div class=”child”>child</div>
<div class=”child”>child</div>
</div>
2.最后一个子TAG后加一clear的无语义tag
Html代码
<style type=”text/css”>
div.parent {border: 1px solid red;width: 600px;}
div.child {border: 1px solid green;float: left;}
div.clear {clear: both;}
</style>
<div class=”parent”>
<div class=”child”>child</div>
<div class=”child”>child</div>
<div class=”child”>child</div>
<div class=”clear”></div>
