2015-09-22 第四节课 CSS块级元素行内元素浮动盒子模型绝对定位、相当定位和固定定位

常见的块级元素和行内元素

一、块级元素

　1、块级元素的特点：

　　　　（1）、默认显示在父标签的左上角.

　　　　（2）、块级元素默认占满一行（沾满整个文档流）。

　　2、常见的块级元素：

　　　　<p>、<h1-h6>、<ulli>、<olli>、<div>、<tabl>、<hr>

二、行内元素（内联元素）

　　1、行内元素的特点：

　　　　（1）、大小受到文字区域的影响，不受到width和height的影响。

　　　　（2）、行内元素不会单独占满一行。

　　2、常见的行内元素：

　　　　<a>、<pan> 、<img> 、<input>

三、块级元素和行内元素相互转换

　　1、display:inline;　块级转成行内元素

　　2、display:block;　行内元素转成块级元素

　　3、display:inline-block;　具有行内元素和块级元素特点:（1）width、height会受到影响　　（2）不会单独占满一行

行内元素和块级元素的区别:

1.行内元素默认情况下不会独占一行块级元素占满一行

2.行内元素的高宽（width height）不受属性的影响，只受到其里面内容的多少的影响。而块级元素大小会受到width和height影响。

3.块级元素的margin和padding都正常，内联元素左右maring和左右padding正常，上下不正常不识别，也就是说不能通过margin-top和padding-top来改变行高

关于第3点补充下：

行内元素margin和padding左右间距在各个浏览器中解析的都完整,上下间距那就是杯具,各个浏览器解析还不一样,设置个背景貌似人家又认了,但是他周围的元素当他设置的上下间距不存在,所以在以后的项目中,不给行内元素设置上下的margin和padding了

总结：想让自己独占一行就会块级元素(div,dl,dt,dd,ul,li...)，想让元素和其它元素在一行就用行内元素(span,a,img)，他们之间可以通过样式来转换disply:block;display:inline;

还有一个属性：

display:inline-block;

将对象呈递为内联元素，与其它的元素同处一行，但是内部又呈现出块级元素，也就是可以设置宽和度，打破了块级元素和内联元素的区别.

如果块状元素(div..)表现这种属性,与外部沟通是内联,内部又是块状的可以这样设置(display:inline;zooom:1)或 div{display:inline-block;//先触发layout}div{display:inline;}这两个顺序不能颠倒了,不然就失效了

浮动（float）

1、float: left right
2、清除浮动：clear:both ((清除两边的浮动)

例子：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">　
#d1,#d2{
    width:100px;
    height:100px;
    border:solid 2px red;
    float:left;
}
#d3{
    width:100px;
    height:100px;
    border:solid 2px red;
    clear:left;    
}
#d4{
    width:100px;
    height:100px;
    border:solid 2px red;    
}
</style>
</head>
<body>
 　　<div id="d1">顶顶顶1</div>
 　　<div id="d2">顶顶顶2</div>
  　 <div id="d3">顶顶顶3</div>
     <div id="d4">顶顶顶4</div> 
</body>
</html>
显示的效果1：

如果想让3和4并排在一起的话就需要在#d3和#d4各加一个float:left;这样才能浮动！
【代码如下】：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">　
#d1,#d2{
    width:100px;
    height:100px;
    border:solid 2px red;
    float:left;
}
#d3{
    width:100px;
    height:100px;
    border:solid 2px red;
    clear:left;
　　 float:left;    
}
#d4{
    width:100px;
    height:100px;
    border:solid 2px red;
    float:left;
}
</style>
</head>
<body>
 　　<div id="d1">顶顶顶1</div>
 　　<div id="d2">顶顶顶2</div>
  　 <div id="d3">顶顶顶3</div>
     <div id="d4">顶顶顶4</div> 
</body>
</html>
显示效果2：

如果在#d4里面去掉float:left;那么就会没有效果！
　【代码如下】：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">　
#d1,#d2{
    width:100px;
    height:100px;
    border:solid 2px red;
    float:left;
}
#d3{
    width:100px;
    height:100px;
    border:solid 2px red;
    clear:left;
　　 float:left;    
}
#d4{
    width:100px;
    height:100px;
    border:solid 2px red;

}
</style>
</head>
<body>
 　　<div id="d1">顶顶顶1</div>
 　　<div id="d2">顶顶顶2</div>
  　 <div id="d3">顶顶顶3</div>
     <div id="d4">顶顶顶4</div> 
</body>
</html>
显示效果3:

在#d4里如果没有效果那么就要通过clear:left;来清除掉，达到效果！（也就是默认的效果 上面图1 所示）
【代码如下】：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">　
#d1,#d2{
    width:100px;
    height:100px;
    border:solid 2px red;
    float:left;
}
#d3{
    width:100px;
    height:100px;
    border:solid 2px red;
    clear:left;
　　 float:left;    
}
#d4{
    width:100px;
    height:100px;
    border:solid 2px red;
　　clear:left;
}
</style>
</head>
<body>
 　　<div id="d1">顶顶顶1</div>
 　　<div id="d2">顶顶顶2</div>
  　 <div id="d3">顶顶顶3</div>
     <div id="d4">顶顶顶4</div> 
</body>
</html>
显示效果：