一,元素显示模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>31-css元素显示模式.html</title>
<style>
div{
background: red;
}
span{
background: blue;
}
img{
width: 100px;
}
</style>
</head>
<body>
<!--
在html中将所有的标签分为两类:容器级、文本级
在css中也将所有的标签分为两类:块级元素、行内元素
1,块级元素、行内元素
块级元素会独占一行
行内元素不会独占一行
容器级标签:div h ul ol dl li ...
文本级标签:span p buis strong em ins del ...
块级元素:div h p ul ol dl li ...
行内元素:span buis strong em ins del ...
2,块级元素和行内元素的区别
(1),块级元素
独占一行
如果没有设置宽度,那么默认和父元素一样宽
(2),行内元素
不会独占一行
不能设置宽度和高度的,宽高自适应内容的宽高
(3),行内块级元素
为了让元素既不独占一行,又能设置宽高,就出现了行内块级元素
-->
<div>我是一个div</div>
<p>我是p</p>
<h1>我是h1</h1>
<hr>
<span>我是span</span>
<b>我是加粗</b>
<strong>我是强调</strong>
<h1>
<img src="images/image.png" alt="">
<img src="images/image.png" alt="">
</h1>
</body>
</html>
二,元素显示模式转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>32-css元素显示模式转换.html</title>
<!--
1,如何转换css元素的显示模式?
设置元素的display的属性值
2,display取值
block 块级
inline 行内
inline-block 行内块级
3,快捷键
di 点击tab键就会补全为 display: inline;
db 点击tab键就会补全为 display: block;
dib 点击tab键就会补全为 display: inline-block;
-->
<style>
div{
display: inline;
background: red;
}
span{
display: block;
background: burlywood;
}
.cc{
display: inline;
display: inline;
display: block;
display: inline-block;
}
</style>
</head>
<body>
<div>我是div</div>
<div>我是div</div>
<span>我是span</span>
<span>我是span</span>
<p class="cc">我是一个段落</p>
<b class="cc">我是加粗</b>
</body>
</html>