收藏
天蓬老师批改状态：合格
老师批语：
仅限于水平方向脱离文档流不会影响前边布局*任何元素浮动后，都具备了块级元素的属性
浮动的本质是为了解决图文并排的问题
浮动元素的高度对于包含块不可见
浮动元素可以BFC块，使其不影响后边的布局
static：静态定位，默认，跟元素文档流一样；relative：相对定位，相对于在文档流中的原始位置进行偏移；absolute：绝对定位，相对于其他最近定位元素的位置进行偏移；
模态框定位案例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>模态框</title><style>.box{position:absolute;top:0;width:100%;height:100%;background-color:black;opacity:.6;display:none;}.content{position:absolute;left:50%;top:50%;width:200px;height:200px;text-align: center;line-height:200px;background-color:white;transform: translate(-50%,-50%);z-index: 999;}</style></head><body><button>点击显示模态框</button><div class="box"><div class="content">这是模态框内容点击消失</div></div><script>let btn = document.querySelector('button');let box = document.querySelector('.box');btn.onclick = function(){box.style.display = 'block';}box.addEventListener('click',function(){box.style.display = 'none';})</script></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
