元素类型(块级元素、行内元素)

article/2025/9/19 3:11:58

块级元素:

常见的块级元素有:<div>、<table>、<form>、<p>、<ul>、<h1>......<h6>、<hr>  、<pre>、<address>、<center>、<marquee> 、<blockquote>  等

1.块级元素会单独占有一行,默认垂直向下排列。

2.块级元素的宽度,高度,页边距,边缘空白,大小都是可以调控的。没有设置时自动成默认值。

3.块级元素可以包含块级元素和行内元素。

行内元素:

常见的行内元素有:

<span>、<a>、 <img>、 <input>、<textarea>、<select>、<label>还有包括一些文本元素如:<br>  、<b>、 <strong>、<sup> 、<sub>、 <i> 、<em> 、<del> 、 <u>等。

1.行内元素和其他元素都是在同一行,即是与其他元素可以在同一行进行排列,行内元素与行内元素也可以在同一行进行排列。

2.行内元素的宽度,高度 都是不可控的,都是根据自身的内容进行决定。


http://chatgpt.dhexx.cn/article/TRxkdGKR.shtml

相关文章

块级元素、行内元素、行内块级元素的特点

1.块级元素&#xff1a; (1)独自占据一行,故默认宽度是容器的100%。 (2)可以设置宽、高、行高、内外边距。 (3)可以容纳行内元素和其他块级元素。 注&#xff1a;文字类的块级元素不能容纳块级元素&#xff0c;例如<p>/<h1>~<h6>/<dt> 2.行内元素…

HTML 行内元素 与 块级元素

行内元素和块级元素 行内元素一般是内容的容器&#xff0c;而块级元素一般是其他容器的容器。一般情况下&#xff0c;行内元素只能包含内容或者其它行内元素&#xff0c;宽度和长度依据内容而定&#xff0c;不可以设置&#xff0c;可以和其它元素和平共处于一行&#xff1b;而…

Html块级元素详解

Html块级元素详解 *块级元素 常见的有&#xff1a;div &#xff0c; table&#xff0c; tr &#xff0c; from &#xff0c; ul &#xff0c;li &#xff0c;ol &#xff0c;h1~h6&#xff0c; p 盒子 div 标签 <div class"bq" style"width: 100px; height…

HTML的块级元素(常用整理)

emmm&#xff0c;最近想整理复习一下前端的基础&#xff0c;最开始的HTML想了好久也没想好怎么写&#xff0c;最后也是决定以行块这样整理&#xff0c;再在后面补充吧。 说到HTML&#xff0c;什么是HTML呢&#xff1f; 什么是 HTML&#xff1f;HTML 是用来描述网页的一种语言。…

html5:块级元素

最常见块级元素&#xff1a;div div的属性&#xff1a; <div title"title属性">title属性</div> title属性&#xff1a; 当鼠标悬停在div上时候会有一个小的提示框 <div id"div1">div1</div> id属性可以理解为为当前div提供…

详解块级元素、行内元素、行内块级元素类型、区别及相互转化

1)块级元素 特点&#xff1a; 1.总是从新的一行开始 2.高度、宽度都是可控的 3.宽度没有设置时&#xff0c;默认为100% 4.块级元素中可以包含块级元素和行内元素 5.块级文字元素中不能放入其他块级元素 6.块级大多为结构性标记 常见块级元素&#xff1a; <center>…

块级元素和行内元素的区别

前言&#xff1a;本文转载自原文。为了更好的理解相关概念&#xff0c;本文在原文的基础上做出了部分补充和修改。 一、概论 本部分内容先从整体上概括的阐述块级元素和行内元素的区别&#xff0c;主要从三个不同的角度介绍。 1. 元素排列位置 行内元素会在一行上显示&…

HTML基础(三):常用的块级元素

在了解网页基础结构框架后便正式开始常用块级元素的学习&#xff1a; 块级元素引入 什么是块级元素&#xff1f;块级元素是HTML规范中的一个概念&#xff0c;大多数HTML 元素被定义为块级元素或内联元素。通常&#xff0c;块级元素被称为块元素。与其对应的&#xff0c;还有一…

html框架详解和布局

html的框架详解和布局 什么是框架&#xff1f; 框架将浏览器划分成不同的部分&#xff0c;每一部分加载不同的页面&#xff0c;实现在同一浏览器窗口中加载多个页面的效果 划分框架标记 语法格式 <frameset>....<frameset>属性 cols 使用“像素数”和%分割左右窗…

