css基础

1.1   CSS基础

1.1.1    概述

CSS 指层叠样式表 (Cascading Style Sheets)。

层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。

1.1.2    基本格式

CSS规则是由两部分组成，选择器以及一条或多条声明，声明使用分号隔开：

      selector { declaration1 ; declaration2 ......}

例如 : h1{ color:r

ed ; font-size:14px ; }

12

1.1.3    常用属性

以下列表是一些常用的属性：

属性	描述	CSS
background	在一个声明中设置所有的背景属性。	1
background-attachment	设置背景图像是否固定或者随着页面的其余部分滚动。	1
background-color	设置元素的背景颜色。	1
background-image	设置元素的背景图像。	1
background-position	设置背景图像的开始位置。	1
background-repeat	设置是否及如何重复背景图像。	1
border	在一个声明中设置所有的边框属性。	1
border-bottom border-top	在一个声明中设置所有的下边框属性。 在一个声明中设置所有的上边框属性。	1
border-left border-right	在一个声明中设置所有的左边框属性。 在一个声明中设置所有的右边框属性。	1
border-style	设置四条边框的样式。	1
border-width	设置四条边框的宽度。	1
border-radius	简写属性，设置所有四个 border-*-radius 属性。	3
box-shadow	向方框添加一个或多个阴影。	3
height width	设置元素高度。 设置元素的宽度。	1
max-height min-height	设置元素的最大高度。 设置元素的最小高度。	2
max-width min-width	设置元素的最大宽度。 设置元素的最小宽度。	2
font-family	规定文本的字体系列。	1
font-size	规定文本的字体尺寸。	1
font-weight	规定字体的粗细。	1
list-style	在一个声明中设置所有的列表属性。	1
list-style-type	设置列表项标记的类型。	1
margin	在一个声明中设置所有外边距属性。（margin-top、right、bottom、left）	1
padding	在一个声明中设置所有内边距属性。（padding-top、right、bottom、left）	1
clear	规定元素的哪一侧不允许其他浮动元素。	1
cursor	规定要显示的光标的类型（形状）。	2
display	规定元素应该生成的框的类型。	1
float	规定框是否应该浮动。	1
overflow	规定当内容溢出元素框时发生的事情。	2
position	规定元素的定位类型。	2
visibility	规定元素是否可见。	2
z-index	设置元素的堆叠顺序。	2
color	设置文本的颜色。	1
line-height	设置行高。	1
text-align	规定文本的水平对齐方式。	1
text-decoration	规定添加到文本的装饰效果。	1

1.2   CSS选择器

1.2.1    选择器类别

选择器是CSS中极为重要的一个概念：通过一定的CSS语言写法，能够选择到某一个或某一些标签元素，从而为这一个或一些标签设置样式的声明。

1.2.1.1      Id选择器

ID 选择器可以为标有特定 ID 的 HTML 元素指定特定的样式。根据元素ID来选择元素，具有唯一性，这意味着同一id在同一文档页面中只能出现一次，例如，你将一个元素的id取值为”navi”，那么在同一页面你就不能再将其他元素id取名为”navi”了。

前面以 ”#” 号来标志，在样式里面可以这样定义：

#demoDiv{

color:#FF0000;

}

适用场景：某一个特定元素独有的样式。

1.2.1.2      类选择器

类选择器根据类名来选择，前面以 ”.” 来标志，如：

.demoDiv{color:#FF0000;}

在HTML中，元素可以定义一个class的属性。如：

<div class="demoDiv">这个区域字体颜色为红色。</div>

同时，我们可以再定义一个元素：

<p class="demoDiv">这个段落字体颜色为红色</p>

最后，用浏览器浏览，我们可以发现所有class为demoDiv的元素都应用了这个样式。包括了页面中的div元素和p元素。

适用场景：某一类别元素共同拥有的样式。

1.2.1.3      标签选择器

一个完整的HTML页面是有很多不同的标签组成，而标签选择器，则是决定哪些标签采用相应的CSS样式。

p{

    font-size:12px;

    background:#900;

   color:090;

}

复制代码则页面中所有p标签的背景都是#900(红色)，文字大小均是12px，颜色为#090(绿色)

适用场景：为标签元素统一设置默认的样式。

1.2.1.4      属性选择器

可以用判断html标签的某个属性是否存在的方法来定义css。属性选择器，是根据元素的属性来匹配的，其属性可以是标准属性也可以是自定义属性。

[attr]：
　　       [title] {margin-left: 10px}
　　       //选择具有 title 属性的所有元素；
　　[attr=val]：
　　       [title = 'this'] {margin-right: 10px}
　           //选择属性 title 的值等于 this 的所有元素
　　[attr^=val]：
　　       [title ^= 'this'] {margin-left: 15px}
　　       //选择属性title的值以this开头的所有元素
　　[attr$=val]：
　　       [title $= 'this'] {margin-right: 15px}
　　       //选择属性title的值以this结尾的所有元素
　　[attr*=val]：
　　       [title *= 'this'] {margin: 10px}
　　       //选择属性title 的值包含 this 的所有元素

属性选择器效率较低，不建议大规模适用。

1.2.1.5      伪类选择器

有时候还会需要用文档以外的其他条件来应用元素的样式，比如鼠标悬停等。这时候我们就需要用到伪类了。以下是链接应用的伪类定义。

a:visited{

     color:#FFFF00;

}

a:hover{

     color:#006600;

}

1.2.1.6      伪元素选择器

所有伪元素选择器都必须放在出现该伪元素的选择器的最后面，也就是说伪元素选择器不能跟任何派生选择器，如：p:first-letter em {} 这就是不合法的。

:first-letter：设置块元素首字母样式，行内元素转换成块元素和行内块元素也支持；
       div p:first-letter {font-size: 20px}
　　//选择div元素里所有的p元素的第一个字母或汉字，如果把块元素转换成行内元素则就不支持了；
:before：设置之前的样式，可以插入生成的内容，并设置其样式；
　　body:before {content: 'The Start:'; display: block}
　    //在body元素前插入文本内容'The Start:'，并设置其为块元素
:after：设置之后的样式，可以插入生成的内容，并设置其样式；
　　body:after {content: 'The End.'; display: block}
　　//在body元素最后插入文本内容'The End.'，并设置其为块元素

1.2.1.7      结构性伪类选择器

选择器	含义	示例
E:nth-child(n)	匹配其父元素的第n个子元素，第一个编号为1	p:nth-child(3) { color:#f00; } p:nth-child(odd) { color:#f00; } p:nth-child(even) { color:#f00; } p:nth-child(3n) { color:#f00; } tr:nth-child(2n+11) { background:#ff0; } tr:nth-last-child(2) { background:#ff0; }
E:nth-last-child(n)	匹配其父元素的倒数第n个子元素，倒数第一个编号为1
E:last-child	匹配父元素的最后一个子元素，等同于:nth-last-child(1)
E:only-child	匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:empty	匹配一个不包含任何子元素的元素，注意：文本节点也被看作子元素

 

1.2.1.8      通用选择器

通用选择器表示所有元素统一样式，用 * 来表示。例如：

*{

font-size: 12px;

}

1.2.1.9      组合选择器

1.2.1.9.1  后代选择器

后代选择器也称为包含选择器，用来选择特定元素或元素组的后代，将对父元素的选择放在前面，对子元素的选择放在后面，中间加一个空格分开。后代选择器中的元素不仅仅只能有两个，对于多层祖先后代关系，可以有多个空格加以分开，如id为a、b、c的三个元素，则后代选择器可以写成#a #b #c{}的形式，只要对祖先元素的选择在后代元素之前、中间以空格分开即可。如：

 

      <style>

 

         .father .child{

 

             color:#0000CC;

 

         }

 

     </style>

 

     <p class="father">黑色

 

         <label class="child">蓝色

 

         <b>也是蓝色</b>

 

        </label>

    </p>

这里我们定义了所有class属性为father的元素下面的class属性为child的颜色为蓝色。后代选择器是一种很有用的选择器，使用后代选择器可以更加精确的定位元素。

1.2.1.9.2  群组选择器

当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。如：

  p, td, li {

 

       line-height:20px;

 

        color:#c00;

 

     }

 

   #main p, #sider span {

 

      color:#000;

 

      ine-height:26px;

 

 }

 

 

1.2.2    选择器优先权重

当标签被多个选择器作用时，按照权重值相加，值大者优先原则，权重值相同那么后定义的规则优先。

权重值列表：

选择器	权重值
Id选择器	100
类选择器	10
标签选择器	1

 

CSS选择器的权重算法实例：

 

     <style>

 

          div{color:red;}

 

          a{color:blue;}

 

          div .class-a{color:yellow;}

 

         .class-div a{color:black;}

 

        #a{color:orange}

 

    </style>

 

    <div class='class-div'>

 

           <a id='a' class='class-a'>测试css权重</a>

 

    </div>

 

实例分析：

a标签中的文本内容同时被4个CSS选择器所作用，并且样式发生冲突，按照权重值原则分别计算出各选择器的权重值如下：  

div{color:red;}    //  1

 

     a{color:blue;}    //  1

 

     div .class-a{color:yellow;}    // 1+10=11

 

    .class-div a{color:black;}    // 10+1=11

 

    #a{color:orange;}    // 100

 

优先权重总结如下：

（1）内联CSS > ID选择器 > 类选择器 > 标签选择器

（2）组合选择器的情况下，根据权重值相加原则判断

（3）权重相同的情况下，后面的CSS将覆盖前面的CSS

 

练习题：

（1）

     <style type="text/css">

 

         div{color: red;}

 

         p{color: blue;}

 

    </style>

 

    <div>

 

        <p>test</p>

 

    </div>

 

文本最终颜色值？

 

答案：blue

提示：这里将按照选择器作用标签的层级作为优先考虑，也就是说越接近文本的标签样式优先权重更高。

 

（2）

    <style type="text/css">

 

         #div1{color: red;}

 

         p{color: blue}

 

    </style>

 

    <div id="div1">

 

         <p>test</p>

 

    </div>

 

文本最终颜色值？

 

答案：blue

提示：任何情况下，继承的祖先元素样式的优先级都不如目标元素的样式优先级，哪怕在第一条语句加上!important也是无用的。

 

 

（3）

    <style type="text/css">

 

        div p{color: red;}

 

        p{color: blue;}

 

    </style>

 

    <div>

 

       <p>test</p>

 

    </div>

 

文本最终颜色值？

 

答案：red

提示：第一条css语句权重：1+1；第二条css语句权重1；所以最终将显示red

 

（4）

      <style type="text/css">

 

           div p{color: red;}

 

           p{color: blue!important;}

 

      </style>

 

      <div>

 

         <p style="color: yellow;">test</p>

 

      </div>

 

文本最终颜色值？

 

答案：blue

提示：!improtant>内联CSS > ID选择器 > 类选择器 > 标签选择器

1.3   CSS引入方式

1.3.1    内联CSS

将CSS直接通过标签元素的style属性值的方式写入。如：

<div style=”background:red”></div>

此方法简单方便，但是违背结构与样式分离，使得HTML代码较多，当页面有大量内联CSS时难以维护，尽量不使用。

1.3.2    Style标签引入

<style>...</style>结构可以位于页面<HTML>标签中的任何位置，也可以多次出现。通常是将整个<style>...</style>结构写在页面的<head>...</head>部分中。如

     <head>

 

           <meta charset="utf-8" />

 

            <title></title>

 

            <style>   

 

                   html,body{height: 100%;margin: 0;}  

 

                   body:before {content: 'The Start:'; display: block}

 

           </style>

 

     </head>

 

适用场景：页面独有的CSS样式。

1.3.3    外链CSS

将css代码写在一个单独的文件中，用link标签直接引入该文件到页面中。一个页面可以多次使用link标签引入多个外部css文件，注意这些CSS代码的相互影响，通常是后引入的CSS文件会覆盖前面引入的CSS文件的相同效果。引入代码，如下：

<link rel="stylesheet" type="text/css" href="*.css">

这种引入CSS的方式是目前最为流行的，可以在站个网站范围内进行CSS代码的规划，方便复用和维护。

1.4   盒模型

 

在 CSS 中，width 和 height 指的是内容区域（content）的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素，以下是CSS代码

 

     #box {

 

          70px;

 

         margin: 10px;

 

         padding: 5px;

 

     }

 

