基础CSS学习二

最新推荐文章于 2024-07-25 08:14:42 发布

sun_shine9394

最新推荐文章于 2024-07-25 08:14:42 发布

阅读量217

点赞数

分类专栏：学习笔记文章标签： css web前端

本文链接：https://blog.csdn.net/sun_shine9394/article/details/70226756

版权

学习笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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>

sun_shine9394

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基础CSS学习二

CSS不外乎就是给HTML搭建起来的架构进行装饰，但是想要达到完美的装饰效果必须要活用CSS的每一个属性，今天我想重点谈谈CSS的定位，这是我学习过程中的一个难点。定位不外乎四种：第一种：默认样式 static 在不进行其他设置的时候，就是遵从各自特点。第二种：绝对定位position:absolute; 特点：1.脱离文档流
复制链接

扫一扫