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
转载于:https://www.cnblogs.com/xcsn/p/4765432.html
html中label宽度设置、非替换元素和替换元素相关推荐
- html表格不随字数变化,设置table中的宽度不随文字改变让其固定
设置table中的宽度不随文字改变让其固定 来源:互联网作者:佚名时间:02-17 16:02:28[大 中 小] 页面中table宽度设置width之后,宽度仍然不是固定的,文字太长后不换行,下面有 ...
- CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...
- 行内元素中的非替换行内元素和替换行内元素
今天看<别具光芒css>发现了以前未见过的词,替换的行内元素和非替换的行内元素. 替换的行内元素具有"内在尺寸",尺寸是有自身决定的,而不会受周围 ...
- html中label的寬度無法修改,如何设置HTML span、label 的宽度
该文讲述如何设定 HTML span 宽度. 缺省情况 HTML span 的宽度设定无效 在 HTML 中如何设定 span 的宽度?这看上去是个很简单的问题,似乎用 style 中的 width ...
- css设置元素继承父元素宽度_CSS设置HTML元素的高度与宽度的各种情况总结
1.元素不设宽度 第一种情况:元素为文档流中元素 dd dd dd 结论1:把子元素定位换成position:relative与上述例子表现一样,因此在元素不设宽度时,若元素为文档流中元素,则此元素继 ...
- C语言(CED)查找最接近的元素(分治法/二分查找):在一个非降序列中,查找与给定值最接近的元素。(递归实现)
(请先看置顶博文)https://blog.csdn.net/GenuineMonster/article/details/104495419 一.题目大意 查找最接近的元素(分治法/二分查找):在一 ...
- 非替换元素和替换元素
什么是替换元素与非替换元素 替换元素: 替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容. 例如:<input /> 属性 type = "text",则显示 ...
- 【数据处理】Python,matplotlib 如何画柱状图?如何画各种类型的柱状图?柱子宽度设置;设置X轴刻度用label显示;设置柱子距离x轴的高度;设置柱体颜色;设置柱体描边;并列、多条柱状图
Base python matlibplot库-- 一.主要参数介绍: bar(left, height, width=0.8, bottom=None, **kwargs) left为和分类数量一致 ...
- el-table中每列设置同样的宽度导致表格宽度没法实现100%布局
场景 el-table中表格宽度无法实现100%布局. 原因是el-table中每列el-table-column都设置了宽度,这里宽度都为150 注: 博客: https://blog.csdn.n ...
- php中如何固定表格宽度,实例讲解DataTables固定表格宽度(设置横向滚动条)
当表格的列比较多的时候,可能就需要固定表格的宽度了,默认的100%宽已经不适应了.默认的100%宽要实现改变窗口大小也100%的话,在table元素上添加width="100%", ...
最新文章
- 【每日一算法】实现strStr()
- 张北将成规模150万台服务器的云计算产业基地
- sdut 2129树结构练习——判断给定森林中有多少棵树(并查集)
- day10 java的this关键字
- 【蓝桥杯单片机】Led+蜂鸣器+继电器
- 动态RAM的集中刷新、分散刷新、异步刷新
- IntellijIDEA配置Tomcat
- poj1942——组合数学
- [转]asp.net webform 与mvc 共享session
- 【VRPSD】基于matlab蚁群算法求解运钞车路径规划问题【含Matlab源码 1511期】
- mybatis字符串转成数字_JavaScript 字符串中的 pad 方法!
- c++ 读取html,C++ 使用MSHTML分析html 转发
- ----uni-app之APP关联小程序实现扫描APP二维码跳转关联小程序----
- android pt分区,[玩机技巧之Android篇]系统分区之System、Data、cache 来自 淡影寒...
- ERROR: Could not install packages due to an OSError: [WinError 5] 拒绝访问 解决方案
- 入驻商家卖违禁药物、评论造假、试水会员,直播能让新氧再次“乘风破浪”吗?
- 前后端报文传输加密方案
- windowbuilder怎么加背景图_抖音吸粉新套路,主页背景图太太太太有心机了
- 微信公众平台开发接口配置URL index.php和token
- java中两种异常类型_Java中的三种异常类型
热门文章
- NVIDIA显卡超过一定路数,性能急剧下跌
- C# 通过string路径 获取文件名、文件扩展名、路径
- 传入oracle中的日期类型,Oracle中的日期类型及相关函数
- linux参考文献_小白爱折腾·其二:手机Linux部署DiscuzX论坛
- linux sed打印功能,51CTO博客-专业IT技术博客创作平台-技术成就梦想
- 单CPU环境中如何实现多进程并行工作?
- 【MySQL】2、MySQL 创建数据库和表
- 数据库事务的四大特性以及事务的隔离级别 1
- 解决ubuntu 用anaconda 安装R 语言后,无法安装R语言package的问题
- maven项目警告: Using platform encoding (UTF-8 actually) to copy filtered resources