学Web前端要掌握什么技能常见CSS知识点有哪些

　学Web前端要掌握什么技能？常见CSS知识点有哪些？CSS是前端三要素之一，是Web前端工程师必须要掌握的知识点。为了快速、系统的掌握企业所需的Web前端技术，很多人选择专业的学习，下面就给大家分享CSS常见知识点分享。

　　CSS：Cascading Style sheet层叠样式表或级联样式表，是一种样式设置规则，用于控制页面的外观的样式。使用CSS能够实现内容与样式的分离、方便团队开发，有助于样式复用、便于网站后期维护，实现页面的精准控制、让页面更精美。

　　CSS代码书写方式分为三种：嵌入式、外链式、行内式。

　　嵌入式：将CSS代码嵌入到HTML文件中，嵌入式是通过HTML中的

　　外链式：外链式是指单独写一个以.css为扩展名的文件，然后在标签中使用标签，将这个css文件链接到html文件中。(注意：css文件不能单独的运行，它必须要依赖于HTML文件)

　　语法规则：

　　< link rel="stylesheet" href="css文件的地址">

　　行内式：将CSS代码书写在HTML标签的style属性中。style是一个通用属性，每一个标签里面都拥有这个属性!

　　语法格式：

　　<标签名 style=”属性:值;属性:值;”>

　　初学CSS，你需要掌握这些使用技巧：

　　1、负边距的效果。注意左右负边距表现并不一致，左为负时是左移，右为负时是左拉。

　　2、BFC应用汇总：阻止外边距合并(margin collapsing)、消除浮动的影响。

　　3、flex布局：当flex-grow之和小于1时，只能按比例分配部分剩余空间，而不是全部。

　　4、并不是给元素设置display:block就会自动填充父元素宽度。input 就是个例外，其默认宽度取决于size特性的值。

　　5、对定位和固定定位时，同时设置left和right等同于隐式地设置宽度。

　　6、position:sticky，粘性定位要起作用需要设置最后滞留位置。chrome有bug，firefox完美。

　　7、要使模态框背景透明，用rgba是一种简单方式。

　　8、display:table实现多列等高布局。css实现定宽高比的原理：padding的百分比是相对于其包含块的宽度，而不是高度。

　　9、background-position百分比的正确理解方式：图片自身的百分比位置与容器同样的百分比位置重合。

　　10、background-repeat新属性值：round和space。前者表示凑个整，后者表示留点缝。

　　11、background-attachment指定背景如何附着在容器上，注意其属性值local和fixed的使用。

　　12、可以使用outline来描边，不占地方，它甚至可以在里面。

　　13、浏览器默认显示tab为8个空格，tab-size可以指定空格长度。

　　14、图片在指定尺寸后，可以设置object-fit为contain或cover保持比例。

　　15、设置宽度为fill-available，可以使inline-block像block那样填充整个空间。

在开篇

开篇之前，先提个问题，什么是类？分类吗？可以这么说吧！我们可以给物体分类，也可以给人分类。正所谓，物以类聚，人以群分。难道我们这里是给元素分类？用分类来理解是不准确的啦！从某些角度，也可以理解成分类，说白了也就是个标识而已。废话不说，我们正式步入今晚的主题！

HTML类

html中的类是什么鬼？先上个例子，然后再剖析它：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>陪你复习巩固，攻破前端技能</title>
        <style>
            .c1 {
              background-color: tomato;
              color: white;
              border: 2px solid black;
              margin: 20px;
              padding: 20px;
            }
        </style>
    </head>
    <body>
        <div class="c1">
            <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        </div>

        <div class="c1">
            <p>笔者亲自设计的，一个入侵性极低的Oracle监控方案</p>
            <a href="https://mp.weixin.qq.com/s/PDm2bK7IMFOwjNHFOblgXg" target="_blank">oracledb_exporter监控Oracle，一个入侵性极低的监控方案。</a>
        </div>

        <div class="c1">
            <p>意犹未尽的第2篇再次推出，一个入侵性极低的Oracle监控方案</p>
            <a href="https://mp.weixin.qq.com/s/gFeWlZRGkIMAOCNFpKm8-Q" target="_blank">意犹未尽的第2篇再次推出，继续讲解oracledb_exporter监控Oracle，一个入侵性极低的监控方案。</a>
        <div>
    </body>
