元素就是标签,布局中常用的有三种标签,块元素、内联元素、内联块元素,了解这三种元素的特性,才能熟练的进行页面布局。
块元素
块元素,也可以称为行元素,布局中常用的标签如:div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素,它在布局中的行为:
- 支持全部的样式
- 如果没有设置宽度,默认的宽度为父级宽度100%
- 占据一行、即使设置了宽度
行内元素
行内元素,布局中常用的标签如:a、span、em、b、strong、i等等都是行内元素,它们在布局中的行为:
- 支持部分样式(不支持宽、高、margin上下、padding上下)
- 行内元素的宽高就是内容撑开的宽高
- 在一行显示
- 代码换行,行内元素之间会产生间距
- 子元素是行内元素,父元素可以用text-align属性设置子元素水平对齐方式
解决行内元素间隙的方法
- 去掉行内元素之间的换行
- 将行内元素的父级设置font-size为0,行内元素自身再设置font-size
行内块元素
行内块元素,是新增的元素类型,现有元素没有归于此类别的,img和input元素的行为类似这种元素,但是也归类于内联元素,我们可以用display属性将块元素或者行内元素转化成这种元素。它们在布局中表现的行为:
- 支持全部样式
- 如果没有设置宽高,宽高由内容决定
- 盒子并在一行
- 代码换行,盒子会产生间距
- 子元素是行内元块素时,父元素可以用text-align属性设置子元素水平对齐方式。
这三种元素,可以通过display属性来相互转化,不过实际开发中,块元素用得比较多,所以我们经常把行内元素转化为块元素,少量转化为行内块,而要使用行内元素时,直接使用行内元素,而不用块元素转化了。
display属性
display属性是用来设置元素的类型及隐藏的,常用的属性有:
- none 元素隐藏且不占位置
- block 元素以块元素显示
- inline 元素以内联元素显示
- inline-block 元素以内联块元素显示
练习 导航栏
规范写法 ul li在搜索引擎中是有语义的 浮动 float-left
- float-left 实现块元素的水平排列
- list-style: none 去除li标签前面的点
- margin-left: -1px 合并边框
- margin: 50px auto 0 实现块元素自身居中
- text-align: center 子元素是行内元素或者文字,父元素是块或行内块元素,text-align: center实现元素内的文字居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
/*ul, li{*/
/* padding: 0;*/
/* margin: 0;*/
/*}*/
ul{
width: 694px;
height: 50px;
margin: 50px auto 0;
padding: 0;
}
li{
height: 48px;
width: 98px;
border: 1px solid gold;
list-style: none;
float: left;
margin-left: -1px;
}
a{
display: block;
height: 48px;
width: 98px;
text-align: center;
text-decoration: none;
/*连写的话这三个必写 字体大小和行高必须16px/48px这样写 或者不连写 才能垂直居中*/
font: 16px/48px "微软雅黑";
color: pink;
}
a:hover{
background-color: gold;
color: white;
}
</style>
<body>
<!--ul.menu>(li>a{公司简介})*7-->
<ul class="menu">
<li><a href="">公司简介</a></li>
<li><a href="">公司简介</a></li>
<li><a href="">公司简介</a></li>
<li><a href="">公司简介</a></li>
<li><a href="">公司简介</a></li>
<li><a href="">公司简介</a></li>
<li><a href="">公司简介</a></li>
</ul>
</body>
</html>
另一种写法 不推荐
- font-size: 0 实现了 去除 代码换行,行内元素之间会产生间距的问题
<style>
div{
width: 694px;
height: 50px;
margin: 50px auto 0;
font-size: 0;
}
a{
display: inline-block;
width: 98px;
height: 48px;
margin-left: -1px;
line-height: 48px;
border: 1px solid gold;
text-align: center;
font-size: 16px;
font-family: "微软雅黑";
text-decoration: none;
color: pink;
}
a:hover{
background-color: gold;
color: white;
}
</style>
<body>
<div class="menu">
<a href="">公司简介</a>
<a href="">公司简介</a>
<a href="">公司简介</a>
<a href="">公司简介</a>
<a href="">公司简介</a>
<a href="">公司简介</a>
<a href="">公司简介</a>
</div>
</body>