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.块级元素可以包含行内元素和块级元素 ...
随机推荐
- GIT 从入门到放弃大整理
跟着廖雪峰学 GIT http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000 GUI f ...
- [Android Pro] PullToRefreshListView怎么设置各个item之间的间距
reference to : http://blog.csdn.net/qq_25943493/article/details/50923895 要设置第三方的上拉下载listView的item之间 ...
- ubuntu 下安装 cx_Oracle库
1.下载3个zip包: 下载地址:http://www.oracle.com/technetwork/database/features/instant-client/index-097480.htm ...
- python备忘--函数
1.zip函数 zip函数接受任意多个(包括0个和1个)序列作为参数,返回一个tuple列表. x = [1, 2, 3] y = [4, 5, 6] z = [7, 8, 9] xyz = zip( ...
- CSS实现背景透明,文字不透明,兼容所有浏览器
11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...
- Swap in C C++ C# Java
写一个函数交换两个变量的值. C: 错误的实现: void swap(int i, int j) { int t = i; i = j; j = t; } 因为C语言的函数参数是以值来传递的(pass ...
- Android真机调试 Android.Util.AndroidRuntimeException: You cannot combine custom titles with other title features
参考连接:http://blog.csdn.net/scyatcs/article/details/9003285 Android.Util.AndroidRuntimeException: You ...
- [转]js 将图片连接转换称base64格式
参考:http://blog.csdn.net/wyyfwm/article/details/45917255 我们把图像文件的内容直接写在了HTML 文件中,这样做的好处是,节省了一个HTTP 请求 ...
- linux xorddos样本分析1
样本行为 该样本为国庆期间接到的一个应急,发现为今年比较流行的xorddos,遂分析一番. 运行之后,查看进程,可以发现可疑进程ydxrooqtno,以及ppkzkneour. 多次运行发现除了ydx ...
- lucene全文检索---打酱油的日子
检索内容,一般的程序员第一时间想到的是sql的like来做模糊查询,其实这样的搜索是比较耗时的.已经有lucene帮我们 封装好了,lucene采用的是分词检索等策略. 1.lucene中的类描述 I ...