简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 《浮动定位的理解应用》20201221
Blogger Information
Blog 26
fans 1
comment 1
visits 19463
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
《浮动定位的理解应用》20201221
杨凡的博客
Original
1046 people have browsed it

浮动

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>浮动</title>
  7.     <style>
  8.         /* 页面初始化 */
  9.         *{
  10.             margin: 0;
  11.             padding: 0;
  12.             box-sizing: border-box;
  13.         }
  14.         .box{
  15.             padding: 1em;
  16.             border: 1px solid #000;
  17.         }
  18.         .box img{
  19.             width: 15em;
  20.             /* 图片圆角 */
  21.             border-radius: 0.5em;
  22.             /* 图片向左浮动 */
  23.             float: left;
  24.             /* 添加右边的外边距 */
  25.             margin-right: 1em;
  26.         }
  27.         /* 通过清除浮动来处理图片脱离box的范围，父元素塌陷的问题 */
  28.         /* 附加元素 */
  29.         /* .clear{
  30.             clear: left;
  31.         } */
  32.         /* 伪元素 */
  33.         .box::after{
  34.             content: '';
  35.             display: block;
  36.             /* 清除左右浮动 */
  37.             clear: both;
  38.         }
  39.         /* 创建BFC */
  40.         .box .desc{
  41.             overflow: hidden;
  42.         }
  43.     </style>
  44. </head>
  45. <body>
  46.     <h1>浮动</h1>
  47.     <div class="box">
  48.         <img src="https://img.php.cn/upload/course/000/000/001/5fae4f08a043a576.png" alt="">
  49.         <div class="desc">
  50.             <h2>第十四期_前端开发</h2>
  51.             <p>php中文网第十四期前端开发部分学习目标：1、HTML5+CSS3基础知识与实战； 2、完成网站所有静态页面布局；重点：弹性布局与网格布局；3.JavaScript、jQuery、ES6基础与实战 ；4.Vue.js基础与实战</p>
  52.         </div>
  53.         <!-- <div class="clear"></div> -->
  54.     </div>
  56. </body>
  57. </html>

创建BFC的方式: 任何一个元素添加上以下任何一个属性后就是是一个BFC容器

  1.   1. float: left / right, 不能是 none 
  2.   2. overflow: hidden / auto / scroll , 不能是 visible 
  3.   3. display: inline-block / table-cell
  4.   4. display: flex / inline-flex
  5.   5. display: grid / inline-grid 
  6.   6. position: absolute / fiexed

总结

  1. 浮动仅限于水平方向
  2. 浮动只会影响后面的元素不会影响上级元素
  3. 浮动的元素是脱离文档流的，后面的元素会上移填充它原来的空间
  4. 设置浮动后的任何元素都会具有块级元素效果
  5. 通过清除浮动可以处理父元素塌陷的问题
  6. BFC的方式也可以解决父元素塌陷的问题

定位

position属性

  1. 静态定位static，文档流默认定位
  2. 相对定位relative，相对于该元素在文档流中的原始位置进行偏移
  3. 绝对定位absolute，相对于他的父级元素中离它最近的定位元素的位置发生便宜
  4. 固定定位fixed，是绝对定位的一个特例，始终相对于html定位
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>定位</title>
  7.     <style>
  8.         /* 页面初始化 */
  9.         *{
  10.             margin: 0;
  11.             padding: 0;
  12.             box-sizing: border-box;
  13.         }
  14.         .box{
  15.             position: relative;
  16.         }
  17.         .box1{
  18.             position: absolute;
  19.             height: 2em;
  20.             width: 20em;
  21.             background-color: green;
  22.             top: 20em;
  23.             left: 10em;
  25.         }
  26.         .box2{
  27.             position: absolute;
  28.             height: 20em;
  29.             width: 2em;
  30.             background-color: red;
  31.             top: 11em;
  32.             left: 19em;
  33.         }
  34.         .ring{
  35.             position: relative;
  36.             top: 5em;
  37.             left: 30em;
  38.         }
  39.         .ring :nth-of-type(1){
  40.             width: 15em;
  41.             height: 15em;
  42.             border:1.5em solid #2ba7da;
  43.             border-radius: 50%;
  44.             position: absolute;
  45.         }
  46.         .ring :nth-of-type(2){
  47.             position: absolute;
  48.             width: 15em;
  49.             height: 15em;
  50.             border:1.5em solid #000000;
  51.             border-radius: 50%;
  52.             left: 16em;
  53.         }
  54.         .ring :nth-of-type(3){
  55.             position: absolute;
  56.             width: 15em;
  57.             height: 15em;
  58.             border:1.5em solid #fa0300;
  59.             border-radius: 50%;
  60.             left: 32em;
  61.         }
  62.         .ring :nth-of-type(4){
  63.             position: absolute;
  64.             width: 15em;
  65.             height: 15em;
  66.             border:1.5em solid #fced1e;
  67.             border-radius: 50%;
  68.             left: 8em;
  69.             top: 8em;
  70.         }
  71.         .ring :nth-of-type(5){
  72.             position: absolute;
  73.             width: 15em;
  74.             height: 15em;
  75.             border:1.5em solid #3cbc4d;
  76.             border-radius: 50%;
  77.             left: 24em;
  78.             top: 8em;
  79.         }
  80.     </style>
  81. </head>
  82. <body>
  83.     <div class="box">
  84.         <div class="box1"></div>
  85.         <div class="box2"></div>
  86.     </div>
  87.     <div class="ring">
  88.         <div></div>
  89.         <div></div>
  90.         <div></div>
  91.         <div></div>
  92.         <div></div>
  93.     </div>
  94. </body>
  95. </html>

