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：脱离标准流，栏目二会忽略栏目一的存在

运行结果