首先我们要知道什么是块级元素和行内元素有什么区别;

承接上篇文章:(浅谈HTML和body标签

块级元素:浏览器解析为独占一行的元素(例如:div、table、ul等。),浏览器会在该元素的前后显示拆行(也就是所谓的加个换行符);

行内元素:浏览器解析为独立元素(例如:img、a、span等),不会自动拆行。

tip:块元素和行内元素可以相互转换,这个要依具体情况而定。有时候块级元素很难实现的效果转化成行内元素会收获不一样的效果。

ok;我们了解了什么是块元素什么是行内元素了,那我们知道他们是通过什么方式转化的么。不要急,请接着看下文。

这时候我们就不得不介绍一个我们很容易犯错,但是只会用个别值的一个属性,display;

display顾名思义是显示的意思;所以属性有了那么值是什么呢?又代表着什么含义呢?对,就是以何种方式显示;

  • 块元素的display默认属性是block;所以会显示成独占一行。

  • 行内元素display默认属性是inline;所有会渲染成没有换行的元素;

​除此之外:最常用的两个属性就是none;其实我们经常会用display:none;来隐藏元素。

一下列出的属性为最新浏览器兼容的属性;

CSS属性中的display属性浅谈;的更多相关文章

  1. CSS中的display属性

    CSS中的display属性 display:block是可以把非块级元素强制转换为块级元素显示,如内嵌元素span,原来不支持设置宽高,宽度是由内容撑开的,几个span元素是在同一行内的,如果给sp ...

  2. 理解与应用css中的display属性

    理解与应用css中的display属性 display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none block inline inline-block inherit 下面, ...

  3. CSS中的display属性(none,block,inline,inline-block,inherit)

    css中的display属性(none,block,inline,inline-block,inherit) display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none bl ...

  4. 细说CSS中的display属性

    相信大部分奋战在前端的,尤其在前端攻城的过程中,有一种越陷越深的感觉,不错,一如前端深似海,从此妹子是浮云啊,前端上手容易,深入难啊!下面我就CSS中的display属性讲下我自己所积累的,与大家共享 ...

  5. 针对firefox ie6 ie7 ie8的css样式中的line-height属性

    针对firefox ie6 ie7 ie8的css样式中的line-height属性 以前我们大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,但是ie7以上对! ...

  6. .net中对象序列化技术浅谈

    .net中对象序列化技术浅谈 2009-03-11 阅读2756评论2 序列化是将对象状态转换为可保持或传输的格式的过程.与序列化相对的是反序列化,它将流转换为对象.这两个过程结合起来,可以轻松地存储 ...

  7. 对kotlin和java中的synchronized的浅谈

    synchronized在java中是一个关键字,但是在kotlin中是一个内联函数.假如分别在java和kotlin代码锁住同一个对象,会发生什么呢,今天写了代码试了试.首先定义people类 12 ...

  8. 转: 详解css中的display属性

    在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例讲解方法 ...

  9. CSS传统布局之display属性+float属性+position属性

    这三个属性是传统网页布局中经常用到的属性. 读这篇文章之前,希望你对css布局模型已经有了一定的了解.因为本文的三个属性是和css三个布局模型紧密联系在一起的.因此,如若你并不了解,我推荐你先看一下c ...

随机推荐

  1. 微信APP支付-java后台实现

    不说废话,直接上代码 先是工具类(注意签名时要排序): import java.io.BufferedReader; import java.io.ByteArrayInputStream; impo ...

  2. OpenCV-Python教程简介 | 一

    OpenCV OpenCV由Gary Bradsky于1999年在英特尔创立,第一版于2000年问世.Vadim Pisarevsky加入Gary Bradsky,一起管理英特尔的俄罗斯软件OpenC ...

  3. UVA11987 Almost Union-Find 并查集的节点删除

    题意: 第一行给出一个n,m,表示 n个集合,里面的元素为1~n,下面有m种操作,第一个数为 1 时,输入a,b 表示a,b 两个集合合并到一起,第一个数为 2 时,输入a,b表示将 a 从他原来的集 ...

  4. 微信阻止ios下拉回弹,橡皮筋效果

    直接阻止touchmove事件就好了(需设置passive: false): document.addEventListener("touchmove", function(evt ...

  5. mybatis 源码赏析(一)sql解析篇

    本系列主要分为三部分,前两部分主要分析mybatis的实现原理,最后一部分结合spring,来看看mybtais是如何与spring结合的就是就是mybatis-spring的源码. 相较于sprin ...

  6. Python第十二章-多进程和多线程01-多进程

    多进程和多线程 一.进程 1.1 进程的引入 现实生活中,有很多的场景中的事情是同时进行的,比如开车的时候 手和脚共同来驾驶汽车,再比如唱歌跳舞也是同时进行的:试想,如果把唱歌和跳舞这2件事情分开依次 ...

  7. 《java编程思想》操作符

    1. 自动递增和递减 递增和递减运算是两种相当不错的快捷运算,递减操作符是 "--",意为减少一个单位,递增操作符是 "++",意为增加一个单位.这两个操作符各 ...

  8. Chart控件的使用

    1.开启滚动条(ScaleView.Size除以Interval ,大概是中间出现纵线的数量,一般动ScaleView.Size) chart1.ChartAreas[0].CursorX.AutoS ...

  9. while实现2-3+4-5+6...+100 的和

    while实现2-3+4-5+6...+100 的和 可以看到规律为2-100内所有奇数都为减法,偶数为加法 设定变量 total=0: count=2 当count为偶数时与total相加,反则相减 ...

  10. java对象clone

    java克隆 为什么需要克隆 我们在很多时候需要使用一个对象去记录另外一个对象的当前状态,对象中可能会有很多属性,如果我们一个一个去设置,不仅不方便,而且效率很低,我们看一个初学者可能遇到的问题 cl ...