CSS知识点

CSS 概述

• CSS 指层叠样式表 (Cascading Style Sheets)
• 样式定义如何显示 HTML 元素
• 样式通常存储在样式表中
• 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
• 外部样式表可以极大提高工作效率
• 外部样式表通常存储在 CSS 文件中
• 多个样式定义可层叠为一

                     一  HTML7
***************二.选择器***************
      css: 样式  

           选择器 {
                样式属性:属性值；
             }

     css2.1 
                  3种基本的：  标签选择器   id选择器  类选择器
                  4种复合的:  后代选择器  交集选择器  并集选择器 *

    
    css3    儿子选择器  div>p  ie7
               兄弟选择器  div+p
               序选择器   li:first-child 

                  #one {
                           color:red;
                    }

                    .demo {
                         
                    }
                 <p id="one" class="demo two">1111</p>
                 <h2 class="two"></h2>

                 公共类
                  .red {
                         color: red;
                 }

                  #top {
                       width: 100px;
                  }

               <div id="top">
                       头部
               </div>
               <div id="nav">
                       导航
               </div>

                 div  h2 {
                       }

*********************三.css的特性***************
   1 继承性 ：有一些属性，当给自己设置的时候，
自己的后代就已经继承，哪些属性可以被继承？
     color、text-开头的、font-开头的，line-开头的这些文字样式的
可以被继承 ；盒子、布局、定位不能被继承的
     如何让整个页面设置字号为14px,字体颜色为灰色
             body {
                  color:gray;
                  font-size:14px;
              }

    2 层叠性（面试或笔试常出现）
      a 当多个选择器出现，会对元素样式造成影响；
      b css处理冲突的能力

****************如何计算权重？*************
      id选择器的数量  类选择器的数量   标签选择器的数量，依次比较
 id数量大的就权重高，若相等，接着比类数量，依次类推，假如
 三者数量都一样即权重一样，谁在后面听谁的

    注意：选择器没有直接选中到元素，通过继承设置的，此时
 权重为0，若大家都是0，谁描述的近，就听谁的
     
四  ******盒模型 （非常重要）
      盒子： 能放内容的标签，如p、div、span、a等
      与盒子相关的属性：
             width:  宽度  指的是盒子内容的宽
             height: 高度  指的是盒子内容的高
             padding: 内边距
             margin: 外边距
             border:   边框

     盒子真实的宽度=左边框的宽度+左padding+width+右padding+右边框
     ......................高    = 上边框+上padding+height+下padding+下边框
  
    padding属性的写法：
        用小属性（分别描述）：
                 padding-top: 上内边距
                 padding-right: 右内边距
                 padding-bottom: 下内边距
                 padding-left: 左内边距

       综合属性： padding:40px; 表示上下左右都是40px
                            padding: 10px 20px 20px 30px;
                                           上     右     下     左    （顺时针方向）
                            padding: 10px 20px 30px;
                                            上    右     下     左（右）
                            padding: 10px 20px; 
                                             上    右     下（上） 左（右）
 
     div {
           width: 123px;
           height: 123px;
           border: 1px solid #000;
           padding: 20px  40px; 
           padding-left: 20px;
      }

   做网页的时候，需要清除默认样式，清除的办法如下
      * {
               padding: 0;
               margin: 0;
       }

   blockquote,body,button,dd,dl,dt,fieldset,
   form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,
   pre,td,textarea,th,ul{margin:0;padding:0}

  border: 边框
     边框三要素： 粗细   颜色  形状（线型）

********************标准文档流的现象*****************
    1 空白折叠现象

    2 高矮不齐，底边对齐

    3 一行写不满，自动换行（默认情况下，从左到右，从上到下显示）

行内元素与块元素（css的世界，对元素严格的划分）
   
 **************块元素*************
        a  独占一行，不能与其他元素并排
        b  可以设置宽高
        c 假如未设置宽度，宽度默认值为父亲的100%

   行内元素：
         a   与其他行内元素并排
         b  不能设置宽高，默认的宽度取决文字的宽度

 ***************HTML元素哪些是块元素，哪些是行内元素？***************
 所有的容器级元素都是块元素，如div、li、h系列、dt、dd、p
 所有的文本级元素（除了p）都是行内元素,如span、a、b、i、u

 
    行内元素与块元素之间的转换 （display）
    块元素转成行内元素   display: inline;
    行内元素转成块元素   display:block;
    

  现在要做两个盒子 并排并且可以设置宽高？

   脱离标准文档流
   css中三种方式可以让元素脱离标准文档流
       浮动 、绝对定位、固定定位

  ****************浮动：网页布局用的最多属性********************

  性质（重点）：
   1  浮动的元素脱离标准文档流（脱标）
    
    2  浮动的元素相互贴靠（相贴）

    3 浮动的元素有“字围”现象

      小的工具 fascapture 

