前端面试的坑-display详解

前端初学--"html"中的种"display"

这里是废话

刚毕业面试前端的时候,被人各种刁难!!!!fuck!!!!
记得一个面试的人问我.请详细说明display的所有属性,与他们的特征,还有不同!!


当时心中一万只泥马飞过.最后的结局已经可想而知.我成功的被pass了!!从此我立志要成为了一个面试管.然后去坑别人.

display的概念

先引用一下 w3c 中对display 的表述

display 属性 设置元素如何显示.---w3cSchool

在常用的前端布局中有display有三个属性会经常被用到[inline]","block","inline-block"

display:inline属性

  1. inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。
  2. inline元素设置width,height属性无效.


    width/height效果图
    width/height效果图
  3. inline元素的margin和padding属性,部份失效,图中红色线条代表失效.


    *padding/margin 的特性*
    *padding/margin 的特性*

最操蛋的地方:虽然在html中padding-(top/bottom),margin-(top/bottom)是无效的,但是效果中会出现以下这种情况.在gif中可以看出.所谓的padding/margin 上下部份依然生效,不过这种效果,通常却不是我们想要的.

操蛋的margin/padding
操蛋的margin/padding

display:block属性

  1. block元素会独占一行.无论后边跟着的是什么.block()就是要单独一行.天王老子我最大.默认情况下,block元素宽度自动填满其父元素宽度。
  2. block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
  3. block元素可以设置margin和padding属性


    示例

没写完呢

先写到这.再反省反省,然后再得瑟.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,790评论 1 92
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 2,228评论 0 8
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,540评论 1 19
  • 1.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素? 行内元素:和有他元素都在一行上,高度、行高及外...
    极乐君阅读 2,452评论 0 20
  • 上周提到这周将迎来分水岭,关键在于市场对于刘主席的信号解读。今天大盘小幅跳空高开后还会等回补缺口就一路走高,市场量...
    阿凯古阅读 229评论 0 1