CSS中如何把Span标签设置为固定宽度

设置span的宽度设置span的宽度在默认的情况下，利⽤css样式对span进⾏宽度设定是⽆效，但有时为了某种排版的要求，需要对span进⾏宽度设定，那么如何在html中利⽤css样式设定span的宽度？思路：这看上去是个很简单的问题，似乎⽤style中的width属性就可以。

然⽽通过试验以后发现，⽆论是在Firefox还是IE中都⽆效。

在css2的标准中，查阅关于width的定义，我们可以发现，原来css中的width属性并不总是有效的，如果对象是inline对象，width属性就会被忽略。

Firefox和IE都遵循了这个标准。

1、初步解决span宽度⽅案修改span为block类型。

在span的css中增加display属性，将span设置为block类型。

span {display:block;width:150px;}这样宽度就可以实现了，不过这样做也把前后⽂字隔在不同⾏⾥⾯。

这样其实span就完全变成了div。

2、进⼀步解决span宽度⽅案然后我们再增加⼀个css属性float，这样的确在某种条件下能解决问题。

span {display:block;float:left;width:150px;}但如果span前⾯没有⽂字，那的确是可⾏的。

但是如果有了，前后⽂字就会连在⼀起，⽽span跑到了第⼆⾏。

其实，在Html的各种Element中，的确有既是inline，⼜能够设定宽度的情况存在。

例如button对象，就可以很好的在⽂字中间出现，并且设定宽度。

能不能让span象button那样显⽰呢？通过css2标准中display的定义和inline对象的解释，发现css2标准的制定者把所有的Element在是否属于inline上做了⾮此即彼的规定，要么是inline，要么是block，没有制定button那样既是inline，⼜可以象block那样设置宽度的属性值。

在css2.1标准草案中display的定义中增加了⼀个叫inline-block的属性值，针对的恰好是我们⾯对的这种情形。

width在css中的用法(一)width在css中的用法简介width是一种在CSS中常用的属性，用于定义元素的宽度。

它可以设置为固定的像素值，百分比，自适应宽度等多种方式，灵活地控制元素在页面中的尺寸。

基本用法1.设置固定宽度–语法：width: 100px;–作用：将元素的宽度设置为100像素–注意：当元素的内容超出固定宽度时，会发生溢出现象2.设置百分比宽度–语法：width: 50%;–作用：将元素的宽度设置为父元素宽度的50%–注意：百分比宽度是相对于父元素的宽度计算的，当父元素的宽度发生改变时，子元素的宽度会自动调整3.设置自适应宽度–语法：width: auto;–作用：使元素的宽度根据内容自适应调整–注意：自适应宽度的元素会根据内容的多少动态调整宽度其他用法1.最大宽度限制–语法：max-width: 500px;–作用：设置元素的最大宽度为500像素–注意：当元素的内容超出最大宽度时，会自动调整宽度以适应内容2.最小宽度限制–语法：min-width: 200px;–作用：设置元素的最小宽度为200像素–注意：当元素的内容小于最小宽度时，会自动扩展宽度以适应内容总结width属性在CSS中提供了多种设置元素宽度的方式，可以通过固定宽度、百分比宽度和自适应宽度来灵活控制元素的尺寸。

此外，还可以通过最大宽度和最小宽度限制，使元素的宽度在一定范围内进行调整。

在实际应用中，根据不同的布局和需求选择合适的width设置方式，可以更好地控制页面元素的宽度。

高级用法1.百分比值与内容宽度–语法：width: 50vw;–作用：将元素的宽度设置为视口宽度的50%–注意：百分比单位中的vw表示视口宽度的百分比。

使用vw单位可以根据浏览器窗口的宽度来设置元素的宽度，适用于响应式布局。

2.盒模型宽度–语法：box-sizing: border-box;–作用：定义元素的宽度包括内容、内边距和边框，不包括外边距–注意：当使用border-box盒模型时，设置元素的宽度时不会影响到元素的内边距和边框宽度，便于布局设计。

第三天二列和三列布局文章出处：标准之路(/div_css/904.shtml)编辑：杨雨晨思今天学习《十天学会web标准(div+css)》的二列和三列布局，将涉及到以下内容和知识点▪二列自适应宽度▪二列固定宽度▪二列固定宽度居中▪xhtml的块级元素(div)和内联元素(span)▪float属性▪三列自适应宽度▪三列固定宽度▪三列固定宽度居中▪IE6的3像素bug一、两列自适应宽度下面以常见的左列固定右列自适应为例，因为div为块状元素，默认情况下占据一行的空间，要想让下面的div跑到右侧，就需要做助css的浮动来实现。

