zoukankan      html  css  js  c++  java
  • css定位和浮动

    1.css中一切元素皆为框。div、p、h1等为块框;span、strong等为行内框,(在文本中每一行会被自动默认为行框,行框和行内框是不一样的概念)。通过display可以改变框的类型,行内框通过display:block可以变为块框,块框通过display:inline-block可以变为行内框,display:inline可以变为内联元素,diplay:none可以变的没有框不显示不占文档空间()。

    2.css机制有3种:普通流、浮动和绝对定位。

    3.css位置有5种:

    • static:静态。元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
    • relartive:相对定位。相对自己原有的位置进行定位,位置变化后,原框仍在文本流中占有空间。
    • absolute:绝对定位。相对以定位了(级级上寻)的父框进行定位,位置变化后,原框不在文本流中站有空间。
    • inherit:继承定位。继承父框的定位属性。任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。
    • fixed:固定定位。相对于浏览器屏幕视窗进行定位。

    4.

    • 块内元素的溢出用overflow来控制:auto,scroll,hidden。
    • 当一幅图像的尺寸大于包含它的元素时,"clip" 属性允许您规定一个元素的可见尺寸,这样此元素就会被修剪并显示为这个形状。clip 属性剪裁绝对定位元素。clip:rect(0px 50px 200px 0px)。
    • z-index 属性设置元素(定位元素上奏效)的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
    • clear 属性规定元素的哪一侧不允许其他浮动元素。
    • 设置元素的垂直对齐方式。vertical-align 定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。
      描述
      baseline 默认。元素放置在父元素的基线上。
      sub 垂直对齐文本的下标。
      super 垂直对齐文本的上标
      top 把元素的顶端与行中最高元素的顶端对齐
      text-top 把元素的顶端与父元素字体的顶端对齐
      middle 把此元素放置在父元素的中部。
      bottom 把元素的顶端与行中最低的元素的顶端对齐。
      text-bottom 把元素的底端与父元素字体的底端对齐。
      length  
      % 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
      inherit 规定应该从父元素继承 vertical-align 属性的值。

     附:

    1.内联元素和块级元素:

    内联元素是不可以控制宽高,margin等,在同一行显示,不换行;
    块级元素可以控制宽高,margin等,并且会换行。
    inline:元素会被显示为内联元素,不换行。
    block:元素会被显示为块元素,换行。
    inline-block:即使元素以块级的形式出现在行内。IE6不能用。

     2.块框、行内框、行框、无名块框

    • 块框:div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容,即“块框”。
    • 无名块框:但是在一种情况下,即使没有进行显式定义,也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素(比如 div)的开头。即使没有把这些文本定义为段落,它也会被当作段落对待。在这种情况下,这个框称为无名块框。块级元素的文本行也会发生类似的情况。无法直接对无名块或行框应用样式,因为没有可以应用样式的地方(注意,行框和行内框是两个概念)。
    • 行内框:span 和 strong 等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”。
    • 行框:行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是,垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框(Line Box),行框的高度总是足以容纳它包含的所有行内框。不过,设置行高可以增加这个框的高度。
  • 相关阅读:
    动画 + 设置contentoffset,然后就 蛋疼了,
    xmpp这一段蛋疼的 坑,
    项目,
    一段测试代码,哦哦哦,
    libresolv,
    mutating method sent to immutable object'
    解析json,是还是不是,
    济南学习 Day 4 T1 am
    济南学习 Day 3 T3 pm
    济南学习 Day 3 T2 pm
  • 原文地址:https://www.cnblogs.com/jymz/p/3966072.html
Copyright © 2011-2022 走看看