CSS3+HTML5-CFANZ编程社区

Chapter 1 CSS、HTML基础知识

浏览器属性前缀问题

-webkit	webkit核心浏览器 Chrome、Safari
-moz	Firefox
-ms	IE
-o	Opera

eg：

.transform{
  -webkit-transform:rotate(-3deg);  //带有Chrome、Safari浏览器属性
  -moz-transform:rotate(-3deg);     //带有Firefox浏览器属性
  -ms-transform:rotate(-3deg);      //带有IE浏览器属性
  -o-transform:rotate(-3deg);       //带有Opera浏览器属性
  //标准属性放在最后书写
  transform:rotate(-3deg);          //标准属性
}

float浮动

none	默认值，不浮动
inherit	继承父元素的float值（不建议使用，IE不支持）
left	向页面左侧浮动
right	向页面右侧浮动

1、对于块级元素来说，如果不设置浮动其默认的宽度是100%。此时设置浮动则其宽度随文字长度变化。

2、默认情况下父元素高度会随着子元素内容进行调整，但是将子元素设置为浮动后，父元素高度为0。

3、浮动的元素脱离了文档流，但元素中的内容依旧占据空间。

clear清除浮动

left	左侧不允许出现浮动元素
right	右侧不允许出现浮动元素
both	清除两侧浮动中对自己影响最大的那一侧浮动

1、在需要的地方添加clear：both标签。

2、对父元素使用:after伪类。

<body>
    <div class="div1 clearfix">
        <div class="left">Left</div>
        <div class="right">Right</div>
    </div>
    <style>
       .clearfix:after{
           content: "020";
           display: block;
           height: 0;       /*此时clearfix的高度为0*/
           clear: both;     /*清除父元素clearfix的浮动，clearfix的高度不为0了*/
       }
       .clearfix{
           zoom: 1;
       }
       .left{
           float: left;
       }
       .right{
           float: right;
       }
    </style>
</body>

position定位

static	默认值
relative	相对位置
absolute	绝对位置
fixed
inherit	继承父元素的定位属性

1、relative和static都是相对于其他元素进行定位的，都属于相对定位的范畴。

2、如果使用static默认值，则在CSS中为元素定义top、left、right、bottom、z-index都无效。也就是说想要设值元素的top、left、right、bottom、z-index值必须用position属性（static除外）。

3、absolute是相对于上一个不为static的父元素进行绝对定位的，否则将相对html进行绝对定位。

3、absolute和fixed时，未定义宽度的元素不再是100%，根据内容自动调整；不定义z-index时，absolute元素会覆盖在其他元素之上；会脱离正常的文档流，不占据空间，类似于浮动后的效果。

<body>
    <div class="container">
        <div class="absolute">绝对定位</div>
    </div>
    <style>
      .container{
          margin: auto;
          width: 960px;
          height: 300px;
          position: relative;       /*如果没有这句 则子元素是按照整个html进行定位*/
      }

      .absolute{
          position: absolute;
          top: 0;
          left: 0;

      }
    </style>
</body>

4、fixed是相对于浏览器窗口的定位，即无论页面如何滚动，该元素始终停留在屏幕上某个位置。

Chapter 2 选择器

选择器包括基础选择器和伪类选择器。

基础选择器：标签选择器、类选择器（class选择器）、id选择器、通配符选择器、子元素选择器、后代元素选择器、相邻元素选择器、属性选择器、组选择器、复合选择器。

伪类选择器：结构化伪类、目标伪类（target）、状态伪类、否定伪类（not（S））。

标签选择器：定义全局样式。

<body>
    <h1>AAAAAAAAAAAAAAAAAAAAAAAAAAAAA</h1>
    <h2>BBBBBBBBBBBBBBBBBBBBBBBBBBBBB</h2>
    <h3>CCCCCCCCCCCCCCCCCCCCCCCCCCCCC</h3>
    <h4>DDDDDDDDDDDDDDDDDDDDDDDDDDDDD</h4>
    <h5>EEEEEEEEEEEEEEEEEEEEEEEEEEEEE</h5>
    <h6>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</h6>
    <style>
      h1,h2,h3,h4,h5,h6{
          margin: 10px 0;
          font-family: inherit;
          font-weight: bold;
          line-height: 20px;
          color: blueviolet;
          text-rendering: optimizeLegibility;
      }
      h1,h2,h3{
          line-height: 40px;
      }
      h1{font-size: 38.5px;}
      h2{font-size: 31.5px;}
      h3{font-size: 24.5px;}
      h4{font-size: 17.5px;}
      h5{font-size: 14px;}
      h6{font-size: 11.5px;}
    </style>
</body>

类选择器（class选择器）

语法：在class名称前加 . 符号

类选择器是最灵活、应用最广泛的选择器。

id选择器

语法：在id名称前面加 # 符号

一个HTML元素只能对应一个id，故灵活性不如class选择器。

id选择器拥有最高的权重，可以用于覆盖之前的一些定义。

和后台数据对应，从而配合JavaScript进行一些逻辑操作。

通配符选择器

通配符是指用一个符号代替某些字符。语法关键词是 * 。该选择器以 * 开始，可以与任意元素匹配。

通配符选择器的权重最低，只要求其他的定义，通配符选择器的定义就会被覆盖。

子元素选择器

用于严格的父子关系。语法为 > 符号

<body>
    <li><a href="#">www.baidu.com</a></li>
    <li><div><a href="#">www.baidu.com</a></div></li>
    <style>
      li>a{
          color: yellowgreen;
      }
    </style>
</body>

后代元素选择器

后代选择器类似于子元素选择器，要求没有那么严格，只要是父元素的后代元素即可。

语法关键词是空格。

<body>
    <li><a href="#">www.baidu.com</a></li>
    <li><div><a href="#">www.baidu.com</a></div></li>
    <style>
      li a{
          color: yellowgreen;
      }
    </style>
</body>