30-CSS元素的显示模式


我是div

我是段落

我是标题

我是span 我是加粗 我是强调

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>30-CSS元素的显示模式</title>
    <style>
        div{
            background: red;
            width: 200px;
            height: 200px;
        }
        span{
            background: blue;
            width: 200px;
            height: 200px;
        }
        img{
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
<!--
在HTML中HTML将所有的标签分为两类, 分别是容器级和文本级
在CSS中CSS也将所有的标签分为两类, 分别是块级元素和行内元素

1.什么是块级元素, 什么是行内元素?
块级元素会独占一行
行内元素不会独占一行

容器级的标签
div h ul ol dl li dt dd ...
文本级的标签
span p buis stong em ins del ...

块级元素
p div h ul ol dl li dt dd
行内元素
span buis strong em ins del

2.块级元素和行内元素的区别?
2.1块级元素
独占一行
如果没有设置宽度, 那么默认和父元素一样宽
如果设置了宽高, 那么就按照设置的来显示

2.2行内元素
不会独占一行
如果没有设置宽度, 那么默认和内容一样宽
行内元素是不可以设置宽度和高度的

2.3行内块级元素
为了能够让元素既能够不独占一行, 又可以设置宽度和高度, 那么就出现了行内块级元素
-->

<div>我是div</div>
<p>我是段落</p>
<h1>我是标题</h1>
<hr>
<span>我是span</span>
<b>我是加粗</b>
<strong>我是强调</strong>
<hr>
<img src="data:images/picture.jpg" alt="">
<img src="data:images/picture.jpg" alt="">
</body>
</html>

H5 30-CSS元素的显示模式的更多相关文章

  1. Css - 元素的显示模式

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

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

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

  3. CSS中元素的显示模式

     在CSS中,根据元素显示模式的不同元素标签被分为了两类:行内元素(inline-level).块级元素(block-level). 1,首先介绍什么是行内元素,什么又是块级元素? 1.1,行内元素就 ...

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

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

  5. CSS元素显示模式

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

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

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

  7. H5页面 绝对定位元素被 软键盘弹出时顶起

    H5页面 绝对定位元素被 软键盘弹出时顶起 在h5页面开发的过程中,我们可能会遇到下面这个问题,当页面中有输入框的时候,系统自带的软盘会把按钮挤出原来的位置.那么我们该怎么解决呢?下面列出一下的方法: ...

  8. H5页面基础元素

    H5页面结构元素示例 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=&quo ...

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

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

随机推荐

  1. SQL Server中sys.syslogin中updatedate字段的浅析

    在系统视图sys.syslogins中,有createdate与updatedate两个字段,分别表示创建登录名与更新登录名的日期,如果你用updatedate的值来判断一个登录名的权限是否被修改过, ...

  2. mssql sqlserver 禁止删除数据表中指定行数据(转自:http://www.maomao365.com/?p=5323)

    转自:http://www.maomao365.com/?p=5323 摘要:下文主要讲述,如何禁止删除数据表中指定行数据 最近收到用户一个需求,禁止所有人删除”表A”中,ID 为1.2.3.4.5的 ...

  3. 洗礼灵魂，修炼python（71）--爬虫篇—【转载】xpath/lxml模块，爬虫精髓讲解

    Xpath,lxml模块用法 转载的原因和前面的一样,我写的没别人写的好,所以我也不浪费时间了,直接转载这位崔庆才大佬的 原帖链接:传送门 以下为转载内容: --------------------- ...

  4. hivesql优化的深入解析

    转载:https://www.csdn.net/article/2015-01-13/2823530 一个Hive查询生成多个Map Reduce Job,一个Map Reduce Job又有Map, ...

  5. mac os 10.12 Sierra 连接 惠普 M1136 MFP 打印机，通过 samba 协议，安装驱动，连接打印机

    参考链接: https://support.hp.com/hk-zh/product/hp-zbook-17-g3-mobile-workstation/8693765/document/c04530 ...

  6. 爬楼梯的golang实现

    假设你正在爬楼梯.需要 n 阶你才能到达楼顶. 每次你可以爬 1 或 2 个台阶.你有多少种不同的方法可以爬到楼顶呢? 注意:给定 n 是一个正整数. 输入: 输出: 解释: 有两种方法可以爬到楼顶. ...

  7. 1. 路过面了个试就拿到2个offer。是运气吗？

    路过随便面个试就拿到2个offer.是运气吗? #复习很重要#看看面试问的问题,再瞧瞧师兄的学习态度,你就明白 机会为何总与你擦肩而过了.[玫瑰] 以下是我和师兄的聊天记录,你会几个?

  8. JZOJ 5602.【NOI2018模拟3.26】Cti

    JZOJ 5602.[NOI2018模拟3.26]Cti Description 有一个 \(n×m\) 的地图,地图上的每一个位置可以是空地,炮塔或是敌人.你需要操纵炮塔消灭敌人. 对于每个炮塔都有 ...

  9. scp 实现文件打包上传到linux

    在A服务器上将/root/lk目录下所有的文件传输到B的/home/lk/cpfile目录下,命令为: scp -r /root/lk root@43.224.34.73:/home/lk/cpfil ...

  10. python学习初始函数

    函数的用途:解决代码的冗余.可读性差.可扩展性差. 函数的一般格式: #函数定义 def mylen(): """计算s1的长度""" s1 ...