CSS学习笔记(6)——元素显示模式
2021/6/5 10:24:29
本文主要是介绍CSS学习笔记(6)——元素显示模式,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
文章目录
- 作用
- 块元素
- 行内元素
- 行内块元素
- 显示模式的转换
作用
网页的标签很多,在不同的地方会用到不同的标签,了解他们的特点可以更好地布局我们的网。元素显示模式就是元素(标签)以什么方式进行显示如< div>标签自己占一行而一行可以有多个< span>。
HTML元素一般分为块元素和行内元素
块元素
-
常见的块元素
<h1> ~ <h6> <p> <div> <ul> <ol> <li>
-
块元素的特点
- 自己独占一行(在浏览器显示时)
- 高、宽、外边距和内边距都可以自定义
- 宽度默认是容器(父级)的100%
- 是一个容器,里面可以放行内元素或块元素
-
注意
文字类的元素内不能使用块元素,如< p>标签主要用于存放文字,其内不能放块元素。同理< h1>~< h6>内也不能放块元素
行内元素
- 特点
- 相邻行内元素在一行中,一行可以显示多个(在浏览器显示时)
- 高宽设置是无效的
- 默认宽度是其本身内容的宽度
- 行内元素只能容纳文本或其他行内元素
- 注意
- 链接(< a>)中不能再放置其他链接
- 特殊情况: 连接标签< a>中可以放块元素
行内块元素
<img /> <input /> <td>
以上元素同时具有块元素和行内元素的特点,故称行内块元素
- 特点
- 和相邻的行内块元素在同一行,但是他们之间会有空白的缝隙,一行可以显示多个
- 默认宽度是它本身内容的宽度
- 高宽都可以控制
显示模式的转换
一个模式需要另一个模式的特点,如链接标签是行内元素,其高宽不能设置,但是可以通过模式转换转换成块元素就可以增加其触发范围
转换语句为样式语句
- 转化成块元素
<style> a{ display: block; } </style> <body> <a herf="#"> </a> </body>
- 转换成行内元素
<style> div { display: inline; } </style> <body> <div> </div> </body>
-
行内块元素
使用方式同上
语句为display: inline-block
这篇关于CSS学习笔记(6)——元素显示模式的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-03-06css样式背景图怎么分开(css背景图片样式)-icode9专业技术文章分享
- 2024-03-06css线性样式(css中划线样式)-icode9专业技术文章分享
- 2024-03-06jq点击添加css样式(jq设置css样式)-icode9专业技术文章分享
- 2024-03-06流程样式css(css实现流程图)-icode9专业技术文章分享
- 2024-03-06css怎么调搜索键样式(css搜索框怎么调大小)-icode9专业技术文章分享
- 2024-03-06css层叠样式(Css层叠样式介绍)-icode9专业技术文章分享
- 2024-03-06css样式表有何特点(css样式表的使用方法有几种)-icode9专业技术文章分享
- 2024-03-06css的列表样式(css列表样式属性包括)-icode9专业技术文章分享
- 2024-03-06css3手机端样式(手机端css怎么写)-icode9专业技术文章分享
- 2024-02-21蝉知CSS样式修改(改变css样式)-icode9专业技术文章分享