html中label宽度设置、非替换元素和替换元素

<label ></label> 
单独对label设置一个width:100px的属性石不起作用的,和float:left或者display:inline-block配合的话 都可以设置上 

参考:css position, display, float 内联元素、块级元素 

在 CSS 中,任何元素都可以float浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。

元素是文档结构的基础,在css里面,每个元素生成了包含内容的框(box),大家都叫“盒子”。但是不同的元素显示方式是不同的,有占据一整行的,有水平一个挨着一个的。 

替换元素:替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。 
比如:<input /> type="text" 的是,这是一个文本输入框,换一个其他的时候,浏览器显示就不一样。(X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素,这些元素都没有实际的内容。 

替换元素可增加行框高度,但不影响line-height,内容区高度值 = padding-top + padding-bottom + margin-top + margin-bottom + height。 
要想替换元素居中,可以设置line-height = height, vertral-align = middle。 
(vertical-align:middle,是将元素行内框的垂直中点与父元素基线上0.5ex处的一点对齐。) 

非替换元素:(X)HTML 的大多数元素是不可替换元素,他们将内容直接告诉浏览器,将其显示出来。 
比如<p>p的内容</p>、<label>label的内容</label>;浏览器将把这段内容直接显示出来。 

非替换元素添加padding-top或padding-bottom,不影响行框高度,但内容区高度会变化,margin-top,margin-bottom对行框没有任何影响。添加左右边距会影响非替换元素水平位置。要使非替换元素在父元素框内居中,可以设定line-height = 父元素框的高度。 

行内元素框模型: 
下面概括了行内布局组成: 
(注意:对于行内非替换元素中指代的height,是指字符本身的高度,由font-size决定) 
1. 内容区: 
对于非替换元素,内容区高度取决于font-size,若有内边距,则内容区高度 = padding-top + padding-bottom + height; 

对于替换元素,内容区高度值 = padding-top + padding-bottom + margin-top + margin-bottom + height 
2. 行间距: 
只应用于非替换元素,其高度值=(|line-height - height|)/2 

3. 行内框: 
对于非替换元素,其高度值 = line-height 

对于替换元素,其高度值 = 内容区高度值 = padding-top + padding-bottom + margin-top + margin-bottom + height 
4. 行框: 
取决于行内框。行框的上边界要位于最高行内框的上边界,而行框的底边要位于最低行内框的下边界。

 

转:http://desert3.iteye.com/blog/1577143

时间: 2024-11-10 01:08:33

html中label宽度设置、非替换元素和替换元素的相关文章

ios开发-如何替换数组中模型的元素?我替换了,但整个数组模型中元素都替换了,怎么解决?

问题描述 如何替换数组中模型的元素?我替换了,但整个数组模型中元素都替换了,怎么解决? 开发-如何替换数组中模型的元素?我替换了,但整个数组模型中元素都替换了,怎么解决?-js数组替换指定元素">

AutoCAD中的比例设置和应用

在图纸上绘图时,应在开始之前先确定比例.此比例是绘制对象的尺寸与图形所表示的对象的实际尺寸之比值.例如,在建筑图形中每四分之一英寸可能表示房间平面布置图的一英尺.所选比例必须使对象的图形布满图纸. 而在 AutoCAD中,将反转此过程.可以用指定单位类型(建筑单位制.十进制等等)或默认单位类型(十进制)绘图.屏幕上每个单位都可表示所需的单位制:英寸.毫米.千米.因此,如果绘制发动机部件,一个单位可能相当于一毫米.如果绘制地图,一个单位可能相当于一千米. 也就是说,刚开始绘图时无需考虑绘图比例的问

textarea ie7,ie8 宽度设置无效

问题描述 textarea ie7,ie8 宽度设置无效 在ie78浏览器下面,用JS控制textarea的宽度无效,设置colsrows也无效?这个应该如何解决呢? 解决方案 代码呢?如果加了xhtml什么设置width/height要加px单位 解决方案二: 最好贴出代码,不然的话 怎么知道哪里写的不对. 解决方案三: 聊天窗口 头部有隐藏的放大缩小关闭按钮,点击放大按钮,整个框放大,输入框宽度也随着变大,但是ie78下面宽度不会改变 解决方案四: 解决方案五: 解决方案六: 解决方案七:

网页HTML中br元素及nobr元素的实际应用

网页 我们在进行网页制作中,一定会遇到文本编辑的内容,而且一定会面对换行的问题.在HTML中有换行元素和非换行空格符来解决换行问题.我们在52CSS.com中介绍了很多关于CSS的知识,但对于基础的HTML知识我们也需要有足够的了解,这样才能制作出高水平的网页,让我们的水平更加的专业.遇到这类问题,我们不可避免的需要应用br元素或nobr元素.我们来看这两个元素的意义及应用. br: Inserts a line break. 插入一个换行符. 这是我们最常用的换行方法. 对于HTML我们可以写

如何在Frontpage2003中运用css设置网页字体

css|frontpage|网页 在网页界面的设计过程中,许多人考虑最多的是用什么图形与色彩来装饰网页,或是在网页上加上什么动画特效:而对于网页的字体却不太重视.结果往往是有些网站的字体不是太小就是太大,严重影响阅览;而有的网站整页用的都是标准字体,毫无个性而言.其实,字体作为网站内容的载体,有其独特的重要性,是不应该忽视的. 运用Html,我们可以对字体的大小及字形进行简单的修改,但要进行统一地控制.创建特殊效果,就必须要用到css.它能让您更有效地控制网页外观,并可以扩充精确指定网页元素位置

Eclipse中JVM内存设置

eclipse.ini内存设置 -vmargs -Xms128M -Xmx512M -XX:PermSize=64M -XX:MaxPermSize=128M 这里有几个问题: 1. 各个参数的含义什么? 2. 为什么有的机器我将-Xmx和-XX:MaxPermSize都设置为512M之后Eclipse可以启动,而有些机器无法启动? 3. 为何将上面的参数写入到eclipse.ini文件Eclipse没有执行对应的设置? 下面我们一一进行回答 1. 各个参数的含义什么? 参数中-vmargs的意

C#中label内容显示不全、不完整的解决方法

  这篇文章主要介绍了C#中label内容显示不全.不完整的解决方法,只需要把两个属性设置一下即可解决这个问题,需要的朋友可以参考下 c# label的内容显示不全,需要设置如下属性即可: 1.将Lable的font属性的字体改成宋体; 2.将AutoSize属性改成true;

Python的Django框架中的templates设置

  这篇文章主要介绍了Python的Django框架中的TEMPLATES设置,主要讲述了Django1.8版本后的一些新特性,需要的朋友可以参考下 TEMPLATES Django 1.8的新特性 一个列表,包含所有在Django中使用的模板引擎的设置.列表中的每一项都是一个字典,包含某个引擎的选项. 以下是一个简单的设定,告诉Django模板引擎从已安装的应用程序(installed applications)的templates子目录中读取模板: ? 1 2 3 4 5 6 TEMPLAT

spinner-如何根据字体的宽度设置视图的宽度?

问题描述 如何根据字体的宽度设置视图的宽度? 在一个水平布局中有一个EditText和一个Spinner.我想让spinner的宽度和文本的最大宽度一致, EditText占据剩余的空间.有什么简单的方法可以实现? 例如, 我想要指定spinner的宽度作为大部分字体的平均宽度,作为一个属性在xml文件中声明. xml: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android