1.为什么关注此问题?
行内元素设置为浮动后,可以设置宽高了,为什么?
我们知道Html元素分三种
块级元素(display:block)--> 可以设置元素的宽高
行内元素(display:inline)--> 默认不换行,设置width/height无效(可以设置line-height),margin/padding上下无效
行内块级元素(display:inline-block )--> 可以设置宽高的特性,同时又具有 inline 元素默认不换行的特性
实践出真知,动手吧!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.spn{
border: 2px solid #000000;
}
.mydiv{
border: 2px solid #000000;
}
#in{
display: inline-block;
border: 2px solid #005599;
}
</style>
<body>
<div class="page">
<span class="spn">行内元素1</span>
<span class="spn">行内元素2</span>
<p id="in">行内块状元素1</p>
<p id="in">行内块状元素2</p>
<div class="mydiv" id="a">
块状元素1
</div>
<div class="mydiv" id="b">
块状元素2
</div>
</div>
</html>
效果图:
操作一:
设置行内元素浮动,查看display的值
设置前
设置后
操作二:
设置块级元素浮动,查看display的值
设置前
设置后
操作三:
设置块级行内元素浮动,查看display的值
设置前
设置后
结论: 设置元素为浮动后,display的值是block
2.有什么意义?
以后在项目中如果需要设置行内元素的宽高,则设置为浮动后,就可以设置了