深入CSS与浅知如何写好JavaScript

Y128
81 阅读4分钟

CSS的深入了解及JavaScript的初步了解 | 青训营笔记

这是我参与[第四届青训营]笔记创作活动的第3天

一、理解CSS的特异度

CSS的特异性是指浏览器如何确定CSS样式的重要性，相关性和“高级性”。 首先，通过以下代码来帮助理解CSS特异性

#nav .list li a:link
.hd ul .links a

第一行代码中，id 选择器有 1个（#nav），类与伪类共有 2个（.list 与 :link）,标签共有 2个（li 与 a）。所以特异度为 122。 在第二行代码中，id 选择器有 0个，类与伪类共有 2个（.hd 与 .links）,标签共有 2个（ul与a）。所以特异度为 22。 因为，第一行代码中的特异度为122大于第二行代码中的特异度为 22 。 所以，在2中的选择器的优先级更高。
在使用不同的选择器对同一个元素设置文本颜色，这时浏览器会根据选择器的优先级规则解析css样式，css为每一种基础选择器都分配了一个权重，其中标记选择器具有权重1，类选择器具有权重10，id选择器具有权重100。
高优先级的属性会覆盖低优先级的属性

<button class="btn">普通按钮 </button>
<button class="btn primary">主要按钮 </button>
 
<style>
.btn {
  display: inline-block; 
  padding: .36em .8em; 
  margin-right: .5em; 
  line-height: 1.5;
  text-align: center; 
  cursor: pointer; 
  border-radius: .3em; 
  border: none; 
  background: #e6e6e6; 
  color: #333;
}
 
.btn .primary { 
  color: #fff;
  background: #218de6;
}
 
</style>

QQ图片20220726213615.png

二、关于CSS的继承性与层叠性

CSS是层叠样式表，他有两个基本特征就是继承性与层叠性。
1.层叠性 指的是多种CSS样式叠加，例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>层叠性</title>
    <style>
        p{font-size: 12px; font-family: "楷体";}
        .special{font-size: 25px;}
        #one{color:red;}
    </style>
</head>
<body>
    <p class="special" id="one">文本1</p>
    <p>文本2</p>
    <p>文本3</p>
</body>
</html>

效果图： 图片1.png 2.继承性
在书写CSS时，子标记会继承父标记的某些样式，除非子标记显式指定一个值，将会显示指定的这个样式；

<p>This is a <em>test</em> of <strong>inherit</strong></p>
<style>
  body {
    font-size: 20px;
  }
  p {
    color: blue;
  }
  em {
    color: red;
  }

效果图：

微信图片_20220726222048.png
上面代码中的<em>就是指定了颜色属性，“inherit”就是指定了<strong>加粗属性，其余的都是继承了父标记——<p>的颜色属性。

三、CSS的求值过程

学习了基础的CSS知识之后，一定要明白CSS的求值过程是怎么样的，下面就详细了解一下

微信图片_20220726223019.png

四、CSS的布局及布局相关技术

首先，什么是布局？ 布局（layout）：是确定大小和位置的算法，依据元素、容器、兄弟节点和内容等信息来进行计算的；
其次，布局的相关技术有：常规流、浮动、绝对定位；
流：在 CSS 的常规的流里边，元素是按照某种流向去摆放的，比如从上到下、从左到右，所以常规流在许多文档里边也叫文档流，或者简称流。
根元素、浮动和绝对定位的元素会脱离常规流，其它元素都在常规流之内（in-flow），常规流中的盒⼦，在某种排版上下⽂中参与布局；
其中常规流中又包含行级排版上下文、块级排版上下文、表格排版上下文、FlexBox排版上下文和Gird排版上下文，下面来逐个的详细进行解释。
4.1 行级排版上下文（Inline Formatting Context）（IFC）
当IFC中有一个块级元素插入时，会产生两个匿名块将父元素分割开来，产生两个IFC。
只包含⾏级盒⼦的容器会创建⼀个 IFC，比如有一个 h1 标签，里边有文字，浏览器就会在 h1 里边创建 IFC，h1 里边的文字就会在 IFC 里边进行排版，之所以会创建 IFC 是因为 h1 是一个块级元素 ，h1 里边有文字，文字是行级的，没有其他的东西，这时候就只包含行级盒子的容器它会创建 IFC。

  • IFC 内的排版规则
    1）盒⼦在一行内⽔平摆放
    2）一行放不下时，换⾏显示（overflow-wrap: break-word;单词过长就在单词内换行）
    3）text-align 决定一行内盒⼦的⽔平对齐
    4）vertical-align 决定⼀个盒⼦在行内的垂直对齐
    5）避开浮动(float)元素

4.2 块级排版上下文(Block Formatting Context)(BFC)
某些容器会创建⼀个BFC

容器容器
根元素浮动、绝对定位、inline-block
Flex⼦项和 Grid ⼦项overflow 值不是 visible 的块盒
  • BFC 内的排版规则
    1)盒⼦从上到下摆放；
    2)垂直 margin 合并；
    3)BFC 内盒⼦的margin不会与外⾯的合并；
    4)BFC 不会和浮动元素重叠；\

