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的缺点,很多同学肯定很不习惯这种问答,因为平时只关注有点,这么一问就懵逼了! 本题解答的思路及要点 ① ...
随机推荐
- java Socket(TCP)编程小项目
package 服务器端相关操作; import java.io.Serializable; /* * 创建存储需要传输信息的对象,方便客户端向服务器端传送数据 */ public class Cli ...
- Javascript 闭包与高阶函数 ( 二 )
在上一篇 Javascript 闭包与高阶函数 ( 一 )中介绍了两个闭包的作用. 两位大佬留言指点,下来我会再研究闭包的实现原理和Javascript 函数式编程 . 今天接到头条 HR 的邮件,真 ...
- [Kafka] - Kafka Java Consumer实现(一)
Kafka提供了两种Consumer API,分别是:High Level Consumer API 和 Lower Level Consumer API(Simple Consumer API) H ...
- UCSC genome browser 个人track 安装
处理基因组数据,很多时候我们会觉得直接看序列文件不够直观,如果绘图的话,把n多G把数据用画图出来不仅费劲,就算操作也不方便.因此我们可以用UCSC开发出的genome browser,可以直接把数据信 ...
- 史上最全的AJAX
概述 对于web应用程序:用户浏览器发送请求.服务器接收并处理请求,然后返回结果,往往返回就是字符串(HTML),浏览器将字符串(HTML),渲染并显示浏览器上· Ajax和Form表单提交数据的的好 ...
- Selenium Web 自动化 - 项目持续集成(进阶)
Selenium Web 自动化 - 项目持续集成(进阶) 2017-03-09 目录 1 背景及目标2 环境配置 2.1 SVN的安装及使用 2.2 新建Jenkins任务3 过程分析 1 背景 ...
- JAVA反射原理解读
一.什么是JAVA的反射 1.在运行状态中,对于任意一个类,都能够知道这个类的属性和方法. 2.对于任意一个对象,都能够调用它的任何方法和属性. 这种动态获取信息以及动态调用对象的方法的功能称为JAV ...
- 唐伯猫的 sql server 2008 的安装和操作记录
在服务器win 2008 server r2 上安装sql 首先下载sql server 2008 ,云盘有存储sql,很多论坛也有下载SQLEXPRADV_x64_CHS.exe 双击sql s ...
- 作为一名JAVA程序员应该有怎样的就业思维
想要成为合格的Java程序员或工程师到底需要具备哪些专业技能,在面试之前到底需要准备哪些东西呢?面试时面试官想了解你的什么专业技能,以下都是一个合格JAVA软件工程师所要具备的. 一.专业技能 1.熟 ...
- 腾讯云数据库团队:MySQL数据库的高可用性分析
作者介绍:易固武,腾讯高级工程师,参与腾讯账号安全建设,腾讯数据仓库(TDW)优化改造,腾讯云数据库等项目,对大规模分布式存储和计算系统有浓厚的兴趣和经历 MySQL数据库是目前开源应用最大的关系型数 ...