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

但是,事无绝对 —— CSS属性display

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

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

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

<span></span>

span{
border: 1px solid black;
}

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

可以设置宽高的是块级元素,现在我们就来吧span标签转换成块级元素

<span></span>

span{
display: block;
}

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

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

<span></span>

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

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

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

Width Height -- (2)的更多相关文章

  1. client/scroll/offset width/height/top/left ---记第一篇博客

    client/scroll/offset width/height/top/left (盒模型为contentBox,定位原点是元素左上角边框最外层的交点) clientWidth  width+左p ...

  2. as3:sprite作为容器使用时,最好不要指定width,height

    除 TextField 和 Video 对象以外,没有内容的显示对象(如一个空的 Sprite)的高度为 0,即使您尝试将 height 设置为其它值,也是这样. 如果您设置了 height 属性,则 ...

  3. offset[Parent/Width/Height/Top/Left] 、 client[Width/Height/Top/Left] 、 Element.getBoundingClientRect()

    开篇提示:以下内容都经个人测试,参考API文档总结,但还是不能保证完全正确,若有错误,还请留言指出___________________________________________________ ...

  4. 正则:img的url,width,height 和 a标签的url以及替换

    代码:// 内容:$detail['content'] //img的url,width,height $img = array(); $matches = array(); $regeImg = '/ ...

  5. ffmpeg按比例缩放--"width / height not divisible by 2" 解决方法

    最近在处理视频的时候,有这么一个需求 如果视频的分辨率宽度大于960的话,就把宽度设为960,而高度按其比例进行缩放 如果视频的分辨率高度大于540的话,就把高度设为540,而宽度按其比例进行缩放 之 ...

  6. 如何理解VB窗体中的scale类属性及width height属性之间的关系

    如何理解VB窗体中的scale类属性及width height属性之间的关系 VB中的SCALEHIEGT,SCALEWIDTH,与窗体中的WIDTH,HEIGHT的区别及关系是许多VB初学者难以理解 ...

  7. css 行内元素 块元素 替换元素 非替换元素 以及这些元素的width height margin padding 特性

    一.各种元素的width height margin padding 特性(具体css元素的分来参看二) 1.块级元素 width. height. margin的四个方向. padding的四个方向 ...

  8. Canvas的width,height 和 样式中Canvas的width,height

    控制Canvas的大小,有两种方式: 1:直接设置Canvas标签上的书width,height属性值; 2:通过Css设置Canvas的width,height; 这两种方式,区别是很大的. 1:C ...

  9. [WPF系列]- Style - Specify width/height as resource in WPF

    <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:sys=" ...

  10. css中的width,height,属性与盒模型的关系

    这段话很容易记住盒模型: css中盒子模型包含属性margin.border.padding.content,他们可以把它转移到我们日常生活中的盒子(箱 子)上来理解,日常生活中所见的盒子也具有这些属 ...

随机推荐

  1. 初始v4l2(六)-------根据虚拟驱动vivi的使用彻底分析摄像头驱动

    前面的几篇文章已经分析了v4l2的框架,对框架的分析是比较粗浅的,能基本清楚函数之间的调用过程.但是很多内容并没有分析,比如说里面有很多ioctl,并没有分析哪些ioctl是必须的,也没有分析如何从应 ...

  2. Nacos 知识点

    Nacos 名字的由来(取红色的英文字符): Dynamic Naming and Configuration Service Nacos 是 Spring Cloud Alibaba 的一个组件,详 ...

  3. day38_8_22数据库(navicat操作)

    补充: exist存在EXISTS关字键字表示存在.在使用EXISTS关键字时,内层查询语句不返回查询的记录,而是返回一个真假值,True或False. 当返回True时,外层查询语句将进行查询当返回 ...

  4. Nginx日志管理(四)

    Nginx日志对于统计.系统服务排错很有用.Nginx日志主要分为两种:access_log(访问日志)和error_log(错误日志).通过访问日志我们可以得到用户的IP地址.浏览器的信息,请求的处 ...

  5. nexus php composer 私服搭建

    nexus 社区也提供了php composer 私服(当前还在开发中,还没有ga),测试使用构建好的docker 镜像 环境准备 docker-compose 文件 version: "3 ...

  6. CSS3中的px,em,rem,vh,vw

    1.px:像素,精确显示 2.em:继承父类字体的大小,相当于“倍”,如:浏览器默认字体大小为16px=1em,始终按照div继承来的字体大小显示,进场用于移动端 em换算工具:http://www. ...

  7. [LeetCode] 333. Largest BST Subtree 最大的二分搜索子树

    Given a binary tree, find the largest subtree which is a Binary Search Tree (BST), where largest mea ...

  8. JSP还有必要学吗?这篇文章告诉你

    阅读本文大概需要 12.4 分钟. 来源:http://suo.im/4wqRi7 作者:杨明翰 前戏   前后端分离已成为互联网项目开发的业界标准使用方式,通过nginx+tomcat的方式(也可以 ...

  9. 花一天时间踩了node npm的一个坑

    在一个后端眼里nodejs这工具真的难用,最近为了用elementui,然后去硬着头皮学vue,学着学着,发现还要去用node,webpack.真想掐死前端那一群人啊.... 好了,进入正题.话说我装 ...

  10. 禁用Chrome的“请停用以开发者模式运行的扩展程序”提示

    1.前言 每次启动都会有一个烦人的“请停用以开发者模式运行的扩展程序”提示,这个提示有多烦人,接触过的人都知道,启动的时候它不立即提示,等过了几秒钟等你打开某个网页开始执行某些操作时它突然弹出来干扰你 ...