3.html--块级元素与行内元素

最新推荐文章于 2024-08-24 18:49:13 发布

lxhby520

最新推荐文章于 2024-08-24 18:49:13 发布

阅读量138

点赞数

分类专栏：小白 html 文章标签： html

本文链接：https://blog.csdn.net/lxhby520/article/details/80504658

版权

小白同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

html

15 篇文章 2 订阅

订阅专栏

图片选项卡

从大到小
从外到里
从简单到复杂

学习技巧

what 是什么
when 什么时候用
where 什么地方
how 怎么用

dispaly

block 块级元素

div h p ul li
独占一行
支持宽高
没有设置宽度的时候默认宽度为父级100%
支持margin padding 支持css样式

inline 行内元素

span a em
默认由内容撑开宽高
排成一行
不支持设置宽度高度
不支持垂直方向的margin 支持左右margin
padding的使用会出现诡异的情况会把其他的样式遮掩住
空格被解析了一次要去掉空格：a 不要留空格 b 父级字体大小设置为0，自身设置字体大小 c设加注释置浮动 d

inline-block 行内块

支持宽高可以排成一行
没有设置宽度高度的时候默认内容撑开宽度
空格会被解析
不支持margin:auto 支持margin padding
在一行内 padding会影响其他元素的高度但是不会遮住其他样式

转换类型

行内样式可转变为块级元素
块级元素可转换为行内元素
三个元素可互相转换

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

lxhby520

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

3.html

daiend

01-27

422

html 历史演变在20世纪60年代，IBM公司的人员研究得出：要提高系统的移植性，必须采用一种通用的文档格式，这种文档格式必须遵守特定的规则。通过这一原则在1969年IBM公司创建了GML（Generalized Markup Language，通用标记语言）。后来GML经过不断的发展，在1986年经IOS批准为国际标准IOS8897，并称作SGML（Standard Generalized Markup Language，标准通用标记语言）。制定SGML的基本思想是将文档的内容和样式分开。一个S

HTML基础------详细了解块级元素、行内元素和行内块元素

coderWang

03-16

303

1.块级元素 1.1、特征霸占一行，不能与其他任何元素并列。宽高设置有效，那么宽度将默认变为父级的百分百。 1.2、常用元素中那些属于块级元素 如 <h1>~<h6>,<p>,<div>,<ul>,<ol>,&lt...

参与评论您还未登录，请先登录后发表或查看评论

3html

weixin_30886233的博客

12-07

106

页面编码编码的种类有多种，但常用的是utf-8和gb2312。utf-8为多国语言编码，gb2312为中文简体编码。设置网页编码的语句为<meta charset= "utf-8" />，是在<head></head>标签内定义的。页面主体标签<body> <body>元素是定义文档的主体，包含文档的所有内容（文本、超链接、图像...

HTML3

weixin_42412156的博客

06-08

551

HTML表格<table> 定义表格<caption> 定义把表格的标题<th> 定义表格的表头<tr> 定义表格行<td> 定义表格单元<thead> 定义表格的页眉<tbody> 定义表格的主体

3、HTML简介

ifyouwjk的博客

09-13

411

HTML介绍 1、前端页面的三个组成部分 web标准规定的网页技术的三层分离结构是w3c万维网联盟和蒂姆博纳斯李专门制定的web标准，是非盈利的组织 HTML 超文本标记语言结构层主要描述页面语义 CSS 层叠样式表表现层主要描述页面样式 JavaScript 脚本语言行为层主要描述页面行为 2.什么是HTML HTML——Hyper text Markup Language超文本标记语言是一种使用标记的语言描述网页的语言语法简单的原因结构清晰的语言 3.

前端3-31-5：块级元素、行内元素大全

Yummy的博客

03-31

3582

1、块级元素 每个块级元素通常都会独占一行或者是多行，可以对其单独设置高度,宽度以及对齐等属性常见元素有：div、p、h1-h6、form、ul、ol、dl、dt、dd、li、table、tr、td、th、hr 特点： 块级元素会独占一行高度，行高，外边距和内边距都可以单独设置宽度默认是容器的100% 可以容纳内联元素和其他的块级元素 2、行内元素（内联元素）不占有独立的区域，仅仅依靠自己的字体大小或者是图像大小来支撑结构。一般不可以设置宽度，高度以及对齐等属性常见.

html行内元素转为块级元素,前端面试题-行内元素和块级元素

weixin_39995280的博客

05-31

567

一、行内元素一个行内元素只占据它对应标签的边框所包含的空间。二、块级元素块级元素占据其父元素(容器)的整个空间，因此创建了一个“块”。通常浏览器会在块级元素前后另起一个新行。三、行内元素示例HTMLCSSExample四、块级元素示例HTMLCSSExample五、行内元素的特点5.1 和其他元素都在同一行上5.2 高，行高及外边距和内边距不可改变5.3 宽度就是它的文字或图片的宽度，不可改变5....

