这段时间在初步学习了HTML+CSS的内容后，开始学习怎样编写趣医网的网页，在这个过程中也出现了很多问题，单单是一个页眉就花了很长的的时间。在慕课网的学习中只是简单的告诉我们一些标签的是如何使用，有什么特点，但实际将许多标签组合起来使用，就会遇到很多问题。比如在同一个块状元素里如何放进两个块状元素，并且可以任意确定块状元素的位置；又如怎样将一个图片作为某段文字的背景。
块状元素的位置如何确定
在网页中，元素有三种布局模型：
1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）
布局模型是建立在盒模型基础之上
流动模型的特征
<1>块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。<2>在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。
浮动模型的特征
如果想让块状元素在同一行并排显示，使用这种模型就可以使块状元素定义为浮动。
如：想让其在左边浮动显示 float:left;
层模型
想让网页中的元素精确定位，就要用到这个模型。分为三种，分别是绝对定位（absolute）、相对定位（relative）、固定定位（fixed）。
position:absolute;用这种定位就可以使元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不设置就是相对于body元素即浏览器窗口定位。
position:relative;它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动（相对于以前的位置而变动）。
position:fixed;这种定位是将一个元素固定在某个位置，不受鼠标移动而影响。这是三种定位中最容易理解与使用得一种。
固定定位与相对定位结合使用，当一个块状元素想要依赖于父元素定位时，就应该给父元素加上position:relitive;,给子元素写position:absolute;这样就可以使子元素相对于父元素定位，这种方式也可以实现div得嵌套（在网页布局得设计中这种方式用的最为频繁）。
如何将一个元素居中显示
分为两种情况，一是在其是行内元素得情况下；二是在其是块状元素的情况下
行内元素
在这种情况下是给父元素设置text-align:center;这样就可以使这些行内元素在父容器中居中显示。
内联元素
定宽块状元素(定宽块状元素：块状元素的宽度width为固定值。)
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。
不定宽块状元素
有三种方式设置，这里就只先说说我比较习惯用到或者说是使用较于其他简单一点的。
改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center 来实现居中效果。
如何将一个元素垂直居中显示
分为两种情况，一是在单行文本情况下；二是多行文本情况下
单行文本
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和[ line-height ]高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的 基线间的距离 )。
line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。这种方式有个缺点：当文字内容的长度大于块的宽时，就有内容脱离了块。
多行文本
块级元素的 display 为 table-cell，但这种方式得兼容性较差。
网友评论