CSS核心内容

CSS选择器优先级：ID选择器>类选择器>HTML选择器
CSS核心内容：标准流、盒子模型、浮动、定位

一、块级元素/行内元素

<div></div>块级元素   影响的范围横跨一整行
<span></span>行内元素  影响的范围只是夹在<span>标记之间的内容

行内元素转块级元素:
<span class="ttt">栏目</span>
.ttt
{
    display:block;
}

*行内元素有些样式是不起作用的

二、盒子模型

边框宽度：border  (border-top  border-right border-bottom border-left)
border:solid 1px #428eff;   /*实线边框、边框宽度、边框颜色*/

格子之间的距离 margin(margin-top margin-right margin-bottom margin-left)
margin:5px; /*表示上下左右都是5*/

边框和内容的距离padding (padding-top padding-right padding-bottom padding-left)
padding:5px ; /*表示上下左右都是5*/

让文本垂直居中的方法：设置line-height值等于height的值
*火狐浏览器安装firebug插件就可以看见布局视图，IE8里面也自带了

三、浮动

Eg:
<div class="menu">栏目一</div>
<div class="menu">栏目二</div><div class="menu">栏目三</div>
<div class="title">栏目四</div>

让栏目二、栏目三跟在栏目一后面（一开始的时候每个div是影响一整行的），这时就要用到浮动
.menu
{
   float: left ;  /*盒子向左浮动*/
}
要让栏目四不跟在后面就要消除浮动
.title
{
    clear:left; /*清除浮动*/
}

四、定位

.t
{
      position: relative ; /*相对定位：相对于原来的位置的偏移量*/
      position: absolute ; /*绝对于它的父标记来定位的*/
      top:20px;
      left:30px;
}

                                                                                                                                                                                                                                                  09.2.1