首先创建html代码如下：<div id="side">此处显示id "side" 的内容</div><div id="main">此处显示id "main" 的内容</div>按照如图所示的创建方法，把两个div都创建出来，或手工写出代码。

div创建完成后，开始创建css样式表，代码如下：#side { background: #99FF99; height: 300px; width: 120px; float: left; }#main { background: #99FFFF; height: 300px; width: 70%; margin-left: 120px; }先创建#side的样式，为了便于查看，设置了背景色。

注意，side的浮动设置为向左浮动；然后创建#main样式，注意这里设置#main的左边距为120px。

预览结果如下：三、两列固定宽度居中两列固定宽度居中，需要在两列固定宽度的基础上改进，在学一列固定宽度居中时，我们知道让它居中的方法，所以这里需要在这两个div之外再加一个父div：<div id="content"><div id="side">此处显示id "side" 的内容</div><div id="main">此处显示id "main" 的内容</div></div>操作方法：在源代码里选中这两个div的代码后，点击工具栏上插入div按钮，填写i d后确定，得到如上的代码下面就需要设置#content的样式了，我们知道，#side的宽度为120px，#main 宽度为350px，那么#content的宽度应该为这两者之和，然后设置#content居中，那么整体就居中了：从上图的例子可以看出，块级元素默认占据一行，相当于在它之前和之后各插入了一个换行；而内联元素span没对显示效果造成任何影响，事实也是如此；em只是让字体变成了斜体，也没有单独占据一行。

CSS内边距padding属性CSS padding 属性定义元素边框与元素内容之间的空⽩区域。

㈠padding（填充）⑴当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜⾊的填充。

⑵单独使⽤ padding 属性可以改变上下左右的填充。

⑶可能的值：⑴length 定义⼀个固定的填充(像素, pt, em,等)⑵% 使⽤百分⽐值定义⼀个填充注意：padding 属性接受长度值或百分⽐值，但不允许使⽤负值。

⑷⽰例1：如果你希望所有 h1 元素的各边都有 10 像素的内边距，只需要这样：h1 {padding: 10px;}⑸⽰例2：还可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使⽤不同的单位或百分⽐值：h1 {padding: 10px 0.25em 2ex 20%;}㈡内边距的百分⽐数值⑴百分数值是相对于其⽗元素的 width 计算的，这⼀点与外边距⼀样。

所以，如果⽗元素的 width 改变，它们也会改变。

⑵⽰例1：下⾯这条规则把段落的内边距设置为⽗元素 width 的 28%：p {padding: 28%;}⑶⽰例2：如果⼀个段落的⽗元素是 div 元素，那么它的内边距要根据 div 的 width 计算。

<div style="width: 200px;"><p>该段落包含在宽度为200像素的DIV中。

</p></div>注意：上下内边距与左右内边距⼀致；即上下内边距的百分数会相对于⽗元素宽度设置，⽽不是相对于⾼度。

单边内边距属性㈢padding-top 属性设置元素的上内边距（空间）⑴说明：该属性设置元素上内边距的宽度。

⾏内⾮替换元素上设置的上内边距不会影响⾏⾼计算，因此，如果⼀个元素既有内边距⼜有背景，从视觉上看可能延伸到其他⾏，有可能还会与其他内容重叠。

不允许指定负内边距值。

CSS中常⽤的五种编辑属性CSS 字体属性属性描述font 简写属性。

作⽤是把所有针对字体的属性设置在⼀个声明中。

font-family 设置字体系列。

font-size 设置字体的尺⼨。

font-style 设置字体风格。

font-variant 以⼩型⼤写字体或者正常字体显⽰⽂本。

font-weight 设置字体的粗细。

CSS ⽂本属性属性描述color 设置⽂本颜⾊direction 设置⽂本⽅向。

line-height 设置⾏⾼。

letter-spacing 设置字符间距。

text-align 对齐元素中的⽂本。

text-decoration 向⽂本添加修饰。

text-indent 缩进元素中⽂本的⾸⾏。

text-transform 控制元素中的字母。

unicode-bidi 设置⽂本⽅向。

white-space 设置元素中空⽩的处理⽅式。

word-spacing 设置字间距。

CSS 边框属性属性描述border 简写属性，⽤于把针对四个边的属性设置在⼀个声明。

