行内元素的大小是由元素里面的内容撑开的宽高决定的,就算在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中定位和浮动对行内元素的宽高的影响的更多相关文章

  1. css 行内元素设置宽高

    有2中实现方法: 1.设置display:block   inline-block,使其width属性生效 2.如果设置float:left | right, 使其width属性生效. (浮动)使得指 ...

  2. CSS 一些基础知识(优先级、行内元素的一些属性、font-size单位) 怎样不加载图片

    CSS大小写不敏感 选择器优先级如下所示: 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式. 作为style属性写在元素内的样式 id选择器 类选择器 标签选择器 通配符选择 ...

  3. CSS学习笔记——CSS中定位的浮动float

    昨天在解决了盒模型的问题之后又出现了新的知识模糊点:浮动和绝对定位?今天先解决浮动相关的问题,首先列举出想要解决的问题: 1.浮动到底是怎么样的? 2.浮动对元素的影响有什么? 3.浮动主要用来干什么 ...

  4. CSS中的行内元素和块级元素

    我们在构造页面时,会发现有的元素是上下排列的,而有的则是横向排列的,这是为啥子呢   看看上图,我们也没给他设置啥子属性咋就不一样了,其实是因为每个元素都有默认的 display 属性,比如 div ...

  5. CSS行内元素

    一.典型代表 span a ,strong em del, ins 二.特点: 在一行上显示 不能直接设置宽高 元素的宽和高就是内容撑开的宽高. <style type="text/c ...

  6. html元素两种分类。替换元素和不可替换元素;块级元素和行内元素

    根据元素本身特点来分类: 替换元素替换元素根据其标签和属性来决定元素的具体显示内容.有<img><input><textarea><select>< ...

  7. css的定位和浮动

    定位 浮动 float代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  8. 【CSS系列】块级元素和行内元素

    块级元素: 块级元素生成一个元素框,默认会填充其父元素的内容区,旁边不能有其他元素,换句话说,它在元素框之前和之后生成了“分隔符”. 列表项是块级额元素的一个特例,除了表现方式与其他块元素一致,列表项 ...

  9. 初学css 行内元素与块级元素

    行内元素与块级元素直观上的区别 1.行内元素会在一条直线上排列,都是同一行的,水平方向排列块级元素各占据一行,垂直方向排列.块级元素从新行开始结束接着一个断行. 2.块级元素可以包含行内元素和块级元素 ...

随机推荐

  1. nodeJS搭建本地服务器

    准备工作: 安装Node JS: 1:安装全局express:在express4.x版本中,安装时语句变为了这样: npm install -g express-generator 2:创建项目: 选 ...

  2. CSS初始化样式

    为什么要初始化CSS? CSS初始化是指重设浏览器的样式.不同的浏览器默认的样式可能不尽相同,所以开发时的第一件事可能就是如何把它们统一.如果没对CSS初始化往往会出现浏览器之间的页面差异.每次新开发 ...

  3. Android 应用程序升级到 5.0 需要注意的问题

    Android 5.0,代号 Lollipop,源码终于在2014年12月3日放出,国内一大批厂商跟进.最大的改变是默认使用 ART(Android Runtime) ,替换了之前的 Dalvik 虚 ...

  4. AutoMapper搬运工之配置

    回顾 前几篇搬运了AutoMapper的基本用法,自定义映射,相信有看的同学已经会使用AutoMapper这个强大的Mapping工具了.不过细心的你是否还记得前几篇中有提到Map的创建并非是每次都需 ...

  5. MongoDB学习笔记(1):MongoDB简介

    1. MongoDB的特点: (1) 易于使用 MongoDB是一个面向文档的数据库,非关系型数据库.通过在文档中嵌入式文档和数据,面向对象的方法能够仅使用一条记录来表现复杂的层次关系.文档的键和值不 ...

  6. 各种解析漏洞获取Webshell

    各种解析漏洞拿shell  一.IIS 6.0解析漏洞 IIS 6.0解析利用方法有两种1.目录解析/xx.asp/xx.jpg2.文件解析wooyun.asp;.jpg第一种,在网站下建立文件夹的名 ...

  7. Android想服务器传图片,透过流的方式。还有读取服务器图片(文件),也通过流的方式。

    /** * Created by Administrator on 2016/7/19. */ import android.util.Log; import com.gtercn.asPolice. ...

  8. 借鉴dubbo实现自定义缓存

    自定义缓存一般基于ConcurrentMap实现,实现缓存需要注意的点是缓存容器对象 本身依赖于 static final去存储对象,样例: ConcurrentMap<String, Gene ...

  9. java 反射实践

    /** * * @author yuxg */ import coreJava.javaFile; import javaClassStudy.Student; import javaClassStu ...

  10. SOAPUI使用教程-创建MockResponse步骤

    MockResponse测试步骤监听一个SOAP请求并返回一个预先配置的响应,然后再继续. 传入的请求的能被断言检查. 这种TestStep使用场景是例如: 客户端测试,验证传入的请求并返回假或不正确 ...