relative

汇总

absolute是与第一个父级定位元素的相对定位，html也是父级
relative是与之前的自己的相对位置

第一种用法

absolute找父级进行绝对定位，作为abnsolute的父级元素
top、left都是0，加position: relative，并不是为了设置元素位置，而是为了它的子元素去相对定位

  1.    <style>
  2.         .box {
  3.             position: relative;
  4.             /*两个作用：相对父级进行绝对定位*/
  5.             width: 100px;
  6.             height: 100px;
  7.             background-color: #000;
  8.         }
  10.         .box1 {
  11.             position: absolute;
  12.             top: 20px;
  13.             right: 10px;
  14.             width: 50px;
  15.                }
  16.     </style>
  18.     <div class="box">
  19.         <div class="box1"></div>
  20.     </div>

image.png

第二种用法

  1.    <style>
  2.         .box1 {
  3.             width: 100px;
  4.             height: 100px;
  5.             background-color: #000;
  6.         }
  8.         .box2 {
  9.             width: 100px;
  10.             height: 100px;
  11.             background-color: orange;
  12.         }
  13.     </style>
  15.     <div class="box1"></div>
  16.     <div class="box2"></div>

image.png

  1.    <style>
  2.         .box1 {
  3.             position: absolute;
  4.             width: 100px;
  5.             height: 100px;
  6.             background-color: #000;
  7.         }
  9.         .box2 {
  10.             width: 100px;
  11.             height: 100px;
  12.             background-color: orange;
  13.         }
  14.     </style>
  16.     <div class="box1"></div>
  17.     <div class="box2"></div>

image.png
当上面元素是定位元素，下面元素是非定位元素时。
定位元素脱离文档流，新开图层，会腾出位置，之后的非定位元素会向上移动，非定位元素侦测不到上层的定位元素，定位元素图层比非定位高，会覆盖非定位元素 

  1.    <style>
  2.         .box1 {
  3.             position: absolute;
  4.             width: 100px;
  5.             height: 100px;
  6.             background-color: #000;
  7.         }
  9.         .box2 {
  10.             width: 100px;
  11.             height: 100px;
  12.             background-color: orange;
  13.             opacity: .8;
  14.         }
  15.     </style>
  17.     <div class="box1"></div>
  18.     <div class="box2"></div>

image.png

  1.    <style>
  2.         .box1 {
  3.             position: absolute;
  4.              /* z-index: 1; */
  5.             /*就变成黑色的了*/
  6.             width: 100px;
  7.             height: 100px;
  8.             background-color: #000;
  9.         }
  11.         .box2 {
  12.             position: relative;
  13.             width: 100px;
  14.             height: 100px;
  15.             background-color: orange;
  16.             /* opacity: .8; */
  17.         }
  18.     </style>
  20.     <div class="box1"></div>
  21.     <div class="box2"></div>

image.png
box2为relative，box2就上来了
因为box1绝对定位，脱离文档流，box2相对定位，但还会计算到文档流的位置中，因为box1脱离了文档流，所以box2占据之前本应该box1占据的位置，这两个后面覆盖前面的，图层是同一优先级

因为box2相对定位，会计算到文档流中

  1.   <style>
  2.         .box1 {
  3.             position: absolute;
  4.              /* z-index: 1; */
  5.             /*就变成黑色的了*/
  6.             width: 100px;
  7.             height: 100px;
  8.             background-color: #000;
  9.         }
  11.         .box2 {
  12.             position: relative;
  13.             top: 30px;
  14.             left: 30px;
  15.             width: 100px;
  16.             height: 100px;
  17.             background-color: orange;
  18.             /* opacity: .8; */
  19.         }
  20.     </style>
  22.     <div class="box1"></div>
  23.     <div class="box2"></div>

image.png

  1.    <style>
  2.         .box1 {
  3.             position: absolute;
  4.             width: 100px;
  5.             height: 100px;
  6.             background-color: #000;
  7.         }
  9.         .box2 {
  10.             position: relative;
  11.             width: 100px;
  12.             height: 100px;
  13.             background-color: orange;
  14.             /* opacity: .8; */
  15.         }
  16.     </style>
  18.     <div class="box2"></div>
  19.     <div class="box1"></div>

