记住，这七个css技巧你必须得会用

近我公司来了个新员工，因为前端基础不怎么好嘛，老是喜欢问一些基础的问题，你说他没学过吧还真不是，真是他没注意过，这不，今天我就把这些知识点整理一下，给头条的小伙伴们学习下。

这里还是要说一下我的前端学习群：594959296，从我一个到现在的1617都是看我每一篇文章来的，可以说都是我们大前端的学霸啊，不定期分享干货。想学到东西的都可以来，欢迎初学和进阶中的小伙伴

1、元素的margin的top、bottom及padding的top、bottom使用百分比作为单位时，其是相对父元素的宽度width的而不是我们想象的高度height；

举个例子：

其实出现这种现象，我们可以巧用margin/padding的百分比值实现高度自适应（多用于占位，避免闪烁）

当然该元素高度上的百分比是相对其父元素高度的百分比的，min-height及max-height也适用这条规律。

2、含有定位属性的元素，其top、bottom单位为百分比时，该百分比是相对于父元素的高度的。同理，left、right则是相对于父元素的宽度的。

这一点，我昨天在查资料写这篇文章---最全面的元素水平垂直居中方法汇总的时候就发现有个大牛也理解错了----CSS布局奇淫技巧之--各种居中里面的第八点。

3、边框宽度不允许使用百分比值

这点就不解释了。

4、width：100%

当父容器里有绝对定位的子元素时，子元素设置width:100%实际上指的是相对于父容器的padding+content的宽度。当子元素是非绝对定位的元素时width:100%才是指子元素的 content ，其等于父元素的 content宽度。

将上面子元素的position改成了relative后，其宽度就变成了parent宽度。

5、line-height

你知道line-height:150%和line-height:1.5的区别吗？知道了就可以跳过此处，不知道继续看下面：

举个例子：

上面可以看到line-height有单位时，子元素是继承父元素的line-height的，无单位时，其line-height等于无单位的数值乘以子元素本身的字体大小。显然为了不出现意外，还是建议首选无单位的。

6、ex 和 ch 单位

ex：取当前作用效果的字体的x的高度，在无法确定x高度的情况下以0.5em计算；

ch:以节点所使用字体中的“0”字符为基准，找不到时为0.5em；

ex 和 ch 单位，类似于 em 和 rem, 依赖于当前的字体和字体大小。但是，不同的是，这两货是基于字体的度量单位，依赖于设定的字体。

ch 单位通常被定义为数字0的宽度。你可以在Eric Meyers的博客里找到关于它的一些有意思的讨论，例如将一个等宽字体的字母”N”的宽度设置为40ch，那么在另一种类型的字体里它却可以包含40个字母。这个单位的传统用途主要是盲文的排版，但是除此之外，肯定还有可以应用他的地方。

ex 定义为当前字体的小写x字母的高度或者 1/2 的 1em。很多时候，它是字体的中间标志。

x-height; the height of the lower case x

这些单位有很多用途，大部分用于版式的微调。比方说，sup 元素（上角文字标），可以通过position:relative;bottom: 1ex;实现。类似的方法，你可以实现一个下角文字标。浏览器默认的方式是利用

上标和下标特定垂直对齐规则，但是如果你想更细粒度更精确得控制，你可以像下面这样做：

Css代码

7、使用calc 时运算符之间要有空格，否则可能无效

今天就写到这里，如果是热爱前端的小伙伴不妨来我群里一起学习交流：594959296 欢迎初学和进阶中的小伙伴。

如果想看到更加系统的文章和学习方法经验可以关注我的微信公众号：‘web前端课程’关注后回复‘给我资料’可以领取一套完整的学习视频

TML+CSS学完好久了，一直没啥时间总结，现在总结了下学的过程：

之所以放在一起总结，是因为HTML和CSS没有啥很多的编程逻辑，都是需要去记住并且熟练使用的，熟练使用是得去一个个敲过一遍。所谓的代码量积累好像就是这么回事，只有多敲才能会。

小白用的哔哩哔哩上的教程视频，因为个人学习方法的原因，都是跟着那教程去敲的，当然课后练习的话，都是自己先摸索敲了一遍在去看的讲解，小白觉得这样可以加深印象。

