资讯专栏INFORMATION COLUMN

前端面试题收集

Faremax / 639人阅读

摘要:行级元素和块级元素各自代表行级元素代表块级元素代表异同行级元素中属性无效和上下无效盒子模型盒子模型有两种和盒子模型盒子模型盒子模型个人觉得盒子比较合理,和日常生活中的盒子类似中似乎发现了这个问题,进行补充上文提到的盒子上文提到的盒

CSS 行级元素和块级元素

各自代表

行级元素代表:span、a、img、input、iframe

块级元素代表:div、p、h1、ul、li

异同

行级元素中 width/height 属性无效;padding 和 margin 上下无效    

盒子模型

盒子模型有两种:W3C 和 IE 盒子模型

W3C 盒子模型:width = content

IE 盒子模型:width = content + padding + border

个人觉得 IE 盒子比较合理,和日常生活中的盒子类似

CSS3中似乎发现了这个问题,进行补充:box-sizing: content-box / border-box

content-box:上文提到的 W3C 盒子

border-box:上文提到的 IE 盒子

元素定位

四种属性:static/absolute/fixed/relative

参考对象

absolute:相对于上一个非 static 的祖先节点

fixed:相对于 window 窗口

relative:相对于默认布局的位置

static:没有(top、left、right、bottom、z-index 无效)

absolute 会脱离文档流,会占据祖先的 padding 空间

CSS 优先级

!important > style > id > class > 标签

居中

水平居中

行级:父级设置 text-align: center;

块级:自身设置 margin: 0 auto;

特殊的块级:自身有absolute,追加设置 left&right: 0

垂直居中

行级:自身设置 line-height和 height一样

块级:如果父级高度不固定,把父级 padding-top/bottom 设置成一样

     如果父级高度固定,把父级设置line-height和 height一样,
     并且自身设置 vertical-align: middle; display: inline-block

display的作用

默认

block:div、p、ul、ol、form

inline:span、a、img、input

list-item:li

弹性盒子需要在父级上设置 display: flex

清浮动

添加div到浮动兄弟节点的位置上

div.clear {height: 0;font-size: 0;clear: both: overflow:hidden}

使用

使用伪类,父元素追加class,.clear

   .clear {zoom: 1}
   .clear:after {display: block;clear: both;content: "";visibility: hidden;height: 0} 

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/87235.html

相关文章

  • 你不能错过的前端面试合集

    摘要:收集的一些前端面试题从面试题发现不足,进而查漏补缺,比通过面试更难得及各大互联网公司前端笔试面试题篇及各大互联网公司前端笔试面试题篇面试题个和个经典面试题前端开发面试题如何面试前端工程师很重要个变态题解析如何通过饿了么面试轻 收集的一些前端面试题 从面试题发现不足,进而查漏补缺,比通过面试更难得 1 BAT及各大互联网公司2014前端笔试面试题--Html,Css篇 2 BAT...

    ninefive 评论0 收藏0
  • 你不能错过的前端面试合集

    摘要:收集的一些前端面试题从面试题发现不足,进而查漏补缺,比通过面试更难得及各大互联网公司前端笔试面试题篇及各大互联网公司前端笔试面试题篇面试题个和个经典面试题前端开发面试题如何面试前端工程师很重要个变态题解析如何通过饿了么面试轻 收集的一些前端面试题 从面试题发现不足,进而查漏补缺,比通过面试更难得 1 BAT及各大互联网公司2014前端笔试面试题--Html,Css篇 2 BAT...

    darkbaby123 评论0 收藏0
  • 前端面试 - 收藏集 - 掘金

    摘要:一基础接口的意义百度规范扩展回调抽象类的意义我的前端面试经历百度前端掘金博主就读于电子科技大学,大三狗一枚面试是个漫长的过程,从海投到收获电话面试,一面二面三面,一个步骤出错那么后面就宣告终结。 一道常被人轻视的前端 JS 面试题 - 前端 - 掘金 目录前言第一问第二问变量声明提升函数表达式第三问第四问第五问第六问构造函数的返回值第七问最后前言 年前刚刚离职了,分享下我曾经出过的一道...

    lpjustdoit 评论0 收藏0
  • 求职准备 - 收藏集 - 掘金

    摘要:一基础接口的意义百度规范扩展回调抽象类的意义想不想通过一线互联网公司面试文档整理为电子书掘金简介谷歌求职记我花了八个月准备谷歌面试掘金原文链接翻译者 【面试宝典】从对象深入分析 Java 中实例变量和类变量的区别 - 掘金原创文章,转载请务必保留原出处为:http://www.54tianzhisheng.cn/... , 欢迎访问我的站点,阅读更多有深度的文章。 实例变量 和 类变量...

    cuieney 评论0 收藏0
  • 前端开发面试链接

    摘要:手册网超级有用的前端基础技术面试问题收集前端面试题目及答案汇总史上最全前端面试题含答案常见前端面试题及答案经典面试题及答案精选总结前端面试过程中最容易出现的问题前端面试题整理腾讯前端面试经验前端基础面试题部分最新前端面试题攻略前端面试前端入 手册网:http://www.shouce.ren/post/index 超级有用的前端基础技术面试问题收集:http://www.codec...

    h9911 评论0 收藏0

发表评论

0条评论

Faremax

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<