zoukankan      html  css  js  c++  java
  • 学习CSS总结(一)

    选择器的分组

    CSS选择器分为

    1.群组选择器  如:p, body, img, div{}
    
    2.兄弟选择器  如:p + p { color:#f00; }
    
    3.属性选择器  如: p[title] { color:#f00; }
    
    4.包含(后代)选择器  如:body ul li{}
    
    5.子元素选择器 如:div > p{}
    
    6.ID选择器  如:#myDiv{}
    
    7.类选择器  如:.class1{}
    
    8.伪元素选择器  如:E:first-line,E:before
    
    9.伪类选择器  如:E:first-child ,E:visited,E:focus,E:enabled
    
    10.标签选择器  如:p { font-size:1em; }

    子选择器和后代选择器的区别:

    后代选择器的写法就是把外层的标记写在前面,内层的标记写在后面,之间用空格分隔。
    子选择器只对直接后代有影响的选择器,而对“孙子后代”以及多层后代不产生作用。




    如何居中一个浮动元素

    方法一

    设置容器的浮动方式为绝对定位
    然后确定容器的宽高 比如宽500 高 300 的层
    然后设置层的外边距

     div{
            500px;
            height:300px;
            margin:-150px 0 0 -250px;
            position:absolute;
            left:50%;
            top:50%;
             padding: 0px;">#000;
    }
    

    方法二

    父元素和子元素同时左浮动,然后父元素相对左移动50%,再然后子元素相对右移动50%,或者子元素相对左移动-50%也就可以了。

     
    <!DOCTYPE html><html><head>
        <title>Demo</title>
        <meta charset="utf-8"/>
        <style type="text/css">
            .p{
                position:relative;
                left:50%;
                float:left;
            }
            .c{
                position:relative;
                float:left;
                right:50%;
            }
        </style></head><body>
        <div class="p">
            <h1 class="c">Test Float Element Center</h1>
        </div>
    </body>
    </html>

  • 相关阅读:
    去除字符串中的重复字符
    .net生成的类,跨工程调用显示注释
    Flex 页面空白或Error #2032: 流错误处理办法
    读取点阵字库
    SQL多表联合查询(Access数据库表)
    MSComm不能触发MSComm1_OnComm()事件原因之一
    一个小时内学习SQLite数据库(转)
    人生无悔
    学习之道
    挺经
  • 原文地址:https://www.cnblogs.com/wuqiance/p/11303529.html
Copyright © 2011-2022 走看看