css---浮动

最新推荐文章于 2022-09-17 14:49:54 发布

「已注销」

最新推荐文章于 2022-09-17 14:49:54 发布

阅读量537

点赞数

分类专栏： ======= Web ======= ======读书笔记====== html + css + js

本文链接：https://blog.csdn.net/Songjs19931206/article/details/42151423

版权

======读书笔记====== 同时被 3 个专栏收录

79 篇文章 0 订阅

订阅专栏

======= Web =======

55 篇文章 0 订阅

订阅专栏

html + css + js

32 篇文章 0 订阅

订阅专栏

<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
  </head>
  <style style="text/css">
      body{
          font-size: 16px;
      }
      #left{
          width: 50px;
          height: 50px;
          background-color: red;float: left;
      }
      #right{
          width: 200px;
          height: 200px;
          background-color: green;
          float: right;
      }
      #foot{
          width: 100px;
          height: 100px;
          background-color: blue;
      }
      .aa:HOVER{ 
    -webkit-transition:border linear .2s,-webkit-box-shadow linear .5s; 
    border-color:rgba(141,39,142,.75); 
    -webkit-box-shadow:0 0 18px rgba(111,1,32,3); 
    } 
    .aa{ 
    height: 100px;width: 100px; 
    } 
          
  </style>
  <body>
          <div style="border: 1px solid red; width: 300px;">
              <div id="left">left</div>
              <div id="right">right</div>
              <br clear="all" />  <!-- 相当于 <div style="clear:both"></div> -->
          </div>
          <div id="foot">foot</div> 
        This is my JSP page. <br>
        <input type="text" class="aa"> 
        
  </body>
</html>

1.左右居中：让居中的元素： margin : xxxpx auto;（在外套的div中居中）
2.浮动：相当于就是脱离了出来，其后的元素当做其不存在即可。
3.浮动布局，在同一个div中的元素，全部浮动即可。
4.浮动是基于最外围的第一个 absolute 绝对定位的元素来说的， body貌似默认绝对定位。
5.浮动会对后面的东西有影响，而且浮动好像会自动上移给上层div，影响其父层。此时如果希望下方元素不受其影响，
仍按照以前的顺序方式进行排列，此时需要去掉前面对象的浮动：也就是清除浮动。
clear: none / left / right /
<br clear="all" /> 
6.浮动：先浮后动：先飘离原来的位置，后动：其后面的元素会向它原来的位置上，动起来。

7.还有一个问题：当浏览器窗口变小时：浮动本来在同一行时，窗口变小放不下，此时会变为多行！！
解决：在外围套一个div，并定义外围div的宽度。

绝对定位：
1.absolute绝对定位：将对象也从文档流中分离出来，通过设置left、right、top、bottom四个方向相对于父级对象进行
绝对定位。
·当我们要使用绝对定位时：
必须满必须给父元素加定位属性、一般建议为relative；
给子元素，加绝对定位，同时设置top、right（或者：left、bottom）
·如果不存在这样的父对象，则依据body对象。（位置也会空出来。）（一般都是把页面最后面的东西，定位到
页面前面某个位置。）
2.relative相对定位：
对象不从文档流中分离，通过设置left、right、top、bottom四个方向相对于自身位置进行相对定
位。——这里注意，其仍占有以前的位置