![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
Kinghiee
Front-end Developer
展开
-
js 阻止弹出层底部页面滑动
注:代码可能和其他博客相似,毕竟原理都是一样的。一、源码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>弹出层底部不能滑动</title> <原创 2021-01-09 21:07:26 · 1776 阅读 · 8 评论 -
父元素中有transform, perspective 或 filter时,fixed子元素如何呈现
前几天做项目的时候,因为对position:fixed属性有认识不全面,然后就导致做弹出层的时候弹出层不能覆盖整个浏览器可视窗口 。之前认为设置fixed的元素会被移出正常文档流,并不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时,元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。但fixed解释还有一部分就是,当元素祖先的 transform, perspective 或 filter 属性非 none原创 2020-12-06 09:01:33 · 703 阅读 · 0 评论 -
css 边框底部(border-bottom)hover动画
效果图css代码 .type_style { border: 1px solid darkorchid; padding: 1vw 2vw; } .type_style ul{ display: flex; flex-direction: row; flex-wrap: nowrap; justify-cont原创 2020-05-16 14:32:48 · 3149 阅读 · 1 评论 -
vue+less+layui(图标)简单实现轮播
效果图代码VUE代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> <...原创 2020-04-12 14:30:01 · 512 阅读 · 0 评论 -
CSS3 Loading——加载动画
效果图代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> html,body{ padding: 0; ...原创 2020-03-27 20:50:38 · 195 阅读 · 0 评论 -
CSS3鼠标滑过矩形动画按钮svg
效果图原创 2020-03-25 21:11:02 · 484 阅读 · 2 评论 -
css——flex弹性布局之竖向布局和横向布局
竖向布局代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; } ...原创 2020-02-15 23:14:01 · 27029 阅读 · 0 评论 -
CSS——自适应布局之百分比浮动布局和半固定浮动布局
百分比浮动布局代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0; }...原创 2020-02-15 20:28:55 · 1279 阅读 · 0 评论 -
CSS——自适应之竖向距离属性
前提:当按百分比设定一个元素的宽度时,它是相对于父容器的宽度计算的,但是,对于一些表示竖向距离的属性,例如padding-top,padding-bottom,margin-top,margin-bottom等,当按百分比设定它们时,依据的也是父容器的宽度,而不是高度。竖向距离属性代码<!DOCTYPE html><html lang="en"><head&...原创 2020-02-15 19:45:02 · 553 阅读 · 0 评论 -
CSS——自适应布局之absolute全局布局和等高布局
absolute全局布局代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; ...原创 2020-02-15 17:13:46 · 633 阅读 · 0 评论 -
CSS——自适应布局之水平居中和table-cell大小不固定元素的垂直居中
再这篇博客之后,我会连着几篇都会写一些有关css自适应的文章。因为我之前对自适应也不是特别的精通,所以想借助写几篇博客来提高自己在这方面的技术。水平居中代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</t...原创 2020-02-15 12:49:55 · 382 阅读 · 0 评论