目录
一、块元素
a.相关标签
b.特点：
二、内联元素
a.相关标签
b.特点
1. 设置子元素为内联元素的水平对齐方式
2.代码换行的间距
3.解决因换行导致的空格
4.其他资料
三、内联块元素
a.相关标签
b.特点
四、display属性
a.小案例
五、综合案例
一、块元素
a.相关标签
div、p、ul、li、h1~h6、dl、dt、dd
下面举例块元素标签p标签和div标签可以观察
<!DOCTYPE html><html><head><meta charset="utf-8"><style>.box01{background-color: gold;}body{margin: 0px;}.box02{background-color: blueviolet;margin: 0px;/* p标签默认自带margin */}</style><title></title></head><body><!-- 默认带margin --><div class="box01">div元素</div><p class="box02">p元素</p></body></html>
b.特点：
1.支持全部样式。
2.如果没有设置宽度，默认的宽度为父级宽度100% 。
3.盒子占据一行，即使设置了宽度。
二、内联元素
a.相关标签
a、span、em、b、strong、i
b.特点
1.只支持部分样式(不支持宽高、margin上下、padding上下)
2.宽度由内容决定
3.盒子并在一行
4. 代码换行，盒子之间会产生间距
5.子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式
1. 设置子元素为内联元素的水平对齐方式
<!DOCTYPE html><html><head><meta charset="utf-8"><style>.box1{height: 200px;width: 200px;text-align: center;background-color: aqua;}body{margin: 0px;}/* body默认有margin将其取消 */.box2{background-color: burlywood;color: black;}</style><title></title></head><body><div class="box1"><a href="#" class="box2">跳转链接</a></div></body></html>
2.代码换行的间距
<!DOCTYPE html><html><head><meta charset="utf-8"><style>.box1{height: 200px;width: 200px;text-align: center;background-color: aqua;}body{margin: 0px;}/* body默认有margin将其取消 */.box2{background-color: burlywood;color: black;}</style><title></title></head><body><div class="box1"><a href="#" class="box2">第一个链接</a><a href="#" class="box2">第二个链接</a></div></body></html>
3.解决因换行导致的空格
解决方法：
1.相关内容写在一行，让其不换行
2.将内联元素的父级设置font-size=0，内联元素再自身设置font-size
第一种方法：
<!DOCTYPE html><html><head><meta charset="utf-8"><style>.box1{height: 200px;width: 200px;text-align: center;background-color: aqua;}body{margin: 0px;}/* body默认有margin将其取消 */.box2{background-color: burlywood;color: black;}</style><title></title></head><body><div class="box1"><a href="#" class="box2">第一个链接</a><a href="#" class="box2">第二个链接</a></div></body></html>
第二种方法：
<!DOCTYPE html><html><head><meta charset="utf-8"><style>.box1{height: 200px;width: 200px;text-align: center;background-color: aqua;font-size: 0px;}body{margin: 0px;}/* body默认有margin将其取消 */.box2{background-color: burlywood;color: black;font-size: 16px;}</style><title></title></head><body><div class="box1"><a href="#" class="box2">第一个链接</a><a href="#" class="box2">第二个链接</a></div></body></html>
4.其他资料
<!DOCTYPE html><html><head><meta charset="utf-8"><style>.box{width: 500px;height: 300px;border: 1px solid #000;margin: 50px auto 0;font-size: 0px;/* 将所有字体（包括空格）设置为0 */}/* .box div{width: 100px;height: 100px;margin: 10px;background-color: gold;} 里面放块级元素两个两行*/.box a{background-color: gold;/* 设置宽高无效 */width: 300px;height: 200px;margin: ;/* 盒子外面的 */padding: 0px 10px;/* 盒子里面的 *//* padding上下本质上是没有起作用，但是在渲染的时候将背景色延申上去了如果起作用肯定是把这个盒子撑大而不是只渲染了*/border: 1px solid #000;font-size: 16px;/* 默认就是16px不继承父级的0px */}.box2{width: 500px;height: 100px;border: 1px solid #000;margin: 50px auto 0px;text-align: center;/* 设置里面的内联元素水平居中 *//* 父元素是块子元素是行内元素的话，父元素可以设置子元素水平居中 */}</style><title></title></head><body><div class="box"><!-- <div></div><div></div> --><a href="#">链接文字一</a><a href="#">链接文字二</a><a href="#">链接文字三</a><!-- 三个排在一行因为换行所以中间有间距--></div><div class="box2"><a href="#">链接文字</a></div></body></html><!-- 行内元素/内联元素a span em b strong i只支持部分样式(不支持宽高、margin上下、padding上下)宽度由内容决定盒子并在一行代码换行，盒子之间会产生间距解决方法：1.相关内容写在一行，让其不换行2.将内联元素的父级设置font-size=0，内联元素再自身设置font-size子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式-->
三、内联块元素
a.相关标签
内联块元素，也叫行内块元素，是新增的元素类型，现有元素没有归于此类别的。我们可以用display属性将块元素或者内联元素转化成这种元素
b.特点
1.支持全部的样式margin上下没有合并
2.盒子并在一行
3.如果没有设置宽高，则宽高由内容决定撑开
4.代码换行，盒子会产生间距
5.子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式
四、display属性
这三种元素，可以通过display属性来相互转化。
display属性是用来设置元素的类型及隐藏的，常用的属性有：
1、none 元素隐藏且不占位置
2、block 元素以块元素显示
3、inline 元素以内联元素显示
4、inline-block 元素以内联块元素显示
a.小案例
<!DOCTYPE html><html><head><meta charset="utf-8"><style>.box{width: 200px;height: 200px;background-color: gold;display: inline-block; /* display:none;元素隐藏不显示*/font-size: 16px;}body{font-size: 0px;}/* 去间隔 */.con{width: 200px;font-size: 30px;}.box2{width: 200px;height: 200px;background-color: gold;font-size: 16px;display: none;}/* 鼠标放上.con的时候.box2 display改为block */.con:hover .box2{display: block;}</style><title></title></head><body><div class="box">div元素</div><div class="box2">div元素</div><div class="con"><h3>文字标题</h3><div class="box2">说明文字</div></div></body></html>
五、综合案例
<!DOCTYPE html><html><head><meta charset="utf-8"><style>body{margin: 0px;}.menu{/* background-color: slategray; */height: 50px;width: 694px;margin: 0px auto 0;font-size: 0px;}.menu a{width: 98px;height: 50px;background-color: white;color: pink;font-family: "微软雅黑";display: inline-block;border: 1px solid gold;font-size: 16px;margin-left: -1px;text-align: center;line-height: 48px;/* 垂直居中 */text-decoration: none;/* 取消下划线 */}/* 实现样式的改变 */.menu a:hover{background-color: gold;color: white;}</style><title>案例</title></head><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></html>
