• 技术文章 >web前端 >css教程

    老司机来和你谈谈,为什么说css是最难的!!

    奋力向前奋力向前2021-07-12 18:51:46转载158

    之前文章给大家介绍是《在CSS中怎么给按钮添加背景图片(详解及实例)》内容是美工设计。本篇章里面说: CSS 不是科学而是美术。伙伴们来看一下。

    CSS 为什么这么难学?

    最近半年,我一直都没在知乎上遇到好的前端问题,而这个问题,问到我心坎上了。在过去一年的教学过程中,不断有学生尝试理性地理解 CSS,都以失败告终。我告诉他们 CSS 是没有逻辑可言的!他们不信。这个问答,能很好阐释我的理解。

    以下是我的回答。

    短答案:因为 CSS 不正交。

    长答案:

    我先来解释一下什么是正交。

    你调过显示器的「亮度」、「色调」和「饱和度」吧。

    「正交」就是,你调节这三者中的一个时,不影响其他两个效果。

    「正交」看起来应该是理所当然的,对吧。

    想象一下「不正交」的情况:你调节「亮度」的时候,「色调」和「饱和度」会跟着无规律的变化。如果是这样,你会调得想死,因为你很难调到你想要的效果。

    而 CSS,就是「不正交」的。

    我以 width 对 margin-left 的影响为例,假设有如下代码:

    1.jpg

    .parent 里面的 .child 宽度为 300px,现在我给他添加一个 margin-left: -10px,会发现

    2.jpg
    整个 .child 左移 10 像素

    好的,于是我们知道 margin-left: -10px 会让元素整体左移。真的是这样吗?这个时候把 width 去掉重新做实验,这是在添margin-left 之前:

    3.jpg

    这是在添加 margin-left 之后:

    4.jpg

    我们发现 margin-left: -10px 并没有让整个元素左移,只是让左边缘左移了,右边缘并没有动。

    现在来总结一下:

    看到这里,你就会觉得 CSS 特别不正交:

    这就是不正交的恐怖之处,你只有把所有属性与 margin-left 一起用一下,才能得知 margin-left 的真正规律。

    这还只是两个属性的影响,你能想象三个属性互相影响的情况吗?

    我再举第二个例子,大家都知道 position: fixed 是相对于视口(viewport)定位的。

    但是这个「真理」会受另一个元素的影响……对,我知道你很震惊……

    先看正常情况:

    5.jpg

    网页右边是一个 iframe,红色的 .fixed 元素相对于 iframe 视口左上角定位,与我们预期一致。

    接下来我在 .box 上面加一个 CSS3 中的属性,就会改变你的认知:

    6.jpg

    父容器加了 transform 之后,fixed 定位的元素居然相对于父容器定位。

    天知道以后 CSS 会不会加更多元素来影响我已经认为是真理的事情?

    这就是「不正交」的恶心之处。

    我再举一个例子,大家都知道给固定宽度的 p 加 margin: 0 auto 可以让它水平居中,很多人就问,那为什么 margin: auto 0(注意 auto 和 0 的位置反过来了)不能做到垂直居中呢?

    其实是可以的:

    7.jpg

    但是必须是在当前元素有 position: absolute; top: 0; bottom:0; 的情况下才能垂直居中。这就很「不正交」了。

    怎么学习「不正交」的东西?

    只有一个办法:试。

    你试的组合情况越多,就越能了解各种奇怪的现象。

    别无他法。

    目前 CSS 常用的属性就按 50 个算吧,两种属性组合一共有 50 * 49 / 2 = 1225 种情况,三种属性组合一共有 50 * 49 * 48 / 6 = 19600 种情况。这还没有算上父子元素的互相影响的情况。

    少年,你有生之年,慢慢试吧。

    目前我们知道

    这,就是 CSS 难学的原因。

    以我的经验,越是理性的人,越难理解 CSS;越是感性的人,越容易理解 CSS。

    这就是为什么大部分后端程序员能学会 JS,却学不会 CSS——他们太理性了。

    你想用学编程的思路来学 CSS?放弃吧!

    你需要用学画画的思路来学习 CSS——每天不停地画画,一个鸡蛋用不同的方式画一千遍,就成了。

    所以我在课上说过一句话:

    CSS 不是科学,CSS 是艺术。

    P.S. 「正交」概念我是从《Unix编程艺术》学到的,少逛知乎多读书吧。

    推荐学习:CSS视频教程

    以上就是老司机来和你谈谈,为什么说css是最难的!!的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:知乎,如有侵犯,请联系admin@php.cn删除
    专题推荐:前端开发 CSS
    上一篇:在CSS中怎么给按钮添加背景图片(详解及实例) 下一篇:浅谈CSS如何实现九宫格提示超出数量
    VIP会员

    相关文章推荐

    • css怎么消除默认样式• css样式怎么实现超出隐藏• css层叠性重要么• css中什么是块元素• css中权重是什么意思• css如何设置斜体

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网