CSS（二）

一、核心内容（标准流，盒子模型，浮动，定位）

1、盒子模型：

1. 外边距margin：上下左右
2. 内边距padding：上下左右
3. 内容border：宽，高
4. 画框：宽

标准盒子模型

盒子模型展示

html 块级标签 <div>

<div class="menu">栏目一</div>

CSS样式

.menu { /*栏目样式*/
    color:#ff0000; /*文字颜色*/
    background-color :#ffe7f7;
    border:1px solid #0000ff;
    padding:5px; /*上右下左边距，顺时针*/
    margin:5px;
    width:150px;
    height:60px;
    line-height :60px;  /*让文本垂直居中*/
}

运行结果

2、浮动：会脱离标准流

CSS样式中float:left; /*盒子向左浮动*/

实例

HTML页面

    <div class="menu">栏目一</div>
    <div class="menu ttt">栏目二</div>
    <div class="menu">栏目三</div>
    <div class="title">这是<span >一个</span>标题</div>

CSS样式

.menu {                /*栏目样式*/
    color:#ff0000;       /*文字颜色*/
    background-color :#ffe7f7;
    border:1px solid #0000ff;
    padding:5px;             /*上右下左边距，顺时针*/
    margin:5px;
    width:150px;
    height:60px;
    line-height :60px;     /*让文本垂直居中*/
    float:left;      /*盒子向左浮动*/
}

运行结果：将三个块级元素放置在一行内

3、定位：绝对定位会脱离标准流

CSS样式

.ttt {
    position :relative;     /*相对定位*/
    top:20px;
    left:30px;
}

运行结果

.ttt {
    position: absolute; /*绝对定位*/
    top: 20px;
    left: 30px;
}

绝对定位是基于父标签的，而不是body：脱离标准流，栏目二会忽略栏目一的存在

运行结果