CSS中定位和浮动对行内元素的宽高的影响
行内元素的大小是由元素里面的内容撑开的宽高决定的,就算在css中对行内元素设置width,height。行内元素也会忽略宽高的设置。
但是当行内元素使用position:absolute或者position:fixed或者使用float属性时,width和height的设置能起作用。
因为在以上三种情况下,行内元素的display从inline变为block

<style>
span{
background-color:red;
width:100px;
height:100px;
float:left;
}
</style>
<span id='mySpan'>AAAAA</span>
<script type="text/javascript">
var mySpan = document.getElementById('mySpan');
console.log(window.getComputedStyle(mySpan).getPropertyValue("display"));
</script>

结果为:block
CSS中定位和浮动对行内元素的宽高的影响的更多相关文章
- css 行内元素设置宽高
有2中实现方法: 1.设置display:block inline-block,使其width属性生效 2.如果设置float:left | right, 使其width属性生效. (浮动)使得指 ...
- CSS 一些基础知识(优先级、行内元素的一些属性、font-size单位) 怎样不加载图片
CSS大小写不敏感 选择器优先级如下所示: 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式. 作为style属性写在元素内的样式 id选择器 类选择器 标签选择器 通配符选择 ...
- CSS学习笔记——CSS中定位的浮动float
昨天在解决了盒模型的问题之后又出现了新的知识模糊点:浮动和绝对定位?今天先解决浮动相关的问题,首先列举出想要解决的问题: 1.浮动到底是怎么样的? 2.浮动对元素的影响有什么? 3.浮动主要用来干什么 ...
- CSS中的行内元素和块级元素
我们在构造页面时,会发现有的元素是上下排列的,而有的则是横向排列的,这是为啥子呢 看看上图,我们也没给他设置啥子属性咋就不一样了,其实是因为每个元素都有默认的 display 属性,比如 div ...
- CSS行内元素
一.典型代表 span a ,strong em del, ins 二.特点: 在一行上显示 不能直接设置宽高 元素的宽和高就是内容撑开的宽高. <style type="text/c ...
- html元素两种分类。替换元素和不可替换元素;块级元素和行内元素
根据元素本身特点来分类: 替换元素替换元素根据其标签和属性来决定元素的具体显示内容.有<img><input><textarea><select>< ...
- css的定位和浮动
定位 浮动 float代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- 【CSS系列】块级元素和行内元素
块级元素: 块级元素生成一个元素框,默认会填充其父元素的内容区,旁边不能有其他元素,换句话说,它在元素框之前和之后生成了“分隔符”. 列表项是块级额元素的一个特例,除了表现方式与其他块元素一致,列表项 ...
- 初学css 行内元素与块级元素
行内元素与块级元素直观上的区别 1.行内元素会在一条直线上排列,都是同一行的,水平方向排列块级元素各占据一行,垂直方向排列.块级元素从新行开始结束接着一个断行. 2.块级元素可以包含行内元素和块级元素 ...
随机推荐
- UTC与GMT时间
整个地球分为二十四时区,每个时区都有自己的本地时间.在国际无线电通信场合,为了统一起见,使用一个统一的时间,称为通用协调时(UTC, Universal Time Coordinated).UTC与格 ...
- Android adapter适配器的学习
学习Android有一点时间,说说自己的学习感悟. 首先呢,先说说适配器的作用,顾名思义,它就是把数据定义好一定的规则,使得我们可以用到ListView GridView等上面 所以说这玩意,还是得好 ...
- 前后台json数据绑定——way.JS
依赖于JQ 01_页面值-页面值绑定.html 02_List绑定多个相同模型.html 0201_先set,再DOm添加.再get.html 03_绑定多个不同模型.html 04_继承03用类.方 ...
- CentOS7— Redis安装(转和延续)
Part I. Redis安装(转载部分) 一.安装 wget http://download.redis.io/redis-stable.tar.gz tar xvzf redis-stable.t ...
- testdb11b root.sh执行结果
[root@testdb11b dev]# /u01/app//grid/root.sh Performing root user operation for Oracle 11g The follo ...
- java基础之——DecimalFormat格式化数字
DecimalFormat可以用来格式化数字,例如用来设定保留多少位小数.设定数字分隔符等. 说方法之前,先介绍一下其常用的几个模式占位符: 0 一个数字# 一个数字,不包括 0. 小数的分隔符的占位 ...
- windows消息钩子注册底层机制浅析
标 题: [原创]消息钩子注册浅析 作 者: RootSuLe 时 间: 2011-06-18,23:10:34 链 接: http://bbs.pediy.com/showthread.php?t= ...
- YUV RGB播放器 打开, 显示RGB数据
可以查看RGB像素数据 可以通过菜单栏打开像素数据文件,也可以通过拖拽方式打开文件.如果文件名称中包含了“{w}x{h}”这样的字符串(例如“test_320x420.yuv”),系统会自动解析为该像 ...
- 疑问:line-height对非文字行内块的影响
line-height:对子元素是非文字的行内块,表现出来的不是垂直居中.目前还不知道具体细节. 可以看出来两个东西不在一行.老师的解释是line-height对非文字元素解释不一样,但是我没懂细节. ...
- SOAPUI测试步骤----DataGen TestStep
DataGen TestStep DataGen TestStep可以用来生成数据输入在你 TestCases ,例如数字或日期序列.随机选择等生成的数据作为属性,因此可以转移 和扩张就像任何其他属性 ...