五、认识盒子模型

所谓盒子模型就是把HTML页面中的元素看作一个矩形的盒子，每个矩形都是由元素的内容、内边距、边框和外边距组成。\

5.1边框属性

设置内容样式属性常用属性值
上边框border-top-style:样式；border-top-width:宽度；border-top-color:颜色
下边框border-bottom-style:样式；border-bottom-width:宽度；border-bottom-color:颜色
左边框border-left-style:样式；border-left-width:宽度；border-left-color:颜色
右边框border-right-style:样式；border-right-width:宽度；border-right-color:颜色
样式综合设置border-style:上边[下边，左边，右边]none:默认无、solid:单实线、dashed:虚线、dotted:点线、double:双实线
宽度综合设置border-width:上边[下边，左边，右边]像素值
颜色综合设置border-color:上边[下边，左边，右边]十六进制、rgb
边框综合设置border:四边宽度 四边样式 四边颜色

5.1.1 边框宽度
border-top-width:上边框宽度；border-bottom-width:下边框宽度；
border-left-width:左边框宽度；border-right-width:右边框宽度；
broder-width:上边框宽度[右边框宽度 下边框宽度 左边框宽度]
四边宽度必须按照上右下左顺序赋值，即一个值为四边，两个值为上下/左右，三个值为上/左右/下。
5.1.2 边框颜色
border-top-color:上边框颜色；border-bottom-color:下边框颜色；
border-left-color:左边框颜色；border-right-color:右边框颜色；
broder-color:上边框颜色[右边框颜色 下边框颜色 左边框颜色]
四边颜色必须按照上右下左顺序赋值，即一个值为四边，两个值为上下/左右，三个值为上/左右/下。
eg:

<!DOCTYPE html>
<html>
<head>
  <title>边框样式</title>
  <style>
    .one{border-style:double;
        border-width: 8px 10px 15px 20px;
        border-color: teal fuchsia rosybrown wheat;
    }
    .two{
     /*  border-top-style:solid;
      border-bottom-style:solid;
      border-left-style:dashed;
      border-right-style:dashed; */
      border-style:solid dashed solid dashed;
      border-width: 12px;
      border-color: aqua;    
    }
    .three{
      /* broder-top-style:solid;
      border-bottom-style:dashed;
      border-left-style:dotted;
      border-right-style:double; */
      border-style:solid double dashed dotted;
      border-width: 8px 12px;
      border-color: blue cornflowerblue;
    }
    h5{border-style:dotted;
        border-width: 5px 10px 5px;
        border-color: salmon rebeccapurple yellowgreen;
    }
  </style>
</head>
<body>
  <p class="one">边框样式——双实线</p>
  <p class="two">边框样式——上下为实线左右为虚线</p>
  <p class="three">边框样式——上为实线下为虚线左为点线右为双实线</p>
  <h5>边框样式——点线</h5>
</body>
</html>

微信图片_20220728115831.jpg

5.2 内外边距属性

padding-top:上内边距；padding-bottom:下内边距；padding-left:左内边距；padding-right:右内边距；padding:上内边距[右内边距 下内边距 左内边距]；
margin-top:上外边距；margin-bottom:下外边距；margin-left:左外边距；margin-right:右外边距；margin:上外边距[右外边距 下外边距 左外边距]；

六、写好JS的一些原则

  1. 各司其职：让HTML、CSS和JavaScript职能分离；
  2. 组件封装：好的UI组建具备正确性、扩展性、复用性；
  3. 过程抽象：应用函数式编程思想；
    结论：HTML、CSS和JavaScript各司其职；应当避免不必要的由JS直接操作样式；可以用class来表示状态；纯展示类交互寻求零JS方案；

七、组件封装

组件是指web页面上抽出来一个个包含模板、功能和样式的单元，好的组件具备封装性、正确性、扩展性、复用性；
总结基本方法：结构设计；展现效果；行为设计：API（功能）Event（控制流）； 三次重构：插件化、模板化、抽象化（组件框架）

  • 插件化：解耦
    将控制元素抽取成插件；
    插件与组件之间通过依赖注入方式建立联系；
  • 模板化：解耦
    将HTML模板化，更易于扩展；
    抽象化：将组件通用模型抽象出来；

八、过程抽象

为了能够让“只执行一次“的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们称为过程抽象。

  • 用来处理局部细节控制的一些方法；
  • 函数式编程思想的基础应用；

九、高阶函数

  • 以函数作为参数；
  • 以函数作为返回值；
  • 常用于作为函数装饰器； 常用的高阶函数有：Once、Throttle、Debounce、Consumer/2、Iterative；

十、总结

对CSS有了更加深入的了解，文章中所写的盒子模型是CSS网页布局的基础，只有掌握了盒子模型的各种规律和特征，才能更好的控制网页中各个元素所呈现的效果；对怎么写好JavaScript有所掌握。

参考

[特异度参考] 版权声明：本文为CSDN博主「LAinKH」的原创文章， 原文链接：blog.csdn.net/LAinKH/arti…

avatar
文章
阅读
粉丝