![](https://img-blog.csdnimg.cn/20190927151043371.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
html+css
文章平均质量分 72
关于html和css的项目demo,好书推荐以及笔记分享
牛小小小婷~
这个作者很懒,什么都没留下…
展开
-
offsetTop、clientTop、scrollTop等属性详解【概念+详细例子分析】
1、 offsetTop、offsetLeft2、 offsetWidth、offsetHeight3、 offsetX、offsetY1、 clientWidth、clientHeight2、 clientTop、clientLeft3、 clientX、clientY1、 scrollWidth、scrollHeight2、 scrollTop、scrollLeft原创 2022-12-24 11:42:36 · 5791 阅读 · 1 评论 -
Vuex概念+实现原理
(6) 辅助函数4、 Vuex使用方法:二、 Vuex实现原理2-1、 store是怎么注册的?1、 Vuex在vue的生命周期中的初始化钩子前插入一段Vuex初始化代码,给Vue的实例注入一个的属性,这就是为什么我们在Vue的组件中可以通过,访问到Vuex的各种数据和状态2-2、 mutaions是怎么实现的?registerMutation 是对store的mutation的初始化接受4个参数,store为当前Store实例,type为mutation的key,handler为mut原创 2022-07-09 15:51:57 · 4243 阅读 · 0 评论 -
BFC【块级格式化上下文】+IFC【行内格式化上下文】
1、 BFC: 基本概念:BFC是CSS布局的一个概念,是一块独立的渲染区域,里面的元素不会影响到外部的元素2、 父子元素和兄弟元素边距重叠,重叠原则取最大值。空元素的边距重叠是取margin与padding的最大值1、 内部的Box会在垂直方向,从顶部开始一个接着一个放置2、 Box垂直方向的距离由margin(外边距)决定,属于同一个BFC的两个相邻Box的margin会发生重叠3、每个元素的margin Box的左边,与包含块barder Box的左边想接触4、 BFC在页面上是一个隔离的独立原创 2022-07-09 00:16:19 · 136 阅读 · 0 评论 -
盒子塌陷及其解决方法
1、父盒子内部的元素跑到了外部2、 为什么会出现盒子塌陷?1、 盒子大小写死,给每个盒子设定固定的width和height2、 父盒子添加overflow属性3、 父盒子最下方引入清除浮动块4、 after伪元素清除浮动5、 使用before和after双伪元素清除浮动...原创 2022-07-09 00:13:01 · 2341 阅读 · 0 评论 -
文本元素如何居中
1、 特点:2、 例子1、 对于单行文本,我们只需要将文本行高(line-height属性)和所在区域高度(height)设置一致就可以了1-2-2 多行文本垂直居中1、 父级元素高度不固定2、 父级元素高度固定原创 2022-07-09 00:11:45 · 271 阅读 · 0 评论 -
父子边距重合
1、概念: 边界重合是指 两个或多个盒子(可能相邻也可能嵌套)的相邻边界 重合在一起而形成一个单一边界1、预期效果:实际效果:2、 父元素的高度不是110px,而是100px,在这里发生了高度塌陷3、 产生原因: 是如果块元素的margin-top与它的第一个子元素的margin-top之间没有border、padding、inlinecontent、clearance来分隔,或者块元素的 margin-bottom 与它的最后一个子元素的 margin-bottom 之间没有border、p原创 2022-07-09 00:07:56 · 298 阅读 · 0 评论 -
未知高度元素水平居中、垂直居中的实现方式
一、 未知高度元素水平居中、垂直居中的实现方式1-1 绝对定位 transform: translate(-50%,-50%)1-2 css3的flex布局二、 实现图片垂直居中2-1 flex实现图片垂直居中2-2 绝对定位实现垂直居中原创 2022-07-07 17:51:38 · 213 阅读 · 0 评论 -
设置斑马线表格
制作斑马线表格原创 2022-07-07 17:47:04 · 1124 阅读 · 0 评论 -
【字体多行显示省略号】及【对话框】实现-----案例详解,可执行代码
一、 字体多行显示省略号<style> .p3 { margin-top: 10px; color: rgb(129, 128, 128); -webkit-line-clamp: 2; /*【此处控制显示行数】*/ -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; word-break原创 2022-02-06 17:36:47 · 643 阅读 · 0 评论 -
“CSS精灵图”详解 及 案例应用
一、 精灵图简介1、 什么是精灵图?就是将几张较小的图片放在一张大图上,通过background-position调整位置进行显示也可以叫做雪碧技术 也叫做css sprite2.、 使用精灵图的好处 :将多张较小的图片放在一张大图上,减少浏览器对服务器的请求,从而减轻服务器的压力。3、 精灵图的使用如果我们需要的一张图片在精灵图上,必须要了解这个图片的大小以及在精灵图上的位置在页面上将这个图片显示出来,在显示的时候一定要注意我们容器的大小一定要和这个图标的大小一样将精灵图设置原创 2022-02-06 17:15:08 · 2133 阅读 · 0 评论 -
超炫酷 背景阴影 效果【秒有层次感】【图片hover样式】
一、 效果展示二、 HTML文件<div class="listItem"> <div class="itemUp"></div> </div>三、 CSS文件.listItem { width: 18%; padding: 20px 2% 30px 0; margin-right: -22px; .itemUp { display: block; pos原创 2022-02-06 15:50:06 · 267 阅读 · 0 评论 -
【前端实现页面总结二】--JS轮播图(原生+jQuery+vue)实现【均可运行】
写在前面 :原生JS实现自动播放+手动播放展示图片的div块无需粘来粘去,通过拼接字符串 将 数组 中的元素上传到页面文章目录一、原生JS实现一、原生JS实现1、 效果展示2、 代码展示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge.原创 2021-11-16 20:52:35 · 1178 阅读 · 0 评论 -
【纯前端实现页面总结一】-- 导航栏布局以及点击展示不同界面+iframe标签引入的页面自适应高度(在html中引入另一个html文件)【已解决】
说明:jQuery实现, 点击导航栏变换iframe标签引入的页面默认展示首页,css样式默认应用于“首页”导航栏点击切换页面,并且导航栏样式改变一、 页面切换效果如下:小声逼逼:关于录屏软件的推荐:这篇博客里面有的哦,没有水印哒~二、 html文件中的内容如下(代码可粘贴运行):homePage.html文件中放置页面主要内容,头部,尾部,导航栏…首页.html放置首页的展示内容展示一.html放置展示一的展示内容其余同理1、 homePage.html文件(内含cs.原创 2021-10-23 22:54:36 · 5249 阅读 · 3 评论