<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>css+div块级元素和行内元素</title>

         <style type="text/css">

             div{

                 height: 50px;

                 background-color: green;

                 margin-bottom: 5px;

                 /*块级元素转换成行内元素*/

                 display: inline;

                 /*设置是否显示*/

                 display:none;

             }

             span{

                 width: 300px;

                 height: 50px;

                 /*行内元素转换成块级元素 支持宽高，但独占一行*/

                 /*display: block;*/

                 /*行内元素转换成块级元素 支持宽高，但不会独占一行*/

                 display:inline-block;

                 background-color: orange;

                 margin-bottom: 5px;

             }

         </style>

     </head>

     <body>

         <!--块级元素-->

         <div>学习</div>

         <div>吃饭</div>

         <div>睡觉</div>

         <div>...</div>

         <div>...</div>

         <div>...</div>

         <!--行内元素-->

         <span>首页</span>

         <span>课程</span>

         <span>实战</span>

     </body>

 </html>

CSS-13-块级元素和行内元素的更多相关文章

  1. CSS(3)---块级标签、行内标签、行内块标签

    块级标签.行内标签.行内块标签 html中的标签元素三种类型:块级标签.行内标签.行内块标签. 一.概述 1.块级标签 概念 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属 ...

  2. 【CSS3】块级元素与行内元素的区别

    一.行内元素与块级函数的三个区别 行内元素的特点: 和其他元素都在一行上: 高,行高及外边距和内边距部分可改变: 宽度只与内容有关: 行内元素只能容纳文本或者其他行内元素. 行内元素设置width无效 ...

  3. CSS里常见的块级元素和行内元素

    根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...

  4. CSS学习笔记——盒模型，块级元素和行内元素的区别和特性

    今天本来打算根据自己的计划进行前端自动化的学习的,无奈早上接到一个任务需求需要新增一个页面.自从因为工作需要转前端之后,自己的主要注意力几 乎都放在JavaScript上面了,对CSS和HTML这方面 ...

  5. CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

  6. css块级元素和行内元素详细解析

    块级元素和行内元素是布局中常见的两种基本元素,但是未必有很多人深入的研究它们的细微差别. 常见块级元素:div  p  form ul ol li 等: 常见的行内元素:span stronh em; ...

  7. 【CSS系列】块级元素和行内元素

    块级元素: 块级元素生成一个元素框,默认会填充其父元素的内容区,旁边不能有其他元素,换句话说,它在元素框之前和之后生成了“分隔符”. 列表项是块级额元素的一个特例,除了表现方式与其他块元素一致,列表项 ...

  8. CSS标准文档流 块级元素和行内元素

    标准文档流 什么是标准文档流 宏观的将,我们的web页面和ps等设计软件有本质的区别,web 网页的制作,是个“流”,从上而下 ,像 “织毛衣”.而设计软件 ,想往哪里画东西,就去哪里画 空白折叠现象 ...

  9. CSS块级元素与行内元素

    CSS块级元素与行内元素 行内元素与块状元素 1.块级元素:可以设置 width, height属性.  行内元素:设置width和height无效,其宽度随其元素的内容(文字或者图片等)的宽度而变化 ...

  10. [HTML/CSS]盒子模型，块级元素和行内元素

    目录 概述 盒子模型 块级元素 行内元素 可变元素 总结 概述 在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项 ...

随机推荐

  1. 18.函数复习，文件处理b模式(二进制处理)，文件处理其他高级玩法

    1.函数复习 # map # l = [1,2,3,4,5] # print(list(map(str,l))) # reduce # l = [1,2,3,4,5] # from functools ...

  2. DEVOPS技术实践_02:jenkins自动构建项目

    一.用户名密码错误 打开jenkins发现用户名密码错误,解决 1.1 找到config.xml文件 [root@jenkins-master ~]# ll -a drwxr-xr-x. root r ...

  3. 020 ceph作openstack的后端存储

    一.使用ceph做glance后端 1.1 创建用于存储镜像的池 [root@serverc ~]#  ceph osd pool create images 128 128 pool 'images ...

  4. JavaScript之DOM操作，事件操作，节点操作

    1,DOM操作 1.1  概念 所谓DOM,全称Document Object Model 文档对象模型,DOM是W3C(World Wide Web Consortuum )标准,同时也定义了访问诸 ...

  5. 20191024-2 Alpha阶段贡献分配

    此作要求参见: https://edu.cnblogs.com/campus/nenu/2019fall/homework/9858 要求1 每位组员的贡献分值 罗杨美慧:9 徐丽君:11 魏鑫:12 ...

  6. 日期格式化使用 YYYY-MM-dd 的潜在问题

    昨天在v站上看到这个关于YYYY-MM-dd的使用而出现Bug的帖子(v2ex.com/t/633650)非常有意思,所以拿过来分享一下. 在任何编程语言中,对于时间.数字等数据上,都存在很多类似这种 ...

  7. selenium模块的基本使用

    一.selenium库与requests库的区别 - selenium请求库: - 本质上是一个自动化测试模块; ---> 主要用于测试 UI界面 - selenium除了可以做自动化测试,还可 ...

  8. Nginx 究竟如何处理事件？

    在了解了网络事件以及事件分发收集器以后,让我们来了解 Nginx 是怎么样处理事件的? Nginx 事件循环 当 Nginx 刚刚启动时,在等待事件部分,也就是打开了 80 或 443 端口,这个时候 ...

  9. 微信生成二维码 PHP

    <?php /** * Created by PhpStorm. * User: liyiming * Date: 2019/8/8 * Time: 14:23 */ # 生成二维码 class ...

  10. InnoDB与MyISAM的区别（高性能MySQL笔记）

    1.InnoDB支持事务,MyISAM不支持,也就是说MyISAM不支持事务回滚操作,这个功能可能是致命的 2.InnoDB支持行锁,MyISAM只支持表锁,不过InnoDB的行锁是建立在索引之上的, ...