灵活使用layui布局

灵活使用layui布局 开发工具与关键技术&#xff1a;vs 作者&#xff1a; 撰写时间&#xff1a;使用layui布局&#xff0c;让其做的上下对齐&#xff0c;左右居中的效果。不用额外的给字段写代码&#xff0c;减少代码量&#xff0c;让代码更加轻便简单。Layui布局的定义总共分为…

Layui布局的使用

1、现在任何的页面都离不开页面的布局&#xff0c;页面的布局直接影响到整个页面的效果&#xff0c; 一个好的页面布局可以让人看了印象深刻&#xff1b; 2、接下来就聊聊怎么的页面布局才更好的让人牢牢的记住&#xff1b; 3、首先&#xff0c;打开layui的链接找到布局那个…

好用的前端flex布局,通用的flex布局CSS代码

我的社交恐惧症&#xff0c;主要来自于&#xff0c;收入低??? 今天看到一个图&#xff0c;真是人间真实&#xff1a;   不知道大家上班之后有没有经常写前端&#xff0c;反正身为后端的我是经常写前端的&#xff0c;尤其是调样式调的人痛不欲生&#xff0c;最烦人的是&am…

layui的页面布局分析

《layui的页面布局分析》 开发工具与关键技术&#xff1a;Visual Studio / Layui插件 作者&#xff1a;肖春庆 撰写时间&#xff1a;2019年06月09日 在软件的开发过程中&#xff0c;视图页面是给用户的第一印象&#xff0c;那么开发者如何布局页面才能给用户一个好页面呢&#…

前端开发_HTML5_布局-表格布局

表格布局 1.引入 我们之前学习了HTML5相关的标签内容&#xff0c;之后又学习了相关的一些样式以及特效&#xff0c;下面我们接着学习一个重要的内容:页面布局。 2.表格布局概述 所谓的表格布局就是使用表格内容的特性:可以使用"tr"产生行&#xff0c;使用“td”产生…

Bulma - 免费开源的纯 CSS 前端 UI 框架,专注于构建移动优先的响应式 web 界面

简单易用的 CSS 框架&#xff0c;虽然只有一个 CSS 文件&#xff0c;但功能很强大&#xff0c;在国外很受开发者欢迎&#xff0c;推荐给大家。 关于 Bulma CSS 框架 Bulma 是一个简单、很容易自定义的 CSS UI 框架&#xff0c;提供了众多预定义好的样式&#xff0c;开发者可以…

jQuery、Bootstrap、Layui和响应式布局

前端 一、jQuery1.1 概念1.2 jQuery对象的获取1.2.1 获取语法1.2.2 基本选择器1.2.3 属性及伪类选择器1.2.4 获取对象-过滤选择器1.2.5 案例 1.3 jQuery修改属性1.4 jQuery修改样式1.5 jQuery和DOM对象之间的转换1.5.1 jQuery对象转DOM对象1.5.2 DOM对象转jQuery对象 1.6 jQuer…

Layui——经典模块化前端UI框架(快速入门)

一、Layui框架简介 Layui&#xff08;谐音&#xff1a;类UI) 是一款采用自身模块规范编写的前端 UI 框架&#xff0c;遵循原生 HTML/CSS/JS 的书写与组织形式&#xff0c;门槛极低&#xff0c;拿来即用。其外在极简&#xff0c;却又不失饱满的内在&#xff0c;体积轻盈&#x…

layui表单布局

layui-form 表单标签 layui-form-item 表单项&#xff0c;块级元素&#xff0c;一个表单项标签内可放多个输入框 layui-form-label 表单标签 layui-input-block 块级输入框 layui-input input输入框样式 layui-inline 外层行内 layui-input-inline 内层行内 layui…

LayUI中的布局

前言 最近在准备找工作的事项&#xff0c;但是作为一个后台也是需要了解一些前端框架的。就目前的来说有大火的VUE&#xff0c;但是VUE还是存在一定的学习成本&#xff0c;所以决定先从对后台友好的LayUI开始入手先做一些小项目练练手&#xff0c;后面会考虑使用VUEElementUI做…

css form实例 用CSS实现表单form布局实例

用CSS实现表单form布局实例&#xff0c;css form实例 很多时候我们遇到Form表单&#xff0c;左边是文字标题&#xff0c;右边是表单input空&#xff0c;对于新手来说是非常麻烦的事&#xff0c;好了接下来我们将奉送一段 divcss 代码关于Form表单布局实例及源代码。 Css form…