Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS进阶响应式布局浮动定位知识
Blogger Information
Blog 16
fans 0
comment 0
visits 13939
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
CSS进阶响应式布局浮动定位知识
wen。
Original
1160 people have browsed it

响应式布局

响应式布局等于流动网格布局，这里响应式布局分为四种；第一种浮动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 效果图如下
模态框效果图

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