在页面调试过程中，可以通过（谷歌）浏览器控制台观察当前元素的模型状态。点击任意一个元素，在样式显示区域可以看到

1.5   元素display

1.5.1    行内与块状

元素在遵循盒模型的基础上，有两种最基本的表现形式：行内和块状；所有元素都有一个display的CSS属性，这个属性值代表此元素在页面中的表现形式，行内元素的默认值为inline，块状元素为block。可以使用display:block;或display:inline;实现块级元素和行内元素的相互转换。

常见块状元素：

div - 常用块级容易，也是CSS layout的主要标签
       dl - 定义列表
       fieldset - form控制组
      form - 交互表单
      h1 - 大标题
      h2 - 副标题
      h3 - 3级标题
      h4 - 4级标题
      h5 - 5级标题
      h6 - 6级标题
      hr - 水平分隔线
      noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
       ol - 有序表单
      p - 段落
      pre - 格式化文本
      table - 表格
      ul - 无序列表

常见行内元素：

a - 锚点
      abbr - 缩写
      br - 换行
      code - 计算机代码(在引用源码的时候需要)
      em - 强调
      i - 斜体
      img - 图片
      input - 输入框
      label - 表格标签
      s - 中划线(不推荐)
      select - 项目选择
      small - 小字体文本
      span - 常用内联容器，定义文本内区块
      sub - 下标
      sup - 上标
      textarea - 多行文本输入框

1.5.2    inline-block 

display的属性值除了inline和block之外，还有其它可选值，其中比较重要也是使用最频繁的的就是inline-block值。

display:inline-block：行内显示与块状显示的中和，首先它是行内显示的，同时兼并了block元素可以设置高宽属性的特质。

我们总结下三种display值各自的表现和差异：

display:block

（1）block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。

（2）block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。

（3）block元素可以设置margin和padding属性。

display:inline

（1）inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。

（2）inline元素设置width,height属性无效。

（3）inline元素的margin和padding属性，padding和水平方向的margin-left, margin-right都产生边距效果；但竖直方向的margin-top, margin-bottom不会产生边距效果。

display:inline-block

（1）不会独占一行。

（2）可以设置width,height属性。

（3）可以设置margin和padding属性。

1.5.3    display:none

display：none经常被用来隐藏元素，比如一个弹出层模块默认被设置为display:none，当需要被显示的时候，设置display为block（一般为block，当然inline也可以）之后便显示出来。

与visibility：hidden的区别：

（1）display：none的元素可以理解为在页面中被删除，它所占的位置也被其它元素替代，浏览器检测到display属性改变之后将重新渲染整个页面，效率相对低。

（2）visibility：hidden的元素并没有在页面中被删除，仅仅是在页面中不可见，它的位置也不会被其它元素替代，浏览器不会重新渲染页面，效率更高。

理论上来说，能够使用visibility：hidden去隐藏元素都尽量使用这个属性，但一般情况下因为占位的问题，我们使用display：none也不会有太大问题。

 

 

 

阶段练习：

（1）在了解盒模型和display属性之后，我们就可以开始做一些常见的基本布局：

要求：做一个横向居中于浏览器，导航项固定宽高，文本水平垂直居中；当鼠标指向某一个导航项时，鼠标呈现手势状态，且该被选择的导航项背景颜色改变，文本颜色改变，颜色自行决定。

 

（2）尝试做一个二级菜单：

 

1.6   浏览器兼容

1.6.1    浏览器内核

四大浏览器内核
        1.Trident (IE浏览器) :因为在早期IE占有大量的市场份额，所以以前有很多网页是根据这个Trident的标准来编写的，但是实际上这个内核对真正的网页标准支持不是很好，同时存在许多安全Bug。
        2.Gecko:( FireFox )优点就是功能强大、丰富，可以支持很多复杂网页效果和浏览器扩展接口，缺点是消耗很多的资源，比如内存。
        3.Webkit: ( Chrome/ Safari / UC )优点就是Webkit拥有清晰的源码结构、极快的渲染速度，缺点是对网页代码的兼容性较低，会使一些编写不标准的网页无法正确显示。


        4.Presto: ( 欧朋 ) Presto内核被称为公认的浏览网页速度最快的内核，同时也是处理JS脚本最兼容的内核，能在Windows、Mac及Linux操作系统下完美运行。

 

时间2015-12  来源百度统计

谷歌的市场占有率在国内已经位居第一位，而令人讨厌的IE6已经不足4个百分点，个人建议不要考虑IE6的兼容，把更多时间拿出来设计交互更好的页面。

所以按照浏览器占有率，我建议你的兼容测试优先级为：谷歌浏览器 > IE7/IE8（一般情况下低版本没问题，高版本就不会有大问题）+ 搜狗浏览器（国内浏览器内核一般是高速模式：WebKit；兼容模式：IE的trident核心）。

当然不同的公司不同的业务对应的浏览器要求不同，还是因地制宜。

1.6.2    兼容方法

由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果（这就叫做CSS hack）。