image.png
box2相对定位，但会占据之前的位置,box1绝对定位，受之前的影响

  2.     <style>
  3.         .box1 {
  4.             position: absolute;
  5.             width: 100px;
  6.             height: 100px;
  7.             background-color: #000;
  8.         }
  10.         .box2 {
  11.             position: relative;
  12.             top: -30px;
  13.             left: -30px;
  14.             width: 100px;
  15.             height: 100px;
  16.             background-color: orange;
  17.             /* opacity: .8; */
  18.         }
  19.     </style>
  21.     <div class="box2"></div>
  22.     <div class="box1"></div>

image.png
即使相对定位元素位置变了，也会占据之前的空间，因为相对定位是新的图层，只是占据老图层的位置，之后在新图层上操作位置，老图层只记录之前的位置，不记录在新图层上的变化，计算布局是老图层计算

  1.    <style>
  2.         .box1 {
  3.             position: absolute;
  4.             width: 100px;
  5.             height: 100px;
  6.             background-color: #000;
  7.         }
  9.         .box2 {
  10.             position: relative;
  11.             top: 30px;
  12.             left: 30px;
  13.             width: 100px;
  14.             height: 100px;
  15.             background-color: orange;
  16.             /* opacity: .8; */
  17.         }
  18.     </style>
  20.     <div class="box2"></div>
  21.     <div class="box1"></div>

image.png

两栏设计

  1.    <style>
  2.         html,body {
  3.             height: 100%;
  4.             margin: 0;
  5.             overflow-y: hidden;
  6.             /* 溢出隐藏 */
  7.         }
  8.         div{
  9.             height: 100%;
  10.         }
  11.         /* .left {
  12.             height: 100%;
  13.             margin-right: 300px;
  14.             background-color: green;
  15.         }
  16.         .right {
  17.             position: absolute;
  18.             right: 0;
  19.             top: 0;
  20.             width: 300px;
  21.             height: 100%;
  22.             background-color: orange;
  23.         } */
  25.         .left {
  26.             position: absolute;
  27.             left: 0;
  28.             top: 0;
  29.             width: 300px;
  30.             height: 100%;
  31.             background-color: green;
  32.         }
  33.         .right{
  34.             height: 100%;
  35.             margin-left: 300px;
  36.             background-color: orange;
  37.         }
  39.     </style>
  40.     <div class="left"></div>
  41.     <div class="right"></div>

侧边栏大小不变，内容大小随浏览器大小变化而变化
背下来了就好了

浮动float

一开始用法

  1.     <style>
  2.         img{
  3.             float: right;
  4.             width: 150px;
  5.             border: 1px solid #000;
  6.         }
  7.     </style>
  8.     <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="" srcset="">盼望着，盼望着，东风来了，春天的脚步近了。
  9.     一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。
  10.     小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。
  11.     桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，白的像雪。花里带着甜味儿；闭了眼，树上仿佛已经满是桃儿、杏儿、梨儿。花下成千成百的蜜蜂嗡嗡地闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的，没名字的，散在草丛里，像眼睛，像星星，还眨呀眨的。
  12.     “吹面不寒杨柳风”，不错的，像母亲的手抚摸着你。 <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="" srcset="">风里带来些新翻的泥土的气息，混着青草味儿，还有各种花的香，都在微微润湿的空气里酝酿。鸟儿将窠巢安在繁花嫩叶当中，高兴起来了，呼朋引伴地卖弄清脆的喉咙，唱出宛转的曲子，与轻风流水应和着。牛背上牧童的短笛，这时候也成天在嘹亮地响。
  13.     雨是最寻常的，一下就是三两天。可别恼。看，像牛毛，像花针，像细丝，密密地斜织着，人家屋顶上全笼着一层薄烟。树叶子却绿得发亮，小草也青得逼你的眼。傍晚时候，上灯了，一点点黄晕的光，烘托出一片安静而和平的夜。乡下去，小路上，石桥边，有撑起伞慢慢走着的人；还有地里工作的农夫，披着蓑，戴着笠的。他们的草屋，稀稀疏疏的，在雨里静默着。
  14.     天上风筝渐渐多了，地上孩子也多了。城里乡下，家家户户，老老小小，他们也赶趟儿似的，一个个都出来了。舒活舒活筋骨，抖擞抖擞精神，各做各的一份事去。“一年之计在于春”，刚起头儿，有的是工夫，有的是希望。
  15.     春天像刚落地的娃娃，从头到脚都是新的，他生长着.
  16.     春天像小姑娘，花枝招展的，笑着，走着。
  17.     春天像健壮的青年，有铁一般的胳膊和腰脚，他领着我们上前去。