h5--块级元素与行内元素

weixin_46048397的博客

04-01

915

标签分为两种等级：　　1，行内元素。2，块级元素。行内元素和块级元素的区别：行内元素：　　 - 与其他行内元素并排 - 不能设置宽高，默认的宽度就是文字的宽度 块级元素： - 霸占一行，不能与其他任何元素并列。 - 能接受宽高，如果不设置宽度，那么宽度将默认变为父级的100%。块级元素和行内元素的分类：在HTML的角度来讲，标签分为三类： - 文本级标签：p , sp...

前端CSS：行内元素、块级元素与行内块

08-24

728

通过本文的学习，你已经掌握了行内元素、块级元素和行内块元素的基础知识，以及如何在实际开发中应用这些元素。本文将深入探讨行内元素、块级元素和行内块元素的区别，通过丰富的示例和详细的代码片段，帮助读者更好地掌握这些元素的特点和应用场景。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。被设置为行内块元素。在这个例子中，我们混合使用了行内元素、行内块元素和块级元素。被设置为行内块元素。行内元素和行内块元素在同一行中显示，展示出不同元素类型的混合使用效果。

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

gao_zhennan的博客

10-15

4827

本文介绍了块级元素和行内元素的基本概念、内容模型和默认格式。

html中的行内元素和块级元素有哪些.pdf

05-08

HTML中的行内元素和块级元素 在 HTML 中，元素可以分为两大类：行内元素（inline element）和块级元素（block element）。这两种元素在布局和样式上有着很大的不同。行内元素（inline element）行内元素是指在...

浅谈CSS块级元素与行内元素(内联元素)的区别和联系

12-13

在css盒子模型中，我们提到了html元素中的块元素（block element）和内联元素（inline element）。那么它们究竟是什么呢？其实，这两种元素都是html规范中的概念。...内联元素(inline element)也叫内嵌元素或行内元

行内块级元素.txt

02-06

### 行内与块级元素概述在HTML中，元素主要分为两大类：块级元素和行内元素。这两种类型的元素具有不同的显示特性和布局方式，掌握它们的区别对于编写高效且美观的网页至关重要。 #### 块级元素 块级元素（Block...

菜单下拉列表怎么实现慢慢出现效果-----过渡（transition）

热门推荐

lxhby520的博客

04-18

2万+

首先这里用到的知识是transition过渡：从一种样式逐渐改变为另一种的样式效果从图来看，是高度发生了变化，<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1

2.html-div盒子模型

lxhby520的博客

05-30

2129

div盒子模型div标签是划分标签、分区标签可以放置宽度高度及各类css样式边框线border:1px solid red分别为边框的宽度边框样式边框颜色分别写：border-width border-color border-style border-topborder-stylesolid 实线dotted 点线dashed 虚线double 双线小三角设置宽度0 高度0 边框其他的...

javascript--38--完整版事件封装

lxhby520的博客

07-04

1040

事件监听监听多个事件传多个事件类型<body> <div id="box"></div> <script> eventBind(box,"click",function (event) { console.log("1"); },false); eventBind(box,"clic

javascript第四天------函数和函数里面的this关键字 if判断

lxhby520的博客

05-15

783

声明变量的两种方式varfunction是专门用来声明函数function fn(){}其中fn是函数的名字，后面一定要跟().函数也叫方法，只有函数后面才加（）函数的作用：当代码需要重新利用时，用函数封装，执行函数就能达到效果。{}里放的是业务逻辑，{}之间可以换行，但是（）不要换行函数声明权重高，就算函数使用在声明之前，也能执行。function fn(){console.log( "大家好...

选项卡怎么实现切换效果

lxhby520的博客

04-18

686

点击文字就能选中元素，这个可以想到input和label的结合<input type="radio">给相同的name只能选择一个，设id值，<label for="id值">进行绑定那么就能实现点击label里的文字可以选中单选按钮，但是这里是一个框，那么怎么实现点击label出现框呢可以在input后面设定一个兄弟元素，选中input后会改变这个兄弟元素，写法input...

javascript--35--表单事件键盘事件

lxhby520的博客

07-04

664

表单事件表单基本布局<form action="" class="user-reg"> <label class="form-item"> <strong>用户名：</strong> <p> <input type="text" name=&qu

text-indent属性详解：块级、行内、替换元素应用

"text-indent属性是CSS中用于控制文本首行缩进的重要样式，主要应用于块级元素、行内元素和替换元素。以下是对text-indent用法的详细解释： 1. text-indent应用于块级元素 在HTML中，块级元素如`<p>`通常用于包含...