PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > 浮动,消除浮动,BFC,定位,固定定位模态框

浮动,消除浮动,BFC,定位,固定定位模态框

豌豆君
豌豆君 原创
2021年01月31日 20:09:17 709浏览

浮动,消除浮动,BFC:创立独立的布局单元 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>浮动,消除浮动,BFC:创立独立的布局单元</title>
  7. <style>
  8. * {
  9. margin: 0;
  10. padding: 0;
  11. box-sizing:border-box;
  12. }
  13. .box {
  14. padding: 1em;
  15. border: 1px solid black;
  16. background-color: lightcyan;
  17. overflow: hidden;
  18. }
  19. .box img {
  20. width: 15em;
  21. border-radius: 0.5em;
  22. /* 图片向左浮动,后面的文本会围绕着它水平排列 行内元素浮动后会提升为块元素 */
  23. float: left;
  24. /* float: right; */
  25. margin-right: 1em;
  26. }
  27. .box .desc a {
  28. width: 10em;
  29. height: 2em;
  30. background-color: lightgreen;
  31. float: left;
  32. }
  33. /* 总结:
  34. 1. 浮动只限于水平方向
  35. 2.浮动元素脱离文档流,后面的元素会上移填充它原来的空间(从右边空间开始填满图片右边后会向下换行开始)
  36. 3.浮动元素不会影响到它前面的元素的布局,只会影响到后面的元素的排列
  37. 4.任何元素(包括行内元素)浮动后,都具备了块级元素的特征 */
  38. /* 父元素计算高度的时候,会忽略内部浮动元素(父级高度的塌陷) */
  39. /* ----------------------------------------------------- */
  40. /* 附加元素 */
  41. /* .box .clear {
  42. clear: both;
  43. } */
  44. /* 伪元素 after*/
  45. /* .box:after{
  46. content: '';
  47. display: block;
  48. clear: both;
  49. } */
  50. /* 我们希望左右二边是完全独立的元素,右边的元素不受左边浮动元素的影响 */
  51. .box .desc {
  52. overflow: hidden;
  53. }
  54. /* 创建BFC的方式,任何一个元素添加上以下任何一个属性后就是一个BFC容器
  55. 1.float: left / right, 不能是 none
  56. 2.overflow: hidden /auto /scroll, 不能是visible
  57. 3.display: inline-block /table-cell
  58. 4.display: flex / inline-flex
  59. 5.display: grid / inline-grid
  60. 6.position: absolute / fiexed */
  61. /* 能不能用overflow:解决父元素的高度塌陷问题? */
  62. /* 在父元素上使用overflow: hidden;转为BFC,使它的布局不受到内部浮动元素的影响 */
  63. /* .box {
  64. overflow: hidden;
  65. } */
  66. /* 浮动的本质是为了解决图文并排显示的问题
  67. 浮动要解决的二个问题:
  68. 1.浮动元素的高度对于它的包含块不可见
  69. 2.浮动元素可以BFC块使它不影到后面的元素的布局 */
  70. /* 注意的是 浮动在新版本可能失效,在老版本才有效。所以以后可能不会再用了 */
  71. </style>
  72. </head>
  73. <body>
  74. <h1>浮动的本质</h1>
  75. <div class="box">
  76. <!-- 浮动的初心是为了解决图片与文本并排显示问题 -->
  77. <img src="https://img.php.cn/upload/course/000/000/001/5fae4f08a043a576.png" alt="">
  78. <div class="desc">
  79. <h2>第十四期_前端开发</h2>
  80. <p>php中文网第十四期前端开发部分学习目标:1、HTML5+CSS3基础知识与实战; 2、完成网站所有静态页面布局;重点:弹性布局与网格布局;3.JavaScript、jQuery、ES6基础与实战 ;4.Vue.js基础与实战</p>
  81. <a href="">了解详情</a>
  82. </div>
  83. <!-- <div class="clear"> </div> -->
  84. </div>
  85. </body>
  86. </html>

