html5中 块级元素与内联元素的解释和设置 display

这篇具有很好参考价值的文章主要介绍了html5中 块级元素与内联元素的解释和设置 display。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

a{display:block;}

div{

     display:inline;

 }

1、每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级”元素(block-level);而span元素的默认display属性值为“inline”,称为“行内”元素。

2、块级元素:占据一定矩形空间,可以通过设置高度、宽度、内外边距等属性,来调整的这个矩形;


     行内元素 :自己的独立空间,它是依附于其他块级元素存在的,因此,对行内元素设置高度、宽度、内外边距等属性,都是无效的。


3、例子:链接 a 元素,在默认情况下是是“行内元素”,因此对a元素设置高度、宽度等属性,都是无效的。而比如div,p,li,img等默认情况下的display属性值就是“block”。所以对于链接a来说只能这样:display:block;强制将它改成块元素。


常用的块状元素有:

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> (块引用)、<form>

常用的内联元素有:

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>(表示计算机源代码或者其他机器可以阅读的文本内容)

常用的内联块状元素有:

<img>、<input>

图片是内联元素,同时是替换元素,替换元素是可以设置宽高的

设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素,从而使a元素具有块状元素特点。

a{display:block;}

块级元素特点:

1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素,从而使div元素具有内联元素特点。

 div{

     display:inline;

 }

<div>我要变成内联元素</div>

内联元素特点:

1、和其他元素都在一行上;

2、元素的高度、宽度及顶部和底部边距不可设置;

3、元素的宽度就是它包含的文字或图片的宽度,不可改变。 文章来源地址https://www.toymoban.com/news/detail-478605.html

到了这里,关于html5中 块级元素与内联元素的解释和设置 display的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • HTML基础--Form表单--内联元素

    目录 Form表单 表单元素 创建表单 () 文本输入 () 密码输入 单选按钮 () 和 复选框 () 下拉列表 () 和 选项 ()提交按钮 () 重置按钮 () 块元素与行内元素(内联元素) HTML中的表单( form )是一个重要的元素,它用于收集用户输入的数据,比如文本、选择、单选、复选等。表单是与

    2024年02月08日
    浏览(40)
  • HTML5语义化标签解释说明

    语义化:在HTML5中提供了一些,具备语义化的标签!他们通常用于去构造网页的各个部分! HTML5之前网页的组成和布局通常是使用p和SPAN来构建和布局整个网页的,这样做是常见的做法,但存在一个问题,以上两个标签都不具备语义!只是被使用者单纯的作为容器来使用!对于

    2024年02月07日
    浏览(47)
  • html5学习笔记13-HTML5 新元素

    https://www.runoob.com/html/html5-new-element.html 新多媒体元素 新表单元素 新的语义和结构元素 移除的元素,HTML 4.01 元素在HTML5中已经被删除:

    2024年02月11日
    浏览(73)
  • 什么是HTML5?HTML5的含义、元素和好处

    HTML5是超文本标记语言(HTML)的第五版,网络浏览器使用它来可视化代码。它在网站功能、网页内容开发等方面有一些改进。 在万维网的早期,主要的网络浏览器创造者(例如微软Internet Explorer和Mosaic Netscape)开发了特定于浏览器的元素,以增强其浏览器的网页外观。到上世纪

    2024年02月15日
    浏览(56)
  • 读书笔记:《HTML5开发手册》--HTML5新的结构元素

    这是补充HTML5基础知识的系列内容,其他为: 一、HTML5-- 新的结构元素 二、HTML5-- figure、time、details、mark 三、HTML5-- details活学活用 四、HTML5-- 现存元素的变化 五、HTML5 -- Web表单 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰。之前

    2024年02月07日
    浏览(59)
  • HTML5新增元素

    HTML5新增了许多元素,其中新增的结构元素大大增加了网页结构设计的效率。同时为了体现表现与类容分离,这些元素仅有字面意思,还得靠CSS来设置样式。 定义文档的头部区域,一般包含logo,搜索框等信息 定义文档的末尾版权信息显示部分。一般包含作者、联系方式等。

    2024年04月13日
    浏览(30)
  • HTML5 新元素

    标签 描述 audio 定义音频内容 video 定义视频(video 或者 movie) source 定义多媒体资源 video 和 audio embed 定义嵌入的内容,比如插件。 track 为诸如 video 和 audio 元素之类的媒介规定外部文本轨道。 标签 描述 datalist 定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能

    2024年02月01日
    浏览(66)
  • HTML5的语义元素

    HTML5语义元素: HTML5提供新的语义元素来明确一个web页面的不同部分:head、nav、section、article、aside、figcation、figure、footer。 1)、 section元素: section标签定义文档中的节,比如章节、页眉、页脚或文档中的其他部分。示例: section h1wsx/h1

    2024年02月05日
    浏览(64)
  • HTML5中video元素详解

    https://blog.csdn.net/zhuchunyan_aijia/article/details/52277846 属性 说明 controls 显示标准的 HTML5 视频/音频播放器控制条、控制按钮。 autoplay 让文件自动播放。 loop 让文件循环播放。 preload 属性是用来缓存大体积文件的。它有三个可选值:“none” 不缓存、“auto” 缓存、“metadata” 只缓存

    2024年02月11日
    浏览(66)
  • HTML5 中新增了哪些表单元素?

    前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月13日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包