简单的说，CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。

 

CSS hack常用的方法：

1.6.2.1      条件注释法

这种一般是通过条件注释，不同浏览器加载不同的CSS外链实现，如：

 

    <link href="all_browsers.css" rel="stylesheet" type="text/css">

 

    <!--[if IE]> <link href="ie_only.css" rel="stylesheet" type="text/css"> <![endif]-->

 

    <!--[if lt IE 7]> <link href="ie_6_and_below.css" rel="stylesheet" type="text/css">       <![endif]-->

 

a.         只在IE下生效：

<!--[if IE]>

这段文字只在IE浏览器显示

<![endif]-->

 

b.         只在IE6下生效：

<!--[if IE 6]>

这段文字只在IE6浏览器显示

<![endif]-->

 

c.         只在IE6以上版本生效：

<!--[if gte IE 6]>

这段文字只在IE6以上(包括)版本IE浏览器显示

<![endif]-->

 

d.         只在IE8上不生效：

<!--[if ! IE 8]>

这段文字在非IE8浏览器显示

<![endif]-->

 

e.         非IE浏览器生效：

<!--[if !IE]>

这段文字只在非IE浏览器显示

<![endif]-->

1.6.2.2      属性前缀法（常用）

1.6.2.2.1   *

仅IE6/IE7可识别

1.6.2.2.2   _

仅IE6支持：_background-color:orange;       /*for ie6*/ 

1.6.2.2.3   9

IE浏览器支持：background-color:red9;      /*all ie*/

1.6.2.2.4   !important

这个代表优先级最高，但是IE6不识别。来看个具体例子（区别IE6,IE7,IE8,FF）：

      #tip{ 

 

             background:blue;    /*Firefox背景变蓝色 所有浏览器都支持*/ 

 

             background:red9;  /*IE8背景变红色 IE6、7、8、9支持覆盖上面样式*/ 

 

            *background:black;         /*IE7背景变黑色 IE6、7支持又一次覆盖上面样式*/ 

 

            _background:orange;  /*IE6背景变橘色 仅IE6支持又一次覆盖上面样式*/ 

 

       }  

 

 

 

可以看出来，这种css hack方法，就是通过不同浏览器对不同属性前缀的支持不同，来区分设置不同浏览器的CSS值。

1.6.2.2.5   CSS3的浏览器私有属性

实例：

      -webkit-transform:rotate(-3deg);   /*为Chrome/Safari*/

 

      -moz-transform:rotate(-3deg);      /*为Firefox*/

 

      -ms-transform:rotate(-3deg);               /*为IE*/

 

      -o-transform:rotate(-3deg);          /*为Opera*/

 

      transform:rotate(-3deg);               /*为nothing*/

 

1.6.2.2.6  选择器前缀法（知道即可，不常使用）

         *html *前缀只对IE6生效

         *+html *+前缀只对IE7生效

1.6.3    补充

1．现在前端开发很少再兼容IE6/7了。

2．最新版的浏览器的css兼容性问题越来越小，各浏览器趋于一致。

3．响应式设计的大量应用，导致兼容各种尺寸的屏幕和各种移动端设备成了前端开发更重要的问题。

1.7   CSS布局

在前面，我们学习了元素的盒模型和元素的display属性这两个基础概念之后，我们来看看以下三种布局归类法：Flow Model（流动模型）、Float Model（浮动模型）、Layer Model（层模型）；可以认为几乎所有的web页面，都是由这三种布局模型所组成。

1.7.1    Flow Model（流动模型）

流动模型是 HTML 默认布局模型；即可认为是随着文档流自上而下按顺序动态分布，就像麻袋里面堆放了一堆物品，拿掉其中一个上面的物品会自动滚动下去。

 

重点词：最基础简单的模型，也是web元素默认的显示模型

 

1.7.2    Float Model（浮动模型）

使用float属性的元素，将脱离正常的文档流，表现出独特的显示特性；在需要左右靠齐的

情况下使用较多。元素使用float之后，将自动表现为display:inline-block的表现。

 

重点词：

1．浮动元素会脱离正常的文档流，典型特征是父元素无视浮动的子元素。

案例

   <style type="text/css">

 

                #container{background: black;padding: 5px;}    

 

                #sub{background: red; }                                  

 

       </style>

 

       </head>

 

       <body>

 

            <div id="container">

 

                <div id="sub">dd</div>

 

            </div>

 

       </body>

 

 

显示结果：

 

 

给sub的div增加float:left，显示结果：

 

 

分析：子元素浮动之后，脱离正常文档流，也就是相当于父元素里面不再有该浮动元素存在，所以此时container里面只有一个padding；而sub元素则相对父元素的左上角起点独立显示。

 

2．块状元素无视浮动元素；内联元素和浮动元素并作一行。

案例：

 

              <head>

    <style type="text/css">

              #container{background: black;padding: 5px;}    

              #sub{background: red; float: left;}

              #div{background: green;}           

       </style>

       </head>

       <body>

              <div id="container">

                     <div id="sub">dd</div>

              </div>           

              <div id="div">dd</div>

       </body>

 

显示结果：

 

 

分析：父元素无视浮动元素（第一点我们已经讲过），同时绿色div也无视浮动的元素而现实在黑色div之下；同时注意到绿色里面的dd文本（这里可以看做是内联元素）很明显受到了浮动元素的影响，紧贴这红色浮动元素并作一行。

 

3．多个浮动元素时，将形成浮动文档流，按照inline-block的表现显示。

案例：

       <head>

            <style type="text/css">

                     #div1{float:left;background: red;padding: 10px;}

                     #div2{float:left;background: green;margin: 10px;}    

                     #div3{float:left;background: yellow;}        

              </style>

       </head>

       <body>

              <div id='div1'>aa</div>

              <div id='div2'>bb</div>

              <div id='div3'>cc</div>

       </body>

 

显示结果：

 

分析：可以看出每个浮动的元素按照浮动先后顺序（最先浮动的在最左边，如果这个案例中改为float:right，则div1在最右边）并成一行，并且display性质为inline-block，可以正常设置padding和margin；对于float的元素我们没有必要再去手动设置它的display属性（无效）。

 

注意点：

正常文档流和浮动文档流并不是完全隔离，而是相互有影响的，而这种相互影响往往导致布局情况会相对复杂，尤其是很多不同层级的元素同时浮动时，容易产生非预期的情况，所以不建议滥用浮动。

 

关于清除浮动：

浮动元素之后，往往出现不易控制其显示位置的情况，如果子元素是浮动的，父元素不浮动那么子元素的位置是脱离父元素的束缚，其位置也是根据文档流中上一个已经定位的元素来决定他的位置。

比如：

在一个父容器里面有很多浮动div，结果往往是：

 

此时，因为子元素是浮动的，父容器不能随着子元素尺寸的改变而改变，这种情况往往并不是我们希望的，这个时候就就可以使用清除浮动：

       <style type="text/css">

              #container{background: black;padding: 5px; }   

              #sub{background: red;float: left; }      

              .clear{clear: both;}                     

       </style>

       </head>

       <body>

              <div id="container">

                     <div id="sub">dd</div>

                     <div class="clear"></div>

              </div>

       </body>

 

显示结果：

 

所以，我们常常用到这种方法去让父容器的尺寸自适应浮动的子元素尺寸；但这里有个不好的地方是使用了一个专门的标签去实现浮动功能，在实际项目中我们通常是在父元素中加上清除浮动类，通过伪类标签去实现：

       <style type="text/css">

              #container{background: black;padding: 5px; }   

              #sub{background: red;float: left; }      

              .clearfix {

                     clear: both;

                     overflow: hidden;

              }                  

              .clearfix:after {

                     clear: both;

                     content: "";

                     display: block;

                     height: 0;

                     visibility: hidden;

              }                         

       </style>

       </head>

       <body>

              <div id="container" class="clearfix">

                     <div id="sub">dd</div>

              </div>

       </body>

 

1.7.3    Layer Model（层模型）

层模型也叫定位模型，所有元素的默认定位属性（position）值为static，其它常用的三种设置是为fixed,absolute,relative。

static：表示不定位，元素遵循 HTML 默认的流动模型，如果未显式声明元素的定位类型，则默认为该值。

fixed：表示固定定位,不会随浏览器窗口的滚动条滚动而变化

absolute：表示绝对定位，将元素从文档流中拖出来，然后使用 left、right、top、bottom 属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。

relative：表示相对定位，它通过 left、right、top、bottom 属性确定元素在正常文档流中的偏移位置。元素仍然占据原来的空间。

1.7.4    常用CSS技巧

1.7.4.1      结构清晰、命名有规则和语义、习惯注释；

 

 

