CSS样式汇总

1. Overflow:是否隐藏超出容器范围之外的内容,主要参数包括Hidden(隐藏),Auto(根据容器内容自动显示滚动条),scroll(显示滚动条,即使内容不超出容器范围,也会显示一个边框,效果非常不好);2. Relative & AbsuloteRelative:将元素从文档流中部分不完全脱离出来,因为它先前的位置无法被其他元素所占据;Absolute:一个元素的Position被设定为Absolute后,而该元素的父级元素没有设置Position属性,则会一直往上找,如何可以找到,则以该父元素做参考进行定位,否则会将<body>做为参考,即:该元素会以屏幕左上角为原点进行定位;将元素从文档流中完全脱离出来,先前位置会被后续元素所占据;3. 几种选择器    A. 元素选择器(类型选择器)        html{color:red;}    p{color:gray;}    h2{color:silver;}   B. 通配符选择器(*)   C. 类选择器   用法1:      

This paragraph is very important

       .important{color:red;}       用法2(结合元素选择器):       p.important{color:red;}/*带有important样式的元素p*/    D. ID选择器    E. 属性选择器        img[alt] {border: 5px solid red;}    F. 子选择器    G. 后代选择器  H. 兄弟选择器   
  • L1
  • L2
  • L3
  •     li+li{font-weight:bold;} /*L2/L3 会变粗*/4. display 属性 inline:将块级元素内容显示为行级元素;inline-block:将行级元素内容显示为块级元素;Example:
    <html>
    <head>
        <title>Inline Testing</title>
    </head>
    <body>
    
        <div title="The width and height is no effect on inline element!" style="background-color:blue;width:200px;height:200px;display:inline;">Div is block element!</div>
        <div title="Elements with inline property will be in one line with the line-level elements!">
            <div style="background-color:red;display:inline">RED CUBE</div><a href="www.google.com.sg">Google.SG</a>
        </div>
        <div>
            <a title="Adding width and height to the line-level element!" href="www.google.com.sg" style="background-color:purple;display:inline-block;width:200px;height:200px;">Google.SG</a>
        </div>
    </body>
    </html>
    View Code 

    相关内容推荐