自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

我不是水哥

女粉丝很多的小哥哥

  • 博客(9)
  • 收藏
  • 关注

原创 CSS进阶(10)—— 深入理解BFC结界

  本章继续来探讨CSS世界的流破坏和流保护,延续的是上一章float的内容,在上一章中我们已经知道了clear属性并不是真正的清除浮动,本章将继续深入探索,引入BFC结界的概念。如果对浮动和清浮动属性还不太了解的同学强烈推荐先观看上一章的内容——那些年骗过你的float和“清浮动”。下面正式开始本章的内容。 1.CSS的结界——BFC  BFC是block formatting co...

2018-11-30 15:36:46 710

原创 CSS进阶(9)—— 那些年骗过你的float和“清浮动”

  如果你被这个标题骗进来,那恭喜你,你获得了一个重新认识float的机会,这句话不仅是我想对前端程序猿说的,也是我想对自己说的。在使用flex布局之前,float一度是我最最喜欢用的布局方式,在没有接触CSS world之前,我甚至认为float才是最符合"流"特质的属性,我自己将float属性定义成CSS的“果冻属性”,可能是因为float元素会像一颗果冻一样在图文间滑来滑去。事实上,我们都知...

2018-11-29 16:36:55 835 1

原创 CSS进阶(8)—— 内联元素的掌管者line-height和vertical-align(下)

  上一章主要讲了line-height相关的知识,本章就来聊聊同样无处不在的vertical-align。vertical-align和line-height一样,都会影响元素在与水平流垂直方向上的表现,因此了解这两个属性,对于我们控制图文在垂直方向上的表现有很大的帮助。这里我用了"帮助",而不是必要,有人告诉我这本书不用一个字一个字看,现在看来确实如此,《CSS world》在某种程度上已经完...

2018-11-26 14:44:55 645

原创 CSS进阶(7)—— 内联元素的掌管者line-height和vertical-align(上)

  在CSS世界中,块级元素一般负责结构,而内联元素则负责文字内容,而CSS设计的初衷就是面向图文混合排版,因此内联元素在CSS世界中有着非常重要的地位。由于本章内容较多,因此特分为上下两章,依旧可以根据兴趣按小标题获取你所需要的信息。1.字母x与CSS世界的基线2.内联元素中真实存在的“行框盒子”3.内联元素的基石line-height承担的责任4.line-height在块级元...

2018-11-23 13:24:35 701 3

原创 CSS进阶(6)—— 浅尝盒模型中最友好的border

  盒模型四大家族,content,padding,margin,没一个省心的,终于遇到了最友好的border属性。border的友好从名字就可以看出来,设计者设计此属性的初衷就是给元素弄个"边框"。在空间计算上也没那么多的破事儿,是多少,就是多少。和其他三兄弟不同,border连百分比值计算的事儿都省了,这或许跟边框的粗细与元素大小没有必然联系有关,比如一个长宽200的盒子,和一个长宽400的盒...

2018-11-22 09:55:02 466 1

原创 CSS进阶(5)—— 深入理解margin

  盒尺寸中padding负责内边距,一般情况下(抛开上一章的诡异现象)不会给使用者带来太多的麻烦,因此作者称之为温和的padding,而margin则有些激进,虽说负责外边距,但有时候还能做一些"内边距"的事情(负边距),还自带了些特殊属性(如叠压),本文会通过实例深入探究margin负边距的使用以及叠压问题的产生和计算方式。依旧先放上内容摘要,请按需观看。1.margin负边距的正确打开方...

2018-11-20 17:02:39 2348

原创 CSS进阶(4)—— 温和padding中的诡异CSS现象

  盒模型的四大家族,原以为content部分比较复杂,单独写了一章,但在看padding部分的时候又遇到一个非常诡异的CSS现象,经过不断测试,终于得到一个比较接近于“真相”的解释,在测试这个诡异现象之前,先将padding的一些特性简单介绍一下,最后再来进行这个测试,本章内容如下小标题所示,请按需查看。 1.padding与块元素的尺寸2.padding与内联元素的尺寸3.pa...

2018-11-19 19:12:22 948

原创 CSS进阶(3)——深入理解content

 盒尺寸由内到外为:content,padding,border,margin。 本章对CSS world中第四章4.1节的内容做了一些总结和舍弃,从实用的角度深入探讨content属性。依旧是将小标题提前,请按照兴趣阅读1.什么是替换元素2.替换元素的尺寸计算规则3.替换元素和content属性的关系4.利用content生成辅助信息5.content attr属性值...

2018-11-19 15:10:06 1145

原创 想入前端的小伙伴,千万别走进这三个误区

1.我不是计算机专业的,我肯定比不过那些计算机专业出身的,我基础比他们差,所以我可以学得慢一点  第一个观点比较常见,尤其是在前端,为什么说尤其,因为前端的“低门槛”让许多非本专业的也能够快速跻身互联网的行业。同时从侧面印证了,学前端其实并不需要计算机专业的基础(当然有是最好的)。作为一名计算机专业出身的,我只谈谈我身边的大部分男同学是怎么上的本科:1.游戏必须玩够。2.考试尽量不挂。3.平时...

2018-11-12 09:24:40 1486 1

空空如也

空空如也

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

TA关注的人

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