在HTML中HTML将所有的标签分为两类，分别是容器级和文本级

在CSS中CSS也将所有的标签分为两类，分别是块级元素和行内元素

1.什么是块级元素，什么是行内元素？

块级元素会独占一行

行内元素不会独占一行

块级元素       容器级标签都是块级元素还要加上一个p

p   div  h  ul   ol   dl   li  dt   dd

行内元素     文本级标签都是行内元素还要减去一个p

span   b  u   i   s  strong   em    ins    del

2.块级元素和行内元素的区别？

2.1块级元素

独占一行

如果没有设置宽度，默认和父元素一样宽，div的父元素是body，所以和body一样宽

如果设置了宽高，那么就按照设置的来显示

2.2行内元素

不会独占一行

如果没有设置宽度，那么默认和内容一样

行内元素是不可以设置宽度和高度的

从以上的实例可以看出来span是没有办法设置宽度和高度的

2.3行内块级元素

我们现在有一个需求：想要不独占一行，又能设置跨度和高度，应该怎么做呢？

如果用块级元素，必须独占一行才能设置宽高，如果用行内元素，不独占一行，却不能设置宽高。

所以我们要用到行内块级元素

如img标签，既不独占一行，又可以设置宽高

课时91.CSS元素显示模式（掌握）的更多相关文章

  1. 课时92.CSS元素显示模式转换（掌握）

    我们之前学习的显示模式都可以不用记忆,因为这节课我们要学习转换,我们可以任意来进行一个转换的,上面这些东西有一个了解就行了.所有的标签都有一个属性叫做display,display的中文含义就是显示的 ...

  2. CSS元素显示模式

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

  3. Css - 元素的显示模式

    Css - 元素的显示模式 块元素(block) 块元素是指: 1.独占一行,每个div上下之间没有留白,上面的div的底部与下面的div的顶部紧紧靠在一起没有任何缝隙 2.可设置宽高,默认宽度是父元 ...

  4. CSS的元素显示模式与转换

    CSS的元素显示模式与转换 1. CSS的元素显示模式 1.1 块元素 <div>标签是最典型的块元素.另外常见的块元素有h1~h6.p.ul.ol.li等. 特点: 独占一行 高度.宽度 ...

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

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

  6. CSS元素的几种显示模式

    元素的显示模式 元素的显示模式就是元素以生么方式进行显示,比如<div>自己占一行,比如一行可以放多个<span>. HTML元素一般分为块元素和行内元素. 块元素 常见的块元 ...

  7. H5 31-CSS元素显示模式转换

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. [转载]CSS元素的定位position

    CSS元素的定位position 属性position   值 描述 absolute                             生成绝对定位的元素,相对于 static 定位以外的第一 ...

  9. Selenium自动化-CSS元素定位

    接下来,开始讲解 CSS元素定位. CSS定位速度快,功能多,但是不能向上查找,比 xpath好用,是本人认为最好用的定位方式   大致用法总结: 具体使用仿上篇博客.http://www.cnblo ...

随机推荐

  1. 【Linux相识相知】文件查找（locate/find）

    在用linux操作系统的时候,当我们忘记之前某个文件存储的位置,但是知道其文件名或者模糊的知道其文件名,我们都可以通过文件查找工具来查找,linux提供两种常用的查找工具,locate和find,在日 ...

  2. s中的闭包

    今天看了关于js闭包方面的文章,还是有些云里雾里,对于一个菜鸟来说,学习闭包确实有一定的难度,不说别的,能够在网上找到一篇优秀的是那样的不易. 当然之所以闭包难理解,个人觉得是基础知识掌握的不牢,因为 ...

  3. hibernate表关系

    1.一对一 用户表可以查分成两个表,一个userInfo.一个userLogin表 实现方式: (1)使用外键:外键+唯一性约束+非空约束 (2)公用主键:公用主键,从表的主键同时也是外键,来源于主表 ...

  4. 前端参数统一校验工具类ValidParamUtils

    1,前端参数不可信,对于后端开发人员来说应该是一条铁律,所以对于前端参数的校验,必不可少,而统一的前端参数校验工具,对我们进行参数校验起到事半功倍的效果 2,统一参数校验工具ValidParamUti ...

  5. linux基础-wget、apt-get、yum的区别

    Linux操作系统下安装与下载软件是Linux非常基本也非常重要的命令,分清wget.apt-get.yum的区别很重要. Linux操作系统主要分为两大类: RedHat系列:Redhat.Cent ...

  6. 抽象工厂模式&简单工厂模式

    抽象工厂模式 优点: 如IFactory factory=new AccessFactory(),在一个应用中只需要初始化一次,这就使得改变应用的时候变得非常容易:其次它让具体的创建实例过程与客户端分 ...

  7. 位运算（5）——Power of Two

    判断一个整数是不是2的幂. 关键是弄明白2的幂的二进制形式只有一个1. public class Solution { public boolean isPowerOfTwo(int n) { int ...

  8. java集合框架（二）：HashTable

    HashTable作为集合框架中的一员,现在是很少使用了,一般都是在面试中会问到其与HashMap的区别.为了能在求职的时候用上场,我们有必要对其原理进行解读. HashTable的实现原理跟Hash ...

  9. Oracle JDBC 连接卡死后 Connection Reset

    坑 这绝对是我碰计算机以来遇到的第一大坑! 症状: 在Linux主机上远程登录,执行一个简单的Oracle的JDBC连接程序(jar包),结果硬生生的卡在了连接建立验证阶段,然后等上几分钟后因为连接超 ...

  10. Linux - centos 7 mysql安装

    安装 CentOS Linux release 7.1.1503 (Core)下载地址链接:https://pan.baidu.com/s/1c2rWsbm 密码:5nrt #yum -y insta ...