30-CSS元素的显示模式


我是div

我是段落

我是标题

我是span 我是加粗 我是强调

  1. <!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也将所有的标签分为两类, 分别是块级元素和行内元素
  2.  
  3. 1.什么是块级元素, 什么是行内元素?
    块级元素会独占一行
    行内元素不会独占一行
  4.  
  5. 容器级的标签
    div h ul ol dl li dt dd ...
    文本级的标签
    span p buis stong em ins del ...
  6.  
  7. 块级元素
    p div h ul ol dl li dt dd
    行内元素
    span buis strong em ins del
  8.  
  9. 2.块级元素和行内元素的区别?
    2.1块级元素
    独占一行
    如果没有设置宽度, 那么默认和父元素一样宽
    如果设置了宽高, 那么就按照设置的来显示
  10.  
  11. 2.2行内元素
    不会独占一行
    如果没有设置宽度, 那么默认和内容一样宽
    行内元素是不可以设置宽度和高度的
  12.  
  13. 2.3行内块级元素
    为了能够让元素既能够不独占一行, 又可以设置宽度和高度, 那么就出现了行内块级元素
    -->
  14.  
  15. <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. Eclipse启动时发生An internal error occurred duri ng: "Initializing Java Tooling ----网上的坑爹的一个方法

    补充一下: 上面的方法不行. 我的个人解决方法 出现这种问题的原因,我的是eclipse换了,工作目录还是用之前的那个 把build Automatically的钩去掉 假设我们是用之前的worksp ...

  2. JavaWeb 过滤器——验证登录 防止未登录进入界面

    昨天刚刚完成老师布置的一个Web小项目,项目中用到了两个过滤器(编码过滤.登录过滤) 比如电商网页中有些不需要登录也能访问(首页.商品详细信息...),其他都需要过滤在会话作用域(session)中是 ...

  3. c/c++ 标准库 智能指针( smart pointer ) 是啥玩意儿

    标准库 智能指针( smart pointer ) 是啥玩意儿 一,为什么有智能指针??? c++程序员需要自己善后自己动态开辟的内存,一旦忘了释放,内存就泄露. 智能指针可以帮助程序员"自 ...

  4. Docker 入门到实践（四）Docker 使用镜像

    一.获取镜像 Docker Hub 上有大量的高质量的镜像让我们获取,命令为: docker pull [选项] [Docker Registry 地址[:端口号]/]仓库名[:标签] 具体的选项可以 ...

  5. SAP 维护视图创建与修改

    维护视图创建与修改 维护视图创建 T-CODE:SE54 维护ABAP数据字典 维护已生产的对象 注意:当维护视图修改后,需要删除已生成的对象,重新创建已生成的对象,否则无法显示,这个小窍门我花了半天 ...

  6. Servlet（四）：转发与重定向、路径问题

    在上次的小案例中用到了转发的技术,今天来仔细聊聊转发和重定向的问题,以及一些小知识的汇总. 一.转发 1.转发的概念 转发主要是将浏览器的请求交给另外一个servlet或jsp来处理,借助reques ...

  7. Mybatis报错 org.mybatis.spring.MyBatisSystemException: nested exception is org.apache.ibatis.binding.BindingException: Parameter 'parentCode' not found. Available parameters are [0, 1, param1, param2]

    orcal数据库使用mybatis接收参数,如果传的是多个参数,需要使用#{0},#{1},...等代替具体参数名,0 代表第一个参数,1 代表第二个参数,以此类推. 错误语句: <select ...

  8. Go学习笔记05-指针

    目录 参数传递 var a int = 2 var pa *int = &a *pa = 3 fmt.Println(a) Go语言中 指针不能运算 参数传递 不像C++.Java.Pytho ...

  9. 在Linux上搭建VisualSVN Server（svn服务端）

    一.检查是否安装了低版本的SVN #  rpm -qa | grep subversion 如果已安装SVN,则会返回版本信息.这时需要卸载旧版本的SVN. 卸载旧版本SVN # yum remove ...

  10. UVA1471-Copying Books（二分答案）

    Problem UVA1471-Copying Books Accept: 2669  Submit: 22797Time Limit: 3000 mSec Problem Description B ...