search

博客列表 >CSS进阶响应式布局浮动定位知识

CSS进阶响应式布局浮动定位知识

wen。
wen。原创
2021年01月17日 16:22:031159浏览

响应式布局

响应式布局等于流动网格布局，这里响应式布局分为四种；第一种浮动float布局（传统布局），第二种定位position布局，第三种弹性flex盒子，还有最后一种网格grid布局；后两种会在接下来的文章中介绍，本章主要讲定位布局。

1.浮动布局float

解释 说明
本质 为了解决图文并茂显示问题
核心 浮动初心是为了解决图片与文本并排显示的问题
原理 浮动元素脱离了文档流，后面的元素会上移填充它原来的空间
特征 任何元素（包括行内元素）浮动后，都具备了块级元素的特征

注意：浮动元素不会影响到它前面的元素的布局，只会影响到后面的元素的排列

1.1 浮动问题

  • 父元素计算高度的时候，会忽略内部的浮动元素（父级高度塌陷）
    • 解决方式是使用clear:both清除浮动
  • 如何解决右边元素文本自动延伸到左边浮动元素的下面
    • BFC：创建独立的布局单元
    • 创建BFC的方式: 任何一个元素添加上以下任何一个属性后就是一个BFC容器
符合BFC法则 备注
float: left / right 不能是 none
overflow: hidden / auto / scroll 不能是 visible
display: inline-block / table-cell 无
display: flex / inline-flex 无
display: grid / inline-grid 无
position: absolute / fiexed 无
  • 如何不使用清除浮动来解决父级高度塌陷和左右浮动元素独立问题
    • 在父类元素使用overflow:hidden转为BFC

2.定位布局position

2.1 定位类型

类型 说明
static 默认，也就是文档流定位，元素的位置和源码顺序一样
relative 相对于该元素在文档流中的原始位置进行偏移
absolute 相对于它的定位祖先元素中离它最近的”定位元素”的位置发生偏移
fiex 它始终相对于html进行定位

何为”定位元素”呢？

定位元素：只要这个元素中有position:relavite或者position:absolute就称为定位元素；

2.2 使用条件

  • 相对定位
    • 父级元素转为定位元素，它内部的元素就相对于它进行绝对定位
  • 绝对定位
    • 绝对定位元素会脱离文档流
    • 如果祖先元素中不存在定位元素，它就参考根元素（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.         .box{
  9.             width: 15em;
  10.             height: 15em;
  11.             background-color: lawngreen;
  12.             /* 转为定位元素,它内部的元素就相对于它进行绝对定位 */
  13.             position: relative;
  14.         }
  16.         .box .sub{
  17.             width: 5em;
  18.             height: 5em;
  19.             left: 0;
  20.             right: 0;
  21.             top: 0;
  22.             bottom: 0;
  23.             /* 使用绝对定位的完全定位空间来快速实现水平和垂直居中 */
  24.             margin: auto;
  25.             background-color: yellow;
  26.             position: absolute;
  27.         }
  28.     </style>
  29. </head>
  30. <body>
  31.     <div class="box">
  32.         <div class="sub"></div>
  33.     </div>
  34. </body>
  35. </html>

效果图如下
定位元素效果图

3.模态框实战

接下来我们运用固定定位来实现模态框效果

