在CSS中,根据元素显示模式的不同元素标签被分为了两类:行内元素(inline-level)、块级元素(block-level)。

    1,首先介绍什么是行内元素,什么又是块级元素?

      1.1,行内元素就是不会独占一行的元素,例如:span buis strong em ins del等;

      1.2,块级元素就是会独占一行的元素,例如:p div h ul ol dl li dt dd等。

    2,行内元素与块级元素有哪些区别?

      2.1,行内元素不会独占一行,而块级元素会独占一行;

      2.2,行内元素不能设置宽度和高度,它的宽度和高度会随着文本的改变而该改变。块级元素可以设置宽度和高度,

        如果没有设置宽度和高度,在默认情况下和父元素一样宽,高度则为0;

      2.3,下面这个实例就是通过给行内元素span,块级元素div设置样式,来展示行内元素和块级元素的差异:

    <style>
span{
height: 200px;
width: 300px;
background-color: red;
font-size: 40px;
}
.father{
width: 300px;
height: 300px;
background-color: green;
margin: 100px auto;
}
.son{
background-color: blue;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS元素的显示模式</title>
</head>
<body>
<span>我是span</span>
<div class="father">
我是father
<div class="son">我是son</div>
</div>
</body>
</html>

  

  3,由于我们有的时候不仅要设置元素的宽度和高度,同时也希望元素不会独占一行,

   这时就出现了行内块级元素(inline-block),常见的行内块级元素有<img>/<input>/<td>等。

  4,如何转换CSS元素的显示模式?

    4.1,设置元素的display属性

    4.2,display取值:inline(行内)、block(块级)、inline-block(行内块级)

    4.3,下面这个实例就是将span的显示模式转换为块级,将div的显示属性转换为行内块级,将img的显示模式转换为块级

  <style>
/*将span转换为块级元素--*/
*{
margin:;
padding:;
}
span{
display: block;
background-color: red;
width: 400px;
height: 400px;
}
/*将div转换为行内块级元素*/
div{
display: inline-block;
background-color: green;
width: 300px;
height: 300px;
}
/*将img转换为块级元素*/
img{
display: block;
width: 200px;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS元素的显示模式</title>
</head>
<body>
<span>我是span</span>
<div>我是div</div>
<img src="https://images.cnblogs.com/cnblogs_com/TomHe789/1652521/o_200222073220ctl.jpg"> </body>
</html>

  

  

CSS中元素的显示模式的更多相关文章

  1. css中元素border属性的构成以及配合属性值transparent可得到一些特殊形状1.0

    css中我们经常使用到元素的border属性和属性值transparent,可能好多人还不太了解border的构成以及配合transparent的一些效果: 1.border的构成如下所示:   ht ...

  2. CSS中元素水平居中和垂直居中的方法

    #CSS中水平居中和垂直居中的方法 一. 水平居中 1.行内元素(文本,图片等) 如果被设置元素为文本.图片等行内元素时,可以通过给父元素设置` text-align:center;` 来实现 2.定 ...

  3. css中元素定位

    在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示 CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.relat ...

  4. css中元素的auto属性值是什么意思,比如margin:0 auto表示什么?

    auto 你可以理解为一种 自动/自适应 的概念 比如 现在项目需要一个宽度为960px的整体布局居中 根据用户浏览器大小不同你将需要使用margin:0 auto;来实现. 无论用户浏览器宽度为多少 ...

  5. css中元素居中总结

    很多时候,我们需要让元素居中显示:1. 一段文本的水平居中,2. 一张图片的水平居中,3. 一个块级元素的水平居中:4. 单行文本的竖直居中,5. 不确定高度的一段文本竖直居中,6. 确定高度的块级元 ...

  6. css中元素水平垂直居中4种方法介绍

    table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对blo ...

  7. css中元素的分类

    按照显示元素分类: 行内元素(lnline-element):元素的高度,行高,顶底边距由元素所包含的图片或文字所决定,不可改变:其宽度为内容文字或图片的宽度所决定,而其左右边距可人为设置. 行内元素 ...

  8. css中元素的位置

    一.display 1.display:none 隐藏标签 2.display:inline 将块级标签改为内联标签 3.display:block 将内联标签改为块级标签 4.display:inl ...

  9. CSS中元素各种居中方法(思维导图)

    前言 用思维导图的方式简单总结一下各种元素的居中方法,如下图: 补充一下: table自带功能 100% 高度的 afrer before 加上 inline block优化 div 装成 table ...

随机推荐

  1. equals()和hashCode()必须同时覆盖的原因

    我们在用JAVA创建自己的类的时候,一种比较常见的覆盖就是覆盖Object中的equals()方法和hashCode()方法.如果不这样做的话,就很可能违反Object.hashCode()的通用约定 ...

  2. centOS7.1安装nginx与可能遇见的问题

    一,安装nginx(系统:CentOS7.1) 1.Nginx下载地址:http://nginx.org/download/nginx-1.6.2.tar.gz [root@linux src]# c ...

  3. JPA_映射关联关系

    一:单项多对一的关联关系 例如:订单和客户 1.新创建订单类 package com.atguigu.jpa.helloworld; import javax.persistence.Column; ...

  4. Solution: 题解 CF1196E Connected Component on a Chessboard

    感觉这题还可以 因为总空间比输入数量 不知高到哪里去了 ,所以完全不需要考虑放不下的问题 从贪心的角度考虑,如果要使相差数量巨大的\(b\)和\(w\)能够成功放下来,应该使这些方块尽量分散(似乎有点 ...

  5. HDU-5902-GCD is Funny解题笔记

    Alex has invented a new game for fun. There are n integers at a board and he performs the following ...

  6. Windows10怎么用Administrator登录?

    1.首先按下快捷键win+X键, 2.然后在命令提示符中输入命令“net user administrator /active:yes”后回车 3.此时administrator管理员账户已开启,点击 ...

  7. 【WPF学习】第三十三章 高级命令

    前面两章介绍了命令的基本内容,可考虑一些更复杂的实现了.接下来介绍如何使用自己的命令,根据目标以不同方式处理相同的命令以及使用命令参数,还将讨论如何支持基本的撤销特性. 一.自定义命令 在5个命令类( ...

  8. 1222: 计算x^1+x^2+x^3+……+x^n的值

    #include <stdio.h>int main(){ int x,n,i,j; long long sum,g;while(scanf("%d%d",&x ...

  9. (5千字)由浅入深讲解动态规划(JS版)-钢条切割,最大公共子序列,最短编辑距离

    斐波拉契数列 首先我们来看看斐波拉契数列,这是一个大家都很熟悉的数列: // f = [1, 1, 2, 3, 5, 8] f(1) = 1; f(2) = 1; f(n) = f(n-1) + f( ...

  10. Android 开启与关闭软键盘

    http://www.cnblogs.com/weixing/p/3300908.html InputMethodManager imm = (InputMethodManager)getSystem ...