CSS核心内容

CSS核心内容：标准流、盒子模型、浮动、定位。

在学习CSS核心内容之前，需要先明白两个基本的概念，HTML标签分为两种形式：块级元素、行内元素。

行内元素：<span>   </span>

块级元素：<div>  </div>

两者都是表示容器，并没有具体的表现样式。

区别：一个块级元素占满一行，行内元素在一行中填充。

可以通过CSS将行内元素转换为块级元素。方法是通过display关键字实现。

在HTML中添加一个行级元素：（同一个类中有多个标签）

 <span class ="menu ttt">  栏目三   </span >

 

在CSS中添加如下代码：（通过display关键字将行级元素换成块级元素）

.ttt    
{
    display :block block;   /* 将行级元素变成块级元素 */
    
    }

 

 

有了这个基础的概念之后再来学习CSS的四个核心知识：

1、标准流：

 

    标签的顺序呈流水式排列，页面显示同标签顺序一致。这个跟我们一般的代码是一样的，先写的代码先执行。

 

2、盒子模型：

 

   盒子模型的基本元素： 外边距（上下左右）、内边距、内容区（长和宽）、画框宽度。

详见下图：

 

需要注意的是：

    盒子模型针对的是块级元素，针对行内元素不具有作用。 

 

下面是CSS中盒子模型的一些相关的代码：

.menu 
{
    border :1px solid red ;
    padding :5px;
    margin :5px;
    
    border-width :1px;
    border-color:Red ;
    border-style:solid ;
    padding-top:3px;
    padding-bottom :20px;
    padding-left :10px;
    
    margin:15px;
    
    
    width :150px;
    height :60px;
    line-height:60px;   /* 行间距=高：让文本垂直居中 */
    }    

 

3、浮动：通过 float 和 clear 关键字实现浮动的添加和清除。

 

    浮动的本质是：将 块级元素 成最小的单元 进行级元素转换。

 

在没有添加浮动时的图如下：

 

在CSS的 menu 标签中添加如下代码：

.menu 
{
    line-height:60px;   /* 行间距=高：让文本垂直居中 */
                                                      
    float :left ;       /* 盒子向左浮动 */
      
    }   

向左浮动后的效果如下：

 

如果取消浮动，通过 clear 来实现：

.title                  /* 新闻标题样式 */
{
    color :Red ;        /* 文字颜色 */
    clear:left ;
    
    }

 

   

4、定位：分为绝对定位和相对定位。

   

    相对定位没有脱离标准流，绝对定位则脱离了标准流，以它所在标签的第一个标准流父标签为基准。

.ttt    
{
    display :block block;   /* 将行级元素变成块级元素 */
    
    position :relative ;    /* 相对定位，其他的盒子相对于该盒子原来的位置不变 */
    position :absolute ;    /* 绝对定位，脱离标准流，包含该盒子的更外一层盒子定位，
                            现在是绝对与body定位 */
    
    top :20px;
    
    }