前端HTML+CSS
文章平均质量分 55
HTML与CSS,HTML5与CSS3相关知识
Kevin11Yao
这个作者很懒,什么都没留下…
展开
-
BFC知识点
BFC 定义BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。BFC的布局规则内部的Box会在垂直方向,一个接一个地放置。Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。每个盒子(块盒与行盒)的margin box的左边,与包含块borderbox的左边相接触转载 2021-04-16 18:45:23 · 95 阅读 · 0 评论 -
URL改变,页面不发生刷新的两种方式
URL改变,页面不发生刷新的两种方式需求:网页的URL虽然改变了,但浏览器不会重新请求网络资源。URL改变,页面不发生刷新的两种方式①url的hash方法②HTML5的history一、URL的hashURL的hash也就是锚点(#),本质上是改变window.location的href属性。我们可以通过直接赋值location.hash来改变href,但是页面不发生刷新。但是页面并没有发生请求。二、HTML5的history模式:pushState...原创 2021-03-17 09:38:35 · 3879 阅读 · 0 评论 -
CSS实现垂直水平居中的三种方法
CSS实现垂直水平居中的三种方法方法一:确定容器的宽高 宽500 高300的 利用外边距 margin/*确定容器的宽高宽500高300的层设置层的外边距*/div{position: absolute;/*绝对定位*/width: 500px;height: 300px;top: 50%;left: 50%;margin: -150px 0 0 -250px;/*外边距为自身宽高的一半*/background-color: pink;/*方便看效果*/}实例:<body&原创 2021-03-12 18:15:35 · 224 阅读 · 0 评论 -
Iconfont使用方法的详细教程,html怎样引入iconfont(对应https://www.iconfont.cn/日期2020.9月)
问题描述由于问题描述篇幅较多,想要直接得到操作方法的同学可以直接跳到下面的标题——“2020-09版本操作”。在练习引入字体图标的过程中,由于 iconmoon字库是外网,因此访问速度较慢。我就用国内的iconfont阿里巴巴图库就进行练习,但是在引入过程中并不顺利,在网上查阅有关的操作方法由于版本过老,实际操作有了部分改变,因此在这里自己总结出来了一套操作,希望能帮助各位初学者学习字体图标的引入过程。根据打开demo_index.html后的官方操作方法,我的图标并没有很好地显示(可能是由于本人太原创 2020-09-13 16:33:28 · 2623 阅读 · 0 评论 -
解决图片底部默认空白缝隙问题
问题描述在做一个背景图片更改效果的时候,发现图片在加了边框之后,在图片的下面会出现一个空表的缝隙如下图所示,在四个小图片下面会有一个缝隙问题分析这是由于形如图片的行内块元素的默认垂直对齐方式是基线对齐(baseline),给文字预留了部分显示空间(即被文字占用)。说到垂直对齐方式,就要对四种不同的准线进行描述。如下图所示,基线和底线之间还留有部分距离。由于默认的对齐情况是按照英文的基线对齐,在不对垂直对齐方式进行调整的情况下,由于是基线对齐,图片的下面就会产生空白缝隙的情况。解决方案原创 2020-09-11 16:52:10 · 1079 阅读 · 0 评论