1.7.4.2      处理居中

1.7.4.2.1  文本（内联元素）水平居中

使用text-align:center

1.7.4.2.2  固定宽度的块级元素水平居中

父元素使用text-align:center，块级元素使用margin:0 auto即可：

 

1.7.4.2.3  固定宽度的元素水平、垂直居中

利用绝对定位和负边距处理：

 

1.7.4.2.4  单行文本垂直居中

使用line-height（行高）可以控制垂直位置

 

1.7.4.3      高度随内容自增长

使用min-height:40px; height:auto!important; height:40px;

一般高级浏览器设置min-height即可，当内容高度超过这个最小高度的时候会自增长。

 

1.7.5    结构布局实例

在构建一个web页面之前，都需要首先分析页面的整体结构，划分功能区域，搭建基本的页面框架：

 

 

 

 

 

 

 

 

 

 

 

 

 

 

分析结构：

 

1. 搭建页面主框架：

 

<body>

              <div id="wrapper">

                     <!--这是头部-->

                     <div id="header">header</div>

                     <!--这是导航栏-->

                     <div id="nav">nav</div>

                     <!--这是轮播图-->

                     <div id="picture">pictures</div>

                     <!--这是内容部分-->

                     <div id="content">

                            <!--内容的左侧-->

                            <div id="content_left">content_left</div>

                            <!--内容的右侧-->

                            <div id="content_right">content_left</div>

                     </div>

                     <!--这是尾部-->

                     <div id="footer">footer</div>

              </div>

       </body>

 

2. 写主框架的CSS

#wrapper {

       margin: 0;

       padding: 0;

}

#header {

       80%;

       height: 100px;

       background-color: #CCFFCB;

       margin: 0 auto;

}

#nav {

       100%;

       height: 40px;

       background-color: #CCFFCB;

       margin: 10px 0;

}

#picture {

       80%;

       height: 250px;

       margin: 0 auto;

       background-color: #CCFFCB;

}

#content {

       78%;

       height: 560px;

       margin: 10px auto;

       background-color: #CCFFCB;

       padding: 1%;

}

#content_left {

       30%;

       height: 95%;

       background-color: #feff98;

       float: left;

}

#content_right {

       65%;

       height: 95%;

       background-color: #ffcc98;

       float: right;

}

#footer {

       100%;

       height: 70px;

       background-color: #CCFFCB;

}

 

3. 网站的全部整体框架

<body>

              <div id="wrapper">

                     <!--这是头部-->

                     <div id="header">

                            <a href="" class="header_left"><img src=""/></a>

                            <div class="header_right">

                                   <p class="right1">

                                          <a href="">设为首页</a> |

                                          <a href="">加入收藏</a>

                                   </p>

                                   <p class="right2">咨询电话：13023288071</p>

                            </div>

                     </div>

                     <!--这是导航栏-->

                     <div id="nav">

                            <ul>

                                   <li><a href="">网站首页</a></li>

                                   <li><a href="">关于我们</a></li>

                                   <li><a href="">服务范围</a></li>

                                   <li><a href="">新闻中心</a></li>

                                   <li><a href="">工程案例</a></li>

                                   <li><a href="">联系我们</a></li>

                            </ul>

                     </div>

                     <!--这是图片-->

                     <div id="picture">

                            <img src="" alt="" />

                     </div>

                     <!--这是内容部分-->

                     <div id="content">

                            <!--内容的左侧-->

                            <div id="content_left">

                                   <div class="left_title">服务项目 Service</div>

                                   <div class="left_menu1">

                                          <ul>

                                                 <li>拆旧、敲墙、酒店、商场</li>

                                                 <li>宾馆拆旧工程</li>

                                                 <li>建筑工地废旧厂房拆酒店</li>

                                                 <li>娱乐场所</li>

                                                 <li>建筑工地及家庭</li>

                                          </ul>

                                   </div>

                                   <div class="left_title">联系我们 Contact</div>

                                   <div class="left_menu2">

                                          <p>XX工程有限公司</p>

                                          <p>电话：130555555</p>

                                          <p>传真：0517-85932887</p>

                                          <p>地址：淮安天桥区北园大街548号</p>

                                          <p>网址：www.gggg.com</p>

                                   </div>

                            </div>

                            <!--内容的右侧-->

                            <div id="content_right">

                                   <div class="company_description">

                                          <div class="content_title1">

                                                 <span>公司简介</span>

                                                 <a href=""><img src="img/more.jpg" alt="" /></a>

                                          </div>

                                          <div class="content_description">

                                                 <p></p>

                                                 <img src="" alt="" />

                                          </div>

                                   </div>

                                   <div class="news">

                                          <div class="content_title1">

                                                 <span>新闻中心</span>

                                                 <a href="">

                                                        <img src="img/more.jpg" alt="" />

                                                 </a>

                                          </div>

<!--新闻链接列表-->

                                          <ul>

                                                 <li><a href=""></a></li>

                                                 <li><a href=""></a></li>

                                                 <li><a href=""></a></li>

                                                 <li><a href=""></a></li>

                                                 <li><a href=""></a></li>

                                                 <li><a href=""></a></li>

                                                 <li><a href=""></a></li>

                                                 <li><a href="">/a></li>

                                          </ul>

                                   </div>

                                   <div class="case_show">

                                          <div class="content_title2">

                                                 <span>案例展示</span>

                                                 <a href=""><img src="" alt="" /></a>

                                          </div>

                                          <div class="case_name">

                                                 <ul>

                                                        <li><a href=""><img src="img/pic3.jpg" alt=""                                                                /><p>案例展示名称</p></a></li>

                                                        <li><a href=""><img src="img/pic3.jpg" alt=""                                                                /><p>案例展示名称</p></a></li>

                                                        <li><a href=""><img src="img/pic3.jpg" alt=""                                                                /><p>案例展示名称</p></a></li>

                                                        <li><a href=""><img src="img/pic3.jpg" alt=""                                                                /><p>案例展示名称</p></a></li>

                                                 </ul>

                                          </div>

                                   </div>

                            </div>

                     </div>

                     <!--这是尾部-->

                     <div id="footer">

                            <p></p>

                            <p><a href=""></a></p>

                     </div>

              </div>

       </body>

 

1.8   CSS Spirit

CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。

优点:

1.利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；

2.CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

3.解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。

4.更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。

当然，Sprites也有明显的缺点，主要就是维护困难，不过可以通过合理控制合并图片个数去调解此问题。

1.9   三种方式处理icon

Icon在web开发中很常见，这里介绍三种最常见的实现方式。

（1）切图实现

直接用图片作为icon可以说是最直接也是最简单常用的办法了，而且在icon较多的情况下通常会使用spirit方式合并。

（2）Css实现

通过CSS绘制简单的小icon，主要是三角形图标。

（3）文件外链

制作矢量图标，导出各个浏览器支持的文件格式，通过文件链接的形式显示图标。此方法优缺点都较明显，优点是轻量、灵活（大小和颜色可随意设置）、兼容好。缺点是制作麻烦、单色、维护差。具体可参考阿里的http://www.iconfont.cn/平台。这种方法通过字符实体显示图标。

 

<style>

/*常用的多个icon合并成一张图片*/

.nav{ display:block;70px;height:70px; background:url('img/nav.png');}

.nav:hover{ background-position:0 80px}

 

/*利用CSS画简单icon*/

div#up {

0px;

height: 0px;

border-left: 5px solid transparent;

border-right: 5px solid transparent;

border-bottom: 5px solid #2f2f2f;

}

div#down {

0px;

height: 0px;

border-left: 20px solid transparent;

border-right: 20px solid transparent;

border-top: 20px solid #f00;

}

div#left {

0px;

height: 0px;

border-top: 10px solid transparent;

border-bottom: 10px solid transparent;

border-right: 10px solid yellow;

}

div#right {

0px;

height: 0px;

border-top: 60px solid transparent;

border-bottom: 60px solid transparent;

border-left: 60px solid green;

}

 

/*通过自定义字体的方式显示图片 http://www.iconfont.cn/*/

