1. 文档流flow：元素从上到下。从左到右排列
- 对于元素，根据自己不同的特征（有的会单独占据一行、有的会和其他元素排列在一起）
- 不同类型的元素可以通过display属性进行相互转换
元素的分类： block-----元素独占一行（height,width,margin，padding都可以设置）
典型的block类型的标签：div排版布局使用,p段落,h1标题,h2..h6,ol有序列表，ul无序列表,table表格,form表单
一般a超链接是几个元素排列在一起可以转化成block元素
a{
display:block； 之后可以设置他的高宽
}
inline---元素在一行显示，高度宽度无法设置。这里的高宽由他里面的文字或者图片的宽度决定
典型的inline元素 ：a超链接，span段落中的特殊格式
其他元素转换为inline元素：
display:inline
inline类型的元素有一个特点：有一个间距，或者是间隙的问题-----------通常使用block标签解决
inline-block：不独占一行，元素可以在一行显示，且（height,width,margin，padding都可以设置）
典型的inline-block：元素 ：a超链接，span段落中的特殊格式
转换为inline-block元素：display:inline-block;
display:none 元素不显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>首页</title>
<style type="text/css">
将默认的样式清零
*{
padding: 0;
margin: 0;
}
#nav{
width: 300px;
margin: 100px auto;/*上下边距100，左右边距自动 及实现水平居中*/
font-size: 0;/*去掉超链接之间的默认空白*/
}
a{
/*作为超链接元素，默认是linline属性 无法操作高和宽*/
display: inline-block;/*转化*/
width: 80px;
height: 30px;
font-size: 14px;/*字号*/
text-align: center;/*文本对齐方式 水平方向上的*/
line-height: 30px;/*垂直方向的文本对齐，让文本和超链接所在区域高度相同*/
text-decoration: none;/*没有下划线*/
border-bottom: 1px solid #ccc;/*有下边框*/
}
a:hover{ /*鼠标悬停效果*/
color: white; /*超链接的文字效果*/
background-color: #ccc;/*背景色灰色*/
border: 1px solid;
border-left-color: orange;/*左侧边框*/
border-top-color: orange;
border-right-color: orange;
}
</style>
</head>
<body>
<div id="nav"><!-- 最外侧的结构nav导航 -->
<a href="#">链接1</a>
<a href="#">链接2</a><!-- 3个超链接，超链接的本来属性是inline -->
<a href="#">链接3</a>
</div>
</body>
</html>
731
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
