关于网易校园招聘2015的一道前端CSS题
来源:互联网 发布:央视1台网络直播电视 编辑:程序博客网 时间:2024/04/29 23:33
前几天参加网易的校园招聘前端笔试的考试,虽说答得不算太糟糕,但最后还是跪了。想起来一道那时突然间不知道怎么下手的前端CSS填空题,今天拿出来跟大家分享。
题目不难,具体就是让你如何在一个不知道宽高的DIV中垂直和水平居中一个Div。好吧,我先得承认我的技术还是有点水,以至于这种题目都不能马上答上来,略水。
这里给大家说说实现,如果有不对的地方请论坛的大牛指正。
首先写主要的HTML代码
<div id="out">
<div id ="in"></div>
</div>
下面开始说说CSS样式添加:对于外层的div 可以这样写:#out{position:relative;background:#ccc;}
对于内层的DIV,自然想到先要绝对定位,然后涉及到一个小小的计算问题。这个DIV宽高分别为100px,故
#in{width:100px;height:100px;position:absolute;left:50%;top:50%;margin:-50px 0 0 -50px;background:#fcc;}
这时候,如果单纯这样是不会出现想要的效果的。虽然说out这个DIV的宽高并不知道,不过这也只是个假设,无非就是让考生不依赖父DIV的宽高去设置通用的居中对称,所以调试时我们还得给父级DIV设置一个宽高,并且这个宽高都要大于子DIV的宽高。
这样就解决了一个通用的DIV相对父级DIV水平和垂直居中的问题了。
0 0
- 关于网易校园招聘2015的一道前端CSS题
- 网易2009年校园招聘--一道关于<list>的STL题目
- 网易2009年校园招聘--一道关于<list>的STL题目
- 2015校园招聘IBM上海的一道笔试题
- 2015网易校园招聘算法题留存
- 网易2015校园招聘笔试题
- 网易校园招聘dp题
- 2015华为校园招聘机试题+1道2013年网易校园招聘笔试题
- 网易2017校园招聘笔试题 优雅的点
- 网易2017校园招聘笔试题 最大的奇约数
- 网易2017校园招聘笔试题:优雅的点
- 网易2017校园招聘笔试题:优雅的点
- 网易2018校园招聘的部分编程题
- 百度09年校园招聘交大考点的一道题
- 百度2010校园招聘中的一道有意思的笔试题
- 2015网易游戏校园招聘笔试题 研发岗
- 网易16年春季实习生招聘的一道算法题
- 优雅的点-2017网易校园招聘
- 重定向和转发的区别
- Flex+Red5 1.0流媒体服务安装总结
- 函数再理解!!
- 请阐述哪些原因会导致内存泄露(某科技公司的笔试题)
- 接口、多态
- 关于网易校园招聘2015的一道前端CSS题
- opencv编程常见问题总结
- VC6.0同时打开多个工程方法
- Cocos2d-X 碰撞检测的使用方法
- RedHat系列软件管理(第二版) --源码包安装
- 利用jquery实现Ajax技术,post方式传值中文乱码问题的解决办法。
- [LeetCode]Word Break
- Android Binder机制浅析之注册MediaPlayerService(1)
- Cocos2d-X 3.2学习——DrawNode使用注意