CSS基础知识

一 、css布局方式：

  1.默认文档html结构顺序

  2.浮动布局float；

  3.定位布局position: 绝对、相对、窗口而定、无定位

 定位布局：position

 绝对定位：position：absolute

         以父基点，进行定位，但还占原来的空间

         注意事项：使用绝对定位是，必须有俩个条件：

             a、必须给父元素加定位元素，一般使用绝对定位

             b、给子元素加绝对定位的同时要加方向属性。

 相对定位：position：relative

          以自身为基点，进行定位，但还占原来空间

          注意事项：虽然相对定位也是脱离文档流。但是不能用清除浮动的方法解决问题

 固定定位：fixed

           元素框的表现类似与将position设置为absolute，不过基点是视窗本身

  无定位：static

浮动布局 float： 

  1.float取值：right left clear(可以让段落移动到div下面) none （默认）。float不具有继承性

  2.具体描述：对块元素设置浮动属性后，它就脱离了当前的文档流布局的方式，漂浮到他的父级元素的左边或者右边，如果想让多个块显示在同一行中，可以讲这些都设置成浮动，并且浮动方向相同。

  3.浮动的缺点：元素有默认属性，每个浏览器的默认属性不同，会对父元素和后面的元素产生影响，造成布局错乱。

            解决方法：使用Clear属性：取值（left,right,both,none）通常使用both

  4.清除浮动的方法   a、给父元素添加 overflow:auto;zoom:1;

                               b、添加一个附加层，必须设置高度，否则无效。#haa{clear:both;height:20px;} 

                               c、利用伪类：.cf：after{clear:both;content:’.’;display:block;height:0;width:0;visibility:hidden;}

  5.IE6中的bug：双倍边距，可以采用给元素添加display：inline 属性解决。

二、CSS元素的分类

    块状元素、内联元素    

    1、块状元素：水平拉伸垂直包裹，可以设置高度和宽度、不能与其他元素同行。

      <div>  <table> <h1>-<h6> <ul> <ol> <dl>    

    2、内联元素：只能容纳文本和内联元素，容许其他内联元素与其同行，宽度不起作用。

     <a>  <span>  <img>  <input>  <label>  <select>

三、CSS应用网页的四种方式:

    行内样式（内联）、内嵌样式、外部链接样式、导入方式

四、CSS选择器

   基本选择器：标签选择器、ID选择器、类选择器、通用选择器（通配符）

   高级选择器：后代选择器、交集选择器、并集选择器、伪类选择器

   1、标签选择器：针对一类标签（选择所有同类标签，而并非一个）；

   2、ID选择器： （#表示）同一个html页面，不能出现同样的id，严格区分大小写；

   3、类选择器：（.表示） 类选择器可以被多种标签使用，同一个标签可以使用多个类选择器，用空格隔开；

   4、通配符选择器：（*表示）全局的效果；

   5、后代选择器：（空格隔开）选择是后代不一定是儿子；

   6、交集选择器：（中间用.连接）同时满足前后的条件；

   7、并集选择器：（中间，；连接）；

   8、伪类选择器：根据元素的不同状态，定义不同的样式信息。伪类又分为:

              静态伪类：只能用于超链接；

              动态伪类：针对所有标签都适用。

        a、静态伪类：俩种状态（只能适用于超链接）

              link：超链接点击前；

              visited：超链接点击后；

        b、动态伪类：

              focus：（聚焦），是某个标签获得焦点的时候使用

              hover：（鼠标停留时），鼠标放置在某个标签上时

              active：（鼠标长按时），点击某个标签鼠标没有松时

五、CSS样式的特点：

    继承特点：子元素会继承父元素的某些样式，width、height、float无继承属性。display是可以继承的

    层叠：子元素如果定义了与父元素相同的样式，会覆盖父元素的样式，后面的样式覆盖前面的样式。

六、CSS样式的优先权：

  1、应用到页面的4种方式的优先权：行内样式>内嵌样式>外部链接样式>@import导入方式

  2、选择符的优先权：行内>id>class>标签选择器

  3、优先权：就近原则（先就近原则，再按 优先权）

  4、作用范围越小，优先权越高。离修饰目标越近，优先权越高。