菜单

Web前端面试辅导(十玖):CSS样式-如何撤消成分浮动?

2019年5月8日 - 皇家前端

标题点评

核心属于相比较常问的主题材料,也是在网页设计中时时遭遇的题目,面试官希望经过如此的面试题来打探你对网页设计的基本功底,倘若如此的主题素材答不出去,必会让面试官救经引足,面试成功的概率是尤其小的。

答题思路

能够先回答在劳作上常用的排除方法,并表达为什么选择它,然后在讲一些别的的消除方法来注脚您的想想广阔,知识丰盛的1头。 浮动的措施有以下4种

 
壹.用到clear:both清除浮动

示例1:使用div

 

html代码

css代码

<div
class=”box”>

 <div
class=”div”></div>

 <div
class=”clear”></div>

</div>

.box{
width:300px;margin:0 auto;border:10px solid #000;}

.div{
width:200px;height:200px;background:red;float:left;}

.clear{
height:0px;font-size:0;clear:both;overflow: hidden;}

示例2:使用<br
clear=”all”>

<div
class=”box”>

 <div
class=”div”></div>

   <br
clear=”all”/>

</div>

.box{
width:300px;margin:0 auto;border:10px solid #000;}

.div{
width:200px;height:200px;background:red;float:left;}

亲自过问三:伪类对象::after+zoom:1(推荐使用)

<div class=”box
clear”>

 <div
class=”div”></div>

</div>

.box{margin:0
auto;border:10px solid #000;}

.div{
width:200px;height:200px;background:red;float:left;}

.clear{zoom:1;}

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

2.使用overflow属性

html代码

css代码

<div
class=”box”>

 <div
class=”div1″></div>

</div>

.box{
width:300px;border:1px solid #000;overflow:auto;}

.div1{
width:260px;height:400px;background:Red;float:left;}
注意:**overflow:auto;overflow:hidden;**都可以

 

 

 

 

3.使用display属性

html代码

css代码

<div
class=”box”>

 <div
class=”div”></div>

</div>

.box{
width:300px;margin:0 auto;border:10px solid #000;
display:inline-block;}

.div{
width:200px;height:200px;background:red;float:left;}

在意:父成分无法水平居中,在父成分使用text-align:center解决   

 

 

 

 

4.父级成分浮动

html代码

css代码

<div
class=”box”>

 <div
class=”div”></div>

</div>

.box{
width:300px;margin:0 auto;border:10px solid #000; float:left;}

.div{
width:200px;height:200px;background:red;float:left;}

只顾:父成分无法水平居中,能够使用固定化解    

position:
relative;

left: 50%;

margin-left:
-150px;

 

 

 

 

 

=

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图