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

承接上篇文章:(浅谈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. [kmp,不要过多调用strlen!!!] Codeforces 1200E Compress Words

    题目:http://codeforces.com/contest/1200/problem/E Compress Words time limit per test 1 second memory l ...

  2. 算法学习 八皇后问题的递归实现 java版 回溯思想

    1.问题描述 八皇后问题是一个以国际象棋为背景的问题:如何能够在 8×8 的国际象棋棋盘上放置八个皇后,使得任何一个皇后都无法直接吃掉其他的皇后?为了达到此目的,任两个皇后都不能处于同一条横行.纵行或 ...

  3. JSP+Servlet+C3P0+Mysql实现的azhuo商城

    项目简介 项目来源于:https://gitee.com/xuyizhuo/shopping 原仓库中缺失jar包及sql文件异常,现将修改过的源码上传到百度网盘上. 链接:https://pan.b ...

  4. Building Applications with Force.com and VisualForce(Dev401)( 八):Designing Applications for Multiple Users: Controling Access to Records.

    Module Objectives1.List feature that affect access to data at the record level.2.List the organizati ...

  5. OpenCV-Python 直方图-1:查找、绘制和分析 | 二十六

    目标 学会 使用OpenCV和Numpy函数查找直方图 使用OpenCV和Matplotlib函数绘制直方图 你将看到以下函数:cv.calcHist(),np.histogram()等. 理论 那么 ...

  6. 深度学习框架Keras与Pytorch对比

    对于许多科学家.工程师和开发人员来说,TensorFlow是他们的第一个深度学习框架.TensorFlow 1.0于2017年2月发布,可以说,它对用户不太友好. 在过去的几年里,两个主要的深度学习库 ...

  7. Go解算法07整数反转

    描述 给出一个 32 位的有符号整数,你需要将这个整数中每位上的数字进行反转. 示例 1: 输入: 123 输出: 321  示例 2: 输入: -123 输出: -321 示例 3: 输入: 120 ...

  8. C++最简打开网页的方法

    system("explorer https://pay.747fz.com");

  9. 图解GC流程

    ​ GC流程是每一个Java开发人员都应该掌握的内容.你知道什么时候触发Minor GC?什么时候触发  Minor GC 的过程是怎么样的?Full GC 的过程又是怎么样的?这一切都要从「压死骆驼 ...

  10. [斯坦福大学2014机器学习教程笔记]第五章-控制语句:for,while,if语句

    在本节中,我们将学习如何为Octave程序写控制语句. 首先,我们先学习如何使用for循环.我们将v设为一个10行1列的零向量. 接着,我们写一个for循环,让i等于1到10.写出来就是for i = ...