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

时间：2015-09-23 19:00:36 阅读：348 评论：0 收藏：0 [点我收藏+]

标签：

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

一、块级元素

　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）不会单独占满一行

浮动（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>
显示效果：