@font-face {font-family: 'iconfont';

    src: url('font/iconfont.eot'); /* IE9*/

    src: url('font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

    url('font/iconfont.woff') format('woff'), /* chrome、firefox */

    url('font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/

    url('font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */

}

.iconfont{

    font-family:"iconfont" !important;

    font-size:32px;font-style:normal;

    -webkit-font-smoothing: antialiased;

    -webkit-text-stroke- 0.2px;

    -moz-osx-font-smoothing: grayscale;}

.iconfont:hover{color:red; font-size:36px}

</style>

<body>

<!--demo1-->

---------图片icon---------

<i class="nav"></i>

 

<!--demo2-->

---------CSS icon---------

<div id="up"></div>

<div id="down"></div>

<div id="left"></div>

<div id="right"></div>

 

<!--demo3-->

---------外链文件 icon---------

<br/>

<i class="iconfont">&#xe74f;</i>

</body>

 

 

1.1   CSS基础

1.1.1    概述

CSS 指层叠样式表 (Cascading Style Sheets)。

层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。

1.1.2    基本格式

CSS规则是由两部分组成，选择器以及一条或多条声明，声明使用分号隔开：

      selector { declaration1 ; declaration2 ......}

例如 : h1{ color:red ; font-size:14px ; }

1.1.3    常用属性

以下列表是一些常用的属性：

属性	描述	CSS
background	在一个声明中设置所有的背景属性。	1
background-attachment	设置背景图像是否固定或者随着页面的其余部分滚动。	1
background-color	设置元素的背景颜色。	1
background-image	设置元素的背景图像。	1
background-position	设置背景图像的开始位置。	1
background-repeat	设置是否及如何重复背景图像。	1
border	在一个声明中设置所有的边框属性。	1
border-bottom border-top	在一个声明中设置所有的下边框属性。 在一个声明中设置所有的上边框属性。	1
border-left border-right	在一个声明中设置所有的左边框属性。 在一个声明中设置所有的右边框属性。	1
border-style	设置四条边框的样式。	1
border-width	设置四条边框的宽度。	1
border-radius	简写属性，设置所有四个 border-*-radius 属性。	3
box-shadow	向方框添加一个或多个阴影。	3
height width	设置元素高度。 设置元素的宽度。	1
max-height min-height	设置元素的最大高度。 设置元素的最小高度。	2
max-width min-width	设置元素的最大宽度。 设置元素的最小宽度。	2
font-family	规定文本的字体系列。	1
font-size	规定文本的字体尺寸。	1
font-weight	规定字体的粗细。	1
list-style	在一个声明中设置所有的列表属性。	1
list-style-type	设置列表项标记的类型。	1
margin	在一个声明中设置所有外边距属性。（margin-top、right、bottom、left）	1
padding	在一个声明中设置所有内边距属性。（padding-top、right、bottom、left）	1
clear	规定元素的哪一侧不允许其他浮动元素。	1
cursor	规定要显示的光标的类型（形状）。	2
display	规定元素应该生成的框的类型。	1
float	规定框是否应该浮动。	1
overflow	规定当内容溢出元素框时发生的事情。	2
position	规定元素的定位类型。	2
visibility	规定元素是否可见。	2
z-index	设置元素的堆叠顺序。	2
color	设置文本的颜色。	1
line-height	设置行高。	1
text-align	规定文本的水平对齐方式。	1
text-decoration	规定添加到文本的装饰效果。	1

1.2   CSS选择器

1.2.1    选择器类别

选择器是CSS中极为重要的一个概念：通过一定的CSS语言写法，能够选择到某一个或某一些标签元素，从而为这一个或一些标签设置样式的声明。

1.2.1.1      Id选择器

ID 选择器可以为标有特定 ID 的 HTML 元素指定特定的样式。根据元素ID来选择元素，具有唯一性，这意味着同一id在同一文档页面中只能出现一次，例如，你将一个元素的id取值为”navi”，那么在同一页面你就不能再将其他元素id取名为”navi”了。

前面以 ”#” 号来标志，在样式里面可以这样定义：

#demoDiv{

color:#FF0000;

}

适用场景：某一个特定元素独有的样式。

1.2.1.2      类选择器

类选择器根据类名来选择，前面以 ”.” 来标志，如：

.demoDiv{color:#FF0000;}

在HTML中，元素可以定义一个class的属性。如：

<div class="demoDiv">这个区域字体颜色为红色。</div>

同时，我们可以再定义一个元素：

<p class="demoDiv">这个段落字体颜色为红色</p>

最后，用浏览器浏览，我们可以发现所有class为demoDiv的元素都应用了这个样式。包括了页面中的div元素和p元素。

适用场景：某一类别元素共同拥有的样式。

1.2.1.3      标签选择器

一个完整的HTML页面是有很多不同的标签组成，而标签选择器，则是决定哪些标签采用相应的CSS样式。

p{

font-size:12px;

background:#900;

color:090;

}

复制代码则页面中所有p标签的背景都是#900(红色)，文字大小均是12px，颜色为#090(绿色)

适用场景：为标签元素统一设置默认的样式。

1.2.1.4      属性选择器

可以用判断html标签的某个属性是否存在的方法来定义css。属性选择器，是根据元素的属性来匹配的，其属性可以是标准属性也可以是自定义属性。

[attr]：
　　       [title] {margin-left: 10px}
　　       //选择具有 title 属性的所有元素；
　　[attr=val]：
　　       [title = 'this'] {margin-right: 10px}
　           //选择属性 title 的值等于 this 的所有元素
　　[attr^=val]：
　　       [title ^= 'this'] {margin-left: 15px}
　　       //选择属性title的值以this开头的所有元素
　　[attr$=val]：
　　       [title $= 'this'] {margin-right: 15px}
　　       //选择属性title的值以this结尾的所有元素
　　[attr*=val]：
　　       [title *= 'this'] {margin: 10px}
　　       //选择属性title 的值包含 this 的所有元素

属性选择器效率较低，不建议大规模适用。

1.2.1.5      伪类选择器

有时候还会需要用文档以外的其他条件来应用元素的样式，比如鼠标悬停等。这时候我们就需要用到伪类了。以下是链接应用的伪类定义。

a:visited{

color:#FFFF00;

}

a:hover{

color:#006600;

}

1.2.1.6      伪元素选择器

所有伪元素选择器都必须放在出现该伪元素的选择器的最后面，也就是说伪元素选择器不能跟任何派生选择器，如：p:first-letter em {} 这就是不合法的。

:first-letter：设置块元素首字母样式，行内元素转换成块元素和行内块元素也支持；
       div p:first-letter {font-size: 20px}
　　//选择div元素里所有的p元素的第一个字母或汉字，如果把块元素转换成行内元素则就不支持了；
:before：设置之前的样式，可以插入生成的内容，并设置其样式；
　　body:before {content: 'The Start:'; display: block}
　    //在body元素前插入文本内容'The Start:'，并设置其为块元素
:after：设置之后的样式，可以插入生成的内容，并设置其样式；
　　body:after {content: 'The End.'; display: block}
　　//在body元素最后插入文本内容'The End.'，并设置其为块元素

1.2.1.7      结构性伪类选择器

选择器	含义	示例
E:nth-child(n)	匹配其父元素的第n个子元素，第一个编号为1	p:nth-child(3) { color:#f00; } p:nth-child(odd) { color:#f00; } p:nth-child(even) { color:#f00; } p:nth-child(3n) { color:#f00; } tr:nth-child(2n+11) { background:#ff0; } tr:nth-last-child(2) { background:#ff0; }
E:nth-last-child(n)	匹配其父元素的倒数第n个子元素，倒数第一个编号为1
E:last-child	匹配父元素的最后一个子元素，等同于:nth-last-child(1)
E:only-child	匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:empty	匹配一个不包含任何子元素的元素，注意：文本节点也被看作子元素

 

1.2.1.8      通用选择器

通用选择器表示所有元素统一样式，用 * 来表示。例如：

*{

font-size: 12px;

}

1.2.1.9      组合选择器

1.2.1.9.1  后代选择器

后代选择器也称为包含选择器，用来选择特定元素或元素组的后代，将对父元素的选择放在前面，对子元素的选择放在后面，中间加一个空格分开。后代选择器中的元素不仅仅只能有两个，对于多层祖先后代关系，可以有多个空格加以分开，如id为a、b、c的三个元素，则后代选择器可以写成#a #b #c{}的形式，只要对祖先元素的选择在后代元素之前、中间以空格分开即可。如：

 

<style>

  .father .child{

         color:#0000CC;

   }

</style>

<p class="father">黑色

    <label class="child">蓝色

         <b>也是蓝色</b>

        </label>

</p>

 

这里我们定义了所有class属性为father的元素下面的class属性为child的颜色为蓝色。后代选择器是一种很有用的选择器，使用后代选择器可以更加精确的定位元素。

1.2.1.9.2  群组选择器

当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。如：

 

p, td, li {

   line-height:20px;

   color:#c00;

 }

#main p, #sider span {

   color:#000;

   line-height:26px;

 }

 

1.2.2    选择器优先权重

当标签被多个选择器作用时，按照权重值相加，值大者优先原则，权重值相同那么后定义的规则优先。

权重值列表：

选择器	权重值
Id选择器	100
类选择器	10
标签选择器	1

 

CSS选择器的权重算法实例：

 

<style>

   div{color:red;}

   a{color:blue;}

   div .class-a{color:yellow;}

   .class-div a{color:black;}

   #a{color:orange}

</style>

 

<div class='class-div'>

    <a id='a' class='class-a'>测试css权重</a>

</div>

 

实例分析：

a标签中的文本内容同时被4个CSS选择器所作用，并且样式发生冲突，按照权重值原则分别计算出各选择器的权重值如下：

div{color:red;}    //  1

a{color:blue;}    //  1

div .class-a{color:yellow;}    // 1+10=11

.class-div a{color:black;}    // 10+1=11

#a{color:orange;}    // 100

优先权重总结如下：

（1）内联CSS > ID选择器 > 类选择器 > 标签选择器

（2）组合选择器的情况下，根据权重值相加原则判断

（3）权重相同的情况下，后面的CSS将覆盖前面的CSS

 

练习题：

（1）

<style type="text/css">

       div{color: red;}

       p{color: blue;}

</style>

<div>

<p>test</p>

</div>

文本最终颜色值？

 

答案：blue

提示：这里将按照选择器作用标签的层级作为优先考虑，也就是说越接近文本的标签样式优先权重更高。

 

（2）

<style type="text/css">

       #div1{color: red;}

       p{color: blue}

</style>

<div id="div1">

<p>test</p>

</div>

文本最终颜色值？

 

答案：blue

提示：任何情况下，继承的祖先元素样式的优先级都不如目标元素的样式优先级，哪怕在第一条语句加上!important也是无用的。

 

 

（3）

<style type="text/css">

       div p{color: red;}

       p{color: blue;}

</style>

<div>

<p>test</p>

</div>

文本最终颜色值？

 

答案：red

提示：第一条css语句权重：1+1；第二条css语句权重1；所以最终将显示red

 

（4）

<style type="text/css">

       div p{color: red;}

       p{color: blue!important;}

</style>

<div>

<p style="color: yellow;">test</p>

</div>

文本最终颜色值？

 

答案：blue

提示：!improtant>内联CSS > ID选择器 > 类选择器 > 标签选择器

1.3   CSS引入方式

1.3.1    内联CSS

将CSS直接通过标签元素的style属性值的方式写入。如：

<div style=”background:red”></div>

此方法简单方便，但是违背结构与样式分离，使得HTML代码较多，当页面有大量内联CSS时难以维护，尽量不使用。

1.3.2    Style标签引入

<style>...</style>结构可以位于页面<HTML>标签中的任何位置，也可以多次出现。通常是将整个<style>...</style>结构写在页面的<head>...</head>部分中。如：

 

<head>

       <meta charset="utf-8" />

       <title></title>

       <style>   

              html,body{height: 100%;margin: 0;}  

              body:before {content: 'The Start:'; display: block}

       </style>

</head>

 

适用场景：页面独有的CSS样式。

1.3.3    外链CSS

将css代码写在一个单独的文件中，用link标签直接引入该文件到页面中。一个页面可以多次使用link标签引入多个外部css文件，注意这些CSS代码的相互影响，通常是后引入的CSS文件会覆盖前面引入的CSS文件的相同效果。引入代码，如下：

<link rel="stylesheet" type="text/css" href="*.css">

这种引入CSS的方式是目前最为流行的，可以在站个网站范围内进行CSS代码的规划，方便复用和维护。

1.4   盒模型

 

在 CSS 中，width 和 height 指的是内容区域（content）的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素，以下是CSS代码：

 

#box {

   70px;

  margin: 10px;

  padding: 5px;

}

 

下图是对上面CSS代码的解释：

 

在页面调试过程中，可以通过（谷歌）浏览器控制台观察当前元素的模型状态。点击任意一个元素，在样式显示区域可以看到：

1.5   元素display

1.5.1    行内与块状

元素在遵循盒模型的基础上，有两种最基本的表现形式：行内和块状；所有元素都有一个display的CSS属性，这个属性值代表此元素在页面中的表现形式，行内元素的默认值为inline，块状元素为block。可以使用display:block;或display:inline;实现块级元素和行内元素的相互转换。

常见块状元素：

div - 常用块级容易，也是CSS layout的主要标签
      dl - 定义列表
      fieldset - form控制组
      form - 交互表单
      h1 - 大标题
      h2 - 副标题
      h3 - 3级标题
      h4 - 4级标题
      h5 - 5级标题
      h6 - 6级标题
      hr - 水平分隔线
      noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
      ol - 有序表单
      p - 段落
      pre - 格式化文本
      table - 表格
      ul - 无序列表

常见行内元素：

a - 锚点
      abbr - 缩写
      br - 换行
      code - 计算机代码(在引用源码的时候需要)
      em - 强调
      i - 斜体
      img - 图片
      input - 输入框
      label - 表格标签
      s - 中划线(不推荐)
      select - 项目选择
      small - 小字体文本
      span - 常用内联容器，定义文本内区块
      sub - 下标
      sup - 上标
      textarea - 多行文本输入框

1.5.2    inline-block

display的属性值除了inline和block之外，还有其它可选值，其中比较重要也是使用最频繁的的就是inline-block值。

display:inline-block：行内显示与块状显示的中和，首先它是行内显示的，同时兼并了block元素可以设置高宽属性的特质。

我们总结下三种display值各自的表现和差异：

display:block

（1）block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。

（2）block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。

（3）block元素可以设置margin和padding属性。

display:inline

（1）inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。

（2）inline元素设置width,height属性无效。

（3）inline元素的margin和padding属性，padding和水平方向的margin-left, margin-right都产生边距效果；但竖直方向的margin-top, margin-bottom不会产生边距效果。

display:inline-block

（1）不会独占一行。

（2）可以设置width,height属性。

（3）可以设置margin和padding属性。

1.5.3    display:none

display：none经常被用来隐藏元素，比如一个弹出层模块默认被设置为display:none，当需要被显示的时候，设置display为block（一般为block，当然inline也可以）之后便显示出来。

与visibility：hidden的区别：

（1）display：none的元素可以理解为在页面中被删除，它所占的位置也被其它元素替代，浏览器检测到display属性改变之后将重新渲染整个页面，效率相对低。

（2）visibility：hidden的元素并没有在页面中被删除，仅仅是在页面中不可见，它的位置也不会被其它元素替代，浏览器不会重新渲染页面，效率更高。

理论上来说，能够使用visibility：hidden去隐藏元素都尽量使用这个属性，但一般情况下因为占位的问题，我们使用display：none也不会有太大问题。

 

 

 

阶段练习：

（1）在了解盒模型和display属性之后，我们就可以开始做一些常见的基本布局：

要求：做一个横向居中于浏览器，导航项固定宽高，文本水平垂直居中；当鼠标指向某一个导航项时，鼠标呈现手势状态，且该被选择的导航项背景颜色改变，文本颜色改变，颜色自行决定。

 

（2）尝试做一个二级菜单：

 

1.6   浏览器兼容

1.6.1    浏览器内核

四大浏览器内核
        1.Trident (IE浏览器) :因为在早期IE占有大量的市场份额，所以以前有很多网页是根据这个Trident的标准来编写的，但是实际上这个内核对真正的网页标准支持不是很好，同时存在许多安全Bug。
        2.Gecko:( FireFox )优点就是功能强大、丰富，可以支持很多复杂网页效果和浏览器扩展接口，缺点是消耗很多的资源，比如内存。
        3.Webkit: ( Chrome/ Safari / UC )优点就是Webkit拥有清晰的源码结构、极快的渲染速度，缺点是对网页代码的兼容性较低，会使一些编写不标准的网页无法正确显示。


        4.Presto: ( 欧朋 ) Presto内核被称为公认的浏览网页速度最快的内核，同时也是处理JS脚本最兼容的内核，能在Windows、Mac及Linux操作系统下完美运行。

 

时间2015-12  来源百度统计

谷歌的市场占有率在国内已经位居第一位，而令人讨厌的IE6已经不足4个百分点，个人建议不要考虑IE6的兼容，把更多时间拿出来设计交互更好的页面。

所以按照浏览器占有率，我建议你的兼容测试优先级为：谷歌浏览器 > IE7/IE8（一般情况下低版本没问题，高版本就不会有大问题）+ 搜狗浏览器（国内浏览器内核一般是高速模式：WebKit；兼容模式：IE的trident核心）。

当然不同的公司不同的业务对应的浏览器要求不同，还是因地制宜。

1.6.2    兼容方法

由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果（这就叫做CSS hack）。

简单的说，CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。

 

CSS hack常用的方法：

1.6.2.1      条件注释法

这种一般是通过条件注释，不同浏览器加载不同的CSS外链实现，如：

 

<link href="all_browsers.css" rel="stylesheet" type="text/css">

<!--[if IE]> <link href="ie_only.css" rel="stylesheet" type="text/css"> <![endif]-->

<!--[if lt IE 7]> <link href="ie_6_and_below.css" rel="stylesheet" type="text/css">       <![endif]-->

 

a.         只在IE下生效：

<!--[if IE]>

这段文字只在IE浏览器显示

<![endif]-->

 

b.         只在IE6下生效：

<!--[if IE 6]>

这段文字只在IE6浏览器显示

<![endif]-->

 

c.         只在IE6以上版本生效：

<!--[if gte IE 6]>

这段文字只在IE6以上(包括)版本IE浏览器显示

<![endif]-->

 

d.         只在IE8上不生效：

<!--[if ! IE 8]>

这段文字在非IE8浏览器显示

<![endif]-->

 

e.         非IE浏览器生效：

<!--[if !IE]>

这段文字只在非IE浏览器显示

<![endif]-->

1.6.2.2      属性前缀法（常用）

1.6.2.2.1   *

仅IE6/IE7可识别

1.6.2.2.2   _

仅IE6支持：_background-color:orange;       /*for ie6*/ 

1.6.2.2.3   9

IE浏览器支持：background-color:red9;      /*all ie*/

1.6.2.2.4   !important

这个代表优先级最高，但是IE6不识别。来看个具体例子（区别IE6,IE7,IE8,FF）：

 

#tip{ 

       background:blue;    /*Firefox背景变蓝色 所有浏览器都支持*/ 

       background:red9;  /*IE8背景变红色 IE6、7、8、9支持覆盖上面样式*/ 

       *background:black;         /*IE7背景变黑色 IE6、7支持又一次覆盖上面样式*/ 

       _background:orange;  /*IE6背景变橘色 仅IE6支持又一次覆盖上面样式*/ 

       }  

 

可以看出来，这种css hack方法，就是通过不同浏览器对不同属性前缀的支持不同，来区分设置不同浏览器的CSS值。

1.6.2.2.5   CSS3的浏览器私有属性

实例：

 

-webkit-transform:rotate(-3deg);   /*为Chrome/Safari*/

-moz-transform:rotate(-3deg);      /*为Firefox*/

-ms-transform:rotate(-3deg);               /*为IE*/

-o-transform:rotate(-3deg);          /*为Opera*/

transform:rotate(-3deg);               /*为nothing*/

 

1.6.2.2.6  选择器前缀法（知道即可，不常使用）

         *html *前缀只对IE6生效

         *+html *+前缀只对IE7生效

1.6.3    补充

1．现在前端开发很少再兼容IE6/7了。

2．最新版的浏览器的css兼容性问题越来越小，各浏览器趋于一致。

3．响应式设计的大量应用，导致兼容各种尺寸的屏幕和各种移动端设备成了前端开发更重要的问题。

1.7   CSS布局

在前面，我们学习了元素的盒模型和元素的display属性这两个基础概念之后，我们来看看以下三种布局归类法：Flow Model（流动模型）、Float Model（浮动模型）、Layer Model（层模型）；可以认为几乎所有的web页面，都是由这三种布局模型所组成。

1.7.1    Flow Model（流动模型）

流动模型是 HTML 默认布局模型；即可认为是随着文档流自上而下按顺序动态分布，就像麻袋里面堆放了一堆物品，拿掉其中一个上面的物品会自动滚动下去。

 

重点词：最基础简单的模型，也是web元素默认的显示模型

 

1.7.2    Float Model（浮动模型）

使用float属性的元素，将脱离正常的文档流，表现出独特的显示特性；在需要左右靠齐的情况下使用较多。元素使用float之后，将自动表现为display:inline-block的表现。

 

重点词：

1．浮动元素会脱离正常的文档流，典型特征是父元素无视浮动的子元素。

案例：

<style type="text/css">

                     #container{background: black;padding: 5px;}    

                     #sub{background: red; }                                  

       </style>

       </head>

       <body>

              <div id="container">

                     <div id="sub">dd</div>

</div>

</body>

 

显示结果：

 

 

给sub的div增加float:left，显示结果：

 

 

分析：子元素浮动之后，脱离正常文档流，也就是相当于父元素里面不再有该浮动元素存在，所以此时container里面只有一个padding；而sub元素则相对父元素的左上角起点独立显示。

 

2．块状元素无视浮动元素；内联元素和浮动元素并作一行。

案例：

 

              <head>

    <style type="text/css">

              #container{background: black;padding: 5px;}    

              #sub{background: red; float: left;}

              #div{background: green;}           

       </style>

       </head>

       <body>

              <div id="container">

                     <div id="sub">dd</div>

              </div>           

              <div id="div">dd</div>

       </body>

 

显示结果：

 

 

分析：父元素无视浮动元素（第一点我们已经讲过），同时绿色div也无视浮动的元素而现实在黑色div之下；同时注意到绿色里面的dd文本（这里可以看做是内联元素）很明显受到了浮动元素的影响，紧贴这红色浮动元素并作一行。

 

3．多个浮动元素时，将形成浮动文档流，按照inline-block的表现显示。

案例：

       <head>

            <style type="text/css">

                     #div1{float:left;background: red;padding: 10px;}

                     #div2{float:left;background: green;margin: 10px;}    

                     #div3{float:left;background: yellow;}        

              </style>

       </head>

       <body>

              <div id='div1'>aa</div>

              <div id='div2'>bb</div>

              <div id='div3'>cc</div>

       </body>

 

显示结果：

 

分析：可以看出每个浮动的元素按照浮动先后顺序（最先浮动的在最左边，如果这个案例中改为float:right，则div1在最右边）并成一行，并且display性质为inline-block，可以正常设置padding和margin；对于float的元素我们没有必要再去手动设置它的display属性（无效）。

 

注意点：

正常文档流和浮动文档流并不是完全隔离，而是相互有影响的，而这种相互影响往往导致布局情况会相对复杂，尤其是很多不同层级的元素同时浮动时，容易产生非预期的情况，所以不建议滥用浮动。

 

关于清除浮动：

浮动元素之后，往往出现不易控制其显示位置的情况，如果子元素是浮动的，父元素不浮动那么子元素的位置是脱离父元素的束缚，其位置也是根据文档流中上一个已经定位的元素来决定他的位置。

比如：

在一个父容器里面有很多浮动div，结果往往是：

 

此时，因为子元素是浮动的，父容器不能随着子元素尺寸的改变而改变，这种情况往往并不是我们希望的，这个时候就就可以使用清除浮动：

       <style type="text/css">

              #container{background: black;padding: 5px; }   

              #sub{background: red;float: left; }      

              .clear{clear: both;}                     

       </style>

       </head>

       <body>

              <div id="container">

                     <div id="sub">dd</div>

                     <div class="clear"></div>

              </div>

       </body>

 

显示结果：

 

所以，我们常常用到这种方法去让父容器的尺寸自适应浮动的子元素尺寸；但这里有个不好的地方是使用了一个专门的标签去实现浮动功能，在实际项目中我们通常是在父元素中加上清除浮动类，通过伪类标签去实现：

       <style type="text/css">

              #container{background: black;padding: 5px; }   

              #sub{background: red;float: left; }      

              .clearfix {

                     clear: both;

                     overflow: hidden;

              }                  

              .clearfix:after {

                     clear: both;

                     content: "";

                     display: block;

                     height: 0;

                     visibility: hidden;

              }                         

       </style>

       </head>

       <body>

              <div id="container" class="clearfix">

                     <div id="sub">dd</div>

              </div>

       </body>

 

1.7.3    Layer Model（层模型）

层模型也叫定位模型，所有元素的默认定位属性（position）值为static，其它常用的三种设置是为fixed,absolute,relative。

static：表示不定位，元素遵循 HTML 默认的流动模型，如果未显式声明元素的定位类型，则默认为该值。

fixed：表示固定定位,不会随浏览器窗口的滚动条滚动而变化

absolute：表示绝对定位，将元素从文档流中拖出来，然后使用 left、right、top、bottom 属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。

relative：表示相对定位，它通过 left、right、top、bottom 属性确定元素在正常文档流中的偏移位置。元素仍然占据原来的空间。

1.7.4    常用CSS技巧

1.7.4.1      结构清晰、命名有规则和语义、习惯注释；

 

 

1.7.4.2      处理居中

1.7.4.2.1  文本（内联元素）水平居中

使用text-align:center

1.7.4.2.2  固定宽度的块级元素水平居中

父元素使用text-align:center，块级元素使用margin:0 auto即可：

 

1.7.4.2.3  固定宽度的元素水平、垂直居中

利用绝对定位和负边距处理：

 

1.7.4.2.4  单行文本垂直居中

使用line-height（行高）可以控制垂直位置

 

1.7.4.3      高度随内容自增长

使用min-height:40px; height:auto!important; height:40px;

一般高级浏览器设置min-height即可，当内容高度超过这个最小高度的时候会自增长。

 

1.7.5    结构布局实例

在构建一个web页面之前，都需要首先分析页面的整体结构，划分功能区域，搭建基本的页面框架：

 

 

 

 

 

 

 

 

 

 

 

 

 

 

分析结构：

 

1. 搭建页面主框架：

 

<body>

              <div id="wrapper">

                     <!--这是头部-->

                     <div id="header">header</div>

                     <!--这是导航栏-->

                     <div id="nav">nav</div>

                     <!--这是轮播图-->

                     <div id="picture">pictures</div>

                     <!--这是内容部分-->

                     <div id="content">

                            <!--内容的左侧-->

                            <div id="content_left">content_left</div>

                            <!--内容的右侧-->

                            <div id="content_right">content_left</div>

                     </div>

                     <!--这是尾部-->

                     <div id="footer">footer</div>

              </div>

       </body>

 

2. 写主框架的CSS

#wrapper {

       margin: 0;

       padding: 0;

}

