1.块级元素
属性:display:block
特点:1.一行只能显示一个元素
2.宽度默认是父元素的,高度是有内容撑开
3.可以设置宽、高
常见块元素:div,p,h系列,ul、li,dl、dt、dd、from、header、nav、footer......
2.行内元素
属性:display:inline
特点:1.一行可以放多个元素
2.宽、高是有内容撑开
3.不可以设置宽、高
常见元素:a、span、b、u、i、s、strong......
3.行内块元素
属性:display:inline-block
特点:1.一行可以显示多个
2.可以设置宽、高
常见元素:input、textarea、button、select......

各级元素相互转换:只需要将关键词词写入css样式中即可,例如

a{  //由于a是行内元素,不能设置宽和高,display:inline-block关键词将其转换为行内块元素;

display:inline-block;

}

注意:1.块元素有嵌套特点,单p不可以嵌套div、p、h等块级标签

            2.a标签内部可以嵌套除本身标签外的标签

CSS基础 常见的元素显示模式的更多相关文章

  1. 【CSS复合选择器、元素显示模式、背景】前端小抄(3) - Pink老师自学笔记

    [CSS复合选择器.元素显示模式.背景]前端小抄(3) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS的复合选择器 1.1 什么是复合选择器 在 CSS 中,可以根据选 ...

  2. CSS基础 行内元素/行内块元素设置垂直对齐方式及常见使用案例

    vertical-align 属性值 效果 baseline 基线对齐 top 顶部对齐 middle 中心对齐 bottom 底部对齐 使用案例1:百度搜索框左边和右边底部没有对齐 使用vertic ...

  3. CSS 基础:定位元素(3)<思维导图>

    这段时间利用一下间隙时间学习了CSS的基础知识,主要目的是加深对CSS的理解,虽然个人主要工作基本都是后台开发,但是个人觉得系统学习一下CSS的基础还是很有必要的.下面我学习CSS时做的思维导图(全屏 ...

  4. CSS基础:替换元素和非替换元素

    简介 根据 "外在盒子" 是内联还是块级我们可以把元素分为内联元素和块级元素,而根据是否具有可替换内容,我们也可以把元素分为替换元素和非替换元素.这种通过修改某个属性值,例如 &l ...

  5. CSS 基础 例子 伪元素和伪类 & 区别

    一.概念 CSS 伪类 -------向某些选择器添加特殊的效果,要达到同等效果,通过类来达到效果 CSS 伪元素     -------将特殊的效果添加到某些选择器,要达到同等效果,通过添加元素达到 ...

  6. css基础 行内元素 块级元素

    1.行内元素(内联元素 inlineElement) 特点:不占据一行,无法设置宽高及行高,其宽度随着内容增加,高度随字体大小而改变,margin只对左右起作用,上下无效. 常见有: a - 锚点,b ...

  7. HTML+CSS基础 块级元素div分析 文档流 脱离文档流的方法

    块级元素div分析 1.外边距  margin 2.内边距 padding 3.边框  border Div的真实宽度=width+margin-left+margin-right+border*2+ ...

  8. CSS复合选择器,元素的显示模式,CSS背景设置

    欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...

  9. CSS元素显示模式

    CSS的元素显示模式 什么是元素显示模式 作用:网页的标签非常多,在不同的地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页 元素的显示模式就是元素(标签)以什么样的方式进行显示,比如& ...

随机推荐

  1. 【Linux】【Services】【NetFileSystem】Samba

    1. 简介 1.1. 背景:case is initiative by 某windows无良人事,需求是需要一整块4T的硬盘,由于ESXi5最大支持一块盘是2T大小,而且不可以使用windows动态卷 ...

  2. C语言static关键字

    C语言static关键字 static关键字的作用,主要从在程序的生存周期.作用域和在代码段中的位置起作用. 全局变量 静态全局变量 局部变量 静态局部量 生存周期 程序运行到结束 程序运行到结束 函 ...

  3. Apache Log4j 2 报高危漏洞,CODING 联手腾讯安全护卫软件安全

    导语 12 月 9 日晚间,Apache Log4j 2 发现了远程代码执行漏洞,恶意使用者可以通过该漏洞在目标服务器上执行任意代码,危害极大. 腾讯安全第一时间将该漏洞收录至腾讯安全漏洞特征库中,C ...

  4. 培训班输出的大量学员,会对IT行业产生哪些影响?

    先说下会有哪些影响呢?   1 可能也就是些大城市的,规模比较大的,口碑比较好的培训学校输出的码农才能入行,而且能做长久.一些线上的所谓培训机构,或者小城市的培训学校,输出的能入行的码农,其实规模很有 ...

  5. [BUUCTF]PWN17——[HarekazeCTF2019]baby_rop

    [BUUCTF]PWN17--[HarekazeCTF2019]baby_rop 附件 步骤: 例行检查,64位,开启了NX保护 试运行一下程序,看这个情况,当我们输入太长字符串的时候会报错 64位i ...

  6. M-SOLUTIONS Programming Contest 2020 题解

    M-SOLUTIONS Programming Contest 2020 题解 目录 M-SOLUTIONS Programming Contest 2020 题解 A - Kyu in AtCode ...

  7. CF742B Arpa's obvious problem and Mehrdad's terrible solution 题解

    Content 有一个长度为 \(n\) 的数组,请求出使得 \(a_i \oplus a_j=x\) 且 \(i\neq j\) 的数对 \((i,j)\) 的个数.其中 \(\oplus\) 表示 ...

  8. CPU中断数查看与网卡中断绑核

    CPU中断数查看 多核CPU每个核心CPU发生中断的数量查看 # mpstat -I SUM -P ALL 1 3 Linux 5.4.0-40-generic (verify-new-511kern ...

  9. GAN 简介

    GAN 原理: ​GAN 的主要灵感来源于博弈论中零和博弈的思想,应用到深度学习神经网络上来说,就是通过生成网络 G(Generator)和判别网络 D(Discriminator)不断博弈,进而使 ...

  10. Spring学习(五)Spring和Mybatis的整合

    1.前言 在整合之前.要搞清楚是谁整合谁.后续会学到很多整合的例子.在这里.是Spring整合Mybatis.Spring中集成了很多关于Mybatis中一些关键类的jar包.通过这些.可以更加方便的 ...