定位的种类 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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. /* 定位属性: position */
  9. /* 定位类型:静态定位static,相对定位relative,绝对定位absolute,固定定位:fixed */
  10. /* 1. 静态定位: position: static 默认,也就是文档流定位,元素的显示位置与源码顺序一致; */
  11. /* 2. 相对定位:position: relative; 相对于该元素在文档流中的原始位置进行偏移 */
  12. /* 3.绝对定位:position: absolue; 相对它的祖先中离它最近的“定位元素”的位置发生偏移 */
  13. /* 如果祖先元素中不存在定位元素,它就参考根元素(html)进行定位 */
  14. /* 定位元素:只要这个元素中有position: relative; 或者 pssition: absolute;就称为定位元素 */
  15. /* psition:static;这个不是定位元素 */
  16. /* 而且只有定位元素才有资格充当绝对定位元素的定位祖先元素(定位参与元素,定位父级) */
  17. /* 4. 固定定位:position: fixed; 是绝对定位的一个特例,它始终相对于html定位 */
  18. * {
  19. margin: 0;
  20. padding: 0;
  21. box-sizing:border-box;
  22. }
  23. .box {
  24. width: 15em;
  25. height: 15em;
  26. border: 1px solid black;
  27. margin: 2em auto;
  28. }
  29. .box h2 {
  30. border: 1px solid black;
  31. background-color: lightgreen;
  32. opacity: 0.6;
  33. /* 相对定位 */
  34. position: relative;
  35. top: 1em;
  36. left: 1em;
  37. }
  38. /* 将h2改为绝对定位 */
  39. .box h2{
  40. /* 绝对定位元素会脱离文档流 如果没有设置宽高那就会收缩到内容宽高 */
  41. position: absolute;
  42. }
  43. .box {
  44. /* 转为定位元素,它内部的元素就相对于它进行绝对定位 */
  45. position: relative;
  46. }
  47. .box h2 {
  48. top: 2em;
  49. left: 2em;
  50. top: 0;
  51. left: 0;
  52. right: 0;
  53. bottom: 0;
  54. /* 如果被定位的元素四个方向全部紧贴定位父级的四个边沿,则会充满全部“定位空间” */
  55. width: 8em;
  56. height: 2em;
  57. margin: auto;
  58. }
  59. html {
  60. min-height: 100em;
  61. }
  62. /* 使用固定定位使h2不动 */
  63. .box h2 {
  64. position: fixed;
  65. }
  66. /* 固定定位:在线客服,广告位 */
  67. </style>
  68. </head>
  69. <body>
  70. <div class="box">
  71. <h2>php中文网</h2>
  72. <p>欢迎大家选择php中文网学习web开发技术,第14期内容丰富,持术实用</p>
  73. </div>
  74. </body>
  75. </html>

固定定位实现:模态框 代码

html

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>固定定位实现:模态框</title>
  7. <!-- 导入css -->
  8. <link rel="stylesheet" href="style.css">
  9. </head>
  10. <body>
  11. <!-- 页眉 -->
  12. <header>
  13. <h2>我的博客</h2>
  14. <button>登录</button>
  15. </header>
  16. <!-- 模态框 -->
  17. <div class="modal">
  18. <!-- 蒙板:用来盖住后面的内容,使它半透明 -->
  19. <div class="modal-backdrop"></div>
  20. <!-- 主体 -->
  21. <div class="modal-body">
  22. <button class="close">关闭</button>
  23. <form action="" method="POST">
  24. <table>
  25. <caption>用户登录</caption>
  26. <tr>
  27. <td><label for="email">邮箱:</label></td>
  28. <td><input type="email" name="email" id="email"></td>
  29. </tr>
  30. <tr>
  31. <td><label for="password">密码:</label></td>
  32. <td><input type="password" name="password" id="password"></td>
  33. </tr>
  34. <tr>
  35. <td></td>
  36. <td><button>登录</button></td>
  37. </tr>
  38. </table>
  39. </form>
  40. </div>
  41. </div>
  42. <!-- 导入js -->
  43. <script src="modal.js"></script>
  44. </body>
  45. </html>

