块元素、内敛元素、行内块元素特点、相互转换、取消默认效果
转换 效果 元素 默认 取消 特点 相互 行内
2023-09-27 14:28:48 时间
块元素特性
块元素,也可以称为行元素,布局中常用的标签如:div、p、ul、li、h1~h6等等都是块元素,它在布局中的行为:
- 支持全部的样式
- 如果没有设置宽度,默认的宽度等于父级的width
- 盒子占据一行、即使设置了宽度
包含默认样式的块元素
上面讲的块标签中,有些标签是包含默认的样式的,这个含默认样式的有
- p标签:含有默认外边距
- ul、ol标签:含有默认外边距和内边距,以及条目符号(小圆点或者编号)
- h1~h6标签:含有默认的外边距和字体大小
- dl、dd标签:含有默认外边距
- body标签:含有默认的外边距
取消默认样式:
/* 清除标签默认的外边和内边距 */
body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dd{
margin:0px;
padding:0px;
}
/* 清除标签默认条目符号 */
ul,ol{
list-style:none;
}
/* 将h标签的文字大小设置为默认大小 */
h1,h2,h3,h4,h5,h6{
font-size:100%;
/* 根据实际需求来加 */
font-weight:normal;
}
内联元素特性
内联元素,也可以称为行内元素,布局中常用的标签如:a、span等等都是内联元素,它们在布局中的行为:
- 不支持宽、高、margin上下、padding上下
- 宽高由内容决定
- 盒子并在一行
- 代码换行,盒子之间会产生间距
- 子元素是内联元素,父元素可以用text-align属性设置子元素水平对齐方式
解决内联元素间隙的方法
1、去掉内联元素之间的换行
2、将内联元素的父级设置font-size为0,内联元素自身再设置font-size
常用的含有语义的内联元素:
1、<em> 标签 斜体效果,表示语气中的强调词
2、<i> 标签 斜体效果,表示专业词汇
3、<b> 标签 加粗效果,表示文档中的关键字或者产品名
4、<strong> 标签 加粗效果,表示非常重要的内容
5、<a>标签 下划线效果,表示超链接
取消默认样式
/* 去掉a标签默认的下划线 */
a{
text-decoration:none;
}
/* 去掉标签默认的文字倾斜 */
em,i{
font-style:normal;
}
/* 去掉标签默认的文字加粗(按实际需求) */
b,strong{
font-weight:normal;
}
内联块元素
内联块元素,也叫行内块元素,是新增的元素类型,现有元素没有归于此类别的,img和input元素的行为类似这种元素,但是也归类于内联元素,我们可以用display属性将块元素或者内联元素转化成这种元素。它们在布局中表现的行为:
- 支持全部样式
- 如果没有设置宽高,宽高由内容决定
- 盒子并在一行
- 代码换行,盒子会产生间距
- 子元素是内联块元素,父元素可以用text-align属性设置子元素水平对齐方式。
三种元素的转换:display属性
display属性是用来设置元素的类型及隐藏的,常用的属性有:
1、none 元素隐藏且不占位置
2、block 元素以块元素显示
3、inline 元素以内联元素显示
4、inline-block 元素以内联块元素显示
相关文章
- 进制转换
- C++-容器-string:string大小写转换【transform(str.begin(),str.end(),str.begin(),::tolower)】【字符tolower、toupper】
- Python 实现图片转换为字符画
- xml转换为json格式时,如何将指定节点转换成数组 Json.NET
- Angular 学习笔记 ( 创建 library, 转换老旧的 library )
- Java获取当前时间戳/时间戳转换
- 10(可回看)【C语言 & 趣味算法】数制转换(常见,二进制、八进制、十进制、十六进制之间任意转换)
- QString 中文编码转换
- 一文速通 css3 2D转换【内含开发常用效果实现】
- Linux - 标准输入转换为标准输出 代码(C)
- dynamic_cast向上转换总是成功,向下转换有可能成功
- visual studio 2010 c++ fatal error LNK1123: 转换到 COFF 期间失败: 文件无效或
- 字符编码知识:Unicode、UTF-8、ASCII、GB2312等编码之间是如何转换的?
- Char* ,CString ,WCHAR*之间的转换
- MTK81系列 OTA更新升级路径转换
- 产生波形实验(DA转换)