CSS 内联元素和块级元素内部布局规则_内联块布局

学会了display属性是不是就学会了布局？

  知道了内联元素没有宽高属性、横向布局；知道块级元素具有宽高属性、换行布局。懂得了display强大的自由切换块级元素和内联元素。这样是不是已经布局无敌
  结果会是惨遭打脸的！你会发现有些的布局并没有按照你的想法实现。尽管有时候全部使用块级元素可以复杂的实现。但是不理解内联元素和块级元素的内部布局规则，可以认为没有真正的理解CSS。就像不懂C指针就没有学会C语言一样。

必须了解的基本概念

  什么是行高、行距？什么是基线、中线、底线和顶线？什么事内容区、行内框、行框？
行高：两条基线间的垂直距离
行距：底线和顶线间的垂直距离
基线：参照英文字母x的基准线
内容区：顶线和底线间的垂直距离
行内框：顶线和底线间的垂直距离，是浏览器渲染的一个概念。和内容区相等
行框：行框的高度取决于本行内行内框最大的值
具体内容请参考 :
深入理解 CSS 中的行高与基线
CSS行高——line-height
CSS深入理解vertical-align和line-height的基友关系

内联元素内部布局规则

测试内联元素内部默认布局规则

<span style="background-color: #4b7ffd;">
    <img scr="Images/bd_logo1.png" width="270" height="129" />
    <a style="background-color: red; ">x测试内联元素内部的内联元素基线对齐方式测试内联元素内部的内联元素基线对齐方式</a>
</span>
1
2
3
4

显示效果如图：

可以看出：

• 内联元素的默认布局是基线对齐规则。首先img元素根据自身高度确认相对于父元素的基线位置。之后其他的子元素都以此基线为准开始布局。
• 内联元素的高度由其本身的内容区域决定;内联元素的宽度有子元素的区域决定。本身的内容区域由font-size、font-family 决定，如果没有显示指定，有一个默认的font-size。参考下图更能理解此规则：

图1：

<span style="background-color: #4b7ffd; padding-right: 10px; font-size: 30px">
    <img scr="Images/bd_logo1.png" width="270" height="129" />
    <!--子元素继承了父元素的font-size-->
    <a style="background-color: red; padding: 0px;">x测试内联元素内部的内联元素基线对齐方式测试内联元素内部的内联元素基线对齐方式</a>
</span>
1
2
3
4
5

图2：

<span style="background-color: #4b7ffd; padding-right: 10px; ">
    <img scr="Images/bd_logo1.png" width="270" height="129" />
    <!--父元素的为默认的font-size-->
    <a style="background-color: red; padding: 0px; font-size: 30px">x测试内联元素内部的内联元素基线对齐方式测试内联元素内部的内联元素基线对齐方式</a>
</span>
1
2
3
4
5

内联元素改变其对齐方式

<span style="background-color: #4b7ffd; padding-right: 10px; ">
    <img style="vertical-align: bottom" scr="Images/bd_logo1.png;" width="270" height="129" />
    <!--vertical-align没有继承性-->
    <a style="background-color: red; padding: 0px; ">x测试内联元素内部的内联元素基线对齐方式测试内联元素内部的内联元素基线对齐方式</a>
</span>
1
2
3
4
5

更改img元素的对齐方式bottom对齐后，可以确定底线位置，同时也可以确定基线位置。父元素和a元素的对齐方式仍然是默认的基线对齐。

块级元素内部布局规则

<div style="background-color: #4b7ffd;height: 150px;">
    <a style="background-color: red;">x测试内联元素内部的内联元素基线对齐方式</a>
    <img  scr="Images/bd_logo1.png" width="270" height="129" />
</div>
1
2
3
4

块级元素内部的内联元素仍然遵循内联元素的布局规则

但是对于line-height属性和高相等的块级元素布局有尚不解？

<div style="background-color: #4b7ffd;height: 150px; line-height: 150px">
    <a style="background-color: red;">x测试内联元素内部的内联元素基线对齐方式</a>
    <img  scr="Images/bd_logo1.png" width="270" height="129" />
    <!--line-height具有继承性-->
</div>
1
2
3
4
5

图示1：

<div style="background-color: #4b7ffd;height: 550px; line-height: 550px">
    <a style="background-color: red;">x测试内联元素内部的内联元素基线对齐方式</a>
    <img  scr="Images/bd_logo1.png" width="270" height="129" />
    <!--line-height具有继承性-->
</div>
1
2
3
4
5

图示2：

对于块级元素，line-height和高度相等后，如何根据图片确定的基线位置？？？尚不明白。待解！！！！