版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/HYB2012/article/details/77921645
参考
1.常用的行内元素
<a> 标签可定义锚
<abbr> 表示一个缩写形式
<acronym>定义只取首字母缩写
<b> 字体加粗
<bdo> 可覆盖默认的文本方向
<big> 大号字体加粗
<br> 换行
<cite> 引用进行定义
<code> 定义计算机代码文本
<dfn> 定义一个定义项目
<em> 定义为强调的内容
<i> 斜体文本效果
<img> 向网页中嵌入一幅图像
<input> 输入框
<kbd> 定义键盘文本
<label> 标签为 input 元素定义标注(标记)
<q> 定义短的引用
<samp> 定义样本文本
<select>创建单选或多选菜单
<small> 呈现小号字体效果
<span> 组合文档中的行内元素
<strong>语气更强的强调的内容
<sub> 定义下标文本
<sup> 定义上标文本
<textarea>多行的文本输入控件
<tt> 打字机或者等宽的文本效果
<var> 定义变量
2.行内元素不可设置宽高
<style>
div {
width: 500px;
height: 200px;
border: 5px solid red;
}
span {
width: 150px;
height: 150px;
border: 1px solid #0E0D0D;
}
</style>
<body>
<div>
<span>
如果我爱你,
绝不学攀援的凌霄花,
借你的高枝炫耀自己。。。
</span>
</div>
行内元素span 虽然设置了宽高 但是事实上并没有什么暖用。
那么问题来了,有时的确需要将行内元素设置宽高,难道无解?
3.行内元素设置宽高的三种方法
display转换为块级元素或者块级行内元素
span{
display: block;
}
或者
span{
display: inline-block;
}
float
span{
float:left;
}
position
span{
position:absolute;
}
不能设置宽高的行内元素,也可以花样的给它设置,那么天理公道何在?原理何在?
通过调试工具不难发现,float和position方法有一个共同的表现:display:block,这不是偷偷的把行内元素变为块级元素了吗?也就是说以上三种方法的原理是一致的。
我勒个擦 ,被暴击一万点伤害,我被震惊了,原谅我少见多怪。