CSS简单学习

CSS简介

1）CSS:是一个折叠样式表，用于对HTML设置静态修饰网页。

2）功能：将内容和样式相分离。
CSS选择题优先级：ID选择器>类选择器>HTML标签选择器

3）两种类型元素：span（行内元素） and Div（快内元素），顾名思义：行内元素即是在一行书写，块内元素是列列书写。

---

问题一：那么我们如何让两者自由切换呢？我们以行内改为快内：

CSS核心内容

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

1）标准流：表示标签的前后位置，谁在前就先执行谁在CSS中。
2）盒子模型：我们可以把下面的每一个画框认为成一个盒子。

---

下面介绍一下对每一个盒子我们如何去写他的外框和里面的内容：CSS书写

每个框都有一个边距：就是外边距（manjn)：上下左右
内边距：就是画和框：上下左右
内容：分为宽高
画框（bonder）：画框本身就有一个高度

（1）设置标签：

方法二：

结果：

（2）盒子的延伸：

.menu { /*栏目样式*/
    color: #f00; /*文字颜色*/
    background-color: #ffe7f7;
    border:1px solid #00f; /*顺序可以打乱*/
    padding:5px;
    margin:5px;
    width:150px;/*框*/
    height:60px;
    line-height:60px;/*让文本垂直居中*/    
    float:right; /*盒子向左浮动*/
}

2）浮动：顾名思义可以左右移动

3）定位：可以分为决定定位和相对定位，即可以定位到的位置：

    /*position:relative; 相对定位*/
    /*position: absolute; 绝对定位*/
    /*top: 80px;
    left: 30px;*/