前端基础

（0）基本概念

---

1.行高
行高特性详解

• 定义
  

  从上到下四条线分别是顶线、中线、基线、底线，很像才学英语字母时的四线三格，我们知道vertical-align属性中有top、middle、baseline、bottom，就是和这四条线相关。
  尤其记得基线不是最下面的线，最下面的是底线。
  行高、行距与半行距
  行高是指上下文本行的基线间的垂直距离，即图中两条红线间垂直距离。
  行距是指一行底线到下一行顶线的垂直距离，即第一行粉线和第二行绿线间的垂直距离。
  半行距是行距的一半，即区域3垂直距离/2，区域1，2，3，4的距离之和为行高，而区域1，2，4距离之和为字体size，所以半行距也可以这么算：（行高-字体size）/2

• 应用

  • div文字垂直居中
    

//父类元素height=line——height
.box{

        width:150px;
        height:100px;
        line-height:100px;
        background-color:#ccc;
        font-size:0;
    }

//子类中display+重设line-height
    .box span{
        display:inline-block;
        font-size:10px;
        line-height:1.4em;
        vertical-align:middle;
    }

2.文档流

• 文档流是文档中可显示对象在排列时所占用的位置。
• 脱离文档流
  绝对定位position：absolute;
  固定定位position:fixed;
  浮动float
  css绝对定位、相对定位和文档流的那些事
  3.盒子模型

（一）布局

块状元素

【块状元素】div/p/hx/ol/ul/dl/table/address/form…
div盒子本身默认样式属性是独占一行，而解决div独占一行方法通常有两种，一种为设置浮动，另外一种为设置display样式。

• 设置浮动
  
  • 浮动

内联元素布局

【内联元素】a/span/br/i/em/strong/label/q/cite/code…..
1.居中代码实现

内联块状元素

---

嵌套布局

---

（二）css三大特性

（三）定位(position)

• absolute
• relative

(四）框架

• spry框架
  Dreamweaver-插入-spry-（自动填入代码)