Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 定位的类型和应用场景，练习模态框
Blogger Information
Blog 26
fans 0
comment 0
visits 15659
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
定位的类型和应用场景，练习模态框
庄周梦蝶
Original
645 people have browsed it

浮动定位

浮动定位一般用于图文的并排显示，浮动浮动后会脱落文档流，后面的补上来，它只会影响后面的布局，任何元素只要浮动了就会变成块级元素；父级盒子计算高度是不会计算它的高度，所以得用BFC布局来解决父级高度塌陷问题

  1. <style>
  2. * {
  3.         margin: 0;
  4.         padding: 0;
  5.         box-sizing: border-box;
  6.       }
  7.       .box {
  8.         padding: 1em;
  9.         border: 1px solid #000;
  10.           /* 用这个来清楚高度塌陷和图文分离问题*/
  11.         overflow: hidden;
  12.       }
  13.       .box img {
  14.         width: 15em;
  15.         border-radius: 0.5em;
  16.         /* 左浮动 */
  17.         float: left;
  18.         margin-right: 1em;
  19.       }
  20.       .box .dese a {
  21.         width: 10em;
  22.         height: 2em;
  23.         background-color: aquamarine;
  24.         float: left;
  25.       }
  26. </style>
  27. <body>
  28.     <h1>浮动的本质</h1>
  29.     <div class="box">
  30.       <img src="https://img.php.cn/upload/course/000/000/001/5fae4f08a043a576.png"
  31.       />
  32.       <div class="desc">
  33.         <h2>第十四期_前端开发</h2>
  34.     <p>
  35. php中文网第十四期前端开发部分学习目标：1、HTML5+CSS3基础知识与实战；2、完成网站所有静态页面布局；重点：弹性布局与网格布局；3.JavaScript、jQuery、ES6基础与实战；4.Vue.js基础与实战
  36.         </p>
  37.         <a href="">了解详情</a>
  38.       </div>
  39.     </div>

静态定位，绝对定位，相对定位，固定定位

定位代码：position，其属性有四个：

  1. static：静态定位，HTML默认定位，文件流的定位方式
  2. relative：相对定位，相对于它原先的位置来定位
  3. absolute：绝对定位，相对与理他最近的相对定位和绝对定位来定位，它上面要是没有就相对于根属性来定位
    4.fixed：固定定位，相对于根属性来定位

绝对定位演示

  1. <style>
  2. .box{
  3. width: 15em;
  4. height: 15em;
  5. margin:2em auto;
  6. border: 1px solid #000000;
  7. }
  8. .box h2 {
  9. border: solid 1px;
  10. background-color: aquamarine;
  11.  /* 相对定位，相对于他原先的位置来定位 */
  12. position: relative;
  13. top: 1em;
  14. left: 1em;
  15.       }
  16. </style>
  17. <boyd>
  18.     <div class="box">
  19.         <h2>这是一个标题</h2>
  20.         <p>这是内容区域这是内容区域这是内容区域这是内容区域这是内容区域这是内容区域这是内容区域这是内容区域这是内容区域这是内容区域这是内容区域</p>
  21.     </div>
  22. </boyd>

绝对定位演示

  1. <style>
  2. .box{
  3. width: 15em;
  4. height: 15em;
  5. margin:2em auto;
  6. border: 1px solid #000000;
  7.  /* 绝对定位需要父级或以上级需要一个是相对定位或者是绝对定位 */
  8. position: relative;
  9. }
  10. .box h2 {
  11. border: solid 1px;
  12. background-color: aquamarine;
  13. /* 离它最近的是父级相对定位，所以相对于它父级来定位 */
  14. position: absolute;
  15. /* 如果被定位的元素全部为0，紧贴父级的边缘，会紧贴沾满父级空间 */
  16. top: 0;
  17. left: 0;
  18. right: 0;
  19. bottom: 0;
  20.  width: 7em;
  21. height: 2em;
  22. /* 给元素个高度和宽度，然后给它的外边距设置成自动，它就水平垂直居中 */
  23.  margin: auto;
  24.       }
  25. </style>
  26. <boyd>
  27.     <div class="box">
  28.         <h2>这是一个标题</h2>
  29.         <p>这是内容区域这是内容区域这是内容区域这是内容区域这是内容区域这是内容区域这是内容区域这是内容区域这是内容区域这是内容区域这是内容区域</p>
  30.     </div>
  31. </boyd>

相对定位演示

  1. <style>
  2. /* 固定定位，和绝对定位一样，不过它是始终定位于html */
  3. .box {
  4. width: 15em;
  5. height: 15em;
  6. border: 1px solid #000000;
  7. margin: 2em auto;
  8. /* 转为定位元素 */
  9. position: relative;
  10. }
  11. html {
  12. min-height: 100em;
  13. }
  14. .box h2 {
  15. border: solid 1px;
  16. position: fixed;
  17. right: 1em;
  18. bottom: 1em;
  19. }
  20. </style>
  21. <body>
  22. <div class="box">
  23. <h2>中文网</h2>
  24. <p>挺好的挺好你好啊挺好的挺好你好啊挺好的挺好你好啊挺好的挺好你好啊</p>
  25. </div>
  26. </body>

模态框

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>Document</title>
  7.     <link rel="stylesheet" href="gtk.css" />
  8.   </head>
  9.   <body>
  10.     <header>
  11.       <h2>我的博客</h2>
  12.       <button>登录</button>
  13.     </header>
  14.     <div class="modal">
  15.       <div class="back"></div>
  16.       <div class="body">
  17.         <div class="close">关闭</div>
  18.         <form action="" method="POST">
  19.           <table>
  20.             <caption>
  21.               用户登录
  22.             </caption>
  23.             <tr>
  24.               <td><label for="email">邮箱：</label></td>
  25.               <td><input type="email" name="email" id="email" /></td>
  26.             </tr>
  27.             <tr>
  28.               <td><label for="password">密码:</label></td>
  29.               <td><input type="password" name="password" id="password" /></td>
  30.             </tr>
  31.             <tr>
  32.               <td></td>
  33.               <td><button>登录</button></td>
  34.             </tr>
  35.           </table>
  36.         </form>
  37.       </div>
  38.     </div>
  39.   </body>
  40. </html>

css部分

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  6. header {
  7.   background-color: aliceblue;
  8.   padding: 0.5em 2em;
  9.   overflow: hidden;
  10. }
  11. header h2 {
  12.   float: left;
  13. }
  14. header button {
  15.   float: right;
  16.   width: 10em;
  17.   height: 2.5em;
  18. }
  19. header button:hover {
  20.   cursor: pointer;
  21.   background-color: #ff;
  22. }
  24. .back {
  25.   background-color: rgb(0, 0, 0, 0.5);
  26.   position: fixed;
  27.   top: 0;
  28.   left: 0;
  29.   right: 0;
  30.   bottom: 0;
  31. }
  32. .body {
  33.   padding: 1em;
  34.   min-width: 20em;
  35.   border: 1px solid;
  36.   background-color: aqua;
  37.   position: fixed;
  38.   top: 5em;
  39.   left: 30em;
  40.   right: 30em;
  41. }
  42. .modal {
  43.   /* 隐藏 */
  44.   /* display: none; */
  45. }

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