![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
文章平均质量分 74
Three_ST
学习者
展开
-
HTML5 实现页面滚动
最近项目中需要使用页面滚动,其实页面滚动相对来说挺简单的,但是在实际的使用过程中,尝试了几种不同的方法,总结一下:一、利用html 标签二、ScrollToView原创 2019-04-01 21:44:35 · 21503 阅读 · 2 评论 -
前端基础知识之SVG&Canvas之间的区别与简单应用
::: tipcanvas常用APIfillRect(x,y,width,height)实心矩形strokeRect(x,y,width,height)空心矩形fillText(“Hello world”,200,200);实心文字strokeText(“Hello world”,200,300)空心文字canvas和svg的区别svg绘制出来的图片有独立dom节点,可以绑定事件,是矢量图,放大图片不会有锯齿。canvas绘制出来的图片是一个画布,等于就是一张图,放大会产生锯齿。:原创 2021-04-29 22:26:33 · 716 阅读 · 0 评论 -
前端基础知识之清除浮动的几种方式
清除浮动现象:不清除浮动会发生高度塌陷:浮动元素父元素高度自适应(父元素不写高度时,子元素写了浮动后,父元素会发生高度塌陷)clear清除浮动(添加空div法)在浮动元素下方添加空div,并给该元素写css样式:{clear:both;height:0;overflow:hidden;}给浮动元素父级设置高度;<style type="text/css"> .div1{background:#000080;border:1px solid red;/*解决代码*/heigh原创 2021-04-25 21:33:42 · 600 阅读 · 0 评论 -
前端基础知识之水平居中/垂直居中/水平垂直居中
本文来自于个人前端基础知识积累项目《菜鸟进阶》水平居中行内元素使用text-align:center 实现行内元素水平居中块级元素,设置margin:0 auto;.parent { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: 0 auto;}flex布局 display:flex; justify-content:center;//原创 2020-12-26 22:38:01 · 217 阅读 · 0 评论 -
web前端基础知识之浏览器内核与页面渲染流程
浏览器内核浏览器/RunTime|:内核(渲染引擎)|JavaScript 引擎–:|:–|:–Chrome |Blink(28~) Webkit(Chrome 27) |V8FireFox |Gecko | SpiderMonkeySafari |Webkit| JavaScriptCoreEdge |EdgeHTML |Chakra(for JavaScript)IE |Trident |Chakra(for JScript)PhantomJS |Webkit |JavaScriptCo原创 2020-12-23 21:13:33 · 142 阅读 · 0 评论 -
前端基础知识之浏览器重绘与回流
回流与重绘回流: 部分渲染树(或者整个渲染树)需要重新分析并且节点尺寸需要重新计算,表现为重新生成布局,重新排列元素重绘: 由于节点的几何属性发生改变或者由于样式发生改变,例如改变元素背景色时,屏幕上的部分内容需要更新,表现为某些元素的外观被改变单单改变元素的外观,肯定不会引起网页重新生成布局,但当浏览器完成回流之后,将会重新绘制受到此次回流影响的部分回流和重绘代价是高昂的,它们会破坏用户体验,并且让 UI 展示非常迟缓,而相比之下回流的性能影响更大,在两者无法避免的情况下,一般我们宁可选择代价原创 2020-12-17 21:16:32 · 169 阅读 · 0 评论 -
前端基础知识学习之-CSS Flex布局
FlexCSS 弹性盒子布局是 CSS 的模块之一,定义了一种针对用户界面设计而优化的 CSS 盒子模型。在弹性布局模型中,弹性容器的子元素可以在任何方向上排布,也可以“弹性伸缩”其尺寸,既可以增加尺寸以填满未使用的空间,也可以收缩尺寸以避免父元素溢出。子元素的水平对齐和垂直对齐都能很方便的进行操控。通过嵌套这些框(水平框在垂直框内,或垂直框在水平框内)可以在两个维度上构建布局。基本概念轴在 flex 布局中有个主轴和交叉轴的概念 flex-direction* row -->* row-转载 2020-09-11 19:34:17 · 336 阅读 · 0 评论 -
前端基础知识学习-flex布局(一)基本概念
FlexCSS 弹性盒子布局是 CSS 的模块之一,定义了一种针对用户界面设计而优化的 CSS 盒子模型。在弹性布局模型中,弹性容器的子元素可以在任何方向上排布,也可以“弹性伸缩”其尺寸,既可以增加尺寸以填满未使用的空间,也可以收缩尺寸以避免父元素溢出。子元素的水平对齐和垂直对齐都能很方便的进行操控。通过嵌套这些框(水平框在垂直框内,或垂直框在水平框内)可以在两个维度上构建布局。基本概念轴在 flex 布局中有个主轴和交叉轴的概念 flex-direction* row -->* row-转载 2020-08-08 17:37:59 · 328 阅读 · 0 评论 -
前端基础-隐藏HTML页面滚动条的方法
隐藏滚动条第三方库在以前使用jQuery的时候有一个第三方工具 JQuery-nicescroll,引入设置就能影藏滚动条,同时还可以实现滚动现在也有了angular版本下的nicescrollJavaScript// 禁止鼠标滑过滚动条滚动document.body.onmousewheel = function () {return false;}// 恢复鼠标滑过滚动条滚动document.body.onmousewheel = function () {return true;}原创 2020-07-25 17:12:19 · 1235 阅读 · 0 评论 -
JavaScript高级程序设计-DOM相关知识
DOMDOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API(应用程序编程接口)。DOM 脱胎于Netscape 及微软公司创始的 DHTML(动态 HTML),但现在它已经成为表现和操作页面标记的真正的跨平台、语言中立的方式。10.1 节点层次DOM 可以将任何 HTML 或 XML 文档描绘成一个由多层节点构成的结构。<html> <head...原创 2019-12-31 13:27:56 · 139 阅读 · 2 评论 -
Web前端基础知识之 CSS3 特性合集-shadow&animation&transition
CSS3是在CSS2的基础上做了升级,最近在学习一下前端的基础知识,因此对学习过程做个一个记录1.1由于CSS3在不同的浏览器中效果不一致(表示该CSS属性或者规则尚未成为W3C标准的一部分,是浏览器的私有属性)需要添加特定的浏览器前缀 前缀 || 浏览器-webkit | chrome /safari-moz | firefox-ms | IE-o ...原创 2019-07-29 11:04:32 · 712 阅读 · 0 评论 -
前端基础知识学习-CSS-position
对于目前前端来说,学习的知识较少,前端的知识面很宽广,因为针对定位属性做一个学习position的定位方式:static:默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)relative:生成相对定位的元素,相对于其正常位置进行定位。因此,"left:20" 会向元素的 LEFT 位置添加 20 像...原创 2019-10-14 23:42:28 · 162 阅读 · 0 评论