盒模型之display
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>display</title>
<!-- 默认值 -->
<style type="text/css">
/*块:1.独行显示 2.支持宽高,宽默认适应父级,高默认由子级或内容撑开 3.设置宽高后,一定采用设置的宽高*/
/*内联:1.同行显示 2.不支持宽高*/
/*内联块:1.同行显示,之间有间距 2.支持宽高,宽高由内容撑开 3.设置宽高后,一定采用设置的宽高,但只设置其中一个,另一个会根据内容等比缩放*/
/*嵌套规则:*/
/*块可以嵌套所有类型(p一般只允许嵌套内联)*/
/*内联一般只嵌套内联*/
/*内联块一般只作为最内层级*/
div {
/*块*/
display: block;
/*自适应父级可用content的宽度*/
/*width: auto;*/
/*默认0*/
/*height: 0px;*/
}
span {
/*内联*/
display: inline;
/*不支持宽高*/
}
img {
/*内联块*/
display: inline-block;
width: auto;
height: auto;
}
</style>
<!-- 验证宽高设置 -->
<style>
.sup {
/*width: 100px;*/
/*height: 100px;*/
background-color: orange
}
.sub {
width: 200px;
height: 200px;
background-color: cyan
}
.s1, .s2 {
width: 200px;
height: 200px;
background-color: brown
}
img {
/*width: 350px;*/
height: 350px;
}
</style>
</head>
<body>
<div></div>
<span></span>
<img src="./img/icon.jpg" alt="">
<img src="./img/icon.jpg" alt="">
<div class="sup">
<div class="sub"></div>
</div>
<span class="s1">123</span>
<span class="s2">456</span>
</body>
</html>
