HTML/CSS 学习笔记（三）

最新推荐文章于 2024-07-26 08:00:00 发布

dongdongdongjiang

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量274

点赞数

分类专栏： html css 文章标签： css

本文链接：https://blog.csdn.net/weixin_38829431/article/details/72784569

版权

html 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

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对象不可层叠，使用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>