#header {

       80%;

       height: 100px;

       background-color: #CCFFCB;

       margin: 0 auto;

}

#nav {

       100%;

       height: 40px;

       background-color: #CCFFCB;

       margin: 10px 0;

}

#picture {

       80%;

       height: 250px;

       margin: 0 auto;

       background-color: #CCFFCB;

}

#content {

       78%;

       height: 560px;

       margin: 10px auto;

       background-color: #CCFFCB;

       padding: 1%;

}

#content_left {

       30%;

       height: 95%;

       background-color: #feff98;

       float: left;

}

#content_right {

       65%;

       height: 95%;

       background-color: #ffcc98;

       float: right;

}

#footer {

       100%;

       height: 70px;

       background-color: #CCFFCB;

}

 

3. 网站的全部整体框架

<body>

              <div id="wrapper">

                     <!--这是头部-->

                     <div id="header">

                            <a href="" class="header_left"><img src=""/></a>

                            <div class="header_right">

                                   <p class="right1">

                                          <a href="">设为首页</a> |

                                          <a href="">加入收藏</a>

                                   </p>

                                   <p class="right2">咨询电话：13023288071</p>

                            </div>

                     </div>

                     <!--这是导航栏-->

                     <div id="nav">

                            <ul>

                                   <li><a href="">网站首页</a></li>

                                   <li><a href="">关于我们</a></li>

                                   <li><a href="">服务范围</a></li>

                                   <li><a href="">新闻中心</a></li>

                                   <li><a href="">工程案例</a></li>

                                   <li><a href="">联系我们</a></li>

                            </ul>

                     </div>

                     <!--这是图片-->

                     <div id="picture">

                            <img src="" alt="" />

                     </div>

                     <!--这是内容部分-->

                     <div id="content">

                            <!--内容的左侧-->

                            <div id="content_left">

                                   <div class="left_title">服务项目 Service</div>

                                   <div class="left_menu1">

                                          <ul>

                                                 <li>拆旧、敲墙、酒店、商场</li>

                                                 <li>宾馆拆旧工程</li>

                                                 <li>建筑工地废旧厂房拆酒店</li>

                                                 <li>娱乐场所</li>

                                                 <li>建筑工地及家庭</li>

                                          </ul>

                                   </div>

                                   <div class="left_title">联系我们 Contact</div>

                                   <div class="left_menu2">

                                          <p>XX工程有限公司</p>

                                          <p>电话：130555555</p>

                                          <p>传真：0517-85932887</p>

                                          <p>地址：淮安天桥区北园大街548号</p>

                                          <p>网址：www.gggg.com</p>

                                   </div>

                            </div>

                            <!--内容的右侧-->

                            <div id="content_right">

                                   <div class="company_description">

                                          <div class="content_title1">

                                                 <span>公司简介</span>

                                                 <a href=""><img src="img/more.jpg" alt="" /></a>

                                          </div>

                                          <div class="content_description">

                                                 <p></p>

                                                 <img src="" alt="" />

                                          </div>

                                   </div>

                                   <div class="news">

                                          <div class="content_title1">

                                                 <span>新闻中心</span>

                                                 <a href="">

                                                        <img src="img/more.jpg" alt="" />

                                                 </a>

                                          </div>

