recherche

Maison  >  Questions et réponses  >  le corps du texte

javascript - css中两个基础问题想请教一下各位

在css文件中经常看到下面两种式样

display:block;

float:left;

感觉看了写资料和写了demo还是没能理解这两个式样具体的作用,一般什么时候需要用到这两个式样呢?请各位大大们不吝赐教

怪我咯怪我咯2897 Il y a quelques jours395

répondre à tous(8)je répondrai

  • 怪我咯

    怪我咯2017-04-10 13:14:07

    LZ的问题:

    一切皆为框
    p、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容,即“块框”。与之相反,span 和 strong 等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”。
    您可以使用 display 属性改变生成的框的类型。这意味着,通过将 display 属性设置为 block,可以让行内元素(比如 <a> 元素)表现得像块级元素一样。还可以通过把 display 设置为 none,让生成的元素根本没有框。这样的话,该框及其所有内容就不再显示,不占用文档中的空间。
    ——《W3School:CSS 定位》

    块框和行内框有明确的包含关系:

    • 块框可以包含块框
    • 行内框可以包含行内框
    • 块框可以包含行内框
    • 行内框不应该包含块框(若违法这条规则,结果很复杂,但绝对难以达成想要的效果)

    更多区别:

    • block元素默认宽度自适应于外层,而inline元素宽度自适应于内部
    • block元素默认从上往下铺排,inline元素默认从左往右铺排
    • block元素可以设置上下margin,inline元素不可以

    至于float,它主要是为了满足环绕的效果,请阅读:CSS float浮动的深入研究、详解及拓展(一)、(二)。

    由于LZ缺的知识点太多,这里实在是写不完。还是建议完成w3school的相关课程学习,和codecademy的CSS Positioning类目下的课程。

    如果LZ有英文阅读能力,在实践后可以以这篇文章来指导知识的深化:《【译】理解 CSS 规范》


    下面主要是反驳“块级元素前后会带有换行符”的误导性观点。

    CSS的问题,越基础,就越容易出现误解。

    “块级元素前后会带有换行符”这种说法应该是来自于实战,用类比的方式做了相应知识点的内化。读到这句话,大家也可以很轻松地联想起word之类的文本排版软件的操作:
    Q: 如果我有文字段A和文字段B,我想让A和B左右不交叠,折开一行,我该怎么办?
    A: 按回车。
    Q: 如果我有文字段C和图片D,我想让D不出现在C中间,从C下延排起,我该怎么办?
    A: 按回车。

    是这样的吗?把word之类的文本排版软件的思维带到HTML里面来,下面的思维应该很常见:
    - 在两个元素之间死命摁回车,想让两个元素上下隔得远一些
    - <br>标签放在任意两个元素之间,想让两个元素上下隔得远一些。http://jsfiddle.net/humphry/3Lk2Q/

    我敢相信到现在都有人是用<br>(或者另外一个有高度的<p>标签)而非margin来做的垂直间隔。用Word的方式来理解HTML,用<br>来做间隔,等到试验出来用font-sizeline-height去控制<br>的高度,以调节两个p之间的垂直距离的时候,就彻彻底底被带到沟里去了。(《你真的了解HTML吗》)


    “块级元素前后会带有换行符”的误导性大于它的帮助,LZ甚至已经问出了“如果是display:inline;的话那元素没有换行符就会全挤在一行上是吗?”这样的问题。

    换行符不是重点,重点是盒子。

    要正确理解CSS排版中的这个基础部分,得先从文档流开始。

    CSS为了达到日常排版的需求,给予了文档流以现实依据:我们的书写/阅读习惯:

    (上面有个图,因为是GIF可能加载比较慢,注意看哟。)

    文档流如同河流一般,将元素带向相应的屏幕位置。普通的,正常的,大众的文档流,就像是上面这个动画所示的,首要的铺排是:从左往右。次要的铺排是:从上到下。

    为何我要强调普通的,正常的,大众的呢?因为有的语言是这样的:

    这里就展现了从右向左,从上到到下的语言书写。因此跟这个世界的现象一致,文档流的顺序不总是从左往右从上到下,一系列属性可以改变它,不过我们这里不谈这个,我们只谈常规流。

    CSS中的文档流中的两种元素,行内框的堆叠方向对应着我们的书写顺序,而块框则默认从上往下堆叠:

    • 行内框——inline——从左往右,从上往下
    • 块框——block——从上往下

    换行在这个顺序中重不重要?不重要,这个过程中,重点是框往哪个方向堆叠。

    更加深入的常规流介绍:《w3help:常规流( Normal flow )》


    前端是一个由实践发展起的方向,相关知识点的理解大家经常用的是类比,这很正常。盒子堆叠的机制用类比,说成是换行符,对不对呢?

    对也不对。
    说对,是因为,让盒子不左右交叠、而是上下比邻的机制跟文本排版软件里面的回车分割确实相似;
    说不对,是因为,如果理解到了盒子的层面,理解了块级元素和行内元素是如何按照文档流方向进行排版,理解了float元素是如何做到环绕,理解了浮动和清除浮动,就会明白,“块级元素天生自带换行符”的说法带有根深蒂固的Word排版的思想,也很有误导性。

    最好的理解CSS和HTML的办法,是用CSS和HTML的方式进行思考,而不是用其他的经验来套。这就像是英语口语,有英语思维,才能流利地表达。


    更新:感谢P酱,这里将容易混淆的部分修改了。“行内框不应该包含块框”是CSS相关,标签无关的,“默认是行内的元素不应该包含默认是块级的元素”跟DTD声明和浏览器有关。但总体来说,破坏这两条规则很难达成想要的效果。

    répondre
    0
  • 天蓬老师

    天蓬老师2017-04-10 13:14:07

    display: block;
    

    此元素将显示为块级元素,此元素前后会带有换行符

    display: none;
    

    此元素不会被显示。

    display: inline;
    

    默认。此元素会被显示为内联元素,元素前后没有换行符。

    float: left
    

    例子:segmentfault 的导航栏,撰写消息可以使用float: left,当然之前可以定下整个的宽度。

    可以去了解下,页面的整体布局,块状元素;浮动也是css重要的概念,也要注意什么时候清除浮动。

    répondre
    0
  • 黄舟

    黄舟2017-04-10 13:14:07

    补充一个知识点,float:left/right,会把元素强制转换为块级元素也就是display:block了。

    répondre
    0
  • ringa_lee

    ringa_lee2017-04-10 13:14:07

    楼主不明白这两个属性是做什么的,可能是基础只是没有理解,实战不够,建议先理解CSS中的盒模型

    网页中的所有元素,也就是HTML中的p, h1, p, 等等元素,都可以理解成一个盒子;有些盒子的宽度默认是100%(block, 块),有的盒子的宽度是根据其中内容的宽度自适应的(inline, 行内); 当然,display: none, 就把这个元素隐藏了;

    display是个很重要的属性,这个属性有很多值,像block, inline, inline-block(兼), table, table-cell, table-row, none;

    如果你理解了浏览器的渲染机制, float就很容易理解了, float, position: absolute|fixed等几个常用的属性,都会使元素脱离正常的文档流, 你可以将浏览器渲染想成一张纸, HTML元素根据自身的特性一个一个画到纸上,但是当遇到float等元素的时候, 就在纸的"上"面, 不在纸上画.....不明白再问吧.....

    répondre
    0
  • 黄舟

    黄舟2017-04-10 13:14:07

    display 是设置显示方式,float是设置浮动、例如左右浮动。例如,导航就经常用到这两个,导航一般都用无需列表来做,设置float就可以把导航横放,再设置子菜单display:none,当hover的时候display就显示。

    répondre
    0
  • 阿神

    阿神2017-04-10 13:14:07

    display:block,把元素的显示方式修改为块级元素,即元素独占一行,同时可以设定宽高;
    float:left ,是设置元素的浮动为左浮动

    répondre
    0
  • PHPz

    PHPz2017-04-10 13:14:07

    要了解display:block楼主可以先学习元素块和内联的区别http://www.w3cfuns.com/article-255-1-1.html
    float:left;的话去学习下http://www.w3cfuns.com/article-255-1-1.html

    个人建议楼主学习下基础

    répondre
    0
  • 大家讲道理

    大家讲道理2017-04-10 13:14:07

    display:block和display:inline对应,通俗点说,block不需要撑开,能直接设置margin或是width或height,而inline则不能做到,float:left一般用在横向导航条中,当然也可以用display:inline-block实现

    répondre
    0
  • Annulerrépondre