网页设计基础4

              网页设计基础4

1.元素的类型与转换：
块元素：每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度高度对齐等属性。

<div>

行内元素：不必在新的一行开始，同时，也不强迫其他的元素在新的一行显示。常见的行内元素有<strong>,<em>,<dell>,。其中<span>标记是典型的行内元素。
<div>标记简单而言就是一个区块容器标记，可以将网页分割为独立的，不同的部分。还可以嵌套多层<div>
<div>标记最大的意义在于和浮动属性float配合
<span>与</span>之间只能包含文本和各种行内标记，如加粗标记,倾斜标记
2.元素的转换：display
inline:此元素将显示为行内元素
block:此元素将显示为块元素
inline-block:此元素将显示为行内块元素，可以对其设置宽度和对齐等属性，但是该元素不会独占一行。
none:此元素将被隐藏，不显示，也不占用页面空间，相当于该元素不存在。
3.块元素垂直外边距的合并：
相邻块元素垂直外边距的合并：当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则它们之间的垂直间距不是margin-bottom和margin-top之和，而是两者中的较大者。
嵌套块元素垂直外边距的合并：对于两个嵌套的关系的块元素，如果父元素没有上内边距及边逛，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。
4.列表标记：
无序列表ul:<ul></ul>标记用于定义无序列表，<li></li>标记嵌套在<ul></ul>标记中，每对<ul></ul>中至少应包含一对<li></li>。<ul>和<li>都拥有type属性。
disc:默认值
circle square
有序列表：ol
定义列表: dl <dl></dl>标记用于指定定义列表，<dt></dt>和<dd></dd>并列嵌套于<dl></dl>之间。其中，<dt></dt>标记用于指定术语名词，<dd></dd>标记用于对名词进行解释和描述。
5.CSS控制列表样式：
list-style-type属性控制列表项目符号：ul{list-style-type：circle}
ol{list-style:decimal}
list-style-image:使用此属性可以为各个列表项设置项目图像。ul{ list-style-image:url(image/book.jpg)}
list-style-position用于控制列表项目符号的位置。inside和outside
list-style：列表项目符号，列表项目位置，列表项目图像
6.创建超链接：只需要用标记环绕需要被链接的对象即可。
<a href="跳转目标” target=“目标窗口的弹跳方式”>文本或图像
href: 用于指定连接目标的url地址
target： 用于指定链接页面的打开方式，其取值有-self（默认值，原窗口）和-blank（新窗口）两种。
7.链接伪类控制超链接：
a:link 未访问时超链接的状态
a:visited 访问后超链接的状态
a:hover 鼠标经过，悬停时超链接的状态
a：active 鼠标点击不动时超链接的状态
注意：同时使用4种伪类时，顺序必须按照上面的顺序来
8.元素的浮动
元素的浮动属性：所谓元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移动欺负元素中指定的位置过程，通常用float定义
选择器{float：属性值；} left right none
清除浮动：选择器{clear：属性值；}
使用空标记清除浮动：clear：both
使用overflow属性清除浮动：overflow：hidden
使用after伪对象清除浮动：（1）必须为需要清除浮动的元素伪对象设置height：0；样式，否则该元素会比实际高度高出若干像素。
（2）必须在伪对象中设置content属性，属性值可以为空，如content：“”；
overflow属性：
visible：内容不会被修剪，会呈现在元素框之外
hidden：溢出内容会被修剪，并且被修剪的内容是不可见的
auto：在需要时产生滚动条，即自适应所要显示的内容
scroll：溢出内容会被修剪，，且浏览器会始终显示滚动条