CSS排版网页

CSS盒模型

盒模型是CSS布局的核心概念。
认识display：
使用CSS的display属性可以改变元素的显示类型，代码如下：
display:
属性值如下:
none:隐藏对象
inline：对象为内联元素，可以并列显示。
block：对象为块元素 ，适合搭建文档框架。
inline-block：对象为内联块元素

认识CSS盒模型：
CSS盒模型定义了网页对象的基本显示结构。每个元素都显示为方形。
从结构上分析，它包含了内容、填充、边框、边界。

定义边界：
使用margin属性，他又具有四个属性：
margin-top：顶部边界
margin-right：右边边界
margin-bottom：底部边界
margin-left：左侧边界
作用：
边界的作用是来调整桑乾元素与去他元素的距离。

效果演示代码如下：

<style type="text/css">
div{
    display: inline-block;
    height: 80px ;
    width: 80px;
    border:solid 1px red;
}
#box1{margin-top: 10px;margin-right: 8em;margin-left: 8em;}
#box2{margin-top: 10px;margin-right: 6em;margin-left: 6em;}
#box3{margin-top: 20px;margin-right: 4em;margin-left: 4em;}
#box4{margin-top: 20px;margin-right: 2em;margin-left: 2em;}
</style>
<div id="box1">盒子1</div>
<div id="box2">盒子2</div>
<div id="box3">盒子3</div>
<div id="box4">盒子4</div>

效果图如下：

定义边框：
使用boder属性定义边框，他也有四个边框样式：
boder-top：顶部边框
boder-right：右边边框
boder-left：左边边框
boder-bottom：底部边框
作用：
边框就是划定当前元素与其他元素之间的分割线
边框包含三个子属性：
boder-style：边框样式
boder-color：边框颜色
boder-width：边框宽度
下边用boder-style属性设置不同值呈现效果，代码如下：

<style type='text/css'>
    #pl { border-style:solid;}
    #p2 { border-style:dashed;}
    #p3 { border-style:dotted;}
    #p4 { border-style:double;}
    #p5 { border-style:sgroove;}
    #p6 { border-style:nidge;}
    #p7 { border-style:inset;}
</style>
<p id='pl'>#p1 { border-style:solid; }</p>
<p id="p2">#p2 { border- style:dashed; }</p>
<p id="p3">#p3 { border -style:dotted; }</p>
<p id="p4">#p4 { border-style:double; }</p>
<p id="p5">#p5 { border-style:groove; }</p>
<p id="p6">#p6 { border-style:ridge; }</p>
<p id="p7">#p7 { border-style:inset; }</p>
<p id="p8">#p8 {border-style:outset; }</p>

效果图显示如下：

定义补白：
使用padding属性定义补白.
作用：
可用他老调整元素包含的内容样式与与元素边框距离。
padding有四种属性：
padding-top、padding-right、padding-bottom、padding-left。
举例子：
设计段落文本空出四个字体大小距离，此时由于没有定义段落宽度，所以使用padding。
代码如下：

<style>
    p{
        border:solid 1px red;
        padding-left: 4em;
    }
</style>
<p>设计段落文本空出四个字体大小距离，此时由于没有定义段落宽度，所以使用padding。</p>

效果样式图如下：

设计浮动显示

浮动是一种特殊的显示方式，它能够让元素向左或者向右停靠显示，主要针对块级元素。
定义float：
属性值：
none:对象不浮动
left:向左浮动
right：向右浮动
例子：定义盒子左浮动，则盒子并列显示在一行
代码如下：

<style type="text/css">
    div{
        height: 80px ;
        width: 80px;
        border:solid 2px red;
        margin: 4px;
    }
    div{float: left;}
    </style>
    <div id="box1">盒子1</div>
    <div id="box2">盒子2</div>
    <div id="box3">盒子3</div>

效果样式图如下：

使用clear换行：
属性：
none:允许两边可以有浮动对象
left:不允许左边有浮动对象
right：不允许右边有浮动对象
both:不允许有浮动对象

例子：
禁止块状元素与浮动元素重叠显示，代码如下:

<style type="text/css">
    div{
        height: 200px ;
        width: 200px;
        border:solid 2px red;
        margin: 4px;
        float: left;
    }
    #box3{float:none; clear:left;}
    </style>
    <div id="box1">盒子1</div>
    <div id="box2">盒子2</div>
    <div id="box3">盒子3</div>

定义’clear：left’效果图：

不定义’clear：left’效果图：

设计定位显示：

定义position:
属性可以定义元素定位显示，用法如下：

static: 无特殊定位，对象遵循正常文档流。top、 right、 bottom、 left等属性不会被应用
relative:对象遵循正常文档流，但将依据top、right、 bottom. left 等属性在正常文档流中心移位置。
absolute:对象脱离正常文档流，使用top、 right、 bottom、 left等属性进行绝对定位，其层叠顺序通过z-index属性定义。
fixed:对象脱离正常文档流，使用top、right、 bottom、 left 等属性以窗口为参考点进行定行
当出现滚动条时，对象不会随之.滚动。

position属性相关联的是4个定位属性:
top:设置对象与其最近一个定位包含框顶部相关的位置。
right:设置对象与其最近一个定位包含框右边相关的位置。
bottom: 设置对象与其最近一个定 位包含框底部相关的位置。
left:设置对象与其最近一个定位包含框左侧相关的位置。

上面4个属性值可以是长度值，或者是百分比值，可以为正值，也可以为负值。当取负值时，向盒子相反方向偏移，默认值都为auto。

例子：
定义3个盒子都为绝对定位显示，并使用left、right、 top 和bottom属性定义元素的坐标，代码如下

<style type="text/css">

    body {padding: 0;margin: 0; }       
    div{
        height: 200px ;
        width: 200px;
        border:solid 2px red;
        position: absolute;
    }
    #box1{left: 50px;top: 50px; }
    #box2{left: 40%; }
    #box3{right: 50px;bottom: 50px; }
    </style>
    <div id="box1">盒子1</div>
    <div id="box2">盒子2</div>
    <div id="box3">盒子3</div>

效果图如下显示：

设计层叠顺序
语法
z-index:value
值越大，显示的在上面
例子：三个盒子都是相对定位，默认状态他们按顺序层叠
代码如下：

<style type="text/css">

    body {padding: 0;margin: 0; }       
    div{
        height: 100px ;
        width: 200px;
        border:solid 2px red;
        position: relative;
    }
    #box1{background: red; }
    #box2{left: 60ox;top: -50px;background: blue; }
    #box3{left: 120px;top: -100px;background: green; }
    </style>
    <div id="box1">盒子1</div>
    <div id="box2">盒子2</div>
    <div id="box3">盒子3</div>

效果图如下：

加入z-index后改变层叠顺序
加入代码：

   #box1{ z-index: 3;}
    #box2{z-index: 2; }
    #box3{z-index: 1;}

效果图如下：

这是关于CSS 网页基础排布知识。