HTML/CSS
理论
- position值有哪些
- static: 普通文档流
- relative: 不脱离文档流,仍然占据文档位置
- absolute:脱离文档流,相对于首个定位的祖先定位
- fixed: 固定定位,不随滚动条滚动
- sticky: 黏性定位,在窗口中时同相对定位,将要滑出窗口时同固定定位
- 隐藏元素的方式有哪些
- visibility: hidden; // 设置为不可见,不可点击,会占位
- opacity: 0; // 设置透明度为0,不可见,元素仍然存在页面中,会占位,可点击
- display: none; // 元素不在页面中,但仍然在文档中。不占位,不可点击
- 标签的hidden属性: 与display: none相同,唯一区别是hidden属性是标签上的,具有语义性
- 实现动画的方案有哪些
- transition: 设置过渡
- animation: 自定义动画
- js
- transition和animation的区别
- transition 用于设置属性的过渡,让一些值在变化的时候能有一个过程,是变相的动画
- animation 直接自定义动画,规定元素在动画过程中各个阶段的状态
- 清除浮动的方法有哪些
- 触发BFC,因为在BFC中,浮动元素也会参与到高度的计算,可以解决父元素的高度坍塌问题
- 根元素或包含根元素的元素
- 浮动元素(元素的 float 不是 none )
- 绝对定位元素(元素的 position 为 absolute 或 fixed )
- 行内块元素(元素的 display 为 inline-block )
- 表格单元格(元素的 display 为 table-cell ,HTML表格单元格默认为该值)
- 表格标题(元素的 display 为 table-caption ,HTML表格标题默认为该值)
- 匿名表格单元格元素(元素的 display 为 table 、 table-row 、 table-row-group 、 table-header-group 、 table-footer-group (分别是HTML table 、 row 、 tbody 、 thead 、 tfoot 的默认属性)或 inline-table )
- overflow 值不为 visible 的块元素
- display 值为 flow-root 的元素
- contain 值为 layout 、 content 或 strict 的元素
- 弹性元素( display 为 flex 或 inline-flex 元素的直接子元素)
- 网格元素( display 为 grid 或 inline-grid 元素的直接子元素)
- 多列容器(元素的 column-count 或 column-width 不为 auto ,包括 column-count 为 1 )
- column-span 为 all 的元素始终会创建一个新的BFC,即使该元素没有包裹在一个多列容器中
- 浮动还会引起非浮动子元素被覆盖
- 在非浮动子元素上添加 clear: both即可,表示不允许两边有浮动元素
- 触发BFC,因为在BFC中,浮动元素也会参与到高度的计算,可以解决父元素的高度坍塌问题
- 隐藏页面中某个元素的方法有哪些
- 占据位置
- visibility: hidden;
- opacity: 0;
- 不占据位置
- display: none;
- 元素的hidden属性
- 利用定位,将元素移出视口,让用户看不见,但是仍然在页面中
- 占据位置
- 如何实现异步加载script脚本
- 在script标签上添加defer
- 异步加载脚本,且推迟到文档加载完成后执行,可以保证依赖关系
- 在script标签上添加async
- 异步加载脚本,加载完成立即执行,执行顺序跟加载速度相关,无法保证依赖关系
- 动态插入script标签
- 当需要时再插入script代码,或者插入script标签引入外部文件
- import动态导入
// 以这种方式调用,将返回一个 promise。 import('/modules/my-module.js') .then((module) => { // Do something with the module. }); // 也可以使用await let module = await import('/modules/my-module.js');
- 在script标签上添加defer
coding
-
实现一个头部导航的吸顶方案有哪些
- 基于sticky定位的吸顶
<style> .nav { height: 200px; background-color: pink; position: sticky; top: 0px; // 表示top为0的时候固定,即吸顶 } .content { height: 2000px; background-color: gray; } .other { height: 200px; background-color: gray; } </style> <body> <div class="other"></div> <div class="nav"></div> <div class="content"></div> </body>
- 基于滚动事件
<style> #nav { height: 200px; background-color: pink; width: 100%; } .content { height: 2000px; background-color: gray; } .other { height: 200px; background-color: gray; } </style> <body style="margin: 0px;"> <div class="other"></div> <div id="nav"></div> <div class="content"></div> <script> function sticky () { let nav = document.getElementById('nav') // 绝对TOP let navTop = nav.getBoundingClientRect().top + document.documentElement.scrollTop; return function () { if (window.scrollY >= navTop) { nav.style.position = "fixed" nav.style.top = "0" } else { nav.style.position = "static" } } } window.addEventListener('scroll', sticky()); </script> </body>
- 基于sticky定位的吸顶
-
三栏布局实现方案
-
html 如下
<div class="box"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div>
-
使用float
div { height: 500px; } .left, .right { background-color: pink; width: 20%; float: left } .center { background-color: gray; width: 60%; float: left; }
-
使用定位方式
.box { position: relative; // 占据文档流,使得不影响其他元素的布局,同时给子元素提供定位参考 } div { position: absolute; height: 500px; } .left, .right { background-color: pink; width: 20%; } .right { right: 0; } .center { background-color: gray; width: 60%; left: 20%; }
-
使用 flex
.box { display: flex; } div { height: 500px; } .left, .right { background-color: pink; flex-grow: 1; } .center { background-color: gray; flex-grow: 3; }
-
使用 grid
.box { display: grid; grid-template-columns: 20% 60% 20%; } div { height: 500px; } .left, .right { background-color: pink; } .center { background-color: gray; }
-
-
画三角形
<style> .triangle { width: 200px; height: 200px; background-color: pink; clip-path: polygon(50% 0, 100% 100%, 0% 100%); } </style> <body style="margin: 0px;"> <div class="triangle"></div> </body>
-
画正方体
<style> .box { height: 200px; position: relative; display: flex; justify-content: center; align-items: center; animation: rotate 2s infinite linear; transform-origin: 50% 100px -50px; /*设置变换中心*/ transform-style: preserve-3d; /*一定要开启3d,不然没有立体效果*/ } @keyframes rotate { from { transform: rotateX(0deg) rotateY(0deg); } to { transform: rotateX(360deg) rotateY(360deg); } } .side { position: absolute; width: 100px; height: 100px; background-color: rgba(33, 33, 33, 0.3); transform-origin: 50px 50px -50px; /*设置变幻中心*/ font-size: 28px; text-align: center; line-height: 100px; color: pink; } .back { transform: rotateY(180deg) } .top { transform: rotateX(90deg) } .bottom { transform: rotateX(-90deg) } .left { transform: rotateY(-90deg) } .right { transform: rotateY(90deg) } </style> <body style="margin: 0px;"> <div class="box"> <div class="front side">前</div> <div class="back side">后</div> <div class="top side">上</div> <div class="bottom side">下</div> <div class="left side">左</div> <div class="right side">右</div> </div> </body>