3.1 css代码如下

  1.         * {
  2.             margin: 0;
  3.             padding: 0;
  4.             box-sizing: border-box;
  5.         }
  7.         header {
  8.             padding: 1em 2em;
  9.             background-color: #ccc;
  10.             overflow: hidden;
  11.         }
  13.         header h2 {
  14.             float: left;
  15.         }
  17.         header button {
  18.             width: 10em;
  19.             height: 2.5em;
  20.             float: right;
  21.         }
  23.         .modal {
  24.             width: 5em;
  25.             height: 5em;
  26.             display: none;
  27.         }
  29.         .modal .modal-backsorp {
  30.             /* 蒙版 */
  31.             background-color: rgba(0, 0, 0, 0.8);
  32.             left: 0;
  33.             top: 0;
  34.             right: 0;
  35.             bottom: 0;
  36.             position: fixed;
  37.         }
  39.         .modal .modal-body {
  40.             left: 30em;
  41.             top: 5em;
  42.             right: 30em;
  43.             min-height: 15em;
  44.             /* 固定定位 */
  45.             position: fixed;
  46.             background-color: #fff;
  47.         }
  49.         .modal .modal-body .pane-header {
  50.             width: 100%;
  51.             height: 64px;
  52.             background-color: orangered;
  53.             border-radius: 5px 5px 0 0;
  54.             line-height: 64px;
  55.             color: white;
  56.             text-align: center;
  57.             margin-bottom: 10px;
  58.             cursor: move;
  59.             padding: 0em 2em 0em 2em;
  60.         }
  62.         .modal .modal-body .pane-header h2 {
  63.             float: left;
  64.             padding-left: 6em;
  65.         }
  67.         .modal .modal-body .pane-header button {
  68.             float: right;
  69.             padding: 0.3em;
  70.             width: 5em;
  71.             margin-top: 1.2em;
  72.         }
  74.         .modal .modal-body .pane-content {
  75.             padding: 2em;
  76.         }
  78.         .modal .modal-body .pane-content .userpwd {
  79.             margin-bottom: 15px;
  80.             height: 40px;
  81.             position: relative;
  82.         }
  84.         .modal .modal-body .pane-content .userpwd img {
  85.             position: absolute;
  86.             top: 7px;
  87.             left: 6px;
  88.         }
  90.         .modal .modal-body .pane-content .userpwd input {
  91.             width: 100%;
  92.             height: 100%;
  93.             box-sizing: border-box;
  94.             padding-left: 38px;
  95.             border-radius: 5px;
  96.             border: 1px solid #dddddd;
  97.         }
  99.         input[type="text"],
  100.         input[type="password"] {
  101.             border-width: 1px;
  102.             border-style: solid;
  103.             border-color: #707070 #CECECE #CECECE #707070;
  104.             padding: 2px 4px;
  105.             height: 18px;
  106.             line-height: 18px;
  107.             vertical-align: middle;
  108.         }
  110.         .modal .modal-body .login-btn {
  111.             margin: 15px 0;
  112.             width: 100%;
  113.             height: 38px;
  114.             background-color: orangered;
  115.             border: 0;
  116.             font-size: 20px;
  117.             color: white;
  118.             border-radius: 5px;
  119.             cursor: pointer;
  120.         }

3.2 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.     <link src="modal.css">
  8. </head>
  9. <body>
  10.     <!-- 页眉 -->
  11.     <header>
  12.         <h2>我的博客</h2>
  13.         <button>登录</button>
  14.     </header>
  15.     <!-- 模态框 -->
  16.     <div class="modal">
  17.         <!-- 蒙板：用来盖住后面的内容，使它半透明状态 -->
  18.         <div class="modal-backsorp"></div>
  19.         <!-- 主体 -->
  20.         <div class="modal-body">
  21.             <div class="pane-header">
  22.                 <h2>登陆页面模板</h2>
  23.                 <button class="close">关闭</button>
  24.             </div>
  25.             <div class="pane-content">
  26.                 <form name="form1" method="post" action="login.php">
  27.                     <div class="userpwd">
  28.                         <img src="images/icon_people.png">
  29.                         <input type="text" name="userid" placeholder="请输入用户名/手机号">
  30.                     </div>
  31.                     <div class="userpwd">
  32.                         <img src="images/icon_password.png">
  33.                         <input type="password" name="pwd" placeholder="请输入密码">
  34.                     </div>
  35.                     <dt>&nbsp;</dt>
  36.                     <button type="submit" name="sm1" class="login-btn" onclick="this.form.submit();">登录</button>
  37.                 </form>
  38.             </div>
  39.         </div>
  40.     </div>
  41. </body>
  42. <script src="modal.js"></script>
  43. </html>

3.3 js代码如下

  1. const btn = document.querySelector("header button");
  2. const modal = document.querySelector('.modal');
  3. const close = document.querySelector('.close');
  5. btn.addEventListener('click', setModal, false);
  6. close.addEventListener('click', setModal, false);
  8. function setModal(ev){
  9. ev.preventDefault();
  10. let status = window.getComputedStyle(modal,null).getPropertyValue('display');
  11. modal.style.display = status == 'none' ? 'block' : 'none';
  12. }

3.4 效果图如下
模态框效果图

上一条：JS对象与流程控制的理解下一条：Vue自学：全局组件和局部组件
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多