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>

  • 相关阅读:
    各大型邮箱smtp服务器及端口收集
    阿里云邮箱POP3、SMTP设置教程
    thinkphp使用PHPMailer发送邮件
    SMTP错误码建议解决方法
    又来杭州了
    外企
    陈志武竞然是date的独立董事
    今天在当当上买了几本书,内有51反利的优惠券,也是一个suprise,
    工作 心态
    中国互联网创业,最好的城市是哪里?
  • 原文地址:https://www.cnblogs.com/wuqiance/p/11303529.html
Copyright © 2011-2022 走看看