image.png
图片嵌入文本，文本对齐

用法2

  1.    <style>
  2.         .box1{
  3.             float: left;
  4.             width: 100px;
  5.             height: 100px;
  6.             background-color: green;
  7.         }
  8.         .box2{
  9.             width: 200px;
  10.             height: 200px;
  11.             background-color: orange;
  12.         }
  13.     </style>
  14.     <div class="box1"></div>
  15.     <div class="box2"></div>
  16.     <!-- 浮动流,块级元素无法识别浮动流元素的位置 ,并没有新建图层，不像定位position一样-->

内联、内联块、浮动、溢出隐藏、纯文本都可以识别浮动元素的位置
除了块级元素
image.png

  1.    <style>
  2.         .box1{
  3.             float: left;
  4.             width: 100px;
  5.             height: 100px;
  6.             background-color: green;
  7.         }
  8.         .box2{
  9.             width: 200px;
  10.             height: 200px;
  11.             background-color: orange;
  12.         }
  13.     </style>
  14.     <div class="box1"></div>
  15.     <span>123</span>

image.png

塌陷

  1.     <style>
  2.         .box{
  3.             width: 200px;
  4.             border: 10px solid #000;
  5.         }
  7.         .box .inner-box{
  8.             float: left;
  9.             width: 100px;
  10.             height: 100px;
  11.         }
  13.         .box .inner-box.box1{
  14.             /* width: 100px;
  15.             height: 100px; */
  16.             background-color: green;
  17.         }
  18.         .box .box2{
  19.             /* width: 100px;
  20.             height: 100px; */
  21.             background-color:orange ;
  22.         }
  23.         .text-box{
  24.             width: 100px;
  25.             border: 1px solid #000;
  26.         }
  27.     </style>
  28.     <div class="box">
  29.         <div class="inner-box box1"></div>
  30.         <div class="inner-box box2"></div>
  31.     </div>
  32.     <div class="text-box">
  33.         123123123123123123123123123123123123123123123123123123123123123123123123
  34.     </div>

image.png
在父级元素中定位左右

  1.   <style>
  2.         .box{
  3.             width: 500px;
  4.             border: 10px solid #000;
  5.         }
  7.         .box .inner-box{
  8.             float: left;
  9.             width: 100px;
  10.             height: 100px;
  11.         }
  13.         .box .inner-box.box1{
  14.             /* width: 100px;
  15.             height: 100px; */
  16.             background-color: green;
  17.         }
  18.         .box .box2{
  19.             /* width: 100px;
  20.             height: 100px; */
  21.             background-color:orange ;
  22.             float: right;
  23.         }
  24.         .text-box{
  25.             width: 100px;
  26.             border: 1px solid #000;
  27.         }
  28.     </style>
  29.     <div class="box">
  30.         <div class="inner-box box1"></div>
  31.         <div class="inner-box box2"></div>
  32.     </div>1

image.png

  1.    <style>
  2.         .box{
  3.             width: 200px;
  4.             border: 10px solid #000;
  5.         }
  7.         .box .inner-box{
  8.             float: left;
  9.             width: 100px;
  10.             height: 100px;
  11.         }
  13.         .box .inner-box.box1{
  14.             /* width: 100px;
  15.             height: 100px; */
  16.             background-color: green;
  17.         }
  18.         .box .box2{
  19.             /* width: 100px;
  20.             height: 100px; */
  21.             background-color:orange ;
  22.         }
  23.         .text-box{
  24.             width: 100px;
  25.             border: 1px solid #000;
  26.         }
  27.         .clearfix{
  28.             clear: both;
  29.         }
  31.     </style>
  32.     <div class="box">
  33.         <div class="inner-box box1"></div>
  34.         <div class="inner-box box2"></div>
  35.         <p class="clearfix"></p>
  36.     </div>
  37.     <div class="text-box">
  38.         123123123123123123123123
  39.         1231231231231 23123123123123123
  40.         12312312 3123123123
  41.     </div>