border-style ⽤于设置元素所有边框的样式，或者单独地为各边设置边框样式。

border-width 简写属性，⽤于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。

border-color 简写属性，设置元素的所有边框中可见部分的颜⾊，或为 4 个边分别设置颜⾊。

border-bottom 简写属性，⽤于把下边框的所有属性设置到⼀个声明中border-left 简写属性，⽤于把左边框的所有属性设置到⼀个声明中。

border-right 简写属性，⽤于把右边框的所有属性设置到⼀个声明中。

border-top 简写属性，⽤于把上边框的所有属性设置到⼀个声明中。

CSS 列表属性(list)属性描述list-style 简写属性。

⽤于把所有⽤于列表的属性设置于⼀个声明中。

list-style-image 将图象设置为列表项标志。

CSS框模型（盒模型）、定位、浮动、显示和隐藏◆目标理解块元素和行内元素理解框模型掌握框模型的样式属性掌握定位属性掌握浮动属性掌握显示和隐藏属性◆内容1 块元素和行内元素块元素和行内元素的转换HTML常见的块元素和行内元素2框模型网页中的框框的特点框的样式属性3 定位4 浮动5 清除浮动6 显示和隐藏1 块元素和行内元素网页中的元素分为块元素和行内元素。

块元素成块状显示，独占行；行内元素不占满行，多个行内元素可在一行上显示。

块元素内能容纳其他的块元素和行内元素，行内元素内只能容纳行内元素。

◆块元素和行内元素的转换使用display（显示）属性，当设置标签的display属性值为block时，标签就呈块元素显示，当设置标签的display属性值为inline时，标签就呈行内元素显示。

一个网页就是大型的方框，里面包含着一大堆小方框。

◆网页中的框：块元素都是框（行内元素不是框，行内元素的高，宽都不能改变）。

框具有外边距、边框、、内边距和内容内容（content）：包含文字、图片、flash动画、应用程序、视频等内边距（padding）：内容和边框之间的距离边框（border）：盒的边界外边距（margin）：2个盒之间的空白，透明我们可以看到框模型的4个面：顶部（top）、右侧（right）、底部（bottom）和左侧（left）◆框的特点(1) 外边距和内边距只有宽度属性(2) 边框有大小和颜色之分，可以对每一条边框设置不同的样式(3) width和height定义的是内容的宽度和高度，而不是整个框的宽度和高度◆框的样式属性1内容的属性：widthheight2padding属性padding属性设置对象四边的内边距如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。

（顺时针）如果只提供一个，将用于全部的四条边。

如果提供两个，第一个用于上－下，第二个用于左－右。

如果提供三个，第一个用于上，第二个用于左－右，第三个用于下不允许负值设置对象四边的外边距检索或设置对象四边的外延边距。

div默认宽度div默认宽度是网页开发过程中不可或缺的一部分，它控制着网页中页面元素的宽度、位置以及总体的布局。

本文将对div默认宽度的基础知识和实际应用进行深入的分析，以便能够更好地理解和使用div默认宽度。

首先，让我们简要介绍一下什么是div默认宽度。

简而言之，div 默认宽度是指当div元素被设置为无宽度(或者省略width属性)时，它的最终宽度。

由于div元素很容易和其他页面元素混淆，理解div 默认宽度可以帮助我们更好地为div元素定义合理的宽度，从而对整体布局有所帮助。

其次，div默认宽度的设置可以有很多种方式。

首先，可以通过CSS中的width属性来指定div元素的宽度。

在CSS中，可以使用百分比，像素，em和rem等不同的值来设置div的宽度，具体取决于要求的布局类型，可以根据实际情况调整div元素的宽度。

此外，还可以使用HTML中的width属性来设置div默认宽度。

不同于CSS中的width属性，HTML中的width属性使用像素作为单位，可以让我们更精确地设置div的默认宽度，而不会受CSS样式的影响。

最后，div默认宽度也可以通过JavaScript脚本设置，具体步骤如下：首先，我们需要获取div元素，在JavaScript中可以使用document.getElementById方法；其次，我们需要为div元素设置width属性，在JavaScript中可以使用div.style.width方法；最后，我们需要为width属性设置值，可以是像素，百分比，em或rem 等。

以上就是div默认宽度的基本概念，它可以帮助我们更准确地定义页面元素的宽度，从而达到更理想的布局效果。

不仅仅是div默认宽度，还可以使用其它页面元素的默认宽度来改善网页的布局。