<!--新闻链接列表-->

                                          <ul>

                                                 <li><a href=""></a></li>

                                                 <li><a href=""></a></li>

                                                 <li><a href=""></a></li>

                                                 <li><a href=""></a></li>

                                                 <li><a href=""></a></li>

                                                 <li><a href=""></a></li>

                                                 <li><a href=""></a></li>

                                                 <li><a href="">/a></li>

                                          </ul>

                                   </div>

                                   <div class="case_show">

                                          <div class="content_title2">

                                                 <span>案例展示</span>

                                                 <a href=""><img src="" alt="" /></a>

                                          </div>

                                          <div class="case_name">

                                                 <ul>

                                                        <li><a href=""><img src="img/pic3.jpg" alt=""                                                                /><p>案例展示名称</p></a></li>

                                                        <li><a href=""><img src="img/pic3.jpg" alt=""                                                                /><p>案例展示名称</p></a></li>

                                                        <li><a href=""><img src="img/pic3.jpg" alt=""                                                                /><p>案例展示名称</p></a></li>

                                                        <li><a href=""><img src="img/pic3.jpg" alt=""                                                                /><p>案例展示名称</p></a></li>

                                                 </ul>

                                          </div>

                                   </div>

                            </div>

                     </div>

                     <!--这是尾部-->

                     <div id="footer">

                            <p></p>

                            <p><a href=""></a></p>

                     </div>

              </div>

       </body>

 