****************  清除浮动********************
   方法1  给浮动的元素的祖先元素加高度
                一个浮动的元素他的祖先一定要有高度，有高度的盒子，
                才能关住浮动
   方法2 ：clear：both; 清除别人对我的影响
                    clear: left; 或clear:right;
           方法1用的很少，原因是一般做网页，height很少出现，
           祖先的高度靠后代撑开
           方法2致命的缺点：margin失效

    方法3：隔墙法
             在第一组浮动元素和第二组浮动元素之间加了一个div
   给这个div(墙)设置两个样式，第一个样式clear:both;(消除别人
   浮动对我造成的影响) 第二个样式 height:10px;用自己的高度
   撑开上面一组浮动和下面一组浮动的距离
              建议：演化成了"内墙法"：把这个墙放在第一组浮动元素里面，
   这样就会让浮动元素的儿子可以撑开父亲
        浮动的元素不能撑开父亲的高度，因为浮动的元素不再属于
  标准文档流的元素

   方法4：overflow: hidden （奇淫技巧）
           overflow  表示“溢出” overflow: hidden;本身含义让多余的内容
   影藏起来，但是前端工程师开发中发现，它可以清楚浮动

  div+css   PC端 熟练  熟练各种网页布局  做站的高手
浮动：float:left; 或者float：right;
        并排并且可以设置宽高
 标准文档流（块元素与行内元素）
 性质：1 脱标  2 贴靠 3 字围 4 收缩   
浮动清除:

    为什么要清除浮动？
        浮动对后面的元素造成的影响
    清除浮动方法：
          1  加高法（给浮动的元素祖先加高，有高度的盒子能关注浮动）
          2  实际工作中，一般父级元素不设置高，父级靠后代撑开高度
             clear:both;  该方法缺点是margin失效

         3 外墙法（可以用）

         4 内墙法 （推荐使用）

         5  overflow: hidden;
             
*****************浮动方法****************
1    ie6兼容性问题（了解）
    第一，IE6，不支持小于12px的盒子，任何小于12px的盒子，
         在IE6中看都大
        如何让小于12px的盒子在ie6中，完全显示？
                    height: 8px;
                    _font-size:0;

  第二 ie6不支持overflow:hidden这种方式清除浮动，
  解决办法   加一条语句  _zoom:1;

**************2  margin属性***************
     *margin塌陷现象：标准文档流中，竖直方向的margin不会叠加
         以较大的为准 ，但是浮动的元素，不具有这种现象

    * margin: 0 auto;   上: 0  右auto  下:0  左:auto  让盒子水平居中
      注意：1 有宽度的盒子，才能使用margin:0 auto
                  2 适用于标准文档流中的盒子
                  3 让整个盒子水平居中，而不是让文字居中，让文字
           居中可以使用text-align:center 
  3 善于使用父亲的padding,而不是儿子的margin

      margin这个属性，本质上描述的是兄弟和兄弟之间的距离；
     最好不要用这个marign表达父子之间的距离。
      加了border的父级，儿子可以用margin来撑开与父亲的距离
     
 ***************4 margin关于ie6兼容问题******************* 
   当出现连续浮动的元素，携带和浮动方向相同的margin时，
           队首的元素，会双倍marign。
 * 双倍margin (bug)
           解决办法：a  对队首的元素加 该方向的margin
                           _margin-方向: 一半的间距       
                              b  使浮动的方向和margin的方向，相反。
 * ie6 3px bug 不要解决，说明代码需要调整

      ietester(集成了各种版本的ie,可用于ie兼容测试)
      fw    切图（剪切一些图片等素材，量尺寸）
                默认处理的图片 *.png

浮动：float:left; 或者float：right;
        并排并且可以设置宽高
 标准文档流（块元素与行内元素）
 性质：1 脱标  2 贴靠 3 字围 4 收缩   
浮动清除:

    为什么要清除浮动？
        浮动对后面的元素造成的影响
    清除浮动方法：
          1  加高法（给浮动的元素祖先加高，有高度的盒子能关注浮动）
          2  实际工作中，一般父级元素不设置高，父级靠后代撑开高度
             clear:both;  该方法缺点是margin失效

         3 外墙法（可以用）

         4 内墙法 （推荐使用）

         5  overflow: hidden;
     

