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的控制,我们可以打 ...
随机推荐
- sqlalchemy中使用event设置条件触发短信与邮件通知
一.原因 近期在做短信与邮件通知系统.使用到了这一块.例如,当订单完成以后进行邮件短信的通知.虽然可以采用直接调用接口的方式实现,但有几个原因让我希望使用条件触发的方式 1.由于系统中支持线上线下以及 ...
- 【算法笔记】B1050 螺旋矩阵
1050 螺旋矩阵 (25 分) 本题要求将给定的 N 个正整数按非递增的顺序,填入“螺旋矩阵”.所谓“螺旋矩阵”,是指从左上角第 1 个格子开始,按顺时针螺旋方向填充.要求矩阵的规模为 m 行 ...
- bzoj 4032(A的一个最短的子串,它不是B的子串 || A的一个最短的子串,它不是B的子序列 || A的一个最短的子序列,它不是B的子串||A的一个最短的子序列,它不是B的子序列)
在虐各种最长公共子串.子序列的题虐的不耐烦了之后,你决定反其道而行之. 一个串的“子串”指的是它的连续的一段,例如bcd是abcdef的子串,但bde不是. 一个串的“子序列”指的是它的可以不连续的一 ...
- HihoCoder - 1513 bitset处理五维偏序
题意:给出\(n<3e4\)个有序组\((a,b,c,d,e)\),求对第\(i\)个有序组有多少个\(j\)满足\((a_j<a_i,b_j<b_i,c_j<c_i,d_j& ...
- DedeCMS实现自定义表单提交后发送指定QQ邮箱的方法
如月cruyue在做DedeCMS自定义表单发送邮箱的教程,发现大部分都是在php文件里写死固定字段内容,这样虽然也能实现自定义表单提交后发送指定邮箱,但是很不智能,如月cruyue想要一个我们自定义 ...
- awk练习
首先,了解awk的运行格式 awk '条件类型1{动作1} 条件类型2{动作2} ...' filename 1. [root@server3 mnt]# cat passwd root x 0 0 ...
- HTML基础信息笔记
HTML 是什么 HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 标签(tag) HTML 标签是由尖括号包围的关键词,比如 <html> ...
- oracle模糊查询提高效率的方法
转载:https://blog.csdn.net/weixiaohuai/article/details/83513957 https://blog.csdn.net/chihen/article/d ...
- 描边shader(法线外拓)
描边的思路是需要两个pass.第一个pass让顶点沿着法线方向延伸出去,使得模型变大一圈.第二个pass正常渲染,让正常渲染的模型挡在第一个pass之上,这样就会露出延伸出去的部分,延伸出去的就是我们 ...
- (转)Http状态码301和302概念简单区别及企业应用案例
Http状态码301和302的区别及企业应用案例 原文:http://blog.51cto.com/oldboy/1774260 1.什么是301重定向? 301重定向/跳转一般,表示本网页永久性转移 ...