AhuntSun

# 11.知识点整理①

# 1.绘制三角形

原理：

image-20200320145530157

//hua'jian   
.div1{
      width: 0;
      height: 0;
      border: 250px solid transparent;
      border-bottom-color: red;
    }
1
2
3
4
5
6
7

image-20200320145440948

# 2.绘制圆形

border-radius：radius为半径的意思；

只需要将border-radius的值设置为正方形的一半即可：

    div{
      width: 200px;
      height: 200px;
      float: left;
    }
    .div1{
      background-color: red;
      border-radius: 50%;
    }
    .div2{
      background-color: blue;
      border-radius: 100px;
    }
    .div3{
      background-color: rebeccapurple;
      border-radius: 6.25em;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

image-20200320152033823

当border-radius的值超过正方形一半是，也会显示圆形，原因是，css不会处理超过指定范围的内容：

image-20200320152352103

# 3.关于em

  • 1、浏览器的默认字体大小是16px；

  • 2、如果元素自身没有设置字体大小：

    • 字体大小默认取body标签的16px；
    • 其他属性如“boder、width、height、padding、margin、line-height”等值按下式计算：
1 ÷ 父元素的font-size × 需要转换的像素值 = em值
1

**比如：**没有设置font-size默认使用16px，将960px转换为em

1 ÷ 16px × 960px = 60em
1

  • 3、如果元素设置了自身的字体大小：

    • 字体大小按下式计算：
    1 ÷ 父元素的font-size × 需要转换的像素值 = em值
    1
    • 此元素的其他属性，如“border、width、height、padding、margin、line-height”计算就需要按照下面的公式来计算：
    1 ÷ 元素自身的font-size × 需要转换的像素值 = em值
    1

# 3.5.关于rem

r表示root，(root em)指的是设置网页中根元素：root{}的字体大小；在页面中：root{} 为html{}；如下面设置跟标签html标签的font-size为1rem，rem的值默认是浏览器字体大小16px；则在页面的其他标签中1rem = 16px：

image-20200322160014625

当根元素HTML的font-size设置为2rem（32px）时，则其他标签使用rem时，1rem = 32px

image-20200322160218962

总结：rem只会根据html中设定的font-size进行换算，不受其他父标签的影响；而使用em时，html中的font-size值会被父标签覆盖；

# 4.交换两个数

1.临时变量法

let a = 3
let b = 5
let c = a
a = b
b = c
console.log(a, b)//5,3
1
2
3
4
5
6

2.加减法

let a = 3
let b = 5
a = a + b
b = a - b//这是a那份给了b
a = a - b//此时的b值为a那份
console.log(a, b)//5,3
1
2
3
4
5
6

3.数组法

let a = 3
let b = 5
a = [a, b]//相当于[3, 5]此时a和b变化都不会影响数组a中的元素
b = a[0]
a = a[1]
console.log(a, b)//5,3
1
2
3
4
5
6

4.对象法

let a = 3
let b = 5
a = [a: b, b: a]//同理对象里的值为定值不受变量影响
b = a.b
a = a.a
console.log(a, b)//5,3
1
2
3
4
5
6

5.数组运算法

let a = 3
let b = 5
a =[b, b=a][0]//根据优先级先进行b=a运算，再拿到数组的第一个元素赋值给a，注意这里的b为定值
console.log(a,b);//5,3
1
2
3
4

6.按位异或法

let a1 = 3
let b1 = 5
a1 = a1 ^ b1
b1 = b1 ^ a1
a1 = a1 ^ b1
console.log(a1, b1);//5,3
1
2
3
4
5
6

image-20200320161108836

# 5.超出文本显示省略号

  • 设置宽度：width
  • 强制文本在一行显示：white-space: nowrap
  • 隐藏溢出内容：overflow:hidden
  • 溢出进行省略：text-overflow:ellipsis（省略的意思）
    .box{
      width: 200px;
      border: 5px solid #000;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
1
2
3
4
5
6
7

# 6.打乱数组的顺序

function binarySearch(arr, target){
  let start = 0;
  let end = arr.length - 1
  while(start <= end){
    let mid = Math.floor((end + start) / 2)
    if (target == arr[mid]) {
      return mid
    }else if (target < arr[mid]) {
      end = mid - 1
    }else{
      start = mid + 1
    }
  }
  return -1//找不到就返回 -1
}
let arr = [1, 2, 3, 4, 5, 6]
console.log(binarySearch(arr, 1));
console.log(binarySearch(arr, 2));
console.log(binarySearch(arr, 3));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 7.href 和 src 的区别

href：Hypertext Reference：超文本引用或参照；（link, a）

src：Source：资源；（img,style, script, input, iframe）

主要区别：

<body>
	<img src="smiling.png">
	<a href="smiling.png">笑一个呗</a>
</body>
1
2
3
4

href：相当是一个超链接，会建立一个通道让当前元素或者当前文档和引用资源进行联系，需要引用资源的时候就可以通过通道进行引用了；如上面的a标签，只有在点击笑一个呗时才会显示图片；

**src：**会把资源下载下来，程序遇到src时要下载完成具体资源后才能继续执行（好比车加油，加完油才能走）；并且会替代当前的元素，然后嵌入到文档中；如上面的img标签会直接显示图片；

# 8.如何用CSS水平居中元素

行内元素设置居中：

  • 普通流inline：
div{
	height: 200px;
	width: 200px;
	background: glod;
	
	text-align:center
}
1
2
3
4
5
6
7

文字排列(align)：中间；该属性会使行内块级元素（单独占一行）（p,h1~6等标签）水平居中，不能直接对行内元素起效果，但是可以通过给行内元素的父元素比如body添加该属性而使body标签内的行内元素水平居中；

块级元素设置居中：

  • **普通流block：**块级元素可以设置宽和高，这是区别于行内块级元素（单独占一行）和行内元素的特点；可以采用margin: 0 auto使其居中；注意这种方法要求块级元素一定要有宽度；

    div{
	height: 200px;
	width: 200px;
	background: glod;
	
	margin 0 auto;
}
    1
    2
    3
    4
    5
    6
    7

浮动元素：

浮动元素会脱离普通的文档流，不受不同文档流中text-align, margin等样式的约束；此时可以采用相对定位或绝对定位的方式来实现定位：（position: relative/absolute）;

relative与absolute的区别：前者相对于原来普通文档流的位置进行定位；后者相对于前一个非普通文档流（static）的父元素（该父元素可能是relative，可能是absolute）的位置进行定位；

相对定位relative要依赖于原来在普通文档流中的位置，而absolute不需要，而是完全脱离了普通文档流：

若有这样的结构：

<div>
	<block></block>
</div>
1
2
3

则它们的定位方式是这样的：

image-20200321100910542

相当于是一层楼，relative是二楼，absolute是三楼，二楼要通过柱子根据在一楼的位置进行定位，三楼要依靠二楼进行定位，但三楼完全脱离了一楼，不占据一楼的任何空间；

相对定位relative下水平居中

div{
	height: 200px;
	width: 200px;
	background: glod;
	
	float = left;
	position:relative;
	left: 50%;
	margin-left: -100px;
}
1
2
3
4
5
6
7
8
9
10

由于left: 50%;移动基准为块级元素左边框，所以必须往回移动块级元素宽的一半，这就要求：

  • 块级元素要有宽
  • 并且要知道块级元素的宽；

还可以采用css3的transform:translate

div{
	height: 200px;
	width: 200px;
	background: glod;
	
	float = left;
	position:relative;
	left: 50%;
	transform:translateX(-50%);
}
1
2
3
4
5
6
7
8
9
10

这样就不需要知道元素的宽了；

绝对定位absolute下水平居中

有时候需要块级元素完全脱离普通文档流，不占据任何空间，因此

span{
	color: glod
	
	position:absolute;
	left: 0;
	right: 0;
	//如果行内元素设置为了绝对定位，那就该元素就可以像块级元素一样设置宽高;也就是可以通过普通流块级元素的方法进行居中
	margin: 0 auto;
}
1
2
3
4
5
6
7
8
9

当知道宽度时：

span{
	color: glod
	
	position:absolute;
	left: 0;
	right: 0;
	left: 50%
	margin-left: -60px;
}
1
2
3
4
5
6
7
8
9

也可以使用css3的transform

span{
	color: glod
	
	position:absolute;
	left: 0;
	right: 0;
	left: 50%
	transform:translateX(-50%);
}
1
2
3
4
5
6
7
8
9

# 9.函数作用域

函数在多个变量可用的情况下采用就近原则，使用最近的那个变量的值；

var a = 'apple'
if(true){
	var a = 'angle'
}
console.log(a)//angle
1
2
3
4
5

上述代码中，由于var不存在块级作用域，所以变量a采用就近原则，使用angle的值；

作用域表示区域；作用域链表示次序；

# 10.CSS清除浮动

1.clear清除浮动

  • 使用空的块级元素清除浮动，比如P标签：p，以下是为了看清楚才添加内容和样式的，实际上不添加也行；
  • 只需要在浮动元素的最后添加该标签即可：

添加前：

image-20200321105139388

添加后：

image-20200321105037590

可以看到p标签吧父元素撑开了；

但是会产生大量空元素，浪费资源

2.采用BFC的方法

BFC就好像一个盒子一样，这样就可以包含住浮动的子元素了；创建BFC有多种方法：

  • overflow：hidden/auto

    比如在父元素中设置overflow:hidden，添加overflow后会把浮动流也计算在内，后面多余的地方根据属性值，采用不同的处理方式：hidden：隐藏；

image-20200321105431115

  • 给父元素设置浮动

image-20200321105753170

该方法会影响布局，比较局限（因为父元素不一定需要浮动）

3.添加伪元素（最好的办法）

伪元素，相当于给文档添加了一个虚拟的元素；虚拟的元素（伪元素）可以添加到被指定元素的前面或是后面；

回想一下第一种方法：就是在最底下添加一个空元素，我们可以使用伪元素after在最底下添加这一个空元素；

image-20200321110208915

在需要清除浮动的div后面添加伪元素：::after，首先添加的元素为空所以设置：content:'';其次这个空元素需要是块级元素，所以设置display:block;最后，清除浮动采用：clear: both;

可见该方法是基于第一种方法的，也是现在最常用，最推荐的方法*

# 11.加法

原则：只要有一方是字符串，其他被加数都转换为字符串（调用toString方法）；可以说加号是字符串拼接的操作符；

image-20200321113431378

image-20200321113449370

image-20200321113511138

image-20200321113530862

image-20200321113542762

image-20200321113606178

image-20200321113613994

image-20200321113627440

# 12.CSS外边距塌陷

如图所示，只显示了20px的空隙，这就是常说的外边距塌陷；

image-20200321113807355

外边距塌陷的设计初衷：

如一段话由多个P标签组成，想要每个p标签之间和与上下两张图片之间相隔10px，只加了margin-top:10px;这个属性是不行的，与下面的图片没有空隙：

image-20200321114110437

此时只需要再给p标签设置margin-bottom:10px;即可，这便是外边距塌陷的设计初衷：

image-20200321114428937

什么情况下会发生外边距塌陷：

它的设计初衷是为了解决段落之间垂直方向的空隙，因此外边距塌陷只会发生在垂直方向，而不会发生在水平方向；

  • 垂直方向，不是水平方向；
  • **块级元素，**不是行内元素，也不是行内块级元素；

所以只会发生在块级元素的垂直方向上。

在外边距塌陷情况下，外边距的计算

  • 情况1：正数 && 正数 取最大的数；

image-20200321115017031

  • 情况2：负数 && 负数 取绝对值最大的数；
  • 情况3：正数 && 负数 取相加的数；

当存在父子关系的时候：

image-20200321115701595

如果是这样设置的话：不会使B元素距离父元素A顶部20px，而是回到了情况1

image-20200321115520463

解决方法：

  • 方法一：绝对定位：设置父元素position:relative，子元素position:absolute再对子元素进行定位，这样就可以了：

image-20200321115925734

  • 方法二：行内块级元素

前面提到行内块级元素不会发生外边距塌陷，所以可以把子元素通过display:inline-block设置为行内块级元素，这样父元素和子元素的外边距就会分开计算；

image-20200321120210692

  • 方法三：相对定位

    通过position:relative讲子元素设置为相对定位，然后子元素就能相对于原来static的位置来使用top定位了：需要注意：relative只是相对于原来位置进行定位，原来位置还在，使用margin-top时同样会发生塌陷，所以只能使用top属性进行定位；

image-20200321120519013

  • 方法四：浮动

让子元素左浮动或右浮动，再使用margin-top不过要居中就比较麻烦了；

image-20200321120907525

  • 方法五：BFC

可以通过给父元素通过overflow:hidden出发BFC使父元素不再与子元素共享外边距：不过隐藏了溢出部分比较局限。

image-20200321121109859

  • 方法六：父元素添加内边距

当父元素添加了内边距后，子元素的外边距 = 子元素的外边距 + 父元素的内边距；所以只需要设置父元素的内边距padding即可：

image-20200321121356199

  • 方法七：添加边框

只要子元素和父元素之间有东西隔着（子元素被压着），就不会发生外边框塌陷，这个间隔可以是边框也可以是文字：

image-20200321121600352

此外空元素也会发生外边距塌陷：

元素A和B之间夹着一个空元素，也会造成外边距塌陷

image-20200321121814922

# 13.this的指向

this的指向有四种：默认绑定、隐式绑定、硬绑定、构造函数绑定；

# 14.图片产生的空隙

display元素的常见分类：

image-20200321132919413

为什么会有空白：

image-20200321133037834

因为书写元素时的换行是一个空白符，标签间的空白会折叠为一个空白符这是因为white-space的默认值为normal;所以解决方法之一就是，写img标签时，不换行，当时这只能解决每一行的空白，且代码可读性下降；

有三种方法：

image-20200321133413099

可以看到只有中间的方法把垂直和水平的空隙都去除了；

了解一个概念：基线

image-20200321133814329

image-20200321134336015

css元素分为置换元素和非置换元素；img属于置换元素，即由其他内容来显示的；这种没有基线的元素底端会和元素的基线对齐；

图片和文字是绑在一起的，都是基于基线对齐的，图片下面有空隙是为了放文字；font-size:0这样文字没大小了，图片也就不用留位置显示文字了，所以该方法可以消除图片间的空隙；

解决方法：让图片不使用基线对齐即可，给图片设置vertical-align: bottom即可：

image-20200321134318813

给父元素设置line-height：0也可以不过，会出现问题：

image-20200321134504024

# 15.事件捕获和事件冒泡

按照顺序是先进行事件捕获再进行事件冒泡：

image-20200322155404544

举例：

image-20200322155528363

# 16.伪类和伪元素

image-20200322160336710

# 17.双飞翼布局

image-20200324091725736

圣杯布局

image-20200324091748181

区别

image-20200324091811993

最后更新于: 2020年6月13日星期六晚上7点32分

← 12.知识点整理② →