清除浮动

概念

含义
清除浮动带来的影响(如果子元素浮动了,此时子元素就不能撑开标准流中的块级父元素)
原因
子元素浮动后脱标—>不占位置
目的
需要父元素有高度,从而不影响其他网页元素的布局

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8.   <style>
  9.     /* 1、去除标签默认的margin和padding */
  10.     * {
  11.       margin: 0;
  12.       padding: 0;
  13.     }
  15.     /* 2、找到ul，去除小圆点 */
  16.     ul{
  17.       list-style: none;
  18.     }
  20.     /* 3、找到li标签，设置浮动 */
  21.     ul li {
  22.       float: left;
  23.     }
  25.     /* 4、找到a标签，设置宽高 */
  26.     ul li a {
  27.       /* a标签默认是行内元素，不能直接设置宽高 */
  28.       /* 1、转换成行内块元素 */
  29.       /* display: inline-block; */
  31.       /* 2、转换成块级元素 */
  32.       /* display: block; */
  34.       /* 3、设置浮动 */
  35.       float: left;
  37.       width: 80px;
  38.       height: 50px;
  39.       background-color: #ffc0cb;
  40.       text-decoration: none;
  41.       text-align: center;
  42.       line-height: 50px;
  43.       color: #fff;
  44.       font-size: 16px;
  45.     }
  47.     ul li a:hover {
  48.       background-color: #008000;
  49.     }
  51.     .content{
  52.       width: 800px;
  53.       height: 300px;
  54.       background: skyblue;
  55.     }
  56.   </style>
  57. </head>
  58. <body>
  59.   <ul>
  60.     <li><a href="#">新闻1</a></li>
  61.     <li><a href="#">新闻2</a></li>
  62.     <li><a href="#">新闻3</a></li>
  63.     <li><a href="#">新闻4</a></li>
  64.     <li><a href="#">新闻5</a></li>
  65.     <li><a href="#">新闻6</a></li>
  66.     <li><a href="#">新闻7</a></li>
  67.     <li><a href="#">新闻8</a></li>
  68.   </ul>
  69.   <div class="content">
  71.   </div>
  72. </body>
  73. </html>

方法1:直接设置高度

