<!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. python监控模块

    pip install psutil 获取内存信息: >>> import psutil >>> mem = psutil.virtual_memory() #获取 ...

  2. jquery中报错Uncaught ReferenceError: $ is not defined的解决办法

    jquery中报错提示为:Uncaught ReferenceError: $ is not defined 这个错误的原因就是你没有引入jquery库文件或者引入的路径不对造成的

  3. ArrayList、LinkedList、Vector、CopyOnWriteArrayList的区别和源码分析

    1. ArrayList ArrayList 是一个数组队列,相当于动态数组.与Java中的数组相比,它的容量能动态增长.它继承于AbstractList,实现了List, RandomAccess, ...

  4. 日志管理-log4j与slf4j的使用

    一.概述 1.log4j: Log4j是Apache的一个开源项目,通过使用Log4j,我们可以控制日志信息输送的目的地是控制台.文件.GUI组件,甚至是套接口服务器.NT的事件记录器.UNIX Sy ...

  5. 【题解】Killer Names($O(n\log n)$做法)

    [题解]Killer Names(\(O(n\log n)\)做法) HDU - 6143 感觉好久没做过这种直来直去的组合题,过来水一篇题解.还以为要写一个\(MTT\)或者三模数\(NTT\),想 ...

  6. $HDOJ5542\ The\ Battle\ of\ Chibi$ 数据结构优化$DP$

    $AcWing$ $Description$ $Sol$ 首先显然是是以严格递增子序列的长度为阶段,由于要单调递增,所以还要记录最后一位的数值 $F[i][j]$表示前$i$个数中以$A_i$结尾的长 ...

  7. 我终于懂得如何使用matplotlib进行画图

    一 前言 本篇文章带大家快速入门如何使用matplotlib画出精美数学的图片:看完本篇文章你将获得熟悉并简单使用matplotlib工具,会画基本得折现图,散点图,sin,cos图,一张画布画出多图 ...

  8. ECShop二次开发指南-文件结构（二）

      ecshop文件架构说明 注意:因各版权不一,大概参考/* ECShop 2.5.1 的结构图及各文件相应功能介绍 ECShop2.5.1_Beta upload 的目录 ┣ activity.p ...

  9. Redis实战 | 持久化、主从复制特性和故障处理思路

    前言 前面两篇我们了解了Redis的安装.Redis最常用的5种数据类型.本篇总结下Redis的持久化.主从复制特性,以及Redis服务挂了之后的一些处理思路. 前期回顾传送门: Linux下安装Re ...

  10. asp.net core 实现支持多语言

    asp.net core 实现支持多语言 Intro 最近有一个外国友人通过邮件联系我,想用我的活动室预约,但是还没支持多语言,基本上都是写死的中文,所以最近想支持一下更多语言,于是有了多语言方面的一 ...