模态框使用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>模态框</title>
  7.     <style>
  8.         /* 页面初始化 */
  9.         *{
  10.             margin: 0;
  11.             padding: 0;
  12.             box-sizing: border-box;
  13.         }
  14.         /* 页眉 */
  15.         header{
  16.             background-color: #ccc;
  17.             padding: .5em 1em;
  18.             /* BFC 清除浮动 */
  19.             overflow: hidden;
  20.         }
  21.         header h2{
  22.             /* 左浮动 */
  23.             float: left;
  24.         }
  25.         header button {
  26.             /* 右浮动 */
  27.             float: right;
  28.             width: 5em;
  29.             height: 2.5em;
  30.         }
  31.         header button:hover{
  32.             cursor: pointer;
  33.         }
  34.         /* 遮罩层 */
  35.         .modal .modal-backdrop {
  36.             background-color: rgb(0,0,0,0.5);
  37.             position: fixed;
  38.             top:0;
  39.             left:0;
  40.             right:0;
  41.             bottom: 0;
  42.         }
  43.         .modal .modal-body {
  44.             background-color: #fff;
  45.             padding: 1em;
  46.             overflow: hidden;
  47.             max-width: 20em;
  48.             max-height: 20em;
  49.             /* 固定定位 */
  50.             position: fixed;
  51.             /* 水平垂直自动居中 */
  52.             top: 0;
  53.             left: 0;
  54.             right: 0;
  55.             bottom: 0;
  56.             margin: auto;
  57.         }
  58.         .modal form table {
  59.             width: 100%;
  60.         }
  62.         .modal form table caption {
  63.             font-size: 14px;
  64.             font-weight: bold;
  65.             margin-bottom:1.6em;
  66.             margin-right:1em;
  67.         }
  69.         .modal form table td {
  70.             padding: 0.5em 0;
  71.         }
  73.         .modal form table td:first-of-type {
  74.             width:  4em;
  75.         }
  77.         .modal form table input {
  78.             width: 12em;
  79.             height: 2em;
  80.         }
  82.         .modal form table button {
  83.             width:8em;
  84.             height: 2em;
  86.         }
  87.         /* 定位父级 */
  88.         .modal-body {
  89.             position: relative;
  90.         }
  92.         .modal .close {
  93.             position: absolute;
  94.             width: 3em;
  95.             height: 1.5em;
  96.             top: 1.1em;
  97.             left: 1em;
  98.         }
  100.         .modal .close:hover {
  101.             cursor: pointer;
  102.             background-color: red;
  103.             color: white;
  104.         }
  106.         /* 模态框初始化隐藏 */
  107.         .modal {
  108.             display: none;
  109.         }
  111.     </style>
  112. </head>
  113. <body>
  114.     <!-- 页眉 -->
  115.     <header>
  116.         <h2>百万弟弟的博客</h2>
  117.         <button>登录</button>
  118.     </header>
  119.     <!-- 模态框 -->
  120.     <div class="modal">
  121.         <!-- 蒙版盖住后面的内容，使他半透明 -->
  122.         <div class="modal-backdrop"></div>
  123.         <!-- 主体 -->
  124.         <div class="modal-body">
  125.             <button class="close">关闭</button>
  126.             <form action="" method="POST">
  127.                 <table>
  128.                     <caption>用户登录</caption>
  129.                     <tr>
  130.                         <td><label for="username">用户名:</label></td>
  131.                         <td><input type="username" name="username" id="username" /></td>
  132.                     </tr>
  133.                     <tr>
  134.                         <td><label for="password">密&nbsp;&nbsp;&nbsp;&nbsp;码:</label></td>
  135.                         <td><input type="password" name="password" id="password" /></td>
  136.                     </tr>
  137.                     <tr>
  138.                         <td></td>
  139.                         <td><button>登录</button></td>
  140.                     </tr>
  141.                 </table>
  142.             </form>
  143.         </div>
  144.     </div>
  145. </body>
  146. </html>
  147. <script>
  148.     const btn = document.querySelector('header button');
  149. const modal = document.querySelector('.modal');
  150. const close = document.querySelector('.close');
  152. btn.addEventListener('click', setModal, false);
  153. close.addEventListener('click', setModal, false);
  155. function setModal(ev) {
  156.     ev.preventDefault();
  157.     let status = window.getComputedStyle(modal, null).getPropertyValue('display');
  158.     modal.style.display = status === 'none' ? 'block' : 'none';
  159. }
  160. </script>


Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：极好的
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！