美文网首页
HTML Android Studio UI notes

HTML Android Studio UI notes

作者: 半大人 | 来源:发表于2020-07-09 13:57 被阅读0次

    CSS Notes

    1.选择器:
    id  :选择 id="para1"的标签
    #para1
    {
        text-align:center;
        color:red;
    }
    class:选择class="center" 的标签;选择class="center"的p标签
    .center {text-align:center;}
    p.center {text-align:center;}
    
    2.float
    clear指定不允许元素周围有浮动元素。
    left,right,both,none,inherit 
    float指定一个盒子(元素)是否可以浮动。 
    left,right,none,inherit 
    例子:
    label.header{
        float:right;
    }
    
    3.元素,文本 居中
    body{
        background-color: #ffffff;
        margin:auto;//设置元素水平居中对齐
         text-align: center;//设置文本居中
        width:70%;   //设置元素宽度
        height: 60%;  //设置元高度
    }
    
    4.position 属性的五个值:
    static,relative,fixed,absolute,sticky
    元素可以使用的顶部,底部,左侧和右侧( top, bottom, left, right)属性定位
    4.1 static 定位
    HTML 元素的默认值,即没有定位,遵循正常的文档流对象。
    静态定位的元素不会受到 top, bottom, left, right影响。
    4.2 fixed 定位
    元素的位置相对于浏览器窗口是固定位置。
    即使窗口是滚动的它也不会移动:
    注意: Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。
    4.3 relative 定位
    相对定位元素的定位是相对其正常位置。
    移动相对定位元素,但它原本所占的空间不会改变。
    相对定位元素经常被用来作为绝对定位元素的容器块。
    4.4 absolute 定位
    绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>
    absolute 定位使元素的位置与文档流无关,因此不占据空间。
    absolute 定位的元素和其他元素重叠。
    4.5 sticky 定位
    sticky 英文字面意思是粘,粘贴,所以可以把它称之为粘性定位。
    position: sticky; 基于用户的滚动位置来定位。
    粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。
    它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。
    元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。
    这个特定阈值指的是 top, right, bottom 或 left 之一,换言之,指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。
    注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。
    
    5.重叠的元素
    元素的定位与文档流无关,所以它们可以覆盖页面上的其它元素
    z-index属性指定了一个元素的堆叠顺序(哪个元素应该放在前面,或后面)
    一个元素可以有正数或负数的堆叠顺序:
    实例
    img
    {
        position:absolute;
        left:0px;
        top:0px;
        z-index:-1;
    }
    
    6.CSS Overflow
    CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。
    overflow属性有以下值:
    值           描述
    visible 默认值。内容不会被修剪,会呈现在元素框之外。
    hidden  内容会被修剪,并且其余内容是不可见的。
    scroll  内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
    auto    如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
    inherit 规定应该从父元素继承 overflow 属性的值。
    注意:overflow 属性只工作于指定高度的块元素上。
    注意: 在 OS X Lion ( Mac 系统) 系统上,滚动条默认是隐藏的,使用的时候才会显示 (设置 "overflow:scroll" 也是一样的)。
    overflow: visible
    默认情况下,overflow 的值为 visible, 意思是内容溢出元素框:
    
    
    7.bottom定义了定位元素下外边距边界与其包含块下边界之间的偏移。
     auto
    length
     inherit 
    
    |clip
     剪辑一个绝对定位的元素 
    shape
    auto
    inherit
    
    cursor
    显示光标移动到指定的类型 
    url
    auto
    crosshair
    default
    pointer
    move
    e-resize
    ne-resize
    nw-resize
    n-resize
    se-resize
    sw-resize
    s-resize
    w-resize
    text
    wait
    help
    
    left
    定义了定位元素左外边距边界与其包含块左边界之间的偏移。 |
    auto
    length
    inherit 
    overflow
     |设置当元素的内容溢出其区域时发生的事情。 
    auto
    hidden
    scroll
    visible
    inherit 
    overflow-y
     | 指定如何处理顶部/底部边缘的内容溢出元素的内容区域 
    auto
    hidden
    scroll
    visible
    no-display
    no-content 
    
    overflow-x
     |指定如何处理右边/左边边缘的内容溢出元素的内容区域 
    auto
    hidden
    scroll
    visible
    no-display
    no-content 
    
    position
    指定元素的定位类型 
    absolute
    fixed
    relative
    static
    inherit 
    
    right
    定义了定位元素右外边距边界与其包含块右边界之间的偏移。 
    auto
    length
    inherit 
    
    top
    定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 
     auto
    length
    inherit 
    
    z-index
    设置元素的堆叠顺序 
    number
    auto
    inherit 
    

    相关文章

      网友评论

          本文标题:HTML Android Studio UI notes

          本文链接:https://www.haomeiwen.com/subject/bzehcktx.html