伍建朝
获得徽章 0
# css元素显示模式
网页的标签很多，在不同的地方会用到不同的标签，了解他们的特点可以更好的帮助我们布局页面
元素显示模式就是元素（标签）以什么样的方式显示，比如`<div>`自己独占一行，比如一行可以放多个`<span>`
HTML元素一般分为`块元素`和`行内元素`两种类型
## 块元素
`<div></div>`就是最典型的块元素
特点：
1·独占一行
2·高度，宽度，外边距以及内边距都可以控制
3·宽度默认是容器（父级宽度）的100%
4·是一个容器及盒子，里面可以放块元素或者行内元素
ps：文字类元素内不能使用块元素，例如p段落标签
## 行内元素
特点：
1·相邻行内元素在一行上，一行可以显示多个
2·高宽直接设置是无效的
3·默认宽度是他内容本身的宽度
4·行内元素只能容纳文本或者其他行内元素
## 行内块元素
有一些特殊的标签，`<img/>`,`<input>`,`<td>`他们同时具有块元素和行内块元素的特点
特点：
1·和相邻的行内元素在一行，但是他们之间会有空隙，一行可以显示多个
2·默认的宽度就是他容器本身里面内容的宽度
3·高度，行高，外边距，内边距都可以控制
网页的标签很多，在不同的地方会用到不同的标签，了解他们的特点可以更好的帮助我们布局页面
元素显示模式就是元素（标签）以什么样的方式显示，比如`<div>`自己独占一行，比如一行可以放多个`<span>`
HTML元素一般分为`块元素`和`行内元素`两种类型
## 块元素
`<div></div>`就是最典型的块元素
特点：
1·独占一行
2·高度，宽度，外边距以及内边距都可以控制
3·宽度默认是容器（父级宽度）的100%
4·是一个容器及盒子，里面可以放块元素或者行内元素
ps：文字类元素内不能使用块元素，例如p段落标签
## 行内元素
特点：
1·相邻行内元素在一行上，一行可以显示多个
2·高宽直接设置是无效的
3·默认宽度是他内容本身的宽度
4·行内元素只能容纳文本或者其他行内元素
## 行内块元素
有一些特殊的标签，`<img/>`,`<input>`,`<td>`他们同时具有块元素和行内块元素的特点
特点：
1·和相邻的行内元素在一行，但是他们之间会有空隙，一行可以显示多个
2·默认的宽度就是他容器本身里面内容的宽度
3·高度，行高，外边距，内边距都可以控制
展开
评论
点赞
1·行内式
1·行内样式表(行内式):直接在标签的内部的`style`属性设置css样式
```
<div style="color:pink;"> 粉红色行内式 </div>
```
<div style="color:pink;"> 粉红色行内式 </div>
****
## 2·嵌入式
2·内部样式表(嵌入式):就是子啊HTML页面的内部写样式，但是要单独写到`<style>`标签内部
```
<style>
.pink {
color: pink;
}
</style>
<div class="pink"> 粉红色嵌入式</div>
```
<style>
.pink {
color: pink;
}
</style>
<div class="pink"> 粉红色嵌入式</div>
****
## 3·链接式
3·外部样式表(链接式):单独写到一个css文件里面，之后把css文件引入到HTML页面中使用
分两步：
1·建立一个后缀为`.css`的文件，将所有的css代码放到这里面
2·在HTML页面中，使用`<link>`标签引入这个文件
```
<link rel="stylesheet" href="[css文件路径]">
```
1·行内样式表(行内式):直接在标签的内部的`style`属性设置css样式
```
<div style="color:pink;"> 粉红色行内式 </div>
```
<div style="color:pink;"> 粉红色行内式 </div>
****
## 2·嵌入式
2·内部样式表(嵌入式):就是子啊HTML页面的内部写样式，但是要单独写到`<style>`标签内部
```
<style>
.pink {
color: pink;
}
</style>
<div class="pink"> 粉红色嵌入式</div>
```
<style>
.pink {
color: pink;
}
</style>
<div class="pink"> 粉红色嵌入式</div>
****
## 3·链接式
3·外部样式表(链接式):单独写到一个css文件里面，之后把css文件引入到HTML页面中使用
分两步：
1·建立一个后缀为`.css`的文件，将所有的css代码放到这里面
2·在HTML页面中，使用`<link>`标签引入这个文件
```
<link rel="stylesheet" href="[css文件路径]">
```
展开
评论
点赞