还有就是没有熟练之前要天天的去练，哪怕一天半小时也好。因为一旦一天没有练就会忘掉，还得回去找之前的笔记来看。（因为有事耽搁了两三天没去学，结果又重头的看了一遍，血淋淋的学习效率教训。不管怎样，贵在坚持。）

当然，因为小白基础是真的差，没有什么教程是可以完完全全都讲完的，使用小白看完了哔哩哔哩的教程又跑去了网易云课堂找了一份HTML+CSS的教程来看，为的是查漏补缺。

有一种播放叫做1.5倍播放。看的过程，别跟播放器里一倍的速度看，调成1.5倍或是2.0倍播放速度，因为那些东西，多数都是理解使用的。哪怕忘了，百度一下就可以直接搞定了。打基础阶段所以还是记住熟练使用才好。

HTML小白也就看了两天吧，用了半天做了下练习；CSS对于零基础的人来说建议12-15天，当然小白之前有过这些概念，所以用了五天多点的时间。JS才刚刚开始学，所以不知道时间怎么算才好。因为前端三大基石：HTML+CSS+JS，HTML+CSS学习所使用的时间占比才百分之五，剩下的百分之九十五都是JS的学习时间。

找课程时记住，找一两个课程，一个全心去学，一个查漏补缺就好，别一会儿这个课程看一下，那个课程看一下的。这样子反而会使自己心浮气躁没法静下心来去学。打基础的视频教程，其实都一样的，没啥有特别好的特别坏的。

高兴铁铁们能来看html网页设计第二期~~~~撒花~~~~~

哎呀呀~实在是抱歉备注标签我记错了QAQ

这个才是备注标签不是//

首先我们先来学习上节课留下的剧透，分别是:

1.标题标签h1~h6

有人就说了标题标签上次剧透不就只有h1标签吗?

嘿嘿，其实他还有兄弟姐妹啦~

看图，代码是从上往下从左往右执行的请记住这个顺序哦~

还有,左边是代码右边是网页上面的效果哦~

源代码:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>1</h1>

<h2>2</h2>

<h3>3</h3>

<h4>4</h4>

<h5>5</h5>

<h6>6</h6>

</body>

</html>

如图所示，h1标签是最大的，h6标签是最小的

是不是很简单呀,现在已经学会了一个知识点了哦~

2.段落标签 p标签

源代码:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>第一条p标签</p>

<p>第二条p标签</p>

<p>第三条p标签</p>

</body>

</html>

3.链接标签 a标签

链接标签是什么?顾名思义就是一个链接看代码：

href是什么东西啊？是a标签的属性啦~里面用来输入你需要跳转到的网页的链接

属性里面的东西是不会出现在网页上面的出现的只有在a标签里面的内容哦

当我点击百度这两个字后就给我跳转到了我们href属性里面的https://www.baidu.com

当然我们也可以跳转到我们自己制作的网页上面但要求是同一个项目下面的网页

是不是很有趣~

看视频:

视频中我们点击链接后就跳转到了山这个网页出现了一张山的图片，是不是有点小意思~

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<a href="new_file3.html">跳转到山的网页</a>

</body>

</html>

4.图像标签 img标签

图像标签标签如其意，就是用来上传图像的一个标签~~

我们这里介绍一下img的两个属性:

src就是用来放图片的地址的，他会根据地址去找图片然后把图片放到网页上面。

alt有什么用啊就是当图片显示失败的时候就会显示alt里面的文字

看视频:

我们把图片的地址破坏后，就会显示一个图片错误的图标和alt里面的内容

怎么拖图片到img文件下，老师~~~我不知道

看视频

嘿嘿就直接把文件拖进来就ok了是不是很简单~

okk，好快啊怎么一下就学完了今天的知识点~~~

嘻嘻今天可是有作业的~

请根据下面的网页仿写一下:

完成后作业发再评论区哦，有什么不懂的可以留言包回答的。

加油呀，每天学一点争取做出属于自己的一个网页~

上一期

在线咨询

上一篇：踏上编程之路的必经之路之html篇六
下一篇：前端入门-css颜色和背景

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

记住，这七个css技巧你必须得会用

如果想看到更加系统的文章和学习方法经验可以关注我的微信公众号：‘web前端课程’关注后回复‘给我资料’可以领取一套完整的学习视频

1.标题标签h1~h6

2.段落标签 p标签

3.链接标签 a标签

4.图像标签 img标签

您的项目需求