改变label的宽度高度值之display:inline-block属性

最新推荐文章于 2022-11-24 17:21:21 发布

zhifeng687

最新推荐文章于 2022-11-24 17:21:21 发布

阅读量4k

点赞数

本文链接：https://blog.csdn.net/qq_26222859/article/details/51175725

版权

前端专栏收录该内容

82 篇文章 0 订阅

订阅专栏

参考链接：HTML改变label的宽度_百度经验

http://jingyan.baidu.com/article/e8cdb32b64198937052badd9.html

<span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style type="text/css">
label {
	width: 150px;
	height: 100px;
	background: red;
	
}

</style></head>

<body >
<label>hello,world!</label>

</body>
</html></span>

运行的结果是：

添加display:inline-block属性即css代码变为

label {
	width: 150px;
	height: 100px;
	background: red;
	display: inline-block;	
}

后，运行结果为（ps:dreamwear的设计视图显示不出这个效果，用浏览器浏览后才有这个效果）

常用实例：用label制作一个圆形

label {
	width: 100px;
	height: 100px;
	background: red;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	display: inline-block;
}

运行的效果为

以下是找的相关资料

原文链接：display:inline、block、inline-block的区别 - jdonson - 博客园
http://www.cnblogs.com/jdonson/archive/2011/06/10/2077932.html

display:inline、block、inline-block的区别

display:block就是将元素显示为块级元素.

　　block元素的特点是：
　　总是在新行上开始；
　　高度，行高以及顶和底边距都可控制；
　　宽度缺省是它的容器的100%，除非设定一个宽度
　　<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。

　　display:inline就是将元素显示为行内元素.

　　inline元素的特点是：
　　和其他元素都在一行上；
　　高，行高及顶和底边距不可改变；
　　宽度就是它的文字或图片的宽度，不可改变。
　　<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。

　　inline和block可以控制一个元素的行宽高等特性，需要切换的情况如下：

　　让一个inline元素从新行开始；
　　让块元素和其他元素保持在一行上；
　　控制inline元素的宽度（对导航条特别有用）；
　　控制inline元素的高度；
　　无须设定宽度即可为一个块元素设定与文字同宽的背景色。

　　display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。

　　inline-block的元素特点：

　　将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。(准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性)

　　并不是所有浏览器都支持此属性，目前支持的浏览器有：Opera、Safari在IE中对内联元素使用display:inline-block，IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表症。从上面的这个分析，也不难理解为什么IE下，对块元素设置display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被display:inline-block触发了layout，而它本就是行布局，所以触发后，块元素依然还是行布局，而不会如Opera中块元素呈递为内联对象。