P107
一
块级元素:(1.在页面以区域块的形式出现。2.每个块级元素独自占据一整行或多整行。3.可以设置 宽度 高度 对其等属性。)
行内元素:(1.不占有独立的区域。2.仅靠自身的字体大小和图像尺寸来支撑结构。3.不可以设置 宽度 高度 对齐等其他属性。)
常见块级元素:<h1>-<h6>.<div> ,<ul> <p> <li> <ol>
常见行内元素:<strong> <a> <u> <b> <em> <span> <inport>
1.<h1>-<h6>只搭建文本的标签 或行内元素,不能搭建其他块级元素。
2.其他块级元素里面可以 加任意块级元素,行内元素 文本 。
3.行内元素里面只能加文本,或其他行内元素,不能加块级元素,但是<a>是一个特例,<a>可以加块级元素。
4.<img> <inport> 是可以设置宽度 高度 属性的特殊行内元素。
二
元素的的转换
display-inline 此元素将显示为行内元素(行内元素默认的display属性值)
block 此元素将显示为块级元素 (块级元素默认的display 属性值)
inline-bolock此元素将显示 行内快元素,可以对其设置宽 高和对齐等属性,但是该元素不会独占一行。
none 此元素将被隐藏,不显示,也不占用页面空间。
注意:
相邻块元素垂直外边距的合并
1.相邻快元素之间的垂直距不是margin-bottom 与margin-top 之和,两者中的较大者。
2.对于两个嵌套关系的快元素,如果父元素没有上内边距及边框,则父元素的上外边距会与子元素的上外边距发生合并,合并后的 外边距为两者中的较大者。
(子元素移到父元素的顶部)