Web前端面试指导(十四):如何居中一个元素(正常、绝对定位、浮动元素)?
题目点评
这道题目的提问比较多,连续问了三个问题,正常元素、绝对定位元素、互动元素如何居中,而且居中没有说清楚是垂直居中还是水平居中,要回答清楚这个问题,必须得有深厚的功底,而且要分类的来回答,条理要清楚。可以先把水平居中各种情况说清楚,然后在把垂直居中说清楚。
(一)元素水平居中的方式
1)行级元素水平居中对齐(父元素设置 text-align:center)
- <div style="width: 200px; height: 100px;border: 1px solid;text-align:center;">
- <span>行级元素垂直居中</span>
- </div>
2) 块级元素水平居中对齐(margin: 0 auto)
- <div style="width: 200px; height: 100px;border: 1px solid;text-align: center;">
- <div style="border: 1px solid red;margin: 0 auto;height: 50px;width: 80px;"> 块级元素水平居中</div>
- </div>
3)浮动元素水平居中
- 宽度不固定的浮动元素
html代码
- <div class="outerbox">
- <div class="innerbox">我是浮动的</div>
- </div>
CSS样式
- .outerbox{
- float:left;
- position:relative;
- left:50%;
- }
- .innerbox{
- float:left;
- position:relative;
- right:50%;
- }
- 宽度固定的互动元素
html代码
- <div class="outerbox">
- <div>我是浮动的</div>
- </div>
css代码
- .outerbox{
- background-color:pink; /*方便看效果 */
- width:500px ;
- height:300px; /*高度可以不设*/
- margin: -150px 0 0 -250px; /*使用marin向左移动250px,保证元素居中*/
- position:relative; /*相对定位*/
- left:50%;
- top:50%;
- }
4)让绝对定位的元素水平居中对齐
auto; /*水平居中*/
left: 0; /*此处不能省略,且为0*/ right: 0; /*此处不能省略,且为0*/ }
经验分享:水平居中的主要属性有
1. text-alin:center;
2. margin:0 auto
3. position:relative|absolute; left:50%;
(二)元素垂直居中对齐
1)对行级元素垂直居中(heiht与line-height的值一样)
- height:300px;
- line-height:300px;
2)对块级元素垂直居中对齐
2.1 父元素高度固定的情况
1)父元素的height与line-height值相同
2)需要垂直居中的元素
vertical-align:middle;// 垂直居中对齐
display:inline|inline-block 块级元素转行级元素
HTML代码
- <div class="center">
- <div class="inner"></div>
- </div>
CSS代码
- .center{
- width: 500px;
- height:300px;
- line-height: 300px;
- border:1px solid;
- }
- .inner{
- background: blue;
- width: 300px;
- height: 100px;
- display: inline-block;
- vertical-align: middle;
- }
2.2 父元素高度不固定的情况
父元素的padding-top和padding-bottom一样
Web前端面试指导(十四):如何居中一个元素(正常、绝对定位、浮动元素)?的更多相关文章
- Web前端面试指导(十):元素定位有哪些?
本题点评 在web前端中,元素定位是必须掌握的,是网页制作的必备技能,也是衡量是否为一个合格的web前端开发的标准之一,在网页设计中,很多地方都需要使用定位,例如菜单弹出,提示信息层等都需要定位.所以 ...
- Web前端面试指导(十九):CSS样式-如何清除元素浮动?
题目点评 本题属于比较常问的题目,也是在网页设计中经常遇到的问题,面试官希望通过这样的面试题来了解你对网页设计的基本功底,如果这样的题目答不出来,必会让面试官大失所望,面试成功的概率是非常小的. 答题 ...
- Web前端面试指导(十六):为什么要初始化CSS样式?
题目点评 这个题目乍一看感觉怪怪的,什么叫初始化样式了?如果换一句话你可能就理解了,就是通用样式.这道题目主要涉及的是理论方面的知识,不用写代码,只要描述清楚就可以了 初始化样式的原因 因为浏览器的兼 ...
- Web前端面试指导(十八):用纯CSS创建一个三角形的原理是什么?
题目点评 三角形的图标在网页设计是很常见的,属于基本常识题,只要在练习做到过这个功能都能回答出来,可以把你做过的思路描述出来就可以了,本题的难易程度为简单 答题要点 1.采用的是均分原理 盒子都是一个 ...
- Web前端面试指导(十五):CSS样式-display有哪些作用?
题目点评 其实就是要你说清楚该属性有哪些值,每个值都有什么作用,这个题目可以答得很简单,但要答全也并非是一件容易的事情. 元素默认的display值的情况如下(这个一般很少人注意这一点) block( ...
- Web前端面试指导(十二):::before 和:before有什么区别?
题目点评 这个问题看来很简单,但如果之前没有琢磨这个问题,给人感觉也是门头一垂,听到这个题目就懵逼了,因为原来从来没有注意过这个问题,即便有注意这个问题也不能很好的回答清楚.回答的技巧就是从相同点和不 ...
- Web前端面试指导(九):盒子模型你是怎么理解的?
问题分析 这道题问得比较宽泛,一定要找准切入点,如果切入点找不准,很容易乱答,甚至答偏,所以找准切入点是非常的重要的. 解答思路 1)盒子模型有两种,W3C和IE盒子模型 (1)W3C定义的盒子模型包 ...
- Web前端面试指导(二十):JavaScript中如何翻转一个字符串?
题目点评 字符串作在程序中是非常常见的,因为程序中绝大部分的数据都可以当作字符串来处理.需要对字符的处理方法比较熟悉,在回答的时候尽量能够说出多种解决方法更好! 字符串翻转的方法 1)使用字符串函数 ...
- Web前端面试指导(八):iframe有那些缺点
本题的特点 这道题目的特点就是不按照正常的套路来提问,一般都是问优点,这里比较反常问iframe的缺点,很多同学肯定很不习惯这种问答,因为平时只关注有点,这么一问就懵逼了! 本题解答的思路及要点 ① ...
随机推荐
- winform连接oracle时Oracle.DataAccess.dll版本问题
1.通用TestOracle.zip部署到iis上,或直接运行程序测试当前全局程序集 protected void Button1_Click(object sender, EventArgs e) ...
- Ext Js详解指南
什么是Ext JS 走进Ext的世界 Ext JS是一款富客户端开发框架它基于javascript.HTML和CSS开发而成,无需安装任何插件即可在常用浏览器中创建出绚丽的页面效果. 个人总结Ext ...
- EM and GMM(Code)
In EM and GMM(Theory), I have introduced the theory of em algorithm for gmm. Now lets practice it in ...
- HBase介绍
欢迎和大家交流技术相关问题:邮箱: jiangxinnju@163.com博客园地址: http://www.cnblogs.com/jiangxinnjuGitHub地址: https://gith ...
- SaberRD之蒙特卡罗分析(一)
[声明]本博文的大部分内容摘录于网络,本人按照自己的思维习惯和文字风格进行了重新整理以便于理解和记忆. 鉴于篇幅,我打算先对蒙特卡罗分析的基本思想和历史渊源做一下简单的梳理,然后在下一篇博文中介绍Sa ...
- Java Calendar.set 方法设置时间的问题
因项目需要,需要遍历一年中的其中几个月,获得每个月的用户数量. 变量有:开始时间--startDate,结束时间--endDate. 逻辑很简单:获取到开始时间的月份和结束时间的月份,然后得到月份差 ...
- 每天一个Linux命令(09)--touch命令
linux的touch命令不常用,一般在使用make的时候可能会用到,用来修改文件时间戳,或者新建一个不存在的文件. 1.命令格式: touch [选项]··· 文件··· 2.命令参数: -a 或 ...
- struts2.5新配置动态调用
开启动态调用: <constant name="struts.enable.DynamicMethodInvocation" value="true"/& ...
- ajax跨域请求时,sessionId不一样,导致无法记住登陆状态
遇到这样一个场景,就是前端的域是dev,请求接口时,接口的域是beta,即使在服务端设置了cookie存放的域,'COOKIE_DOMAIN' => '.roboming.com',虽然c ...
- 徒手用Java来写个Web服务器和框架吧<第三章:Service的实现和注册>
徒手用Java来写个Web服务器和框架吧<第一章:NIO篇> 徒手用Java来写个Web服务器和框架吧<第二章:Request和Response> 这一章先把Web框架的功能说 ...
