<!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. pandas小程序应用-实验

    背景:来自于日常工作,针对医院行政人员统计日常门诊信息,手工统计繁琐.容易出错的问题,结合实际特点,采用python对数据进行自动统计. 具体步骤如下: 1.引入python工具包. import p ...

  2. linux查看文件内容跳到文件底部和回到文件顶部的快捷键

    有时候需要查看一些日志文件,然后要从底部开始查看的话 可以按 shift+g  即可跳到文件底部 要返回文件顶部的时候 按 gg即可

  3. python3 实现删除数组中相同的元素

    # #把数组中相同的元素去除 # #第一种方式: def del_repeatnum(s=[1,1,1,2,2,3,3,4]): s1=[] for i in s: print(i) if i not ...

  4. 0015 行高那些事：line-height

    目标 理解 能说出 行高 和 高度 三种关系 能简单理解为什么行高等于高度单行文字会垂直居中 应用 使用行高实现单行文字垂直居中 能会测量行高 3.1 行高测量 行高的测量方法: 3.2 单行文本垂直 ...

  5. 微信支付-小程序H5 公众号 Payment SDK

    前言 今天是2020年一天,去年最后一个月开发了订单和支付系统,尤其在支付系统和微信对接的时候遇到了很多坑,这里给大家总结下,以免大家遇到相同的问题还浪费大量时间 微信支付前期准备 微信商户号,需要商 ...

  6. 曹工改bug--这次，我遇到了一个难缠的栈溢出bug，还是日志相关的，真的难

    前言 前几天,在linux上部署一个war包应用时,tomcat直接起不来,查看tomcat的日志,catalina.out里没啥特别的,但是查看localhost日志,发现栈溢出了. [root@l ...

  7. 【题解】BZOJ1034 [ZJOI2008]泡泡堂BNB(贪心)

    [题解]BZOJ1034 [ZJOI2008]泡泡堂BNB(贪心) 考虑直接模拟田忌赛马... 我的最小比你的大,直接上 我的最大比你的大,直接上 otherwise,我小换你大 考虑最劣,由于每次比 ...

  8. my_mysql

    ###一键偷懒YUM安装MySQbL### 1.安装mysql数据库 #yum install -y mariadb-server  mariadb 2.登录mysql数据库常用选项 -h:指定服务端 ...

  9. 小小知识点（四十一）-based和based on的正确理解

    A-based B<等价于>B based on A<等价于>B on the basis of A,翻译为基于A的B For example: (1) Radar-based ...

  10. java 多线程 快速入门

    ------------恢复内容开始------------ java 多线程 快速入门 1. 进程和线程 什么是进程? 进程是正在运行的程序它是线程的集合 进程中一定有一个主线程 一个操作系统可以有 ...