search

博客列表 >《浮动定位的理解应用》20201221

《浮动定位的理解应用》20201221

杨凡的博客
杨凡的博客原创
2020年12月22日 13:50:371067浏览

浮动

  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>


上一条：网页布局盒子(box)相关属性和盒子居中下一条：CSS中box-sizing用法实例,常用元素垂直左右居中方式演示
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多