• css学习1


    1
    一切皆为框
    div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容,即“块框”。与之相反,span 和 strong 等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”。
    您可以使用 display 属性改变生成的框的类型。这意味着,通过将 display 属性设置为 block,可以让行内元素(比如 <a> 元素)表现得像块级元素一样。还可以通过把 display 设置为 none,让生成的元素根本没有框。这样的话,该框及其所有内容就不再显示,不占用文档中的空间。
    2
    行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是,垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框(Line Box),行框的高度总是足以容纳它包含的所有行内框。不过,设置行高可以增加这个框的高度。

    3 align-content对齐灵活的 <div> 元素的各项:
    Internet Explorer、Firefox 和 Safari 不支持 align-content 属性。</p>

    4 块框元素比如div,H1或者p元素有text-align属性控制元素显示的位置:left,right,center;line-height 属性设置行间的距离(行高)。

    5 span要设置高度,必须要转换成block元素才可以:
    display:block; 这样就变成了块元素
    在html5中可以直接用inline-block


    div span区别:
    块元素,就是DIV和block。他们无论多大,都占一行,就算同一行的地方空着,也不能放别的东西

    inline就是span元素,流体排版,如果同一行的右边还有空余地方,就会把挨着他的别的元素放右边,依次放,直到放满换行
    span将display设置为:inline-block就具备他们两个的特点,又不会占一行,又可以改变大小。

    块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来。
    行内框在一行中水平布置。

    6
    CSS 定位属性允许你对元素进行定位。
    属性 描述
    position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
    top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
    right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
    bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
    left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。
    overflow 设置当元素的内容溢出其区域时发生的事情。
    clip 设置元素的形状。元素被剪入这个形状之中,然后显示出来。
    vertical-align 设置元素的垂直对齐方式。
    z-index 设置元素的堆叠顺序。

    大神总结

    先说相对定位:跟它的名一样,相对嘛,要有一个参照物,但这个参照不是别的,是它自己呢,也就是说没设相对定位的位置,那你会问了,设没设都在那个位置为什么要设呢,因为只有设置了才能使 TOP,LEFT这些生效,也就是设了才能相对自己原来的位置偏移,原来的位置保留着,偏移后会把其它的层遮罩住。
    再说绝对定位:在布局里不可能有绝对定位的,再怎么样都有一个参照位置的,绝对定位的参照位置就不像相对那样是自己了,至于是哪个,就看它的上级或上上级有没有定位了,也就是有没有position:relative;或position:fixed了,好像position:inherit;也行,前面两个可以,后面那个不设什么的不用也行,最好用position:relative;吧,转入正题,当要绝对定位的层设好要参照位置的层后,就可以用TOP,LEFT这些来定位置了,如果它的上级或上上级都没定位的话只就会根据BODY的位置来定位了,还有最后一点,绝对定位是不占位置的,它会像PS的图层一样单独做一层,至于第几层你可以通过z-index:这个属性来设置

  • 相关阅读:
    linux服务器安全配置攻略
    Linux服务器调优
    Tengine + Lua + GraphicsMagick 实现图片自动裁剪/缩放
    nginx缓存设置
    动态缓存技术之CSI,SSI,ESI
    ionic环境配置
    Node.js企业开发:应用场景
    HashMap实现原理、核心概念、关键问题的总结
    《Windows核心编程》读书笔记.Chapter06线程基础
    开发环境eclipse for Mac 下的常用快捷键汇总(基本参照Win系,将Ctrl换为Command)
  • 原文地址:https://www.cnblogs.com/lv-sally/p/4810300.html
Copyright © 2020-2023  润新知