</html>

效果如下图：

好了，我们正式开始对它进行剖析，搞清楚到底啥是类，上面的小栗子中，定义了3个div元素，它们的class属性值均为 "c1"。然后注意到没有？在head中的style标签里，通过 ”.c1“ 的方式同时对3个div进行了css样式的设置。所以也由此引出了它的一个特点，那就是多个HTML元素可以共享同一个类，上述的例子中3个div（元素）的类（class）名都定义了为“c1”，且同时对3个div进行了css样式的设置，这就是它的共享性。不知道笔者说明白了没有，好尴尬。

那接下来，我们再来个小栗子：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>陪你复习巩固，攻破前端技能</title>
        <style>
            .c2 {
                font-size: 120%;
                color: crimson;
            }
        </style>
    </head>
    <body>
        <h1>彩虹<span class="c2">运维</span>技术栈社区</h1>
        <p>我们会<span class="c2">持续分享</span>运维和运维开发领域相关的技术文章</p>
    </body>
</html>

效果如下图：

上面的例子中，“运维”和“持续分享”这两个字都在span标签里，且这两个span标签都定义了class属性，class=“c2”，同时通过“.c2”的方式设置了CSS属性。上面的例子中，就是通过这样的办法实现了对某部分的文字进行样式的设置。

截止目前，我们通过两个小栗子，直接解剖了什么是类，那么我们再做个小总结：

class属性可以用于任何HTML元素
类名区分大小写

CLASS的语法

其实在前面的小栗子中，已经讲解过class的语法了，不知道广大盆友们注意到了没有。如果没有注意到，咱们再这个章节重新复习一下。

看下面代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>陪你复习巩固，攻破前端技能</title>
        <style>
            .cc3 {
              background-color: blue;
              color: white;
              padding: 8px;
            }
        </style>
    </head>
    <body>
        <h2 class="cc3">彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <p class="cc3">我们会持续分享运维和运维开发领域相关的技术文章</p>
    </body>
</html>

效果如下图：

上面的例子中，是如何引用到文本内容并设置CSS属性的呢？答案就是通过.css3这样的语法，我们设置的类名是css3。然后在style中，设置css属性，在{}大括号里的内容就是CSS的属性，关于CSS，笔者后续会专门逐一讲解哈。

一个元素可以属于多个类

什么？一个元素可以属于多个类？到底怎么玩，废话不说，咱们上个例子就知道了。下面的例子，是在上一个例子的基础上进行了小改造，看下面代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>陪你复习巩固，攻破前端技能</title>
        <style>
            .cc3 {
              background-color: blue;
              color: white;
              padding: 8px;
            }
            .css4 {
                text-align: center;
            }
        </style>
    </head>
    <body>
        <h2 class="cc3 css4">彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <p class="cc3">我们会持续分享运维和运维开发领域相关的技术文章</p>
    </body>
</html>

效果如下图：

注意到这个语法了吗？class="cc3 css4"，没错了！在上面的style中，分别对同一个h2元素进行设置了不同的CSS属性。也就是说，对同一个元素需要定义多个类，用空格分隔类名就可以实现啦！是不是太简单了啦？

类的复用

什么？类的复用怎么理解？也就是说不同的元素可以共享同一个类。其实这个概念，在之前的例子中都有用到啦！只不过还没有抛出这个概念而已，下面我们来个小栗子，巩固一下。

