行内元素设置宽高（span label a ）

最新推荐文章于 2022-04-25 20:29:01 发布
原创 最新推荐文章于 2022-04-25 20:29:01 发布 · 3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了CSS中块级元素和行内元素之间的转换方法，并通过实例展示了如何使用display属性来改变元素的默认显示方式。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 像span label 等元素 都是行内元素，仅用height和width控制高宽往往达不到想要的效果，一般都要加上display:block;(独占一行)  或是display:inline-block;（仍为块级元素）

   块元素和行内元素也不是一成不变的，只要给块元素定义display:inline，块元素就成了内嵌元素，同样地，给内嵌元素定义了display:block就成了块元素了

  下面我们举例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
*{
 margin: 0 auto;
 text-align:center
}
div,span{border:1px solid #00f;margin:2; line-height:50px;}

</style>
</head>

<body>
<div>块元素和行内元素也不是一成不变的，只要给块元素定义display:inline，块元素就成了内嵌元素，同样地，给内嵌元素定义了display:block就成了块元素了</div>
<div>div1</div><div>div2</div>
<span>span1</span><span>span2</span>
<br>
<div style="display:inline">div3</div>
<div style="display:inline">div4</div>
<span style="display:block">span3</span>
<span style="display:block">span4</span>

</body>
</html>

关于label标签
weixin_43939111的博客
02-10 761
以前没怎么注意这个标签，直到用bootstrap加了一堆class弄得表单乱七八糟，有些基础还是要巩固。 label是行内元素，不是行内块元素，设置label宽度需display:inline-block; 目前，label可以自动与input框垂直居中对齐，除非使用了float会让label和input顶部对齐（按自己的需求来） ...
label标签
周百万的博客
03-02 320
label标签是行内元素，使用时需要加display：inline-block; 使用时和input标签一起使用 <label for="name"></label> <input id="name"></input>
html的行内元素与块级元素总结
qq_42232573的博客
12-04 4570
希望大家补充一下常见的块级元素与行内元素~ 如有错误，请大家在评论区指出，一起进步！ 一、区别 占位情况 宽高 边距 行内元素 与其他元素在一行 不可设 水平方向的margin、padding有用，竖直方向的没用 块级元素 独占一行 可设置宽高，没有设置宽时，默认100% margin、padding 二、常见的块级元素： p：段落标签 div：把DIV看作是一容器,容器专门用来包含内容 h1、h2… …：标题 form：表单 ul：无序列表，与li绑定 ol：有序列表，与.
行内元素如何设置宽高
厚积薄发
09-10 5857
参考 HTML 行内元素 与块级元素 说说行内元素与块级元素以及之间的转换？ 说说行内元素与块级元素以及之间的转换？ 1.常用的行内元素<a> 标签可定义锚 <abbr> 表示一个缩写形式 <acronym>定义只取首字母缩写 <b> 字体加粗 <bdo> 可覆盖默认的文本方向 <big> 大号字体加粗 <br> 换行 <cite> 引用进行定义 <code> 定义计算机代码文本
什么是行内元素？
bwf_erg的博客
04-09 3305
我们都知道在html元素分为行内元素和块级元素。在实际开发中，会经常把他们弄混淆，而且很难记住。下面我们就来教会大家如何记住行内元素的 下面是我们常用的一些行内元素 锚点 字体加粗 大号字体 换行 定义为强调的内容 斜
html中的行内元素和块级元素有哪些.pdf
05-08
HTML中的行内元素和块级元素 在 HTML 中，元素可以分为两大类：行内...需要注意的是，块级元素的宽度会继承其父元素，但只有为行内元素设置 display:block; 才会有这样的效果，其他转换之后并不会默认带来这个效果。
对行内元素和块级元素的一些认识
09-24
常见的行内元素有`<img>`、`<a>`、`<input>`、`<textarea>`、`<b>`、` `、`<span>`、`<select>`、`<label>`、`<map>`和`<strong>`等。行内元素不会自动换行，它们会尽可能地在同一行内排列，直到没有空间为止。...
行内和块元素
04-18
内联元素（行内元素）包括：a（锚点）、abbr（缩写）、acronym（首字）、b（粗体）、bdo（bidioverride）、big（大字体）、br（换行）、cite（引用）、code（计算机代码）、dfn（定义字段）、em（强调）、font（字体...
关于块级元素和行内元素
09-15
行内元素是指只占据自身宽度的元素，它们不能包含其他元素，例如 a、span、img、input 等。行内元素的特点是： * 只占据自身宽度 * 不能包含其他元素 * 只能设置水平方向的 margin 和 padding 常用的行内元素包括...
HTML 行内元素和块级元素 全解析
Xiaoming's Blog
04-08 3974
行内元素（inline elements）和块级元素（block-level elements） 行内元素：a、abbr、acronym、b、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、samp、select、small、span、s、del、strike、strong、sub、sup、textarea、tt、u、var等 块级元素：ad
HTML中Div、span、label标签的区别
热门推荐
cui_angel的专栏
06-19 6万+
div与span 大家在初学div+css布局时,有很多困惑,在div与span的使用过程没觉得有一定的”章法”,觉得两个区别不大,在w3c的关于div和span的定义:div作为分割文档结构自然使它最官方的语义，但是这样的官方语义太让人迷惑，大的结构还 好，但是小的地方到底是用div还是用span仍然让人迷惑。其实恰恰是《Microsoft MSDN Library》 里面的定义让人豁
HTML行内元素设置物理属性(宽高)的几种方式
Robby_java的博客
01-08 1762
在CSS的世界里有三种形态的元素: 1.行内元素 2.块元素 3.即是块又是行内的元素，根据兄弟元素确定 一般情况下，行内元素是不能直接设置width和height的，不具有物理属性，这也是它不占据一行的原因。行内元素一般用margin与padding设置大小。要让行内元素拥有物理属性，可以设置宽高，有以下三种方式： 1.display:block; 2.display:inlin...
为什么span，label，是行级元素，div，p等等是块级元素
weixin_44963070的博客
04-25 2077
为什么span，label，是行级元素，div，p等等是块级元素，行级块级元素的本质是什么
HTML中，关于元素的高度与宽度的问题
暗黑之渊
08-21 1348
 元素的长度在不超过上级容器的参数的前提下，是按其标签所定义的参数来显示的，但一旦超出上级容器的参数，则是按其占上级容器下所有元素的宽度和高度参数总和的百分比，再去乘以上级容器的参数。例如     上例子中，最终页面所显示的每个TD的宽度，并非100，而是TABLE宽度的四分之一，即300乘以1/4等于75。 
HTML标签中常见块元素和行内元素
王秋云的博客
04-06 539
在html中，元素主要分为行内元素和块级元素； 行内元素指的是书写完成后不会自动换行，并且元素没有宽和高。 块级元素写完后会自动换行，有宽高可以修改。 还有一种特殊的元素叫做行内块元素。 大致分内是： 行内元素有：heda meat title lable span br a style em b i strong 块级元素有：body from se...
html中哪些是行内元素,html行内元素有哪些
weixin_33585152的博客
06-07 1万+
html行内元素有：a、b、u、span、img、input、strong、select、sub、sup、label、em、button、textarea、tt、var、samp、br、cite、code、font、strike等等。本教程操作环境：windows7系统、HTML5版、Dell G3电脑。根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元...
【解决方案】CSS 给 label 设置宽高无效
weixin_30834019的博客
10-23 449
如图，我的代码是这样的： html中： <labelclass="statusCheck0">订</label> <labelclass="statusCheck1">馆</label> css中： .statusCheck0 , .statusCheck1{ color: white; ...
chrome表单自动填充去掉input黄色背景解决方案
wangxiaohui6687的专栏
08-21 5万+
chrome表单自动填充后，input文本框的背景会变成偏黄色的，这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性，然后对其赋予以下样式： input:-webkit-autofill {background-color: #FAFFBD;background-image: none;color: #000;} 在有些情况下，这个
HTML中如何用CSS设置文本样式
wangxiaohui6687的专栏
11-21 2万+
一． 长度单位 1．相对类型 A． px （piexl） 像素，根据显示设备的分辨率的多少而代表不同的长度，因此属于相对类型。例如一张高宽为100px的图，在800×600分辨率中比在1024×768分辨率中大。因为两个分辨率中100px代表的长度不同。 B． em 这是设置以目前字符的高度为单位。比如h1{margin:2em},就会以目前字符的两倍高度来显示。em作为尺度单位时是以f
html 行内元素
最新发布
11-29
HTML中的行内元素是指在文本行内出现的元素，它们不会独占一行，而是与其他内容在同一行上显示。常见的行内元素有：a、b、span、img、input、label、select、textarea等。行内元素的特点是：宽度随内容的变化而变化，不能设置宽度、高度、内外边距等属性，只能容纳文本或其他行内元素。行内元素最好只包含行内元素，不包含块级元素，但是块级元素与行内元素之间的特性是可以相互转换的。HTML可以将元素分为行内元素、块状元素和行内块元素，其中行内块元素是指同时具有行内元素和块状元素的特点，例如：img、input等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值