Web前端面试指导(十九):CSS样式-如何清除元素浮动?
题目点评
本题属于比较常问的题目,也是在网页设计中经常遇到的问题,面试官希望通过这样的面试题来了解你对网页设计的基本功底,如果这样的题目答不出来,必会让面试官大失所望,面试成功的概率是非常小的。
答题思路
可以先回答在工作上常用的清除方法,并说明为什么使用它,然后在讲一些其它的清除方法来说明你的思维广阔,知识丰富的一面。 浮动的方式有以下4种。
1.使用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 |
|
<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;} |
示例3:伪类对象::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;} |
|
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; |
|
Web前端面试指导(十九):CSS样式-如何清除元素浮动?的更多相关文章
- Web前端面试指导(十三):css样式的优先级是怎么样的?
题目点评 CSS样式的优先级规则给人的感觉总是摸不透,更不用说怎么去表达了,在网络上流传着很多版本,描述的都很复杂也不全面,看了之后还是不满意.我来给大家介绍一个比较系统.全面有比较容易记住的规则吧! ...
- Web前端面试指导(十四):如何居中一个元素(正常、绝对定位、浮动元素)?
题目点评 这道题目的提问比较多,连续问了三个问题,正常元素.绝对定位元素.互动元素如何居中,而且居中没有说清楚是垂直居中还是水平居中,要回答清楚这个问题,必须得有深厚的功底,而且要分类的来回答,条理要 ...
- Web前端面试指导(十五):CSS样式-display有哪些作用?
题目点评 其实就是要你说清楚该属性有哪些值,每个值都有什么作用,这个题目可以答得很简单,但要答全也并非是一件容易的事情. 元素默认的display值的情况如下(这个一般很少人注意这一点) block( ...
- Web前端面试指导(十):元素定位有哪些?
本题点评 在web前端中,元素定位是必须掌握的,是网页制作的必备技能,也是衡量是否为一个合格的web前端开发的标准之一,在网页设计中,很多地方都需要使用定位,例如菜单弹出,提示信息层等都需要定位.所以 ...
- Web前端面试指导(十六):为什么要初始化CSS样式?
题目点评 这个题目乍一看感觉怪怪的,什么叫初始化样式了?如果换一句话你可能就理解了,就是通用样式.这道题目主要涉及的是理论方面的知识,不用写代码,只要描述清楚就可以了 初始化样式的原因 因为浏览器的兼 ...
- Web前端面试指导(十八):用纯CSS创建一个三角形的原理是什么?
题目点评 三角形的图标在网页设计是很常见的,属于基本常识题,只要在练习做到过这个功能都能回答出来,可以把你做过的思路描述出来就可以了,本题的难易程度为简单 答题要点 1.采用的是均分原理 盒子都是一个 ...
- Web前端面试指导(十二):::before 和:before有什么区别?
题目点评 这个问题看来很简单,但如果之前没有琢磨这个问题,给人感觉也是门头一垂,听到这个题目就懵逼了,因为原来从来没有注意过这个问题,即便有注意这个问题也不能很好的回答清楚.回答的技巧就是从相同点和不 ...
- 进击的Python【第十三章】:Web前端基础之HTML与CSS样式
进击的Python[第十四章]:Web前端基础之HTML与CSS样式 一.web框架的本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客 ...
- web前端(7)—— 了解CSS样式,引入css样式的方式
CSS 在前面大概的介绍了css,从本片博文开始,会详细的介绍它,在最开始介绍web前端时,打开百度首页,当时我提出了一个问题,为什么百度首页的输入框可以放在正中间,就是由于有css的控制,我们可以打 ...
随机推荐
- luogu4383 [八省联考2018]林克卡特树(带权二分+dp)
link 题目大意:给定你 n 个点的一棵树 (边有边权,边权有正负) 你需要移除 k 条边,并连接 k 条权值为 0 的边,使得连接之后树的直径最大 题解: 根据 [POI2015]MOD 那道题, ...
- linux 内核知识参考
内存映像 kcore:http://blog.csdn.net/dog250/article/details/5303663 elf文件 :http://www.cnblogs.com/xmphoen ...
- 2016级算法第三次上机-B.Bamboo和巧克力工厂
B Bamboo和巧克力工厂 分析 三条流水线的问题,依然是动态规划,但是涉及的切换种类比较多.比较易于拓展到n条流水线的方式是三层循环,外层是第k个机器手,里面两层代表可切换的流水线 核心dp语句: ...
- MVC 提交List 集合 注意对应的参数名称
public void AddMovieInfos(List<MoviesInfo> movies) { foreach (var item in movies) { dal.Add(it ...
- FPGA基础学习(9) -- 复位设计
目录 1. 常见问题 2. 常见的复位方式 3. 合理的复位设计 3.1 复位电平 3.2 异步复位同步化 3.3 恰到好处的复位 4. 补充 4.1 所谓的上电初始化 参考文献 一开始接触到FPGA ...
- docker 查看容器信息---格式化
镜像,ID,端口号,状态 docker ps -a --format "table {{.Image}}\t{{.ID}}\t{{.Ports}}\t{{.Status}}" 列出 ...
- Shell检查程序是否正常,并显示出程序启动时间、执行时间
项目中多个实例,而每个实例均启动一个程序,本脚本将多个程序统一进行监控,并支持文件配置 #!/bin/sh bin=$(cd ``;pwd) cd ${bin} ### 定义检查函数 chkProgr ...
- UML-6.1-用例-示例
1.总览要点:用例.摘要.非正式.详述.测试用例.用例分析与迭代联系起来. 2.示例:Process Sale 1).客户携带所购商品到达收银台. 2).收银员使用pos系统记录每件商品. 操作契约: ...
- golang bufio.Scanner
一, 我们一般会这么用,接收 标准输入的东西: scanner := bufio.NewScanner(os.Stdin) for scanner.Scan() { fmt.Println(scann ...
- OpenCV Intro - Perspective Transform
透视变换(Perspective Transformation)是将图片投影到一个新的视平面(Viewing Plane),也称作投影映射(Projective Mapping).通用的变换公式为: ...