操作
直接设置父元素的高度
特点
优点:简单粗暴,方便
缺点:有些布局不能固定父元素的高度,如新闻列表,京东的推荐模块

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>Document</title>
  6.     <style>
  7.         .father{
  8.             background: pink;
  9.             /* 方法一:给父元素加上高度 */
  10.             height: 100px;
  11.         }
  12.         .son{
  13.             width: 100px;
  14.             height: 100px;
  15.             background: skyblue;
  16.             float: left;
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21.     <div class="father">
  22.         <div class="son"></div>
  23.     </div>
  24. </body>

方法2:额外标签法

操作
1,在父元素内容的最后面添加一个块级元素
2,给添加的块级元素设置clear:both
特点
缺点:会在页面中添加额外的标签.会让页面的html结构变的复杂

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>Document</title>
  6.     <style>
  7.         .father{
  8.             background: pink;
  9.         }
  10.         .son{
  11.             width: 100px;
  12.             height: 100px;
  13.             background: skyblue;
  14.             float: left;
  15.         }
  16.         .d1{
  17.             clear: both;/* 给添加的块级元素设置clear:both */
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.     <div class="father">
  23.         <div class="son"></div>
  24.         <!-- 方法二:添加一个额外的块元素 -->
  25.         <div class="d1"></div>
  26.     </div>
  27. </body>

方法3:单伪元素清除法

操作
用伪元素代替了额外标签

初始写法
.father::after{
content: ‘’;/ 伪元素必须属性 /
display: block;/ 默认是行级,需要转成块级元素 /
clear: both;/ 用来清除浮动影响 /
}

改进:
.clearfix::after{
content: ‘’;
display: block;
clear: both;
}
特点
优点:项目中常用,直接给标签加上类名clearfix 即可清除浮动

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>Document</title>
  6.     <style>
  7.         .father{
  8.             background: pink;
  9.         }
  10.         .son{
  11.             width: 100px;
  12.             height: 100px;
  13.             background: skyblue;
  14.             float: left;
  15.         }
  16.         /* .father::after{
  17.             content: '';
  18.             display: block;
  19.             clear: both;
  20.         } */
  22.         /* 固定写法 */
  23.         .clearfix::after{
  24.             content: '';
  25.             display: block;
  26.             clear: both;
  27.         }
  29.     </style>
  30. </head>
  31. <body>
  32.     <div class="father clearfix">
  33.         <div class="son"></div>
  34.     </div>
  35. </body>

方法4:双伪元素清除法

操作
使用两个伪元素,清除浮动,主要用的是后面一个伪元素

/ 双伪元素清除法:固定写法 /
.clearfix::before,
.clearfix::after{
content: ‘’;
display: table;/ 表格布局方式,类似block,习惯用法 /
}

  1.     .clearfix::after{<br />            clear: both;/* 这个才是清除浮动的核心代码 */<br />        }<br />特点<br />    项目中常用,比单伪元素新增了解决外边距塌陷的问题
  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>Document</title>
  6.     <style>
  7.         .father{
  8.             background: pink;
  9.         }
  10.         .son{
  11.             width: 100px;
  12.             height: 100px;
  13.             background: skyblue;
  14.             float: left;
  15.         }
  17.         /* 双伪元素清除法:固定写法 */
  18.         .clearfix::before,
  19.         .clearfix::after{
  20.             content: '';
  21.             display: table;/* 表格布局方式,类似block,习惯用法 */
  22.         }
  24.         .clearfix::after{
  25.             clear: both;/* 这个才是清除浮动的核心代码 */
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30.     <div class="father clearfix"><!-- 加上清除浮动的类名 -->
  31.         <div class="son"></div>
  32.     </div>
  33. </body>

单伪/双伪元素清除法的区别

双伪元素清除法可以解决margin的塌陷问题 

  1.    ( 因为父子元素的margin-top是紧贴着的,给子元素设置的margin-top也会作用在父元素上从而导致了margin的塌陷情况)
  1. <head>
  2.   <meta charset="UTF-8">
  3.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.   <title>Document</title>
  6.   <style>
  7.     .father {
  8.       width: 400px;
  9.       height: 400px;
  10.       background-color: pink;
  11.     }
  13.     .son {
  14.       width: 100px;
  15.       height: 100px;
  16.       background-color: skyblue;
  17.       /* 因为父子元素的margin-top是紧贴着的,给子元素设置的margin-top也会作用在父元素上
  18.          从而导致了margin的塌陷情况
  19.       */
  20.       margin-top: 100px;
  21.     }
  23.     /* 单伪元素清除 */
  24.     /* .clearfix::after{
  25.         content: '';
  26.         display: block;
  27.         clear: both;
  28.     } */
  31.     /* 双伪元素清除法:固定写法 */
  32.     .clearfix::before,
  33.     .clearfix::after{
  34.         content: '';
  35.         display: table;/* 表格布局方式,类似block,习惯用法 */
  36.     }
  38.     .clearfix::after{
  39.         clear: both;/* 这个才是清除浮动的核心代码 */
  40.     }
  42.   </style>
  43. </head>
  44. <body>
  45.   <div class="father clearfix">
  46.     <div class="son"></div>
  47.   </div>
  48. </body>

定位

简介

概念
也是一种布局方式,可以让元素自由摆放在网页的任意位置
应用场景
可以解决盒子与盒子之间的层叠问题,因为定位之后的元素层级最高,可以层叠在其他盒子上面
可以放盒子始终固定在屏幕中的某个位置
使用
1.设置定位的方式:position属性
2,设置偏移值:水平和垂直就近各取一个

相对定位

概念
自恋型定位.相对于自己之前的位置进行移动
代码
position: relative
特点
1,在页面中占位置->没有脱标
2,相对于自己原来的位置进行移动
3,参照坐标原点:原来在标准流的左上角为原点
应用场景
1,子绝父相(常用定位规律)
2,用于小范围的移动

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>Document</title>
  6.     <style>
  7.         div{
  8.             width: 100px;
  9.             height: 100px;
  10.             background: pink;
  11.         }
  12.         .two{
  13.             /* 相对定位
  14.                 1,占用空间
  15.                 2,参照坐标原点:原来在标准流的左上角为原点
  16.             */
  17.             position: relative;
  18.             top: 10px;
  19.             left:10px;
  20.             background: skyblue;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25.     <div>1</div>
  26.     <div class="two">2</div>
  27.     <div>3</div>
  28. </body>

绝对定位

概念
拼爹型定位.相对于最近的有定位的祖先元素进行移动
代码
posistion: absolute
特点
1,在页面中不占位置 -> 已经脱标
2,相对于最近的有定位的祖先元素进行移动
3,参照坐标原点:
如果父元素设置了定位,就相对于父元素,以父元素的左上角为坐标原点
如果父元素没有设置了定位,就一直往上找,最后就相对于body元素,浏览器的左上角为原点
应用场景
子绝父相(常用定位规律)

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>Document</title>
  6.     <style>
  7.         .father{
  8.             position: relative;/* 如果父元素有定位,就参照父元素 */
  9.             width: 300px;
  10.             height: 300px;
  11.             margin: 100px;/* 为了能够看到更好的效果,让父元素偏移 */
  12.             background: pink;
  13.         }
  14.         .son1{
  15.             /* 设置绝对定位 
  16.                 不占位置
  17.                 参照坐标原点:最近的带有定位的父元素
  18.                             如果父元素没有,就一层一层找,如果都没有,就参照body
  19.             */
  20.             position: absolute;
  21.             left: 10px;
  22.             top: 10px;
  23.             width: 100px;
  24.             height: 100px;
  25.             background: purple;
  26.         }
  27.         .son2{
  28.             width: 100px;
  29.             height: 100px;
  30.             background: skyblue;
  31.         }
  32.     </style>
  33. </head>
  34. <body>
  35.     <div class="father">
  36.         <div class="son1">child1</div>
  37.         <div class="son2">child2</div>
  38.     </div>
  39. </body>

固定定位

概念
死心眼定位,相对于浏览器进行定位
代码
position: fixed
特点
1,在页面中不占位置 -> 已经脱标
2,相对于浏览器进行定位移动
3,参考的原点:浏览器左上角为原点
场景
让盒子固定在屏幕中的某个位置

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>Document</title>
  6.     <style>
  7.         img{
  8.             /* 固定定位 
  9.                 不占位置
  10.                 参考的原点:浏览器左上角为原点
  11.             */
  12.             position:fixed;
  13.             top: 100px;
  14.             right: 100px;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19.     <img src="./img/floor1.jpg" alt="">
  20.     <!-- p>lorem1000 -->
  21.     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut et neque commodi nihil laborum! Sunt rem, tempora facilis cumque iusto ea ipsam numquam sit fugit optio quasi cum nesciunt quibusdam illo dolor vel dicta inventore! Pariatur porro cum possimus, consectetur reiciendis perferendis omnis numquam quod sed aperiam quos provident. Voluptatibus, perspiciatis repudiandae doloremque voluptates impedit dolorum eaque excepturi reprehenderit odit dolor! Ipsa commodi ut maiores, eveniet ducimus voluptatum nulla totam voluptate corrupti dolore. Eaque est culpa in reprehenderit neque atque omnis magnam, ullam voluptas, deleniti odit facere quasi blanditiis nisi totam! Minus in saepe minima, nemo voluptates esse! Asperiores possimus dolore doloremque reiciendis officiis vitae recusandae veritatis assumenda ipsam eum, aspernatur dolorum excepturi necessitatibus quasi repudiandae illum voluptates fuga earum. Nam iusto cupiditate deserunt numquam excepturi consequuntur neque itaque autem fuga! Dolore similique reprehenderit, error vel accusamus perferendis dicta reiciendis adipisci, quo esse consequuntur, dolorum beatae fugit itaque. Mollitia deleniti ducimus molestiae voluptate dolorem excepturi rerum impedit! At officia accusantium, rerum provident nostrum nam repellendus quis eius laudantium natus laboriosam tempora? Libero dolorem illum maiores ab dicta, labore, molestias, veritatis inventore animi at excepturi minus aspernatur! Delectus quis explicabo dolore nulla tenetur? Reiciendis quo ad modi ullam tempora id vel laudantium harum natus cupiditate sit eligendi ratione, molestiae quibusdam tenetur. Magni, a, totam corporis quod ducimus aliquid hic saepe labore veniam qui similique! Nisi cupiditate cum, dolor eligendi laudantium quia molestiae nemo maxime, amet doloribus quidem iusto ex corrupti unde accusamus aspernatur minus. Ea animi repudiandae vel, modi dolorem soluta officia alias blanditiis quaerat, expedita nesciunt hic necessitatibus odio tempore provident, accusantium unde maiores atque sed temporibus? Quisquam doloremque nisi illum voluptatum, quod minima mollitia enim vitae voluptatem unde a nihil ipsa, velit atque libero, animi ad suscipit! Voluptatem harum tempore iusto, velit, laudantium dolorum sequi voluptatum cum nihil dolores in error cumque odio quis. Enim delectus facere maxime dignissimos ea provident dolore similique. Hic, odio earum molestiae rem totam fugiat, quis ad a atque aperiam nisi illum dolor autem consequatur ex facere officia labore eos? Repellat recusandae consequuntur molestiae sint consequatur nihil dolores nisi ullam autem, atque fugit! Voluptatum dolores nesciunt culpa ipsam ipsa tempore eum ad aliquam natus, rem, sapiente adipisci dolore laudantium commodi quas soluta, unde quidem! Quibusdam eos et voluptates explicabo nihil commodi pariatur, molestias voluptate magnam corrupti, iure quasi a, fugit iusto saepe sapiente vitae velit! Animi architecto natus repudiandae, voluptatum asperiores, debitis dolorum voluptatibus magnam culpa est nemo rerum aspernatur. Perferendis dolorem at veniam, voluptates magni enim reiciendis tempora, autem tenetur corrupti id laudantium distinctio earum non quae. Ullam porro distinctio consequatur blanditiis sit odit ex iure doloremque excepturi, quam veritatis omnis ratione. Aut ipsum facere eius adipisci optio nisi distinctio nam, error amet corporis quisquam veniam nesciunt ipsa omnis magni vel reprehenderit exercitationem ea quas suscipit minus! Sequi odio eius dolores officiis repellendus dolorum quidem. Vitae similique velit sit vel blanditiis saepe ipsa, facere, soluta labore reiciendis, deserunt enim voluptate ullam dicta optio est suscipit dignissimos. Nostrum, nihil sunt laboriosam veniam recusandae temporibus vitae nesciunt? Aliquid ab, ad eos perferendis alias a! Tenetur illum quod beatae cum, minus magnam cumque, fugiat incidunt ullam adipisci illo dicta quisquam. Cupiditate sunt saepe exercitationem error, rem fuga. Iste veritatis architecto totam possimus quidem. Enim aperiam delectus quas adipisci repellendus! Laboriosam perspiciatis accusantium consectetur perferendis quaerat incidunt! Veniam aut perferendis temporibus ipsum autem adipisci. Eos, dolore doloribus officia, quia fugit repellat blanditiis nisi reprehenderit quibusdam neque quisquam odio. Vel magnam dicta, ad eius distinctio nihil facere ipsam tempora, vitae, consectetur non quas pariatur veritatis quidem? Corporis incidunt dolorum tempore vero, velit distinctio laboriosam magnam doloremque eius commodi placeat ipsum quos, facilis maiores necessitatibus. Odit quo commodi ipsa ut eius iusto maiores, explicabo laudantium? Et rem dolor fugit. Ratione nulla ea quidem neque officiis magni quasi obcaecati fuga! Voluptas id est necessitatibus nisi in provident laboriosam, aperiam neque, ipsam voluptatem odit quisquam. Hic nihil soluta fuga. Nihil sed facilis sint porro numquam dolores consectetur, perspiciatis iste tempore velit incidunt rerum commodi distinctio explicabo accusantium! Ipsam beatae nisi in? Fugiat porro ad, quo voluptatem, voluptatibus molestiae voluptas eos corporis hic aperiam enim alias cum nihil animi similique! Delectus quisquam laboriosam dolor voluptate et repellendus quaerat, magni culpa perspiciatis, aliquid fugit officiis dicta amet numquam eveniet. Culpa veritatis voluptas distinctio est nam reiciendis voluptatem non sapiente, quam eaque voluptatum, porro tempore? Minus cupiditate, architecto ex ipsum qui modi impedit dolore explicabo veniam. Dolorum fuga dolores ducimus ipsum excepturi quis in? Quibusdam eligendi incidunt deleniti delectus distinctio quisquam repellat, aspernatur voluptas! Voluptate eius et delectus voluptates fugit rerum, assumenda cupiditate iure nobis voluptatem odit saepe ipsam ut doloremque nihil laudantium! Officia officiis, inventore magni quis debitis a cumque corporis ullam maxime aliquam perspiciatis unde obcaecati excepturi quas consequuntur tempore explicabo voluptatem. Rerum minima, facilis vel possimus nulla quisquam pariatur nesciunt accusantium dolores quos laboriosam ipsum, voluptate est, nihil enim corporis necessitatibus quidem reiciendis natus eaque. Ea unde eligendi quibusdam ad soluta sunt enim facere iste vel animi pariatur corporis voluptate cupiditate autem tempore, rem doloremque minima officia sapiente eaque? Iusto hic eligendi ipsum doloribus maiores laborum cumque alias perferendis voluptates iste deleniti aut neque necessitatibus eius facere ipsa nam ex voluptate aperiam, quo et repudiandae eos earum consectetur. Minus fugit porro corrupti similique deserunt voluptatum atque excepturi id ut, quos pariatur possimus doloribus tenetur, aliquid maiores impedit ullam corporis repellat, nam aspernatur! Pariatur earum exercitationem sint. Aspernatur totam cumque quo maxime ad, accusamus nostrum hic corrupti odit itaque sed maiores harum ipsum fugiat sapiente qui rem officia quisquam neque. Eligendi aliquid earum ullam impedit blanditiis magni, vel velit nesciunt nisi, beatae neque iusto similique ut itaque nostrum pariatur nihil. Porro voluptates exercitationem incidunt nihil maxime eius consequuntur harum eligendi facere maiores sit quo voluptate distinctio rem mollitia at sapiente neque odit explicabo laborum, recusandae consequatur non repellat vel! Animi alias et ut, doloremque eum voluptate explicabo error nulla amet enim, magni corrupti similique unde nam dolorum, iste repellendus. Soluta pariatur consequatur architecto laudantium cum? Inventore dolor consequatur repellendus repellat a? Numquam.</p>
  22. </body>

子绝父相

含义
子元素是绝对定位,父元素是相对定位
场景
让子元素相对于父元素进行自由移动
好处
父元素是相对定位,对网页布局影响最小

实现水平居中
1,设置子绝父相
2,先让子盒子向右移动父盒子的一半
left:50%
3,再让子盒子向左移动他自己的一半
普通做法: margin-left:负的子盒子宽度的一半
缺点:子盒子宽度改变之后需要重新修改代码
优化做法:transform: translateX(-50%);
优点:表示沿着x轴的负方向,移动自己宽度的一半,不需要修改代码

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>Document</title>
  6.     <style>
  7.         .father{
  8.             position: relative;
  9.             width: 800px;
  10.             height: 400px;
  11.             background: pink;
  12.         }
  13.         .son{
  14.             position:absolute;
  15.             top:0px;
  16.             left:50%;/* 这里%是相对于父元素 */
  17.            /*  margin-left:-100px; */
  18.            /* margin-left:-50%; */ /* 这里%是相对于父元素 */
  19.            transform: translateX(-50%);/* 使用transform属性,他是相对于自身的50% */
  20.             width: 200px;
  21.             height: 100px;
  22.             background: skyblue;
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  27.     <div class="father">
  28.         <div class="son"></div>
  29.     </div>
  30. </body>

实现水平垂直居中
1,设置子绝父相
2,先让子盒子向右移动父盒子的一半
left:50%
3,先让子盒子向下移动父盒子的一半
top:50%
4,让盒子往左,往上走自己的一半
transform: translate(-50%,-50%);

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>Document</title>
  6.     <style>
  7.         .father{
  8.             position: relative;
  9.             width: 800px;
  10.             height: 400px;
  11.             background: pink;
  12.         }
  13.         .son{
  14.             position:absolute;
  15.             top:50%;
  16.             left:50%;
  17.             /* transform: translateX(-50%); *//* 使用transform属性,他是相对于自身的50% */
  18.             /* transform: translateY(-50%); */
  19.             transform: translate(-50%,-50%);/* 让盒子往左,往上走自己的一半 */
  20.             width: 200px;
  21.             height: 100px;
  22.             background: skyblue;
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  27.     <div class="father">
  28.         <div class="son"></div>
  29.     </div>
  30. </body>

层级关系

不同布局方式元素的层级关系
标准流 < 浮动 < 定位
不同定位之间的层级关系
相对,绝对,固定,默认层级相同
Html中写在下面的元素层级更高,会覆盖上面的元素
可以使用z-index属性更改元素的层级:z-index数字越大,层级越高,不需要更改html结构
不同布局方式元素的层级关系:

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>Document</title>
  6.     <style>
  7.         div{
  8.             width: 200px;
  9.             height: 200px;
  10.         }
  11.         .red{
  12.             background: red;
  13.         }
  14.         .green{
  15.             width: 210px;
  16.             height: 210px;
  17.             background: green;
  18.             float: left;/* 浮动 */
  19.         }
  20.         .blue{
  21.             position: relative;/* 定位 */
  22.             background: blue;
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  27.     <div class="red"></div>
  28.     <div class="green"></div>
  29.     <div class="blue"></div>
  30. </body>

不同定位之间的层级关系:

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>Document</title>
  6.     <style>
  7.         div{
  8.             width: 200px;
  9.             height: 200px;
  10.         }
  11.         .red{
  12.             position: relative;
  13.             top: 0;
  14.             left: 0;
  15.             background: red;
  16.             z-index: 3;
  17.         }
  18.         .green{
  19.             position:absolute;
  20.             top: 100px;
  21.             left:100px;
  22.             background: green;
  23.             z-index: 2;
  24.         }
  25.         .blue{
  26.             position: fixed;
  27.             top: 200px;
  28.             left: 200px;
  29.             background: blue;
  30.             z-index: 1;
  31.         }
  32.     </style>
  33. </head>
  34. <body>
  35.     <div class="blue"></div>
  36.     <div class="red"></div>
  37.     <div class="green"></div>
  38. </body>

vertical-align

基线：浏览器文字类型元素排版中存在用于对齐的基线（baseline）

作用

用于解决 行内元素/行内块元素 垂直对齐的问题(因为图片和文字在一行之内,一般是基线对齐)

常见取值

baseLine 默认,基线对齐
middle 中部对齐
bottom 底部对齐

vertical-align 垂直对齐:

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>Document</title>
  6.     <style>
  7.         img{
  8.             vertical-align: middle;
  9.         }
  10.     </style>
  11. </head>
  12. <body>
  13.     <img src="./img/1.jpg" alt="">这是一个小jj
  14. </body>

应用场景

1,解决img标签下面存在的额外间隙问题

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>Document</title>
  6.     <style>
  7.         div{
  8.             width: 400px;
  9.             background: pink;
  10.         }
  11.         img{
  12.             /* 解决方法一:改变img的垂直对齐方式不为baseLine即可 推荐做法*/
  13.              vertical-align: middle; 
  15.             /* 解决方法二:设置img转换成块级元素 */
  16.             /* display: block; */
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21.     <div>
  22.         <img src="./img/1.jpg" alt="">
  23.     </div>
  24. </body>

2,解决让img垂直居中问题

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>Document</title>
  6.     <style>
  7.         div{
  8.             height: 400px;
  9.             width: 400px;
  10.             background: pink;
  11.             line-height: 400px;/* 只设置这个,只能保证文字是垂直对齐的,但是图片没有垂直居中,因为图片默认跟文字的基线对齐 */
  12.         }
  14.         img{
  15.             vertical-align: middle;/* 还需要设置这个,让图片中部和文字中线对齐 */
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20.     <div>
  21.         <img src="./img/1.jpg" alt="">小jj
  22.     </div>
  23. </body>

注意:
• 学习浮动之后，不推荐使用行内块元素让div一行中显示，因为可能会出现垂直对齐问题
• 推荐优先使用浮动完成效果

其他效果

overflow溢出效果

溢出部分：指的是盒子 内容部分 所超出盒子范围的区域
场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条……属性名：overflow
常见属性值：
hidden 溢出部分隐藏
auto 自动显示
visible 默认值, 溢出部分可见

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>Document</title>
  6.     <style>
  7.         div{
  8.             width: 200px;
  9.             height: 200px;
  10.             background: pink;
  11.             overflow: auto;/* 自动显示 */
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque pariatur sunt sed tenetur nobis in corrupti corporis, modi eveniet voluptatibus explicabo aliquid, delectus porro? Id eius corporis magnam aut. Vitae illo ipsa illum dolorum quidem qui, deleniti nesciunt corrupti tempora architecto a, quia nostrum nam magni blanditiis dolore, saepe eum?</div>
  17. </body>

元素本身隐藏

场景：让某元素本身在屏幕中不可见。如：鼠标:hover之后元素隐藏 常见属性：
visibility：hidden
display：none
区别：
visibility：hidden 隐藏元素本身，并且在网页中 占位置
display：none 隐藏元素本身，并且在网页中 不占位置

注意点：
• 开发中经常会通过 display属性完成元素的显示隐藏切换
• display：none；（隐藏）、 display：block；（显示）

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>Document</title>
  6.     <style>
  7.         div{
  8.             width: 200px;
  9.             height: 200px;
  10.         }
  11.         .red{
  12.             background: red;
  13.         }
  14.         .green{
  15.             background: green;
  16.             /* 方式一: */
  17.             /* visibility: hidden; */
  19.             /* 方式二 */
  20.             display: none;
  21.         }
  22.         .blue{
  23.             background: blue;
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  28.     <div class="red"></div>
  29.     <div class="green"></div>
  30.     <div class="blue"></div>
  31. </body>

字体图标

概念

字体图标
字体图标展示的是图标，本质是字体。
处理简单的、颜色单一的图片

使用字体图标技巧实现网页中简洁的图标效果

字体图标的优点：
灵活性：灵活地修改样式，例如：尺寸、颜色等
轻量级：体积小、渲染快、降低服务器请求次数
兼容性：几乎兼容所有主流浏览器
使用方便： 

  1.   1. 下载字体包
  2.   1. 使用字体图标

使用

图标库 Iconfont：https://www.iconfont.cn/
下载字体包：
登录（新浪微博） → 选择图标库 → 选择图标，加入购物车 → 购物车 → 添加至项目 → 下载至本地

使用字体图标
1,引入字体图标的样式
2.调用图标对应的类名，必须调用2个类名
iconfont类：基本样式，包含字体的使用等
icon-xxx：图标对应的类名

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>Document</title>
  6.     <!-- 引入样式 -->
  7.     <link rel="stylesheet" href="./iconfont/iconfont.css">
  9.     <!-- 增加样式 -->
  10.     <style>
  11.          .iconfont{
  12.                 font-size: 60px;
  13.                 color: red;
  14.             }
  15.     </style>
  17. </head>
  18. <body>
  19.     <span class="iconfont icon-favorites-fill"></span>
  20. </body>