自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

余光的博客

如果你现在不努力,怎么对得起你的背井离乡?

  • 博客(6)
  • 资源 (1)
  • 收藏
  • 关注

原创 CSS基础:简述CSS盒模型

盒模型问题:简述 CSS 盒模型一、块级盒子(Block box) 和 内联盒子(Inline box)在 CSS 中我们广泛地使用两种“盒子” —— 块级盒子 (block box) 和 内联盒子 (inline box)。这两种盒子会在页面流(page flow)和元素之间的关系方面表现出不同的行为,我们这里不细分析如果转换他们的行为,仅做了解。1.1 块级(block)盒子会表现出以下行为:盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间,在绝大数情况下意味着盒子会和父容器一样

2021-02-22 18:51:23 14799 5

原创 CSS基础:谈谈选择器的权重和优先级

你必须懂的css样式权重和优先级尝试给这篇文章前置一个问题;选择器的权重与优先级有什么关系?一、什么是权重?先来看下面这样两段代码,大家分析class="c"的标签内文字的颜色是?<style>.class-a .b .c { color: red;}.class-a .c { color: blue;}</style><div class="class-a" id="id-a"> <div class="b">

2021-02-21 16:24:14 15427 11

原创 CSS基础:CSS的上下文之层叠上下文

CSS的上下文之层叠上下文看到层叠,大家一定会联想到定位元素会是的元素之间发生“遮挡”,而z-index可以改变他们之间的遮挡优先级,但这仅仅是层叠这一概念中很小的一部分。本文就来聊一聊css中的层叠上下文到底是如何给元素规定叠加顺序的。一、什么是层叠上下文?层叠上下文,英文称作”stacking context”. 我们假定用户正面向(浏览器)视窗或网页,而 HTML 元素沿着其相对于用户的一条虚构的 z 轴排开,层叠上下文就是对这些 HTML 元素的一个三维构想。众 HTML 元素基于其元素

2021-02-28 13:35:46 15940 9

原创 CSS基础:CSS的上下文之BFC

CSS的上下文之BFC看到这个名词,可能会有些陌生,但其实 上下文 = 区域,如果这么理解的话就会有行级上下文、块级上下文、flex上下文等等有一定排列规则的区域,我们今天只聊一聊 块级格式化上下文(BFC)一、什么是BFC?BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”。是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。下列方式会创建块格式化上下文(列举常见的方式):根元素(<html

2021-02-25 18:24:07 12905

原创 CSS基础:浅谈position

浅谈position定位(position)允许您从正常的文档流布局中取出元素,并使它们具有不同的行为,例如放在另一个元素的上面,或者始终保持在浏览器视窗内的同一位置—— MDN一、文档流什么是文档流?"文档流"是在对布局进行任何更改之前,在页面上显示"块"和"内联"元素的方式。通常是从上至下,从左到右的形式。这个"流"本质上是一系列的事物,它们都在你的布局中一起工作,并且互相了解。 一旦某部分脱离了"流",它就会独立地工作还记得我们提到了盒模型(块级元素和行级元素),这些单个的元素是如何组

2021-02-23 18:40:51 15398 7

原创 JavaScript专题之代码简洁

JavaScript专题之代码简洁本年度第二篇文章,进了新项目组要了解的东西太多,之后我会保证定时输出有质量的文章这篇文章主要是想和大家一起学习一下,工作之中有哪些让我们眼前一亮的JavaScript代码简洁小技巧。注意:下面的代码对比没有绝对的正确和错误,有些写法的使用场景会比较单一,根据大家的习惯和喜好判断即可,如果有更好或不同意见欢迎留言交流哦~1. 短路操作:当我们遇到这样的情况的时候,你会是const res1 = item.a ? item.a : item.b // 看起来很是

2021-02-08 11:59:35 592 1

淘宝首屏静态页面(HTML+CSS)布局练习.zip

适合刚接触前端基础知识的同学,初步了解了HTML+CSS后,可以尝试练习类似项目;该项目主要为HTML+CSS实现,不涉及交互、逻辑功能,旨在提高样式布局能力

2020-05-07

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除