<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>31-CSS元素显示模式转换</title>

    <style>

        div{

            display: inline;

            background: red;

            width: 200px;

            height: 200px;

        }

        span{

            display: block;

            background: green;

            width: 200px;

            height: 200px;

        }

        .cc{

            background: blue;

            width: 200px;

            height: 200px;

            display: inline-block;

        }

    </style>

</head>

<body>

<!--

1.如何转换CSS元素的显示模式?

设置元素的display属性

2.display取值

block 块级

inline 行内

inline-block 行内块级

3.快捷键

di display: inline;

db display: block;

dib display: inline-block;

-->

<div>我是div</div>

<div>我是div</div>

<span>我是span</span>

<span>我是span</span>

<p class="cc">我是段落</p>

<b class="cc">我是加粗</b>

</body>

</html>

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

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

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

  2. CSS元素显示模式

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

  3. [Web 前端] 016 css 元素的转换

    三种元素之间的转换 display 属性是用来设置元素的类型及隐藏的 常用的属性有 none 元素隐藏且不占位置 block 元素以块元素显示 inline 元素以内联元素显示 inline-bloc ...

  4. 课时91.CSS元素显示模式（掌握）

    在HTML中HTML将所有的标签分为两类,分别是容器级和文本级 在CSS中CSS也将所有的标签分为两类,分别是块级元素和行内元素 1.什么是块级元素,什么是行内元素? 块级元素会独占一行 行内元素不会 ...

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

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

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

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

  7. 元素显示模式：块元素 & 行内元素 & 行内块元素

    元素显示模式 前言 了解元素的显示模式可以更好的让我们布局页面.了解显示模式需要学习以下三个方面 什么是元素的显示模式 元素显示模式的分类 元素显示模式的转换 什么是元素显示模式 元素显示模式就是元素 ...

  8. Css - 元素的显示模式

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

  9. CSS中2d转换：transition过渡放在:hover伪类中与应用在整个元素中区别

    css的2d转换十分强大,能够在不使用js的情况下,实现页面的元素与用户之间更多动态的交互,增强用户体验.其中使用最多的就是hover伪类. 1.创建一个页面的div元素: <!DOCTYPE ...

随机推荐

  1. jvm程序执行慢诊断手册

    生产环境最多的几种事故之一就是程序执行慢,如果是web服务的话,表现就是响应时间长.本文分享,从业多年形成的排查守则. 诊断步骤 系统资源查看 首先是系统资源查看,而且必须是在第一步.因为很多事故都是 ...

  2. 第七章 LED将为我闪烁：控制发光二级管

    LED驱动开发实验 如图所示,LED1-LED2 分别与GPC0_3.GPC0_4 相连,通过GPC0_3.GPC0_4 引脚的高低电平来控制三极管的导通性,从而控制LED 的亮灭. 根据三极管的特性 ...

  3. SQLServer数据库增删改查

    一.数据库定义 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库.数据库的操作分为两种形式:一种是直接在数据库管理工具图形化界面进行操作:一种是使用数据库脚本进行操作,数据库脚本可 ...

  4. KFCM算法的matlab程序

    KFCM算法的matlab程序 在“聚类——KFCM”这篇文章中已经介绍了KFCM算法,现在用matlab程序对iris数据库进行简单的实现,并求其准确度. 作者:凯鲁嘎吉 - 博客园 http:// ...

  5. 「2017 山东一轮集训 Day5」苹果树

    「2017 山东一轮集训 Day5」苹果树 \(n\leq 40\) 折半搜索+矩阵树定理. 没有想到折半搜索. 首先我们先枚举\(k\)个好点,我们让它们一定没有用的.要满足这个条件就要使它只能和坏 ...

  6. 因PHP漏洞，超过4.5万个中国网站被攻击

    因PHP漏洞,超过4.5万个中国网站被攻击 日前据外媒ZDNet了解,超过4.5万个中国网站受到了试图进入网络服务器的不法分子攻击. 此次黑客利用中国网络安全公司VulnSpy在ExploitDB上发 ...

  7. ImportError: cannot import name 'Process' from 'multiprocessing'

    from multiprocessing import Process import os def run_proc(name): print 'Run child process %s (%s).. ...

  8. 发现电脑上装着liteide,就用golang做一个TCP通讯测试（支持先启动client端和断线重连）

    1.参考https://www.cnblogs.com/yin5th/p/9274495.html server端 main.go package main import ( "fmt&qu ...

  9. 【转】怎么给javascript + div编辑框光标位置插入表情文字等？

    最近刚好碰到这个问题,虽然离提出问题已经过了半年了,本着前人栽树后人乘凉的精神,还是回答一下.效果: &amp;amp;amp;lt;img src="https://pic2.zh ...

  10. Python代码分行问题

    可以用“\”符号把一行过长的Python代码分解成几行,多个语句也可以写在同一行,语句之间要用“;”隔开.