css

  1. *{
  2. margin: 0;
  3. padding: 0;
  4. box-sizing: border-box;
  5. }
  6. header {
  7. background-color: #ccc;
  8. padding: 0.5em 2em;
  9. overflow: hidden;
  10. }
  11. header button {
  12. float: right;
  13. width: 10em;
  14. height: 2.5em;
  15. }
  16. header button:hover {
  17. cursor: pointer;
  18. background-color: #fff;
  19. }
  20. /* 模态框 */
  21. /* 蒙板 */
  22. .modal .modal-backdrop{
  23. background-color: rgb(0,0, 0,0.5);
  24. position: fixed;
  25. top: 0;
  26. left: 0;
  27. right: 0;
  28. bottom: 0;
  29. }
  30. .modal .modal-body {
  31. padding: 1em;
  32. /* min-width: 20em; */
  33. border: 2px solid black;
  34. background: linear-gradient(to right,lightcyan,#efefef);
  35. /* 固定定位 */
  36. position: fixed;
  37. top: 5em;
  38. left: 3em;
  39. right: 3em;
  40. width: 30em;
  41. height: 18em;
  42. margin: auto;
  43. }
  44. .modal form table {
  45. width: 80%;
  46. }
  47. .modal form table caption {
  48. font-weight: bold;
  49. margin-bottom: 1em;
  50. }
  51. .modal form table td {
  52. padding: 0.5em;
  53. }
  54. .modal form table td:first-of-type {
  55. width: 5em;
  56. }
  57. .modal form table input {
  58. width: 20em;
  59. height: 2.5em;
  60. }
  61. .modal form table button {
  62. width: 20em;
  63. height: 2.5em;
  64. }
  65. /* 定位父级 */
  66. .modal-body {
  67. position: relative;
  68. }
  69. .modal .close {
  70. position: absolute;
  71. width: 4em;
  72. height: 2em;
  73. top: 1em;
  74. right: 1em;
  75. }
  76. .modal .close:hover {
  77. cursor: pointer;
  78. background-color: red;
  79. color: white;
  80. }
  81. /* 页面初始化时,模态框应该隐藏 */
  82. .modal {
  83. display: none;
  84. }

js

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

总结:

浮动的本质

1浮动只限于水平方向
2.浮动元素脱离文档流,后面的元素会上移填充它原来的空间(从右边空间开始填满图片右边后会向下换行开始)
3.浮动元素不会影响到它前面的元素的布局,只会影响到后面的元素的排列
4.任何元素(包括行内元素)浮动后,都具备了块级元素的特征
5.父元素计算高度的时候,会忽略内部浮动元素(父级高度的塌陷)

消除浮动(父级高度的塌陷所以需要消除浮动)

同级加附加元素消除浮动
同级加伪元素消除浮动

BFC创立独立的布局单元

创建BFC的方式,任何一个元素添加上以下任何一个属性后就是一个BFC容器
1.float: left / right, 不能是 none
2.overflow: hidden /auto /scroll, 不能是visible
3.display: inline-block /table-cell
4.display: flex / inline-flex
5.display: grid / inline-grid
6.position: absolute / fiexed

浮动要解决的二个问题:

1.浮动元素的高度对于它的包含块不可见
2.浮动元素可以BFC块使它不影到后面的元素的布局
3.注意的是 浮动在新版本可能失效,在老版本才有效。所以以后可能不会再用了

定位

  • 定位属性: position
  • 定位类型:静态定位static,相对定位relative,绝对定位absolute,固定定位:fixed
  • 静态定位: position: static 默认,也就是文档流定位,元素的显示位置与源码顺序一致;
  • 相对定位:position: relative; 相对于该元素在文档流中的原始位置进行偏移
  • 绝对定位:position: absolue; 相对它的祖先中离它最近的“定位元素”的位置发生偏移
    如果祖先元素中不存在定位元素,它就参考根元素(html)进行定位
    定位元素:只要这个元素中有position: relative; 或者 pssition: absolute;就称为定位元素
    psition:static;这个不是定位元素
    而且只有定位元素才有资格充当绝对定位元素的定位祖先元素(定位参与元素,定位父级)
  • 固定定位:position: fixed; 是绝对定位的一个特例,它始终相对于html定位
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议