基础CSS学习二

来源：互联网发布：素描绘画软件编辑：程序博客网时间：2024/05/16 10:43

CSS不外乎就是给HTML搭建起来的架构进行装饰，但是想要达到完美的装饰效果必须要活用CSS的每一个属性，今天我想重点谈谈CSS的定位，这是我学习过程中的一个难点。

定位不外乎四种：

第一种：默认样式 static 在不进行其他设置的时候，就是遵从各自特点。

第二种：绝对定位

position:absolute;

特点：1.脱离文档流

2.与float具有相同特效表现

3.一个块的top、left、right、bottom是相对于什么？

1）如果它父级元素做了定位，就相对于最近一个元素

2）如果它父级元素没有做定位，就相对于body

第三种：相对定位

position:relative;

特点：1.没有脱离文档流

2.top、left、right、bottom是相对于块的最近一个元素

第四种：固定定位

position:fixed;

特点：1.脱离文档流

2.top、left、right、bottom是相对于块的body

为了更好的整合和利用CSS的属性，我做了一个简单的名片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>名片</title><style type="text/css">*{margin:0;padding:0;}#con{width:620px;height:320px;background-color: #69F;font:Verdana, Geneva, sans-serif 14pt}#main{width:600px;height:300px;background-image:url(images/timg.png);background-repeat:no-repeat;margin:10px;}#left{width:300px;height:200px;position:absolute;top:50px;left:50px;}p{padding:10px;margin:20px;}#right{width:200px;height:200px;background-image: url(images/1.png);background-repeat:no-repeat;float:right;}</style></head><body><div id="con"><div id="main">    <div id="left">        <p>姓名：皮卡丘</p>            <p>职业：卖萌小能手</p>            <p>联系方式：九动九不动</p>        </div>        <div id="right"></div>    </div></div></body></html>

0 0