49 lines
1.3 KiB
Markdown
49 lines
1.3 KiB
Markdown
---
|
||
title: 块元素类型及特性
|
||
date: 2022-01-08 23:57:37
|
||
tags:
|
||
- CSS
|
||
categories: CSS
|
||
author: Anges黎梦
|
||
---
|
||
## 块元素特性
|
||
|
||
块元素，也可以称为行元素，布局中常用的标签如：div、p、ul、li、h1~h6等等都是块元素，它在布局中的行为：
|
||
|
||
- 支持全部的样式
|
||
|
||
- 如果没有设置宽度，默认的宽度为父级宽度100%
|
||
|
||
- 盒子占据一行、即使设置了宽度
|
||
|
||
## 包含默认样式的块元素
|
||
|
||
上面讲的块标签中，有些标签是包含默认的样式的，这个含默认样式的有
|
||
|
||
- p标签：含有默认外边距
|
||
|
||
- ul：含有默认外边距和内边距，以及条目符号
|
||
|
||
- h1~h6标签：含有默认的外边距和字体大小
|
||
|
||
- body标签：含有默认的外边距
|
||
|
||
实际开发中，我们会把这些默认的样式在样式定义开头清除掉，清除掉这些默认样式，方便我们写自己的定义的样式，这种做法叫样式重置。
|
||
|
||
```css
|
||
/* 清除标签默认的外边和内边距 */
|
||
body,p,h1,h2,h3,h4,h5,h6,ul{
|
||
margin:0px;
|
||
padding:0px;
|
||
}
|
||
/* 清除标签默认条目符号 */
|
||
ul{
|
||
list-style:none;
|
||
}
|
||
/* 将h标签的文字大小设置为默认大小 */
|
||
h1,h2,h3,h4,h5,h6{
|
||
font-size:100%; /* 根据实际需求来加 */
|
||
font-weight:normal;
|
||
}
|
||
```
|