1 行高 line-height
            单行文本垂直居中 height=line-height
            多。。。。。。。。调整padding

2 font: 12px/24px "宋体"

3 伪类
    a:link {}
    a:visited {}
    a:hover {}
    a:active{}
  
  a {}

  a:link,a:visited {}
  a:hover {}
   a {}
   a:hover {}

   background-color
    rgb(红，绿，蓝)
    #ff0000  #f00

  background-image: url()

  background-repeat: no-repeat/repeat-x/repeat-y

  background-position: 10px 20px;
                                  
  css精灵：
  span {
     display: inline-block;/*既能设置宽高，又能并排*/
 }

 background-attachment 背景是否被固定

 background-attachment: fixed 表示背景固定

font-size  font-family 

 background 综合属性
    background:red url(1.jpg) no-repeat 100px 100px fixed;

                  background: blue url(1.jpg);

                  <div></div>  400*400   100*100

 css3 又增加了很多background属性，如：
   background-origin、background-clip、background-size

 定位： 1 相对定位  position:relative;
            2 绝对定位  position: absolute;
            3 固定定位  position: fixed;
 脱标三种方法： 浮动 绝对定位 固定定位
   
相对定位：一般用于元素位置微调，相对于自己原来的位置，
         进行调整
   性质： 1 不脱标 老家留位置，形影分离

   *用途： 1 微调元素
               2 做绝对定位的参考，子绝父相

   方向：正数   表示往相反方向移动
   方向： 负数   表示往该方向移动

   position: relative;
   left: 400px;或right:-400px
   top:200px;或bottom: -200px
 
 绝对定位： 更灵活
  
  绝对定位脱标：绝对定位的盒子，是脱离标准文档流的，
所以标准文档流的性质，对绝对定位的盒子不起作用
     span {
        position: absolute;
        width: 100px;
        height: 200px;
    }

  参考点：1 绝对定位的参考点，假如用top描述，参考点就是
页面的左上角，而不是浏览器的左上角
    如果用bottom描述，那么就是浏览器首屏窗口尺寸，
  对应的页面的左下角：
                 2 一个绝对定位的盒子，如果父辈元素也出现了定位
 的元素，那么就以该父辈元素为参考点
                 *要听最近的定位了的父辈元素（不一定是父亲，可能是爷爷）
                 * 父辈定位不一定是相对定位，只要是定位就可以

      子绝父绝   子绝父相  子绝父固 这三种方式都可以给
儿子定位，但是工程上，子绝父绝和子绝父固布局在页面不
稳固（因为父绝或父固脱标），所以工程上，用子绝父相，让
父亲相对定位，儿子在父亲的范围内移动

****************背景************* 
background-position: 10px 20px;
background-attachment: fixed;
background: red url(...) no-repeat  10px 10px fixed;

定位： 相对定位  绝对定位  固定定位

 相对定位：相对于自己进行位置的微调
       position:relative;
       top: 10px;
       left: 20px;

       2 配合绝对定位使用

  绝对定位 position: absolute;
       1 绝对定位的元素脱标
                 span {
                    position: absolute;
                    width:100px;
                    height: 100px;
                    background:blue;
                } 
     2 描述
                  div {
                       position: ab...;
                       top: 20px;
                       left:
                 }  

             参考点  1 div的父辈中没有定位元素，top描述的话，
    以页面的左上角为参考点，用bottom描述的话，以首屏
     对应的页面的左下角
                           2 绝对定位的元素以最近的定位了的父辈元素
    为参考点   
              
       布局：标准流+盒子模型+定位
            
      上课听讲，阅读别人的布局+ 实践
 
  绝对定位的盒子如何水平居中？
     margin：0 auto；/*适用于标流元素*/
  
    left: 50%;
    margin-left: 负的盒子的宽度一半

 固定定位  position: fixed  ie6不兼容
         固定定位参考以浏览器窗口为参考，页面无论如何滚动，
  盒子的位置不变，固定定位脱标
    固定定位可以做顶部导航条、返回顶部等相对
浏览器固定布局
     作业1 做返回顶部效果（用固定布局知识点）
 
z-index:  1 表示谁压着谁，数值大的压住数值小的
              2 只有定位(无论什么定位)了的元素，才可以有z-index，
    浮动的元素没有z-index
             3 z-index没有单位，就是一个整数，默认值为0
             4 假如大家的z-index没有写，或者一样，元素谁在html
   后面，会压盖前面的，一个定位的元素永远压盖没有定位的
   元素
    
  从父现象：老爸怂了，儿子再厉害，也没用