第五讲_css元素显示模式
css元素显示模式
- 1. 元素的显示模式
-
- 1.1 块元素
- 1.2 行内元素
- 1.3 行内块元素
- 2. 元素根据显示模式分类
- 3. 修改元素的显示模式
1. 元素的显示模式
1.1 块元素
块元素的特性：
- 在页面中独占一行，从上到下排列。
- 默认宽度，撑满父元素。
- 默认高度，由内容撑开。
- 可以通过 css 设置宽高。
<style>
.first {
width: 100px;
height: 100px;
background-color: blue;
}
.second {
height: 100px;
background-color: green;
}
.third {
background-color: red;
}
style>
<div class="first">第一个块元素div>
<div class="second">第二个块元素div>
<div class="third">第三个块元素div>
1.2 行内元素
行内元素的特性：
- 在页面中不独占一行，从左到右排列。
- 默认宽度，由内容撑开。
- 默认高度，由内容撑开。
- 无法通过 css 设置宽高。
<style>
.first {
background-color: blue;
}
.second {
background-color: green;
}
.third {
background-color: red;
}
style>
<span class="first">第一个行内元素span>
<span class="second">第二个行内元素span>
<span class="third">第三个行内元素span>
1.3 行内块元素
行内块元素的特性：
- 在页面中不独占一行，从左到右排列。
- 默认宽度，由内容撑开。
- 默认高度，由内容撑开。
- 可以通过 css 设置宽高。
<style>
.first {
background-color: blue;
}
.second {
height: 100px;
width: 100px;
background-color: green;
}
.third {
background-color: red;
}
style>
<input class="first" placeholder="第一个行内块元素"/>
<input class="second" placeholder="第二个行内块元素"/>
<input class="third" placeholder="第三个行内块元素"/>
2. 元素根据显示模式分类
- 块元素
、、-
、、