第四章 盒子模型
4.3.2 <div>
与<span>
标记
1.<div>
标记
(1)定义
<div>
可定义文档中的分区或节(division/section)。<div>
标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。如果用 id 或 class 来标记 <div>
,那么该标签的作用会变得更加有效。
(2)用法
<div>
是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是 <div>
固有的唯一格式表现。可以通过 <div>
的 class 或 id 应用额外的样式。不必为每一个 <div>
都加上类或 id,虽然这样做也有一定的好处。可以对同一个 <div>
元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。
(3)注:
a.大多数的HTML标记都可以嵌套在
<div>
中还可以嵌套多层
<div>
b.
<div>
标记最大的意义在于和浮动属性float配合,实现网页的布局
c.
<div>
可以替代块级元素如
<h>
、
<p>
2.
<span>
标记
<span>
用于对文档中的行内元素进行组合。
<span>
标签没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。如果不对
<span>
应用样式,那么
<span>
元素中的文本与其他文本不会任何视觉上的差异。
<span>
标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。
(4)两者区别
在使用CSS排版的页面中,
<div>
与
<span>
是两个常用的标记。利用这两个标记,加上CSS对其式样的控制,可以很方便的实现各种效果。
<div>
与
<span>
标记的区别在于
<div>
是一个块级(block-level)元素,它周围的元素会自动换行,而
<span>
仅仅是一个行内元素(inline-elements),在它的前后不会自动换行。
<span>
没有结构上的意义,纯粹是应用样式,当其他行内元素都不合适时,可以使用
<span>
元素。
此外,
<span>
标记可以包含于
<div>
标记之中,成为
<div>
标记的子元素,反之则不成立。
4.3.3元素的转换
display属性对元素的类型进行转换
inline:此元素将显示为行内元素(行内元素默认的display属性值)
block:此元素将显示为块元素(块元素默认的display属性值)
inline-block:此元素将显示为行内块元素,可以对其设置宽高和对齐等属性,但该元素不能独占一行
none:此元素将被屏蔽,不显示,也不占页面空间,相当于该元素不存在
4.4块元素垂直外边距的合并
4.4.1相邻块元素垂直外边距的合并
当上下相邻的两个块元素都设置外边距(margin),如果上面的元素有下外边距 margin-bottom,下面的元素有上外边距 margin-top,则他们之间的垂直间距不是 margin-bottom + margin-top
实际会取两个值中的较大者作为外边距,这种现象被称为相邻块元素垂直外边距的合并(margin 塌陷现象)
解决办法:可以给其中的一个元素设置垂直方向上的 marign 值来解决这种问题
4.4.2 嵌套块元素垂直外边距的合并现象
对于两个嵌套关系的块元素,如果父元素没有上内边距(padding)或边框(border),父元素的上外边距会与子元素的上外边距发生合并,合并后的外边距为两者中的较大者
需要注意的是如果只给子元素在垂直方向上设置外边距,子级元素和父级元素在垂直方向上都会移动
解决办法:为父元素设置上边框;为父元素设置上内边距;为父元素设置 overflow:hidden 样式属性
也可让元素脱离标准文档流,例如:浮动、固定、绝对定位等
4.5阶段案例-----制作音乐盒
第五章 列表标记
5.1.1无序列表ul
<ul>
<li>
无序标签</li>
<li>
无序标签</li>
<li>
无序标签</li>
</ul>
符号样式:disc、circle、square、none
5.1.2有序列表ol
<ol>
<li>
有序标签</li>
<li>
有序标签</li>
<li>
有序标签</li>
</ol>
5.1.3定义列表dl
<dl>
`<dt>`定义列表项</dt>
`<dd>列表项描述</dd>
<dd>列表项描述</dd>
<dt>定义列表项</dt>
<dd>列表项描述</dd>
<dd>列表项描述</dd>
...
</dl>
<dd></dd>
用于描述<dt></dt>
,<dt>和<dd>
是同级标签。不能嵌套在对方里面。
<dl><dt><dd>
三个必须组合使用。
5.1.4列表的嵌套应用
5.2CSS控制列表样式
5.2.1 list-style-type属性
5.2.2list-style-image属性
其取值为图像的url
5.2.3list-style-position属性
inside:列表项目符号位于列表文本内
outside:列表项目符号位于列表文本外
5.2.4list-style属性
list-style:列表项目符号 列表项目符号的位置 列表项目符号;
5.3超链接标记
5.3.1创建超链接
<a href="跳转目标" target="目标窗口的弹出方式">
文本或图像</a>
href:用于制定目标连接的url地址,当为标记应用href时它就具有的超链接的功能
target:用于指定连接页面的打开方式,其取值有-self和-blank两种。
5.3.2锚点连接
为了提高信息的检索速度,HTML提供了一种特殊的连接–锚点链接
5.4链接伪类控制超链接
值得一提的是,在实际工作中,通常只需要使用 a:link a:visited a:hover 定义未访问,访问后,和鼠标悬停时的链接样式。
5.5制作新闻列表
5.5.1分析效果图
1.结构分析
2.样式分析
5.5.2制作页面结构
5.5.3定义css样式
1.定义基础样式
2.整体控制新闻列表
3.制作标题部分
4.整体控制列表内容
5.控制列表项
6.css控制链接文本