前端学习 第二天 块与内嵌关系

块的特征 (代表div)

1、默认独占一行默认独占一行

2、没有宽度时，默认撑满一排

3、支持所有css命令

 

内嵌(内联、行内)的特征（span）

1、同排可以继续跟同类的标签

2、内容撑开宽度

3、不支持宽高

4、不支持上下的margin

5、代码换行被解析

 

display：block 显示为块

使内联元素具备块属性标签的特性

display：inline 显示为内嵌

使行块属性标签具备内联元素的特性

 

inline-block的特点

特性：

1、块在一行显示；

2、行内属性标签支持宽高；

3、没有宽度的时候内容撑开宽度

inline-block应用分页的例子

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>分页</title>
<style type="text/css">
a{
width: 17px;
height: 20px;
border: 1px solid #e0e1e2;
display:inline-block;
text-decoration: none;
text-align: center;
font: 12px/20px "宋体";
color: #2052a3;
}
.pageBtn{
width:64px;
}
a:hover,.active{
background-color: #1f3a87;
color: #fff;
}
</style>
</head>
<body>
<div class="pageBox">
<a href="#" class="pageBtn">上一页</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#" class="active">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>
<a href="#" class="pageBtn">下一页</a>
</div>
</body>
</html>
分页 inline-block应用

 

子块浮动，父块没办法包住子类最佳解决方案：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>解决子块浮动，父块没办法包住子类问题</title>
<style type="text/css">
.clearfix{
*zoom: 1;
}
.clearfix:after{
content: "";
display: block;
clear: both;
}
.box{
border: 1px solid red;
}
.item{
width: 200px;
height: 300px;
background-color: blanchedalmond;
float:left;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="item"></div>
</div>
</body>
</html>
解决子块浮动，父块没办法包住子类问题

 

posted @ 2016-05-19 22:59  码农也可以牛逼  阅读(147)  评论(0)  编辑  收藏  举报