`
desert3
  • 浏览: 2158889 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

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

    博客分类:
  • Html
 
阅读更多
<label style="float:left;width:100px;"></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. 行框:
取决于行内框。行框的上边界要位于最高行内框的上边界,而行框的底边要位于最低行内框的下边界。
分享到:
评论

相关推荐

    UIlabel根据文本、字体获得label宽度;自适应宽高

    let font = UIFont.systemFont(ofSize: 17) // 可以替换为你需要的字体和大小 if let attributedText = NSAttributedString(string: text, attributes: [NSAttributedString.Key.font: font]) { let size = ...

    CSS实现纯图片替换效果和div模拟下拉条的实现 -- 剔除知识误区

    在网页设计中,CSS(Cascading Style Sheets)是一种用于定义HTML或XML(包括SVG、MathML等各种XML方言)文档中元素样式的样式表语言。本文将深入探讨如何使用CSS实现纯图片替换效果以及如何利用div模拟下拉条,帮助...

    拥有光晕扫过效果的 Label

    在iOS开发中,UI设计是用户体验的关键组成部分,而Label作为展示文本信息的基础控件,其样式和动画效果的创新能够显著提升应用的视觉吸引力。"拥有光晕扫过效果的 Label" 是一种特殊的UILabel实现,它引入了动态的...

    html打钩打叉效果

    在HTML5中实现打钩(√)和打叉(×)效果主要涉及到基本的HTML元素、CSS样式以及可能的JavaScript交互。以下是对这个主题的详细解释: 1. **HTML基础知识**: HTML(HyperText Markup Language)是网页开发的基础...

    前端大厂最新面试题-html.docx

    本文档总结了前端开发中的一些重要知识点,包括HTML语义化、Viewport、img和元素的title属性、href和src的区别、doctype的作用、行内元素和块级元素的区别等。 1. HTML语义化 HTML语义化是指使用合理、正确的标签...

    css 单选按钮图标替换的方法

    在Web开发过程中,我们经常会遇到需要替换HTML默认表单元素(如单选按钮)的图标以符合设计要求的情况。默认情况下,单选按钮的外观是浏览器内置的样式,可能不够美观或者不符合网站的整体风格。因此,替换单选按钮...

    echarts tree 节点替换图标,节点蔓延状态自动播放

    在本文中,我们将深入探讨如何在ECharts的Tree图中替换节点图标,并实现节点蔓延状态的自动播放功能。ECharts是一款基于JavaScript的开源可视化库,它提供了丰富的图表类型,包括柱状图、折线图、饼图以及我们关注的...

    label_rename.zip

    在进行Yolo训练时,我们需要将每个目标对象在图像中的位置和所属类别用文本文件(通常是txt文件)记录下来,这就是“label”或“labelimg”的概念。`label_rename.zip`这个压缩包文件显然是为了方便用户自动化地修改...

    GridView控件使用省略号替换超长字符

    为了提高性能,可以在`RowDataBound`事件中通过`if (e.Row.RowType == DataControlRowType.DataRow)`条件过滤掉分页、表头和脚注等非数据行。另外,考虑使用`e.Row.Cells[index].Attributes.Add("title", ...

    ASP.NET Lable中进行换行解决方案

    比如,可以将换行符替换为"|", 然后再将这个特定的字符串替换为HTML中的换行标签" "。示例代码如下: ```vb Dim strTextArea As String = Replace(TextArea1.Value, vbCrLf, "|") ``` 上述代码表示获取文本框中...

    matlab图像输出设置.docx

    刻度和刻度标签是图形中的重要元素,可以通过`xtick`和`xticklabel`进行设置。`xtick`控制刻度线的位置,例如`set(gca, 'xtick', -pi:pi/2:pi)`将x轴的刻度设置为从-pi到pi,每隔pi/2添加一个刻度。`xticklabel`则...

    PyQt5:QLable

    - `setFixedWidth(width)`: 设置标签的固定宽度。 - `setFixedHeight(height)`: 设置标签的固定高度。 - `setOpenExternalLinks(True|False)`: 是否允许点击链接跳转到外部网页。 - `underline()`: 使文本下划线。 -...

    QT中groupBox边框设置无边框又不影响内部组件边框的方法 - nature_forest的博客 - CSDN博客1

    5. 如果你只想去除groupBox中的某个特定控件的边框,例如一个label,可以这样设置: ```cpp ui-&gt;groupBox-&gt;setStyleSheet("QLabel{border:none}"); ``` 请注意,这些样式表的设置可能会受到QT版本和所使用的IDE...

    html面试题.docx

    在 CSS 中,可以使用伪元素和透明边框来实现,例如: ```css .line { position: relative; height: 0; } .line::before { content: ''; position: absolute; top: 50%; left: 0; width: 100%; border-bottom...

    Matlab科研绘图模板第3期-双轴柱状图(只需替换数据)

    - 设置柱状图的颜色、宽度和透明度等属性,通过`set`或直接在`bar`函数中指定参数。 2. **添加次轴**: - 使用`hold on`保持当前图形状态,不删除现有图形。 - 调用`twoscale`函数,如`ax2 = twoscale('right');...

    html视频播放

    2. **设置视频属性**:可以调整`width`和`height`属性来设定视频的宽度和高度。`autoplay`属性可以让视频自动播放,`loop`则让视频循环播放。 3. **支持多种格式**:虽然MP4在大部分浏览器中支持良好,但为了兼容性...

    尚硅谷_前端_面试题

    - 设置元素浮动后,其`display`值仍然是`block`或`inline-block`,浮动只是改变了元素在文档流中的位置。 34. **怎么让Chrome支持小于12px的文字?** - Chrome默认不支持小于12px的文字,可以通过以下CSS代码强制...

    改变字体字号(VB源代码)

    除了直接设置字体属性,VB还提供了TextHeight和TextWidth函数,它们可以根据特定字体和大小计算出文本的高度和宽度。这对于布局管理或者动态调整界面元素大小非常有用。 此外,如果你的应用程序需要用户自定义字体...

    SPSS的变量设置和基本操作[参照].pdf

    6. 使用“Name&label”设置结果变量名和标签。 7. 如需保存各分类组的个案数,勾选“Save number of case in break group as variable”。 三、数据分组 数据分组是根据某个变量将数据划分为若干区间。操作步骤...

Global site tag (gtag.js) - Google Analytics