Width Height -- (2)

上回说到,宽高对于块级元素和行内元素发生的改变,结果是块级元素会接受宽高属性所发生的改变的,而行内元素不接受宽高属性所发生的改变。测试

可是,事无绝对 —— CSS属性displayspa

经过上回进行的测试咱们得知,宽高属性只能改变块级元素,不能改变行内元素,可是咱们永远不知道广大用户会怎么想,有人就会说:‘我就是想用宽高改变行内元素,谁说都很差使’,行让你改,今天就告诉你怎么用宽高对行内元素进行改变。code

display属性的主要功能是,将标签在块级元素、行内元素和行内块元素之间相互转换,这种转换不是说会改变标签名称,span转换成块级元素代码中span就会变成div不是这样,它最终的目的是清除原先元素的特性,将相对应元素的特性给到display属性做用的标签上。blog

首先让咱们回顾一下span标签的特性:class

<span></span>

span{
    border: 1px solid black;
}

span标签是行内元素没法设置宽高方法

能够设置宽高的是块级元素,如今咱们就来吧span标签转换成块级元素im

<span></span>

span{
    display: block;
}

display属性的block属性值在英语中就是块的意思,这段代码的意义是,将标签名为span的标签转换为块级元素img

将span转换成块级元素后咱们再来看看宽高对其的影响英语

<span></span>

span{
    display: block;
    width: 200px;
    height: 200px;
   border: 1px solid black; }

咱们看到,这时的span标签也受到宽高属性的影响改变了形状di

这就是咱们改变行内元素最直接的一种方法,怎么样行内元素让你改

相关文章
相关标签/搜索