初步学习css,看过之后容易忘记,在此做一下记录。
一、margin介绍
margin:10px;代表上、右、下、左分别10px
margin:10px 10px;代表上下、左右分别10px
margin:10px 10px 10px;代表上、左右、下分别10px
margin:10px 10px 10px 10px;代表上、右、下、左分别10px
margin:0 auto;代表上下0px,左右自适应,显示为横向居中
二、float介绍
(1)设置float就代表脱离了正常的文档流,设置一个div靠左,一个div靠右,可以设置float:left;float:right属性来实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>固定定位</title>
<style>
* {
margin: 0;
padding: 0;
}
.content_div {
width: 100px;
height: 100px;
border: 1px solid #000;
float: left;
margin: 10px;
}
.small_div {
width: 100px;
height: 100px;
border: 1px solid #000;
float: right;
margin: 10px;
}
</style>
</head>
<body>
<div class="content_div">
</div>
<div class="small_div"></div>
</body>
</html>
(2)float排列方式是以头部对其来排列的,遵循:浮动找浮动,不浮动找不浮动的规则来排列
三、文字包围图片效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css的一些属性</title>
<style>
.left{
float: left;
}
</style>
</head>
<body>
<div class="left">
<img src="img/bg1.png" />
</div>
<p>轻轻地我走了,正如我轻轻地来,我挥一挥衣袖,不带走一片云彩。
轻轻地我走了,正如我轻轻地来,我挥一挥衣袖,不带走一片云彩。
轻轻地我走了,正如我轻轻地来,我挥一挥衣袖,不带走一片云彩。
轻轻地我走了,正如我轻轻地来,我挥一挥衣袖,不带走一片云彩。
轻轻地我走了,正如我轻轻地来,我挥一挥衣袖,不带走一片云彩。
轻轻地我走了,正如我轻轻地来,我挥一挥衣袖,不带走一片云彩。
轻轻地我走了,正如我轻轻地来,我挥一挥衣袖,不带走一片云彩。
正如我轻轻地来,我挥一挥衣袖,不带走一片云彩。</p>
</body>
</html>