您的位置：首页 > Web前端 > CSS

HTML/CSS 学习笔记（三）

2017-05-27 21:45 447 查看

CSS布局的漂浮

（1）float

** 两个属性值：文本流向对象的左边和文本流向对象的右边

现在有三个div，正常的排列方式是从上到下，并自动换行。当给第一个div设置了float为left之后，第二个div会漂到第一个的右边，然后第二个的位置空了，第三个就上来补

（2）CSS布局的定位

position：absolute从文档流中拖出（比如某些网页中的广告）。设置了position属性以后，后面的div自动向上补

通过设置top，left，right，bottom的值来对这个div进行绝对的定位

<html>
<head>
<title>Document</title>
<style type='text/css'>
div{
width:200px;
height:100px;
border:2px solid blue;
}
#div51{
background-color:red;
position:absolute;
top:20px;
left:50px;
}
#div52{
background-color:green;
}
#div53{
background-color:orange;
}
</style>
</head>
<body>
<div id='div51'>AAAAAA</div>
<div id='div52'>BBBBBB</div>
<div id='div53'>CCCCCC</div>
</body>
</html>

样式效果：

position：relative对象不可
b865
层叠，使用left，right，top，bottom等属性在正常文档流中偏移位置。不会将对象从文档流中拖出去

<html>
<head>
<title>CSS的定位布局2</title>
<style type='text/css'>
div{
width:200px;
height:100px;
border:2px solid blue;
}
#div61{
background-color:red;
position:relative;
top:80px;
left:120px;
}
#div62{
background-color:green;
}
#div63{
background-color:orange;
}
</style>
</head>
<body>
<div id='div61'>AAAAAA</div>
<div id='div62'>BBBBBB</div>
<div id='div63'>CCCCCC</div>
</body>
</html>

样式效果：

案例：图文混排

图片和文字在一起显示

比如这样的效果：

<html>
<head>
<title>案例图文混排</title>
<style type='text/css'>
#imgtext11{
width:400;
height:200;
border:2 dashed orange;
}
#img11{
float:left;
}
#text11{
color:green;
}
</style>
</head>
<body>
<div id='imgtext11'>
<div id='img11'><img src='anli.png' style='width:150;height:200;'/></div>
<div id='text11'>这是.../div>
</div>
</body>
</html>

案例：图像签名

在图片上面显示文字：文字的定位（在图片的上面漂着）

<html>
<head>
<title>案例图像签名</title>
<style type='text/css'>
#text21{
position:absolute;
top:80;
left:30;
color:red;
}
</style>
</head>
<body>
<div id='img21'><img src='anli.png' style='width:150;height:200;'></div>
<div id='text21'>这是...</div>
</body>
</html>

上面两个案例都是跟图文相关的内容，第一个案例使用了漂浮；第二个案例使用过了position。在开发中很常用，要记住。

推荐一个网站w3school，个人感觉很不错

本人是菜鸟一枚，当做学习笔记写博客。谢谢各路大咖驻足审阅

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航