CSS的显示模式
div与span
div与span有什么区别
div单独占一行，span不会单独占一行
div是容器级的标签，而span是一个文本级的标签
容器级的标签有：div , h , ul , ol , dl , li ...
文本级的标签有：span , p , buis , del , em , ins ...
容器级的标签中可以嵌套其它所有标签
文本级的标签中只能嵌套文字/图片/超链接
CSS显示模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5+CSS3</title>
<style>
* {
margin:0;
padding:0;
font-family: "Microsoft YaHei";
}
div {
display:inline;
}
span {
display:block;
background:green;
width:100px;
height:100px;
}
.cc {
background:blue;
width:200px;
height:200px;
display:inline-block;
}
</style>
</head>
<body>
<!--
在HTML中所有的标签分为两类：容器级与文本级
在CSS中将所有标签分为两类：块级元素与行内元素
1：什么是块级元素，什么是行内元素？
块级元素独占一行：div , h , ul , ol , dl , li , dt , dd , p
块级元素如果没有设置宽度就和父级元素一样宽；如果设置了宽高就和设置的一样宽高
行内元素不会独占一行：span , buis , strong , em , ins , del
行内元素如果没有设置宽度默认就和内容一样宽
行内元素是不可以设置宽度和高度的
2：行内块级元素
为了能够让元素既能够不独占一行，又可以设置宽度和高度，就出现了行内块级元素
3：显示模式的互相转换
设置元素的display属性：block 块级, inline 行内, inline-block 行内块级
-->
<div>这是DIV</div>
<div>这是DIV</div>
<span>这是SPAN</span>
<span>这是SPAN</span>
<p class="cc">这是P</p>
<b class="cc">这是B</b>
</body>
</html>
CSS的显示模式的更多相关文章
- 课时92.CSS元素显示模式转换（掌握）
我们之前学习的显示模式都可以不用记忆,因为这节课我们要学习转换,我们可以任意来进行一个转换的,上面这些东西有一个了解就行了.所有的标签都有一个属性叫做display,display的中文含义就是显示的 ...
- CSS元素显示模式
CSS的元素显示模式 什么是元素显示模式 作用:网页的标签非常多,在不同的地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页 元素的显示模式就是元素(标签)以什么样的方式进行显示,比如& ...
- 课时91.CSS元素显示模式（掌握）
在HTML中HTML将所有的标签分为两类,分别是容器级和文本级 在CSS中CSS也将所有的标签分为两类,分别是块级元素和行内元素 1.什么是块级元素,什么是行内元素? 块级元素会独占一行 行内元素不会 ...
- CSS 标签显示模式
标签的类型(显示模式) HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素. 一.块级元素(block-level) 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高 ...
- CSS——标签显示模式(display)
非洲黑人: 皮肤内黑色素含量高,以吸收阳光中的紫外线,保护皮肤内部结构免遭损害,头发象羊毛一样卷曲,使每根卷发周围都有许多空隙,空隙充满空气,卷发有隔热作用. 欧洲白人: 生活寒带或着是说常年温度较低 ...
- CSS【06】：CSS显示模式
div和Span标签 作用:一般用于配合css完成网页的基本布局 <style> .header{ width: 980px; height: 100px; background: red ...
- CSS显示模式
div和span标签 1.容器级的标签中可以嵌套其他所有的标签(div->一般用于配合CSS完成网页的基本布局.h.ul.ol.dl.li.dt.dd......),文本级的标签中只能嵌套文字/ ...
- 前端CSS技术全解（二）
欢迎转载,转载请标明出处: http://blog.csdn.net/johnny901114/article/details/52813761 本文出自:[余志强的博客] 一.CSS三大特性 1)继 ...
- 前端基础-- CSS
CSS知识 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染).Css之车更丰富的文档外 ...
随机推荐
- 爬虫时http错误提示
在爬虫,请求网站的时候,有时候出现域名报错,所出现的代码所对应的意思:
- ASP.NET Forms验证
/// <summary> /// 执行用户登录操作 /// </summary> /// <param name="config">授权配置信 ...
- PAT L1-027 出租
https://pintia.cn/problem-sets/994805046380707840/problems/994805107638517760 下面是新浪微博上曾经很火的一张图: 一时间网 ...
- 使用 py.test 对 python 代码进行测试
其实以前我记得有人对我说过,写代码甚至可以先写完测试之后部署好了再开始写逻辑代码.我觉得有点吃惊和奇怪,这不是扯淡吗? 但是这次在完成了积分支付第一阶段开发之后我意识到,这可能并不是开玩笑,特别是项目 ...
- Link-Cut Tree(LCT)&TopTree讲解
前言: Link-Cut Tree简称LCT是解决动态树问题的一种数据结构,可以说是我见过功能最强大的一种树上数据结构了.在此与大家分享一下LCT的学习笔记.提示:前置知识点需要树链剖分和splay. ...
- Codeforces 741D Arpa’s letter-marked tree and Mehrdad’s Dokhtar-kosh paths（dsu on tree）
感觉dsu on tree一定程度上还是与点分类似的.考虑求出跨过每个点的最长满足要求的路径,再对子树内取max即可. 重排后可以变成回文串相当于出现奇数次的字母不超过1个.考虑dsu on tree ...
- Goldbach`s Conjecture LightOJ - 1259 （素数打表 哥德巴赫猜想）
题意: 就是哥德巴赫猜想...任意一个偶数 都可以分解成两个(就是一对啦)质数的加和 输入一个偶数求有几对.. 解析: 首先! 素数打表..因为 质数 + 质数 = 偶数 所以 偶数 - 质数 = 质 ...
- MT【8】和e有关的一个极限
解答: 评:这里涉及到e有关的极限的单调性,求导数得:
- 洛谷P4332 [SHOI2014]三叉神经树（LCT，树剖，二分查找，拓扑排序）
洛谷题目传送门 你谷无题解于是来补一发 随便百度题解,发现了不少诸如树剖\(log^3\)LCT\(log^2\)的可怕描述...... 于是来想想怎么利用题目的性质,把复杂度降下来. 首先,每个点的 ...
- 自学Zabbix之路15.1 Zabbix数据库表结构简单解析-Hosts表、Hosts_groups表、Interface表
点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 自学Zabbix之路15.1 Zabbix数据库表结构简单解析-Hosts表.Hosts_grou ...