1.8   CSS Spirit

CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。

优点:

1.利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；

2.CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

3.解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。

4.更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。

当然，Sprites也有明显的缺点，主要就是维护困难，不过可以通过合理控制合并图片个数去调解此问题。

1.9   三种方式处理icon

Icon在web开发中很常见，这里介绍三种最常见的实现方式。

（1）切图实现

直接用图片作为icon可以说是最直接也是最简单常用的办法了，而且在icon较多的情况下通常会使用spirit方式合并。

（2）Css实现

通过CSS绘制简单的小icon，主要是三角形图标。

（3）文件外链

制作矢量图标，导出各个浏览器支持的文件格式，通过文件链接的形式显示图标。此方法优缺点都较明显，优点是轻量、灵活（大小和颜色可随意设置）、兼容好。缺点是制作麻烦、单色、维护差。具体可参考阿里的http://www.iconfont.cn/平台。这种方法通过字符实体显示图标。

 

<style>

/*常用的多个icon合并成一张图片*/

.nav{ display:block;70px;height:70px; background:url('img/nav.png');}

.nav:hover{ background-position:0 80px}

 

/*利用CSS画简单icon*/

div#up {

0px;

height: 0px;

border-left: 5px solid transparent;

border-right: 5px solid transparent;

border-bottom: 5px solid #2f2f2f;

}

div#down {

0px;

height: 0px;

border-left: 20px solid transparent;

border-right: 20px solid transparent;

border-top: 20px solid #f00;

}

div#left {

0px;

height: 0px;

border-top: 10px solid transparent;

border-bottom: 10px solid transparent;

border-right: 10px solid yellow;

}

div#right {

0px;

height: 0px;

border-top: 60px solid transparent;

border-bottom: 60px solid transparent;

border-left: 60px solid green;

}

 

/*通过自定义字体的方式显示图片 http://www.iconfont.cn/*/

@font-face {font-family: 'iconfont';

    src: url('font/iconfont.eot'); /* IE9*/

    src: url('font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

    url('font/iconfont.woff') format('woff'), /* chrome、firefox */

    url('font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/

    url('font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */

}

.iconfont{

    font-family:"iconfont" !important;

    font-size:32px;font-style:normal;

    -webkit-font-smoothing: antialiased;

    -webkit-text-stroke- 0.2px;

    -moz-osx-font-smoothing: grayscale;}

.iconfont:hover{color:red; font-size:36px}

</style>

<body>

<!--demo1-->

---------图片icon---------

<i class="nav"></i>

 

<!--demo2-->

---------CSS icon---------

<div id="up"></div>

<div id="down"></div>

<div id="left"></div>

<div id="right"></div>

 

<!--demo3-->

---------外链文件 icon---------

<br/>

<i class="iconfont">&#xe74f;</i>

</body>