image.png
必须是块级元素，比如p才行

  1.    <style>
  2.         ul {
  3.             /*去除圆点*/          
  4.             padding: 0;
  5.             margin: 0;
  6.             list-style: none;
  7.         }
  9.         ul {
  10.             width: 300px;
  11.             margin-top: 20px;
  12.             border: 1px solid #000;
  13.         }
  15.         ul li {
  16.             float: left;
  17.             width: 100px;
  18.             height: 100px;
  19.         }
  21.         .clearfix {
  22.             clear: both;
  23.         }
  24.     </style>
  26.     <ul>
  27.         <li>1</li>
  28.         <li>2</li>
  29.         <li>3</li>
  30.         <p class="clearfix"></p>
  31.     </ul>

image.png
float以后，元素就变成内联块级元素了
块级元素float以后就变成内联块元素了

  1.    <style>
  2.         .header{
  3.             width: 100%;
  4.             height: 60px;
  5.             background-color: #000;
  6.         }
  7.         .header .left{
  8.             float: left;
  9.             width: 200px;
  10.             height: 100%;
  11.             background-color: green;
  12.         }
  13.         .header .right{
  14.             float: right;
  15.             width: 200px;
  16.             height: 100%;
  17.             background-color: orange;
  18.         }
  19.     </style>
  20.     <div class="header">
  21.         <div class="left"></div>
  22.         <div  class="right"></div>
  23.     </div>

image.png
left right想在一行，都要把它们变成内联块级元素，都要加float，根据父级元素定位

  1.     <style>
  2.         .header{
  3.             width: 100%;
  4.             height: 60px;
  5.             line-height: 60px;
  6.             color: orange;
  7.             background-color: #000;
  8.         }
  9.         .header .left{
  11.         }
  12.         .header .right{
  13.            float: right;
  14.         }
  15.     </style>
  16.     <div class="header">
  17.         <span class="left">123</span>
  18.         <span class="right">234</span>
  19.     </div>

image.png

伪类伪元素

  1.     <style>
  2.         p:before{
  3.             content: "enjoy，";
  4.         }
  5.         p:after{
  6.             content: "很帅！";
  7.         }
  8.     </style>
  9.     <!-- :before :after -->
  10.     <p>很牛X，</p>

image.png
w3c规范：
一个冒号：是伪类
两个冒号：：是伪元素
其实不分那么细致，一个冒号：也可以是伪元素

  2.     <style>
  3.         p::before{
  4.             /* 必须加content */
  5.             content: "";
  7.             display: inline-block;
  8.             width: 100px;
  9.             height: 100px;
  10.             background-color: green;
  11.         }
  12.         p::after{
  13.             content: "";
  15.             display: inline-block;
  16.             width: 200px;
  17.             height: 200px;
  18.             background-color: orange;
  19.         }
  20.     </style>
  21.     <p>很牛X，</p>

image.png

清除浮动最佳方法

给标签设置after伪类

  1.    <style>
  2.         /* 清除浮动最佳方法 */
  3.         ul::after,
  4.         div::after {
  5.             content: "";
  6.             display: block;
  7.             clear: both;
  8.         }
  10.         .box {
  11.             width: 200px;
  12.             border: 10px solid #000;
  13.         }
  15.         /* .box::after {
  16.             content: "";
  17.             display: block;
  18.             clear: both;
  19.         } */
  21.         .box1 {
  22.             float: left;
  23.             width: 100px;
  24.             height: 100px;
  25.             background-color: green;
  26.         }
  28.         .box2 {
  29.             float: left;
  30.             width: 100px;
  31.             height: 100px;
  32.             background-color: orange;
  33.         }
  34.     </style>
  35.     <div class="box">
  36.         <div class="box1"></div>
  37.         <div class="box2"></div>
  38.     </div>

image.png
image.png
::after伪元素相当于之前的p元素
把div、ul后面设置after伪元素，就相当于自动设置了一个p元素