请选择 进入手机版 | 继续访问电脑版

技术控

    今日:30| 主题:61709
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] css之display

[复制链接]
键盘下的忧伤 发表于 2016-10-2 20:20:01
338 10
Created at 2016-08-21 Updated at 2016-10-02  CategoryFront-End   TagCSS  
  引言

  网页的所有元素,除了“块”就是“流”,而且“流”都是包含在“块”里面的(最外层的body就是一个“块”)
   

css之display

css之display-1-技术控-解决方案,display,图片,标签,而且

   在网上查找出 display 所有的属性,你会发现它有很多,但是不是每个都常用,甚至大部分你都没有用过
   

css之display

css之display-2-技术控-解决方案,display,图片,标签,而且

   看上图。常用的属性有: none 、 block 、 inline 、 inline-block 、 inherit ,其中 inherit 是继承父元素的样式
   - list-item :通过它可以模拟li列表样式;
  
       
  • table :也是一个“块”,但和 block 相比, table 具有包裹性;   
  • table-cell :最新的多列布局解决方案;  
  inline

   常用的 inline 就是文字和图片,其实 inline 真没什么好说的,大家可以把它想象成一个杯子里的水,它是“流”,是没有大小和形状的,它的宽度取决于父容器的宽度。
   因此,针对 inline 的标签,你设置宽度和高度是无效的,通过监控可以知道,该元素实际的宽度和高度都是 auto ,并不是我们设定的值
   

css之display

css之display-3-技术控-解决方案,display,图片,标签,而且

   一个很基础的问题:如何把 inline 元素转换成“块”元素?相信绝大部分人的回答是 display:block ,但是你应该知道这不是一个唯一的答案。至少我设置 display:table 也是可以的吧?
  还有两种情况你应该去了解
  第一,对inline元素设置float

   我们对 span 元素添加一个 float:left ,运行看看效果,你就会大吃一惊。从显示的效果和监控的结果上看来, span 元素已经“块”化。不要忘记 float 的“破坏性”、“包裹性”,在这里同样适用。
   

css之display

css之display-4-技术控-解决方案,display,图片,标签,而且

  第二,对inline元素设置position:absolute/fixed

   还是有同一个例子做演示,这次在 span 元素上加上 absolute/fixed ,效果大家应该能猜到,和加上 float 的效果相同。
  inline-block

   浏览器默认样式中规定了几个 html 元素为 display:inline-block ,回顾一下
   

css之display

css之display-5-技术控-解决方案,display,图片,标签,而且

   因此, inline-block 的特点可以总结为:外部看来是“流”,但是自身确实一个“块”。
刘泓材 发表于 2016-10-3 02:08:24
不怕别人笑,看贴顶贴就很好
回复 支持 反对

使用道具 举报

ry666 发表于 2016-10-3 06:29:08
珍爱生命,{username}果断回帖。
回复 支持 反对

使用道具 举报

热情是个秘密 发表于 2016-11-4 09:36:49
谁抢沙发???
回复 支持 反对

使用道具 举报

一棵枯草 发表于 2016-11-5 14:16:22
药药,切克闹!!
回复 支持 反对

使用道具 举报

重生的风信子 发表于 2016-11-9 23:06:50
要么回帖,要么捡肥皂
回复 支持 反对

使用道具 举报

liluo1991 发表于 2016-11-12 10:00:36
失而复得的东西。永远都是二手货。
回复 支持 反对

使用道具 举报

痴香 发表于 2016-11-12 21:52:43
键盘下的忧伤说的我也略懂!
回复 支持 反对

使用道具 举报

刘丽萍 发表于 2016-11-15 01:23:44
楼主已成仙,有事请求签!
回复 支持 反对

使用道具 举报

tianshi3385 发表于 2016-11-15 13:30:45
在哪里跌倒就在哪里躺下!
回复 支持 反对

使用道具 举报

我要投稿

回页顶回复上一篇下一篇回列表
手机版/c.CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 | 粤公网安备 44010402000842号 )

© 2001-2017 Comsenz Inc.

返回顶部 返回列表