常用的页面元素有span、table、ul、form等，它们也都有自己的默认宽度，可以通过CSS样式表或者HTML属性来设置它们的宽度。

span标签中显⽰固定长度，超出部分⽤省略号代替，光标放到⽂字上显⽰全部在span中实现显⽰某段内容，固定其长度，多余部分⽤省略号代替，这样就⽤到html的title属性；如：<span title="value"></span>title属性：其值是text，属性描述是规定元素的⼯具提⽰⽂本，意思就是⿏标移到元素上时显⽰title中的内容；以span为例实现上述功能：html：<div> <span class="basic-l left10">筛选标签：</span> <span class="basic-r" style='width:120px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;' id="showLabelAndAttrName" title=""></span></div>js：$("#showLabelAndAttrName").text("测试标签1-测试标签属性1、测试标签属性2");$("#showLabelAndAttrName").attr("title","测试标签1-测试标签属性1、测试标签属性2");结果展⽰：注：样式style中的white-space:nowrap;为规定段落中的⽂本不换⾏；text-overflow:ellipsis;为当⽂本内容溢出时显⽰省略标记；overflow:hidden;为超出宽度后就隐藏为title属性赋值使⽤$("#id").attr("title",title值)。

常用的CSS标签标记属性翻译注释这里收藏一些编写网页的常用属性，便于以后编写网页查询。

" "这里收藏一些编写网页的常用属性，便于以后编写网页查询。

1、字体属性(type)font-family(使用什么字体)font-style(字体的样式，是否斜体)：normal/italic/obliquefont-variant(字体大小写)：normal/small-capsfont-weight(字体的粗细)：normal/bold/bolder/lithterfont-size(字体的大小)：absolute-size/relative-size/length/percentage2、颜色和背景属性(backgroud)color(定义前景色，例如：p{color:red})background-color(定义背景色)background-image(定义背景图片)background-repeat(背景图案重复方式)：repeat-x/repeat-y/no-repeatbackground-attachment(设置滚动)：scroll(滚动)/fixe(固定的)background-position(背景图案的初始位置)：percentage/length/top/left/right/bottom3、文本属性：(block)定义间距：word-spacing(单词之间的距离)letter-spacing(字母之间的距离)text-decoration(定义文字的装饰)：nore/underline/overline/line-through/blinkvertical-align(元素在垂直方向的位置)：baseline(基线)/sub/super/top/text-top/middle/bottom/text-bottomtext-transform(使文本转换为其它方式)：capitalize(大写)/uppercase(首字母大写)/lowercase(小写)/nonetext-align(文字的对齐)：left/right/center/justifytext-indent(文本的首行缩进)length/percentageline-height(文本的行高):normal/numbet/lenggth/percentage(百分比)定义超链接：a：link {color:green;text-decoration:nore}(未访问过的状态)a：visited {color:ren;text-decoration:underline;16pt}(访问过的状态)a:hover {color:blue;text-decoration:underline;16pt}(鼠标激活的状态)4、块属性(block)边距属性：margin-top(设置顶边距)margin-right(设置右边距)margin-bottom(设置底边距)margin-left(设置左边距)填充距属性：padding-top设置顶端真充距)padding-right设置顶端真充距)padding-bottom设置顶端真充距)padding-left设置顶端真充距)5、边框属性(border)border-top-width(顶端边框宽度)border-right-width(右端边框宽度)border-bottom-width(底端边框宽度)border-left-width(d左边框宽度)border-width(一次定义边框宽度)border-color(设置边框颜色)border-style(设置边框样式)border-top(一次定义顶端各种属性)border-right(一次定义右端各种属性)border-bottom(一次定义底端各种属性)border-left(一次定义左端各种属性)图文混排：width(定义宽度属性)height(定义高度属性)float(文字环绕在一个元素的四周)clear(定义某一边是否有环绕)6、项目符号和编号(list)display(定义是否显示)white-space(怎样处理空白部分)：normal/pre/nowraplist-style-type(在列表前加项目符号)disc(圆点)/circle(圈)/square（方形）/decimal（阿拉伯数字）/lower-roman(小写罗马数字)/upper-roman(大写罗马数字)/lower-alpha(小写英文字母)/upper-alpha(大写英文字母)/norelist-style-tyle(在列表前加图案):<url>/nonelist-style-position(决定列表项中第二行的起邕位置)list-style(一次性定义所有属性)7、定位（positioning）即层属性Type：设定对象的定位方式。