前端初学--"html"中的种"display"
这里是废话
刚毕业面试前端的时候,被人各种刁难!!!!fuck!!!!
记得一个面试的人问我.请详细说明display的所有属性,与他们的特征,还有不同!!
当时心中一万只泥马飞过.最后的结局已经可想而知.我成功的被pass了!!从此我立志要成为了一个面试管.然后去坑别人.
display的概念
先引用一下 w3c 中对display 的表述
display 属性 设置元素如何显示.---w3cSchool
在常用的前端布局中有display有三个属性会经常被用到[inline]","block","inline-block"
display:inline属性
- inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
-
inline元素设置width,height属性无效.
width/height效果图 -
inline元素的margin和padding属性,部份失效,图中红色线条代表失效.
*padding/margin 的特性*
最操蛋的地方:虽然在html中padding-(top/bottom),margin-(top/bottom)是无效的,但是效果中会出现以下这种情况.在gif中可以看出.所谓的padding/margin 上下部份依然生效,不过这种效果,通常却不是我们想要的.
操蛋的margin/padding
display:block属性
- block元素会独占一行.无论后边跟着的是什么.block(块)就是要单独一行.天王老子我最大.默认情况下，block元素宽度自动填满其父元素宽度。
- block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
-
block元素可以设置margin和padding属性
示例
没写完呢
先写到这.再反省反省,然后再得瑟.
