div+css （重点回顾）_html/css_WEB-ITnose

 

CSS层叠样式表

优势：使页面结构和表现分离1.引入方式：   1）行内样式：<h2 style="color:#0F0">Hello World</h2>　　2）内部样式：<style type="text/css">        　　　　  h2{        　　　　　　　　 color:#F00;           　　　　   }　　　　　　　　 </style>　　3）外部样式：<link href=“a.css”  type=“text/css” rel=“stylesheet”/>    推荐　　　　　　　 　<style type="text/css">     　　　　     @import url("a.css");                    //  @import “a.css”;　　　　　　    </style>　　　　问题：link和@import的区别：　Link和@import的区别： 　　　　　　　　　　　　　　　　　　  1.隶属上的差别     　　　　　　　　　　　　　　　　　　 link是一个html的一个标签，而@import是css的一个标签　 　　　　　　　　　　　　　　　　　　  2. @import次数限制  听说在IE下只能导入61个CSS样式文件   　　　　　　　　　　　　　　　　　　  3.加载顺序的不同   　　　　　　　　　　　　　　　　　　    当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS文件会同时被加载，   　　　　　　　　　　　　　　　　　　    而@import引用的CSS 会等到页面全部被下载完再被加载。    　　　　　　　　　　　　　　　　　　  4.兼容性上的差别   　　　　　　　　　　　　　　　　　　    由于@import是CSS2.1提出的，@import只有在IE5以上的才能识别，而link标签无此问题    　　　　　　　　　　　　　　　　　　  5.使用DOM控制样式时的差别   　　　　　　　　　　　　　　　　　　    当使用javascript控制DOM(document.styleSheets)去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。　  优先级问题：行内样式  > 内部样式 > 外部样式   就近原则

 2.CSS选择器

      1）语法格式：选择器{属性：属性值；}    举例：h2{color：#0F0;}

　　2) 常见选择器

标记选择器   h2{  } 类选择器       .a {  } 

           // 不能是数字 ID选择器       #a{  } 

                // ID要唯一 交集选择器   h1,h2{  } 并集选择器(父类选择器) p a{  } 伪类选择器    锚连接                  LoVe   Hate CSS2 - :first-child 伪类   p:first-child { font-weight: bold; } 通用选择器             *{   }

　　注意：

　　　　一个HTML元素只能有一个ID选择器，但是可以有多个类选择器。

　　　　?<h1 id = “a” id = “b”></h1>                                             错误

　　　　?<h1 class = “a b c”></h1> .a{  }   .b{   }   .c{   }               正确  3. 盒子模型（边距）                

       border,margin,padding.

       boder：表盒子的边框。

       margin：表盒子与外界的距离

       padding：表盒子边界与盒子内内容的距离。

       border:1px 表示上下左右边框都为1px

       boder:1px 2px     表示上下边框为1px,左右边框为2px

       border:1px 2px 3px 4px      表示边框的顺序为上，右，下，左。

　　 单独设置边框：底部边框：border-bottom: 2px solid #cccccc;

　　　　　　　　　头部边框： border-top: 2px solid #cccccc;

       margin,padding跟border类似。

       IE6/IE7/firefox最终宽度=左外边距+左边框宽+左内边距+宽度+右内边距+右边框宽+右外边距。

　　4.CSS浮动

　　浮动概念：
   　   　在使用div布局的时候，发现每个div都是按照块的方式出来的，不利于页面的布局，所以CSS就提出元素的浮动技术，可以使得块元素在浮动的情况下在同一行中出现。
　　特点
　　      元素在浮动的时候遇到父容器的边框就会卡住
　　　　如果子元素和父元素同时向相反的方向浮动，那么先浮动父元素，然后子元素在父亲元素的内部浮动
　　　　如果父元素没有浮动而且包含了浮动的子元素，那么浮动的元素就会脱离文档流(重点)

 　　1：网页布局方式：浮动式布局，定位布局。都脱离文档流(上下关系)的控制。
       2：浮动清理：clear
       3：何时选用浮动定位
           注意：当网站有较强的分辨率及内容大小的适应能力时，需要浮动。距中布局，横向宽度可百分比缩放，需要借助margin,padding,border等属性。
       层设置浮动后，该层会脱离文档流，后面的层会流进该层里面，但是文字不会流进该层。它没完全脱离文档流

  
　　绝对定位会使该层完全脱离文档流，置其他对象之上，这个时候的层具有z-index属性。z-index属性的值越大，这个层越显示在上层。postion有常用的2个值: absolute和　　　　　　     relative,前者表示绝对定位，不占空间。后者表示相对定位，会占用空间。默认不设置为static

　z-index
　　　 CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对z-index 属性普遍的认识.