这个例子是在上一个例子的基础上做了小改造，看下面代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>陪你复习巩固，攻破前端技能</title>
        <style>
            .share_class {
                background-color: blue;
                color: white;
                padding: 8px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <h2 class="share_class">彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <p class="share_class">我们会持续分享运维和运维开发领域相关的技术文章</p>
    </body>
</html>

效果如下图：

注意到了吗？两个元素：h2和p元素，都使用了相同的类，类名叫share_class，这就达到了复用的效果呀！

JavaScript使用class

截止目前，还没讲解到js，那么先讲个小知识点，js如何使用class的。当然，核心的用法也是使用类名为指定的元素完成一些功能，在JavaScript里是通过getElementsByClassName()方法来访问元素中的类名，反言之，也可以说是通过getElementsByClassName()方法来访问带有指定类名的元素。关于js的知识，后续笔者会一一讲解每个知识点，不急，咱们慢慢来。

下面，先来个小栗子，这例子很简单，通过js实现点击后隐藏h2和p元素的内容，下面看代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>陪你复习巩固，攻破前端技能</title>
    </head>
    <body>
        <button onclick="my_fun()">点击可以隐藏元素哦</button>
        <h2 class="c1">彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <p class="c1">我们会持续分享运维和运维开发领域相关的技术文章</p>

    <script>
        function my_fun() {
          var x=document.getElementsByClassName("c1");
          for (var i=0; i < x.length; i++) {
            x[i].style.display="none";
          }
        }
    </script>
    
    </body>
</html>

效果如下图：

隐藏前

隐藏后

看到效果了吗？隐藏的功能就是通过js实现的，js很强大，后面我们一起专门分享js的知识点。

写在最后

好了，今晚的知识点分享到此为止啦！诚邀广大盆友的关注，望多多点赞、转发、收藏。

本文转载于（喜欢的盆友关注我们）：https://mp.weixin.qq.com/s/c9tXDae2l1osseOwKzILuQ

文共3019字，预计学习时长9分钟

来源：Pexels

JavaScript是目前最流行的编程语言之一。就像任何其他编程语言一样，它有许多让人马上就能学会的小技巧。

每一个技巧都能完成大多数开发人员每天需要完成的工作。根据经验，读者可能已经知道了其中一些，然而仍会对其他的技巧大吃一惊。

本文将介绍一系列技巧，而这些技巧能将读者打造为一名更好的开发人员，并增强JavaScript技能。

我们一起来看看吧~

1.对象解构

开发人员一旦了解了对象解构，就可能每天都会用到。

但什么是解构呢？

解构是一个JavaScript表达式，允许将数组、对象、映射和集合中的数据提取到其自己的变量中。它允许您一次从一个或多个对象中提取属性。

一起看看以下示例，其中有一个用户对象。如果要将用户名(name)存储在变量中，则必须将其赋给新行上的变量。如果想把性别(gender)也存储在一个变量中，就必须重复上述操作。

const user={
    name: 'Frank',
    age: 23,
    gender: 'M',
    member: false
}const name=user.name
const gender=user.gender

使用解构，就可以通过以下语法直接获取对象属性的变量：

const { name, age, gender, member }=user;console.log(name)   // Frank
console.log(age)    // 23
console.log(gender) // M
console.log(member) // false

2.使用设备性能以更好地调试

来源：Pexels

作为一名开发人员，做的最多的事情就是调试。但是调试不仅仅是使用console.log在控制台打印出一堆日志信息这么简单。

知道控制台对象有分析代码片段性能的好办法吗？大多开发人员只知道用标准的console.log方法来调试代码。

控制台对象有很多有用的功能。它有一个time和timeEnd函数，可以帮助分析性能。其工作原理非常简单。

在被测试的代码前调用console.time函数。此函数有一个参数，接受一个描述被分析内容的字符串。在被测试代码的末尾，调用console.timeEnd函数。给这个函数与第一个参数相同的字符串。然后，运行代码所需的时间将会在控制台中显示。

console.time('loop')  for (let i=0; i < 10000; i++) {  
    // Do stuff here
}  console.timeEnd('loop')

3. Every和 some函数

Every和some函数并不是为所有开发人员熟知。然而，它们在某些情况下非常有用。先来讲讲every函数。如果想要知道数组中的所有元素是否都通过了某个测试，那就可以应用此函数。本质上，这是在遍历数组中的每个元素，并且检查它们是否属性都为真。

这听起来可能有些抽象，所以请看以下示例。并没有那么复杂。

const random_numbers=[ 13, 2, 37,18, 5 ]
const more_random_numbers=[ 0, -1, 30, 22 ]const isPositive=(number)=>{
  return number > 0
}random_numbers.every(isPositive); // returns true
more_random_numbers.every(isPositive); // returns false

Every函数返回一个布尔值。如果数组中的所有元素都通过了测试，则返回“真”(true)。如果数组中的某个元素未通过测试，则返回“假” (false)。

也可以使用一个匿名函数作为测试函数：

random_numbers.every((number)=>{
    return number > 0
})

some函数与every函数的工作原理几乎完全相同。两个函数只有一个主要区别：some函数测试的是数组中是否至少有一个元素通过了测试。

回顾上述实例，如果使用some函数而不是every函数，那么两个数组都将返回“真”(true)，因为两个数组都包含一个正数。

const random_numbers=[ 13, 2, 37,18, 5 ]
const more_random_numbers=[ 0, -1, 30, 22 ]const isPositive=(number)=>{
  return number > 0
}random_numbers.some(isPositive); // returns true
more_random_numbers.some(isPositive); // returns true

4.有条件地设置一个变量

有条件地设置一个变量很简单，而且能使代码更漂亮。在应用这个技巧的时候并不需要编写if语句——这是笔者最喜欢的JavaScript技巧之一。

所以要如何有条件地设置一个变量？

const timezone=user.preferred_timezone || 'America/New_York'

上述例子是检查用户是否有首选时区。如果用户有首选时区，则使用该时区。如果用户没有首选时区，则使用默认时区，即“美国/纽约”(‘America/New_York’)。

这段代码看起来比使用if语句要干净得多。

let timezone='America/New_York'if(user.preferred_timezone) {
    timezone=user.preferred_timezone
}

更简洁了，不是吗？

来源：Pexels

5.将值转换为字符串数组

有时需要将所有的值转换为字符串数组。例如，当使用Triple equal（===）运算符检查数组中是否存在某个数字时，可能会出现这种情况。

笔者最近遇到了一个问题，其包含multi-select控件。Select选项的HTML值是字符串而不是整数，而这是有意义的，选定值的数组如下所示：

let selected_values=[ '1', '5','8' ]

问题在于，没能成功检查所选值的数组中是否存在某个整数。笔者使用了一个Intersect函数，它使用了triple equals(===)运算符。并且由于‘5’ !==5 ，而必须找到一个解决办法。

在笔者看来，最漂亮的解决方案是将数组中的所有值都转换为整数。当笔者进行尝试时，偶然间发现了一个极其简单，却又漂亮的解决办法。

selected_values=selected_values.map(Number)// [ 1, 5, 8 ]

与将所有值转换为整数不同，可以通过简单地更改map函数的参数，将数组中的值转化为布尔值。

selected_values=selected_values.map(Boolean)

来源：Pexels

美好的未来在召唤你~干巴爹~

留言点赞关注

我们一起分享AI学习与发展的干货

如转载，请后台留言，遵守转载规范

在线咨询

上一篇：网页文字不能复制？那是因为你没有这个方法，只需一句代
下一篇：一文读懂QML（QtingLanguage）

您的项目需求

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

整合营销服务商

学Web前端要掌握什么技能 常见CSS知识点有哪些

在开篇

HTML类

CLASS的语法

一个元素可以属于多个类

类的复用

JavaScript使用class

写在最后

1.对象解构

2.使用设备性能以更好地调试

3. Every和 some函数

4.有条件地设置一个变量

5.将值转换为字符串数组

您的项目需求

学Web前端要掌握什么技能常见CSS知识点有哪些