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的宽度*/
/* auto;*/
/*默认0*/
/*height: 0px;*/
}
span {
/*内联*/
display: inline;
/*不支持宽高*/
}
img {
/*内联块*/
display: inline-block;
auto;
height: auto;
}
</style>
<!-- 验证宽高设置 -->
<style>
.sup {
/* 100px;*/
/*height: 100px;*/
background-color: orange
}
.sub {
200px;
height: 200px;
background-color: cyan
}
.s1, .s2 {
200px;
height: 200px;
background-color: brown
}
img {
/* 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>
overflow:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>overflow</title>
<!-- 显示区域只能由父级大小决定 -->
<style type="text/css">
/*子级区域大于父级*/
.sup {
100px;
height: 100px;
/*默认值*/
/*border: 3px none black;*/
/*清除边框*/
/*border: 0;*/
/*border: none;*/
/*最简单的设置*/
border: solid;
}
.sub {
200px;
height: 200px;
background-color: red
}
/*对父级进行overflow设置*/
.sup {
/*以滚动的方式允许子级所有内容显示*/
overflow: auto;
/*overflow: scroll;*/
/*只运行子级在父级所在区域的部分显示,超出的部分影藏*/
/*overflow: hidden;*/
}
</style>
</head>
<body>
<!-- display: block大环境下 -->
<!-- <div class="sup">
<div class="sub"></div>
</div> -->
<div class="sup">
呵呵 嘻嘻 嘿嘿 哈哈
</div>
</body>
</html>