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

Posted 2020-07-08

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端学习第二天块与内嵌关系相关的知识，希望对你有一定的参考价值。

块的特征 (代表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>

解决子块浮动，父块没办法包住子类问题

以上是关于前端学习第二天块与内嵌关系的主要内容，如果未能解决你的问题，请参考以下文章

Java编辑PPT的折线图，与内嵌Excel联动

第二天第二弹 iframe内嵌框架和from表单和input的运用

web前端学习的第二天

Java设置PPT的扇形图，与内嵌Excel联动

python学习第四十二天：前端基础

学习前端的第二天表单二

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

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