63 lines
1.5 KiB
Markdown
63 lines
1.5 KiB
Markdown
---
|
||
title: 内联元素类型及特性
|
||
date: 2022-01-09 00:08:36
|
||
tags:
|
||
- CSS
|
||
categories: CSS
|
||
author: Anges黎梦
|
||
---
|
||
## 内联元素特性
|
||
|
||
内联元素，也可以称为行内元素，布局中常用的标签如：a、span等等都是内联元素，它们在布局中的行为：
|
||
|
||
- 不支持宽、高、margin上下、padding上下
|
||
- 宽高由内容决定
|
||
- 盒子并在一行
|
||
- 代码换行，盒子之间会产生间距
|
||
- 子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式
|
||
|
||
## 解决内联元素间隙的方法
|
||
|
||
1、去掉内联元素之间的换行
|
||
|
||
2、将内联元素的父级设置font-size为0，内联元素自身再设置font-size
|
||
|
||
## 其他内联元素
|
||
|
||
1、\<em\> 标签 行内元素，表示语气中的强调词
|
||
|
||
2、\<i\> 标签 行内元素，表示专业词汇
|
||
|
||
3、\<b\> 标签 行内元素，表示文档中的关键字或者产品名
|
||
|
||
4、\<strong\> 标签 行内元素，表示非常重要的内容
|
||
|
||
## 包含默认样式的内联元素
|
||
|
||
- a标签：含有的下划线以及文字颜色
|
||
|
||
- em、i标签：文字默认为斜体
|
||
|
||
- b、strong标签：文字默认加粗
|
||
|
||
**实际开发中，对这些标签进行样式重置。**
|
||
|
||
```css
|
||
/* 去掉a标签默认的下划线 */
|
||
a{
|
||
text-decoration:none;
|
||
}
|
||
/* 去掉标签默认的文字倾斜 */
|
||
em,i{
|
||
font-style:normal;
|
||
}
|
||
/* 去掉标签默认的文字加粗(按实际需求) */
|
||
b,strong{
|
||
font-weight:normal;
|
||
}
|
||
```
|
||
|
||
内联元素布局实例
|
||
|
||
|