行内元素如何设置宽高

版权声明:本文为博主原创文章,未经博主允许不得转载。 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.行内元素设置宽高的三种方法

  1. display转换为块级元素或者块级行内元素

    span{
    display: block;
    }
    或者
    span{
    display: inline-block;
    }
    这里写图片描述

  2. float
    span{
    float:left;
    }
    这里写图片描述

  3. position
    span{
    position:absolute;
    }
    这里写图片描述

不能设置宽高的行内元素,也可以花样的给它设置,那么天理公道何在?原理何在?

通过调试工具不难发现,float和position方法有一个共同的表现:display:block,这不是偷偷的把行内元素变为块级元素了吗?也就是说以上三种方法的原理是一致的。
我勒个擦 ,被暴击一万点伤害,我被震惊了,原谅我少见多怪。
这里写图片描述

猜你喜欢

转载自blog.csdn.net/HYB2012/article/details/77921645