前面我们已经了解到, 从HTML的语义的角度可以把标签分为:
容器级元素
可以嵌套其他任何元素
div, li, ul, ol, table等
文本级元素
只应该嵌套文本, 超链接, 图片, 表单元素
p, a, span, img等
CSS是样式呈现的范畴, 所以从CSS的角度, 把HTML元素分为:
块级元素
内联元素(行内元素)
一. 什么是块级元素和行内元素
看下面的代码:
<h1>我是 一级 标题 我自己一行</h1>
<h2>我是 二级 标题 我也自己一行</h2>
<p>我是 p元素 我也是自己一行</p>
<a href="#">超级链接1</a>
<a href="#">超级链接1</a>
<a href="#">超级链接3</a>
你会发现, 同样都是元素
有些元素(h1,h2, p等)会独自占一行
而有些元素(a, span, strong, img等)则不会独自占据一行, 会呈一种流失方式展示.
像这种总是独自占据父容器一行的元素, 就叫块级元素.
HTML角度的容器级标签都是块级元素. 另外再添加一个<p>.最常用最经典的是
<div>
不能独自占据父容器一行的元素, 就叫内联元素(行内元素)
HTML角度的文本级标签都是内联元素. 另外要去掉<p>.最常用最经典的是
<span>
1.1. 块级元素的特征
一个块级元素具有下列典型特征:
独自占据父容器的一行.
默认情况与父容器的宽度保持一致.(高度方向不会)
可以指定宽(
width)和高属性(height)块级元素只能出现在
<body>内元素内.
块级元素列表
1.2. 内联元素的特征
一个内联元素具有下列典型特征:
内联元素不会独自一行, 如果上一行还有空间, 则会继续在上一行显示.
没有默认宽高
不能给行内元素指定宽和高
行内元素列表
参考地址: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Inline_elemente
1.3. 块级元素和行内元素的互换
通过display: block ,可以把行内元素转换成块级元素.
通过display: inline, 可以把块级元素转换成行内元素.
通过display: none, 把这个元素从页面中消失显示.
display还有一些其他属性, 后续再慢慢学习.
<style>
p{
display: inline;
background-color: red;
}
a{
display: block;
}
</style>
<p>我是p1, 我要变行内元素</p>
<p>我是p2, 我要变行内元素</p>
<a href="#">我是a1, 我要变块级元素</a>
<a href="#">我是a2, 我要变块级元素</a>
二. 文档流
前面咱们把元素分成块级元素和行内元素, 但是这是有一个前提的.
就是, 这些元素必须处于文档流中.
2.1 什么叫文档流
文档流, 有人也叫标准文档流.
然后其实w3c文档中并没有document flow这个概念.
w3c称之为normal flow, 翻译为 普通流(正常流) 更加遵守w3c的标准.
参考地址: https://www.w3.org/TR/CSS2/visuren.html#normal-flow
2.2 norml flow的一些特征
块级元素和行内元素的特征, 即是normal flow的特征.
从左向右, 从上往下排列元素.
空白折叠
文本的基线对象方式(会用图片的底部去对齐文本的基线)
文本自动换行
块级元素独自占一行...
<span>你好啊 ABC</span>
<img src="1.jpeg" alt="">
窗前明月光, 疑是地上霜, 举头望明月, 吹牛还数郭德纲
哈哈哈哈哈哈哈哈哈
三. <div>和<span>
我们以前用到的很多元素浏览器都会给他们设置一些默认的样式.
而<div>和<span>, 则不然, 浏览器没有给他们添加任何的默认样式.
3.1 <div>元素
<div>是一个块级元素，可以包含段落，表格等内容，用于放置不同的内容。一般我们在网页通过<div>来布局定位网页中的每个区块。
<body>
<!--网页的头部: 一般是log, 导航等-->
<div class="header"></div>
<!--网页的内容区域-->
<div class="content"></div>
<!--网页的脚部-->
<div class="footer"></div>
</body>
说明:
<div>没有语义, 只是单纯的作为一个容器布局来用.为了提高可读性, 一般会给
<div>添加合适的class,来增加其语义性.HTML5中增加了更多的用于布局的语义化标签, 在后面的课程会详细介绍.
3.2 <span>元素
<span>也是一个没有任何语义的行内元素.
当你需要给段落中的某段文本添加样式时, 一般用<span>把这段文本包裹起来, 然后给<span>添加样式.
也就是说, <span>存在的目的就是为了添加样式.
<style>
div p{
color: green;
font-size: 20px;
}
div p span{
color: red;
font-size: 30px;
font-weight: 700;
}
</style>
<div>
<p>好好<span>学习</span>,天天向上</p>
</div>
