Width Height -- (2)
上回说到,宽高对于块级元素和行内元素发生的改变,结果是块级元素会接受宽高属性所发生的改变的,而行内元素不接受宽高属性所发生的改变。
但是,事无绝对 —— 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)的更多相关文章
- client/scroll/offset width/height/top/left ---记第一篇博客
client/scroll/offset width/height/top/left (盒模型为contentBox,定位原点是元素左上角边框最外层的交点) clientWidth width+左p ...
- as3:sprite作为容器使用时,最好不要指定width,height
除 TextField 和 Video 对象以外,没有内容的显示对象(如一个空的 Sprite)的高度为 0,即使您尝试将 height 设置为其它值,也是这样. 如果您设置了 height 属性,则 ...
- offset[Parent/Width/Height/Top/Left] 、 client[Width/Height/Top/Left] 、 Element.getBoundingClientRect()
开篇提示:以下内容都经个人测试,参考API文档总结,但还是不能保证完全正确,若有错误,还请留言指出___________________________________________________ ...
- 正则:img的url,width,height 和 a标签的url以及替换
代码:// 内容:$detail['content'] //img的url,width,height $img = array(); $matches = array(); $regeImg = '/ ...
- ffmpeg按比例缩放--"width / height not divisible by 2" 解决方法
最近在处理视频的时候,有这么一个需求 如果视频的分辨率宽度大于960的话,就把宽度设为960,而高度按其比例进行缩放 如果视频的分辨率高度大于540的话,就把高度设为540,而宽度按其比例进行缩放 之 ...
- 如何理解VB窗体中的scale类属性及width height属性之间的关系
如何理解VB窗体中的scale类属性及width height属性之间的关系 VB中的SCALEHIEGT,SCALEWIDTH,与窗体中的WIDTH,HEIGHT的区别及关系是许多VB初学者难以理解 ...
- css 行内元素 块元素 替换元素 非替换元素 以及这些元素的width height margin padding 特性
一.各种元素的width height margin padding 特性(具体css元素的分来参看二) 1.块级元素 width. height. margin的四个方向. padding的四个方向 ...
- Canvas的width,height 和 样式中Canvas的width,height
控制Canvas的大小,有两种方式: 1:直接设置Canvas标签上的书width,height属性值; 2:通过Css设置Canvas的width,height; 这两种方式,区别是很大的. 1:C ...
- [WPF系列]- Style - Specify width/height as resource in WPF
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:sys=" ...
- css中的width,height,属性与盒模型的关系
这段话很容易记住盒模型: css中盒子模型包含属性margin.border.padding.content,他们可以把它转移到我们日常生活中的盒子(箱 子)上来理解,日常生活中所见的盒子也具有这些属 ...
随机推荐
- HTTP 2.0 之压测工具 Jmeter
年后,德国总部工业平台要做中国本地化,德国的同事过来给我们展示日志的时候,无意间看到了他们应用日志里的 HTTP/2,下意识到,原来他们都已经提供Http 2.0的服务了. 那么问题来了,除了h2lo ...
- 201871010109-胡欢欢《面向对象程序设计(java)》第八周学习总结
博文正文开头:(2分) 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/ ...
- IDEA安装maven和设置自动配置下载包
在我们开发的过程中如果环境配置好了,对于我们开发将优很大作用,减少可开发的时间,接下来我就讲解一下maven的安装和配置,以及在idea上配置,希望此教程同时对大家优帮助. 1.1.下载maven和安 ...
- AE cc 2019 下载链接
[安装环境]:win7/win8/win10 [64位下载] 百度网盘链接: pan.baidu.com/s/1iZcxpyqsRLXD4QNZoHgzPw 提取码:2u4j
- Shell:
Bash Notes for professionals ebook https://blog.csdn.net/simple_the_best/article/details/52821136 27 ...
- zz阿里小蜜—智能服务技术实践及场景探索(AI先行者大会)Final.pdf
SLQA+ 模型
- Comet OJ 计算机(computer)
Comet OJ 计算机(computer) 题目传送门 题目描述 小 X 有一台奇怪的计算机. 这台计算机首先会读入一个正整数 nn,然后生成一个包含 nn 个数的序列 aa. 一开始 a_i(1 ...
- Ultimate Chicken Horse GameProject第二次迭代成果文档
基于上一次的迭代中的数据结构我们补充了UML图.用例图及状态图. 用例图: 选择游戏地图:玩家可以在本地游戏界面将角色移动到地图门口并按下E进入地图. 进行游戏用例: 选择并摆放道 ...
- Web协议详解与抓包实战:HTTP1协议-请求与响应的上下文(7)
一.请求的上下文: User-Agent 指明客户端的类型信息,服务器可以据此对资源的表述做抉择 二.请求的上下文: Referer 浏览器对来自某一页面的请求自动添加的头部 截图2 这对于我们的防盗 ...
- [LeetCode] 694. Number of Distinct Islands 不同岛屿的个数
Given a non-empty 2D array grid of 0's and 1's, an island is a group of 1's (representing land) conn ...