<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

转载于:https://www.cnblogs.com/xcsn/p/4765432.html

html中label宽度设置、非替换元素和替换元素相关推荐

  1. html表格不随字数变化,设置table中的宽度不随文字改变让其固定

    设置table中的宽度不随文字改变让其固定 来源:互联网作者:佚名时间:02-17 16:02:28[大 中 小] 页面中table宽度设置width之后,宽度仍然不是固定的,文字太长后不换行,下面有 ...

  2. CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

  3. 行内元素中的非替换行内元素和替换行内元素

    今天看<别具光芒css>发现了以前未见过的词,替换的行内元素和非替换的行内元素.            替换的行内元素具有"内在尺寸",尺寸是有自身决定的,而不会受周围 ...

  4. html中label的寬度無法修改,如何设置HTML span、label 的宽度

    该文讲述如何设定 HTML span 宽度. 缺省情况 HTML span 的宽度设定无效 在 HTML 中如何设定 span 的宽度?这看上去是个很简单的问题,似乎用 style 中的 width ...

  5. css设置元素继承父元素宽度_CSS设置HTML元素的高度与宽度的各种情况总结

    1.元素不设宽度 第一种情况:元素为文档流中元素 dd dd dd 结论1:把子元素定位换成position:relative与上述例子表现一样,因此在元素不设宽度时,若元素为文档流中元素,则此元素继 ...

  6. C语言(CED)查找最接近的元素(分治法/二分查找):在一个非降序列中,查找与给定值最接近的元素。(递归实现)

    (请先看置顶博文)https://blog.csdn.net/GenuineMonster/article/details/104495419 一.题目大意 查找最接近的元素(分治法/二分查找):在一 ...

  7. 非替换元素和替换元素

    什么是替换元素与非替换元素 替换元素: 替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容. 例如:<input /> 属性 type = "text",则显示 ...

  8. 【数据处理】Python,matplotlib 如何画柱状图?如何画各种类型的柱状图?柱子宽度设置;设置X轴刻度用label显示;设置柱子距离x轴的高度;设置柱体颜色;设置柱体描边;并列、多条柱状图

    Base python matlibplot库-- 一.主要参数介绍: bar(left, height, width=0.8, bottom=None, **kwargs) left为和分类数量一致 ...

  9. el-table中每列设置同样的宽度导致表格宽度没法实现100%布局

    场景 el-table中表格宽度无法实现100%布局. 原因是el-table中每列el-table-column都设置了宽度,这里宽度都为150 注: 博客: https://blog.csdn.n ...

  10. php中如何固定表格宽度,实例讲解DataTables固定表格宽度(设置横向滚动条)

    当表格的列比较多的时候,可能就需要固定表格的宽度了,默认的100%宽已经不适应了.默认的100%宽要实现改变窗口大小也100%的话,在table元素上添加width="100%", ...

最新文章

  1. 【每日一算法】实现strStr()
  2. 张北将成规模150万台服务器的云计算产业基地
  3. sdut 2129树结构练习——判断给定森林中有多少棵树(并查集)
  4. day10 java的this关键字
  5. 【蓝桥杯单片机】Led+蜂鸣器+继电器
  6. 动态RAM的集中刷新、分散刷新、异步刷新
  7. IntellijIDEA配置Tomcat
  8. poj1942——组合数学
  9. [转]asp.net webform 与mvc 共享session
  10. 【VRPSD】基于matlab蚁群算法求解运钞车路径规划问题【含Matlab源码 1511期】
  11. mybatis字符串转成数字_JavaScript 字符串中的 pad 方法!
  12. c++ 读取html,C++ 使用MSHTML分析html 转发
  13. ----uni-app之APP关联小程序实现扫描APP二维码跳转关联小程序----
  14. android pt分区,[玩机技巧之Android篇]系统分区之System、Data、cache 来自 淡影寒...
  15. ERROR: Could not install packages due to an OSError: [WinError 5] 拒绝访问 解决方案
  16. 入驻商家卖违禁药物、评论造假、试水会员,直播能让新氧再次“乘风破浪”吗?
  17. 前后端报文传输加密方案
  18. windowbuilder怎么加背景图_抖音吸粉新套路,主页背景图太太太太有心机了
  19. 微信公众平台开发接口配置URL index.php和token
  20. java中两种异常类型_Java中的三种异常类型

热门文章

  1. NVIDIA显卡超过一定路数,性能急剧下跌
  2. C# 通过string路径 获取文件名、文件扩展名、路径
  3. 传入oracle中的日期类型,Oracle中的日期类型及相关函数
  4. linux参考文献_小白爱折腾·其二:手机Linux部署DiscuzX论坛
  5. linux sed打印功能,51CTO博客-专业IT技术博客创作平台-技术成就梦想
  6. 单CPU环境中如何实现多进程并行工作?
  7. 【MySQL】2、MySQL 创建数据库和表
  8. 数据库事务的四大特性以及事务的隔离级别 1
  9. 解决ubuntu 用anaconda 安装R 语言后,无法安装R语言package的问题
  10. maven项目警告: Using platform encoding (UTF-8 actually) to copy filtered resources