1221 浮动与定位

浮动练习

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>浮动</title>
 <style>
   /* 清除空气*/
   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }
   .box {
     padding: 0.5em;
     border: 1px solid red;
     float: left;
   }
   .box img {
     float: left;
     margin-right: 0.5em;
     border-radius: 0.2em;
     width: 300px;
   }
   .box .desc {
     overflow: hidden;
   }
   /*附加元素 */
   /* .box .plus {
     clear: both;
   } */
   /*伪元素*/
   /* .box::after {
     content: "";
     display: block;
     clear: both;
   } */
 </style>
</head>
<body>
 <!-- 
 一父两子
 1.图片浮动在左
 2.图片高度被父元素察觉到:
     父元素尾部附加元素或伪元素clear;
     父元素自己bfc   overflow:hidden;
 3.描述区相对独立,文字不插脚:自己bfc  overflow
 -->
 <div class="box">
   <img
     src="https://img.php.cn/upload/course/000/000/001/5fae4f08a043a576.png"
     alt=""
   />
   <div class="desc">
     <h2>第十四期_前端开发</h2>
     <p>
       php中文网第十四期前端开发部分学习目标：1、HTML5+CSS3基础知识与实战；
       2、完成网站所有静态页面布局；重点：弹性布局与网格布局；3.JavaScript、jQuery、ES6基础与实战
       ；4.Vue.js基础与实战
     </p>
     <a href="php.cn">练一练</a>
   </div>
   <!-- <div class="plus"></div> -->
 </div>
</body>
</html>

定位练习

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>定位</title>
 <style>
   /*初始化*/
   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }
   /*元素的定位默认为position:static,跟随文档流*/
   .box {
     border: 1px solid black;
     width: 20em;
     height: 14em;
   }
   /*1.在不破坏文档流的情况下,相对文档中的原始位置产生位移,后续元素保持原来的位置 */
   .box h2 {
     border: 1px solid red;
     background-color: antiquewhite;
     position: relative;
     top: 2em;
     left: 3em;
   }
   /*2.把当前元素从文档流中拎出来,相对于修改了定位属性的父祖辈元素(若无,则html),单独放置*/
   .box {
     position: relative;
   }
   .box h2 {
     position: absolute;
   }
   /*3.在父祖辈元素中直接以html为基础进行定位*/
   .box h2 {
     position: fixed;
   }
   /*上下左右都为0,撑满定位空间,然后一直悬在html中央*/
   .box h2 {
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     width: 7em;
     height: 3em;
     margin: auto;
   }
 </style>
</head>
<body>
 <div class="box">
   <h2>php中文网</h2>
   <p>php中文网第14期课程现在学到了第1221部分,进度不好控制lol</p>
 </div>
</body>
</html>

模态框

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>模态框</title>
 <style>
   /* 初始化 */
   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }
   /* 页眉 */
   header {
     background-color: aliceblue;
     padding: 0.5em;
     display: flow-root;
   }
   header h2 {
     float: left;
   }
   header button {
     float: right;
     width: 4em;
     height: 2em;
   }
   /* 蒙板 */
   .modal-mask {
     background: rgba(0, 0, 0, 0.3);
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
   }
   /* 表单 */
   .modal-login {
     padding: 0.5em;
     background: linear-gradient(red, blue);
     border: 1px solid black;
     min-width: 10em;
     /* min-width: 8em; */
     /* min-height: 3em; */
     position: fixed;
     top: 5em;
     left: 5em;
     right: 5em;
   }
   /* 页面载入时模态框默认隐藏*/
   .modal {
     /* display: none; */
   }
 </style>
</head>
<body>
 <!-- 页眉 -->
 <header>
   <h2>一个博客</h2>
   <button>登录</button>
 </header>
 <!--模态框-->
 <div class="modal">
   <!--蒙板-->
   <div class="modal-mask"></div>
   <!--登录框-->
   <div class="modal-login">
     <button class="close">关闭</button>
     <form action="" method="POST">
       <table>
         <caption>
           用户登录
         </caption>
         <tr>
           <td><label for="email">邮箱:</label></td>
           <td><input type="email" name="email" id="email" /></td>
         </tr>
         <tr>
           <td><label for="password">密码:</label></td>
           <td><input type="password" name="password" id="password" /></td>
         </tr>
         <tr>
           <td></td>
           <td><button>登录</button></td>
         </tr>
       </table>
     </form>
   </div>
 </div>
</body>
</html>

相关文章