精华内容
下载资源
问答
  •  要说递归和栈的问题,首先就要说下计算机内存的基本原理。简单理解计算机内存原理可以将一台电脑看作超市的存包柜,每个柜子都有柜号(即计算机中的地址,如0x000000f)。当需要将数据存储到计算机中时,计算机会...

    计算机内存原理

      要说递归和栈的问题,首先就要说下计算机内存的基本原理。简单理解计算机内存原理可以将一台电脑看作超市的存包柜,每个柜子都有柜号(即计算机中的地址,如0x000000f)。当需要将数据存储到计算机中时,计算机会提供一个地址。

      其实算法图解这本书顺序是先写递归再写栈,我认为这样的顺序不好,应当先理解栈之后才能更好理解递归。借用下啊哈算法的图例和解释:

    栈限定只能在一端进行插入和删除操作。比如说有一个小桶,小桶的直径只能放一个小球,我们现在向小桶内依次放入2号、1号、3号小球。假如你现在需要拿出2号小球,那就必须先将3号小球拿出,再拿出1号小球,最后才能将2号小球拿出来。在刚才取小球的过程中,我们最先放进去的小球最后才能拿出来,而最后放进去的小球却可以最先拿出来。这就是后进先出,也可以称为先进后出。

    递归

      递归,上一张盗来的图解释下,递归的基本思想就是把规模大的问题转化为规模小的相似的子问题来解决。特别地,在函数实现时,因为解决大问题的方法和解决小问题的方法往往是同一个方法,所以就产生了函数调用它自身的情况,这也正是递归的定义所在。格外重要的是,这个解决问题的函数必须有明确的结束条件,否则就会导致无限递归的情况。

     

    用python实现阶乘解释下递归

    1 def fact(x):
    2     if x == 1:
    3         return 1
    4     else:
    5         return x * fact(x-1)        

     

      此时计算fact(3)的值

     

    转载于:https://www.cnblogs.com/vincentme/p/9404169.html

    展开全文
  • 图解:JVM虚拟机与组成部分

    千次阅读 2018-06-28 21:50:20
    程序计数器虚拟机虚拟机与线程相关。...操作数:存放调用过程中的计算结果的临时存放区域。帧数据区:存放的是异常处理表和函数的返回,访问常量池的指针。本地方法栈堆方法区:常量池直接内存...

    虚拟机栈

    虚拟机栈生命周期与线程相同。启动一个线程,程序调用函数,栈帧被压入栈中,函数调用结束,相应的是栈帧的出栈。

    栈帧由局部变量表,操作数栈,帧数据区组成。

    局部变量表:存放的是函数的入参,以及局部变量。

    操作数栈:存放调用过程中的计算结果的临时存放区域。

    帧数据区:存放的是异常处理表和函数的返回,访问常量池的指针。

    举个例子,线程执行进入方法A,则会创建栈帧入栈,A方法调用了B方法,B栈帧入栈,B方法中调用C方法,C创建了栈帧压入栈中,接下来是D入栈

    反过来,D方法执行完,栈帧出栈,接着是C,B,A。












    展开全文
  • 0基础快速入门CSS技术(4)2. 重点提炼3. CSS复合选择器3.1 后代选择器(重点)3.1.1 example013.2 子元素选择器3.2.1 exmaple023.3 交集选择器3.3.1 example033.4 并集选择器(重点)3.4.1 example043.5 测试题3.6...

    文章目录

    1. 0基础快速入门CSS技术栈(4)

    本篇围绕一个 导航栏案例进行学习知识点。

    2. 重点提炼

    • 复合选择器
      • 后代选择器
      • 并集选择器
    • 标签显示模式
    • CSS背景
      • 背景位置
    • CSS三大特性
      • 优先级

    在这里插入图片描述

    3. CSS复合选择器

    目标

    • 理解

      • 理解css复合选择器分别的应用场景
    • 应用

      • 使用后代选择器给元素添加样式
      • 使用并集选择器给元素添加样式
      • 使用伪类选择器

    为什么要学习css复合选择器

    CSS选择器分为 基础选择器 和 复合选择器 ,但是基础选择器不能满足我们实际开发中,快速高效的选择标签。

    • 目的是为了可以选择更准确更精细的目标元素标签。
    • 复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的

    3.1 后代选择器(重点)

    • 概念:

      后代选择器又称为包含选择器

    • 作用:

      用来选择元素或元素组的子孙后代

    • 其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔,先写父亲爷爷,在写儿子孙子。

    父级 子级{属性:属性值;属性:属性值;}
    
    • 语法:
    .class h3{color:red;font-size:16px;}
    

    在这里插入图片描述

    • 当标签发生嵌套时,内层标签就成为外层标签的后代。
    • 子孙后代都可以这么选择。 或者说,它能选择任何包含在内 的标签。

    实际就是把不同标签分类到不同的盒子里,分别设置样式。就相当于小米首页,上面和左侧的a标签都是装进不同的盒子中采取不同的样式了。
    在这里插入图片描述

    3.1.1 example01

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>后代选择器</title>
    	<style>
    		/*常山 赵子龙*/
    		/*山东 济南*/
    		.nav a {
    			color: pink;
    		}
    		.wang ul li {
    			color: red;
    		}
    	</style>
    </head>
    <body>
    	<div class="nav">
    		<a href="#">内部链接</a>
    		<a href="#">内部链接</a>
    		<a href="#">内部链接</a>
    	</div>
    	<a href="#">外部链接</a>
    	<a href="#">外部链接</a>
    	<a href="#">外部链接</a>
    	<ul>
    		<li>一条狗</li>
    		<li>一条狗</li>
    		<li>一条狗</li>
    	</ul>
    	<div class="wang">
    		<ul>
    			<li>隔壁老王</li>
    			<li>隔壁老王</li>
    			<li>隔壁老王</li>
    		</ul>
    	</div>
    </body>
    </html>
    

    在这里插入图片描述

    commit description:a0.16(后代选择器案例-example01)

    tag:a0.16

    3.2 子元素选择器

    • 作用:

      子元素选择器只能选择作为某元素**子元素(亲儿子)**的元素。

    • 其写法就是把父级标签写在前面,子级标签写在后面,中间跟一个 > 进行连接

    • 语法:

    .class>h3{color:red;font-size:14px;}
    

    在这里插入图片描述

    小结

    这里的子 指的是 亲儿子 不包含孙子 重孙子之类。

    白话:

     比如:  .demo > h3 {color: red;}   说明  h3 一定是demo 亲儿子。  demo 元素包含着h3。
    

    3.2.1 exmaple02

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    	/*后代选择器 选择 子孙后代*/
    	/*div strong {
    		color: red;
    	}*/
    	/*子元素选择器  符号  > 只选亲儿子 这些元素 */
    	div>strong {
    		color: pink;
    	}
    	</style>
    </head>
    <body>
    	<div>
    		<strong>儿子</strong>
    		<strong>儿子</strong>
    		<strong>儿子</strong>
    	</div>
    	<div>
    		<p>
    			<strong>孙子</strong>
    			<strong>孙子</strong>
    			<strong>孙子</strong>
    		</p>
    	</div>
    </body>
    </html>
    

    在这里插入图片描述

    参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.17
    Branch: branch01

    commit description:a0.17(子元素选择器案例-example02)

    tag:a0.17

    3.3 交集选择器

    • 条件

      交集选择器由两个选择器构成,找到的标签必须满足:既有标签一的特点,也有标签二的特点。
      在这里插入图片描述

    • 语法:
      在这里插入图片描述

    • 其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格,如h3.special

    记忆技巧:

    交集选择器 是 并且的意思。 即…又…的意思

    比如:   p.one   选择的是: 类名为 .one  的 段落标签。  
    

    用的相对来说比较少,不太建议使用。

    3.3.1 example03

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>交集选择器</title>
    	<style>
    		/*需求,就是让 p 这个 变成红色*/
    		/*交集选择器  既是p标签  又是 .red 类选择器的关系*/
    		p.red {
    			color: red;
    		}
    	</style>
    </head>
    <body>
    	<p class="red">红色</p>
    	<p class="red">红色</p>
    	<p class="red">红色</p>
    	<div class="red">红色</div>
    	<div class="red">红色</div>
    	<div class="red">红色</div>
    	<p>蓝色</p>
    	<p>蓝色</p>
    	<p>蓝色</p>
    </body>
    </html>
    

    在这里插入图片描述

    参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.18
    Branch: branch01

    commit description:a0.18(交集选择器案例-example03)

    tag:a0.18

    3.4 并集选择器(重点)

    • 应用:
      • 如果某些选择器定义的相同样式,就可以利用并集选择器,可以让代码更简洁。
    • 并集选择器(CSS选择器分组)是各个选择器通过,连接而成的,通常用于集体声明。
    • 语法:

    在这里插入图片描述

    • 任何形式的选择器(包括标签选择器、class类选择器id选择器等),都可以作为并集选择器的一部分。

    • 记忆技巧:

      并集选择器通常用于集体声明 ,逗号隔开的,所有选择器都会执行后面样式,逗号可以理解为 和的意思。

    比如  .one, p , #test {color: #F00;}  
    表示   .one 和 p  和 #test 这三个选择器都会执行颜色为红色。 
    通常用于集体声明。  
    

    在这里插入图片描述
    他和他,在一起, 在一起 一起的意思

    3.4.1 example04

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		/*客户需求: p 和 span 和 第一个div 里面的颜色都是红色*/
    		/*分开写的*/
    		p {
    			color: red;
    		}
    		span {
    			color: red;
    		}
    		.red {
    			color: red;
    		}
    
    		
    	</style>
    </head>
    <body>
    	<p>我和你</p>
    	<p>我和你</p>
    	<p>我和你</p>
    	<span>我和你</span>
    	<span>我和你</span>
    	<span>我和你</span>
    	<div class="red">我和你</div>
    	<div>我和你</div>
    	<h1>你和我</h1>
    	<h1>你和我</h1>
    </body>
    </html>
    

    改成并集选择器:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		/*客户需求: p 和 span 和 第一个div 里面的颜色都是红色*/
    		/*分开写的*/
    		/*p {
    			color: red;
    		}
    		span {
    			color: red;
    		}*/
    		/*.red {
    			color: red;
    		}*/
    		/*并集选择器 用逗号隔开, 逗号理解为 和的意思  通常用于集体声明 就是因为这些选择器 里面的样式 相同*/
    		p, 
    		span,
    		.red {
    			color: red;
    		}
    		
    	</style>
    </head>
    <body>
    	<p>我和你</p>
    	<p>我和你</p>
    	<p>我和你</p>
    	<span>我和你</span>
    	<span>我和你</span>
    	<span>我和你</span>
    	<div class="red">我和你</div>
    	<div>我和你</div>
    	<h1>你和我</h1>
    	<h1>你和我</h1>
    </body>
    </html>
    

    在这里插入图片描述

    参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.19
    Branch: branch01

    commit description:a0.19(并集选择器案例-example04)

    tag:a0.19

    3.5 测试题

     <!-- 主导航栏 -->
    <div class="nav">   
      <ul>
        <li><a href="#">公司首页</a></li>
    	<li><a href="#">公司简介</a></li>
    	<li><a href="#">公司产品</a></li>
    	<li><a href="#">联系我们</a></li>
      </ul>
    </div>
    <!-- 侧导航栏 -->
    <div class="sitenav">    
      <div class="site-l">左侧侧导航栏</div>
      <div class="site-r"><a href="#">登录</a></div>
    </div>
    

    在不修改以上结构代码的前提下,完成以下任务:

    1. 链接登录的颜色为红色
    2. 主导航栏里面的所有的链接改为橙色
    3. 主导航栏和侧导航栏里面文字都是14像素并且是微软雅黑
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>小测验</title>
    	<style>
    		/* 1. 链接 登录 的颜色为红色 (后代选择器) */
    		.site-r a {
    			color: red;
    		}
    		/*2. 主导航栏里面的所有的链接改为橙色 (后代选择器) */
    		.nav ul li a {
    			color: orange;
    		}
    		/*3. 主导航栏和侧导航栏里面文字都是14像素并且是微软雅黑。(并集选择器)*/
    		.nav,
    		.sitenav {
    			font: 14px "微软雅黑";
    		}
    	</style>
    </head>
    <body>
    <!-- 主导航栏 -->
    <div class="nav">   
      <ul>
        <li><a href="#">公司首页</a></li>
    	<li><a href="#">公司简介</a></li>
    	<li><a href="#">公司产品</a></li>
    	<li><a href="#">联系我们</a></li>
      </ul>
    </div>
    <!-- 侧导航栏 -->
    <div class="sitenav">    
      <div class="site-l">左侧侧导航栏</div>
      <div class="site-r"><a href="#">登录</a></div>
    </div>
    </body>
    </html>
    

    在这里插入图片描述

    参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.20
    Branch: branch01

    commit description:a0.20(选择器小测验)

    tag:a0.20

    3.6 链接伪类选择器(重点)

    伪类选择器:

    为了和我们刚才学的类选择器相区别
    类选择器是一个点 比如.demo {}
    而我们的伪类 用 2个点 就是 冒号 比如 :link{} 伪娘

    作用:

    用于向某些选择器添加特殊的效果。比如给链接添加特殊效果, 比如可以选择 第1个,第n个元素。

    因为伪类选择器很多,比如链接伪类,结构伪类等等。这里先叙述链接伪类选择器。

    • a:link /* 未访问的链接 */
    • a:visited /* 已访问的链接 */
    • a:hover /* 鼠标移动到链接上 */
    • a:active /* 选定的链接 */

    3.6.1 example05

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>链接伪类选择器</title>
    	<style>
    		/*未访问过链接的状态 正常状态*/
    		/*p.one 交集选择器*/
    		a:link {
    			color: #333;
    			/*取消下划线*/
    			text-decoration: none;
    		}
    		/*已经访问的链接  我们点击过*/
    		a:visited {
    			color: orange;
    		}
    		/*鼠标经过链接时候的状态*/
    		a:hover {
    			color: red;
    		}
    		/*当我们点击的时候(按下鼠标,别松开的时候)*/
    		a:active {
    			color: green;
    		}
    	</style>
    </head>
    <body>
    	<a href="http://www.xiaomi.com">小米手机</a>
    	<a href="http://www.dami.com">大米手机</a>
    	<!-- p.one -->
    </body>
    </html>
    

    在这里插入图片描述

    参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.21
    Branch: branch01

    commit description:a0.21(链接伪类选择器example05-1)

    tag:a0.21

    注意

    • 写的时候,他们的顺序尽量不要颠倒 按照 lvha的顺序。否则可能引起错误。

      <!DOCTYPE html>
      <html lang="en">
      <head>
      	<meta charset="UTF-8">
      	<title>链接伪类选择器</title>
      	<style>
      		/*鼠标经过链接时候的状态*/
      		a:hover {
      			color: red;
      		}
      		/*当我们点击的时候(按下鼠标,别松开的时候)*/
      		a:active {
      			color: green;
      		}
      		/*未访问过链接的状态 正常状态*/
      		/*p.one 交集选择器*/
      		a:link {
      			color: #333;
      			/*取消下划线*/
      			text-decoration: none;
      		}
      		/*已经访问的链接  我们点击过*/
      		a:visited {
      			color: orange;
      		}
      	</style>
      </head>
      <body>
      	<a href="http://www.xiaomi.com">小米手机</a>
      	<a href="http://www.dami.com">大米手机</a>
      	<!-- p.one -->
      </body>
      </html>
      

      自己尝试会发现很多都失效了。

      参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.22
      Branch: branch01

      commit description:a0.22(链接伪类选择器(bug)example05-2)

      tag:a0.22

    • 记忆法

      • love hate 爱上了讨厌
      • **lv **包包 非常 hao
    • 因为叫链接伪类,所以都是 利用交集选择器 a:link a:hover

    • 因为a链接浏览器具有默认样式,所以我们实际工作中都需要给链接单独指定样式(仅仅给父亲是没用的)。

      <style>
          /*正确写法*/
          .nav a {
              color: #333;
              text-decoration: none;
          }
          /*错误写法*/
          .nav {
              color: #333;
              text-decoration: none;
          }
      </style>
      <div class="nav">
      		<a href="#">手机</a>
      		<a href="#">手机</a>
      		<a href="#">手机</a>
      		<a href="#">手机</a>
      </div>
      
    • 实际工作开发中,我们很少写全四个状态,一般我们写法如下:

    a {   /* a是标签选择器  所有的链接 */
    			font-weight: 700;
    			font-size: 16px;
    			color: gray;
    }
    a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */
    			color: red; /*  鼠标经过的时候,由原来的 灰色 变成了红色 */
    }
    

    3.6.2 example06

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    	/*所以我们实际工作中都需要给链接单独指定样式*/
    		.nav a {
    			color: #333;
    			text-decoration: none;
    		}
    		/*鼠标放到 nav 里面的链接 才会变色(后代选择器+链接伪类选择器)*/
    		.nav a:hover {
    			color: orange;
    		}
    	</style>
    </head>
    <body>
    	<div class="nav">
    		<a href="#">手机</a>
    		<a href="#">手机</a>
    		<a href="#">手机</a>
    		<a href="#">手机</a>
    	</div>
    	<a href="#">没有妈妈的孩子像棵草</a>
    </body>
    </html>
    

    在这里插入图片描述

    参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.23
    Branch: branch01

    commit description:a0.23(实际开发中链接的写法example06)

    tag:a0.23

    3.7 复合选择器总结

    选择器 作用 特征 使用情况 隔开符号及用法
    后代选择器 用来选择元素后代 是选择所有的子孙后代 较多 符号是空格 .nav a
    子代选择器 选择 最近一级元素 只选亲儿子 较少 符号是**>** .nav>p
    交集选择器 选择两个标签交集的部分 既是 又是 较少 没有符号 p.one
    并集选择器 选择某些相同样式的选择器 可以用于集体声明 较多 符号是逗号 .nav, .header
    链接伪类选择器 给链接更改状态 较多 重点记住 a{} 和 a:hover 实际开发的写法

    4. 标签显示模式(display)重点

    目标:

    • 理解
      • 标签的三种显示模式
      • 三种显示模式的特点以及区别
      • 理解三种显示模式的相互转化
    • 应用
      • 实现三种显示模式的相互转化

    4.1 什么是标签显示模式

    • 什么是标签的显示模式?

      标签以什么方式进行显示,比如div 自己占一行, 比如span 一行可以放很多个

      <!DOCTYPE html>
      <html lang="en">
      <head>
      	<meta charset="UTF-8">
      	<title>Document</title>
      </head>
      <body>
      	<div>我是div,一行独占上</div>
      	<div>我是div,一行独占上</div>
      	<div>我是div,一行独占上</div>
      	<span>看我是span,我愿意一行</span>
      	<span>看我是span,我愿意一行</span>
      	<span>看我是span,我愿意一行</span>
      </body>
      </html>
      

    在这里插入图片描述

    参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.24
    Branch: branch01

    commit description:a0.24(不同标签显示效果不一样)

    tag:a0.24

    • 作用:

      我们网页的标签非常多,再不同地方会用到不同类型的标签,以便更好的完成我们的网页。

    • 标签的类型(分类)

      HTML标签一般分为块标签行内标签两种类型,它们也称块元素行内元素

    4.2 块级元素(block-level)

    • 例:
    常见的块元素有<h1>~<h6><p><div><ul><ol><li>等,其中<div>标签是最典型的块元素。
    

    在这里插入图片描述

    • 块级元素的特点(建议背诵

    (1)比较霸道,自己独占一行

    (2)高度,宽度、外边距以及内边距都可以控制。

    (3)宽度默认是容器(父级宽度)的100%

    (4)是一个容器及盒子,里面可以放行内或者块级元素。

    • 注意:
      • 只有 文字才 能组成段落 因此 p里面不能放块级元素,特别是p不能放div
      • 同理还有这些标签h1,h2,h3,h4,h5,h6,dt,他们都是文字类块级标签,里面不能放其他块级元素。

    4.2.1 example07

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		div {
    			width: 200px;
    			height: 200px;
    			/*背景颜色 不要和 文字颜色混淆了 color*/
    			background-color: pink;
    		}
    	</style>
    </head>
    <body>
    	<div>我是块级元素</div>
    	<div>我是块级元素</div>
    	<div>
    		<strong>文字</strong>
    		<h1>标题</h1>
    	</div>
    	<!-- p里面不能包含 div  段落p h  dt 里面尽量不要放块级元素 -->
    	<!-- <p>
    		<div>123</div>
    	</p> -->
    </body>
    </html>
    

    在这里插入图片描述

    参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.25
    Branch: branch01

    commit description:a0.25(块级显示模式案例example07)

    tag:a0.25

    4.3 行内元素(inline-level)

    • 例:
    常见的行内元素有<a><strong><b><em><i><del><s><ins><u><span>等,其中<span>标签最典型的行内元素。有的地方也成内联元素
    

    在这里插入图片描述

    • 行内元素的特点:

    (1)相邻行内元素在一行上,一行可以显示多个。

    (2)高、宽直接设置是无效的。

    (3)默认宽度就是它本身内容的宽度。

    (4)行内元素只能容纳文本或则其他行内元素。

    在这里插入图片描述 注意:

    • 链接里面不能再放链接。
    • 特殊情况a里面可以放块级元素,但是给a转换一下块级模式最安全。(关于转换后面再说)

    4.3.1 example08

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		span {
    			width: 200px;
    			height: 200px;
    			background-color: pink;
    		}
    	</style>
    </head>
    <body>
    	<span>我是行内元素</span>
    	<span>我是行内元素</span>
    	<span>我是行内元素哒哒哒</span>
    	<span><strong></strong></span>
    	<!-- 行内元素里不能放块级元素 -->
    <!-- 	<span>
    		<div></div>
    	</span> -->
    	<!-- a标签里不能再嵌套a标签 -->
    	<!-- <a href="#">
    		<a href="#"></a>
    	</a> -->
    </body>
    </html>
    

    在这里插入图片描述

    参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.26
    Branch: branch01

    commit description:a0.26(行内显示模式案例example08)

    tag:a0.26

    4.4 行内块元素(inline-block)

    • 例:
    在行内元素中有几个特殊的标签——<img /><input /><td>,可以对它们设置宽高和对齐属性,有些资料可能会称它们为行内块元素。
    

    在这里插入图片描述

    • 行内块元素的特点:

      (1)和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙。一行可以显示多个
      (2)默认宽度就是它本身内容的宽度。
      (3)高度,行高、外边距以及内边距都可以控制。

    4.4.1 example09

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		img {
    			width: 200px;
    		}
    	</style>
    </head>
    <body>
    	<img src="images/3.jpg" alt="">
    	<img src="images/3.jpg" alt="">
    	<img src="images/3.jpg" alt="">
    </body>
    </html>
    

    在这里插入图片描述

    参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.27
    Branch: branch01

    commit description:a0.27(行内块显示模式案例example09)

    tag:a0.27

    4.5 三种模式总结区别

    元素模式 元素排列 设置样式 默认宽度 包含
    块级元素 一行只能放一个块级元素 可以设置宽度高度 容器的100% 容器级可以包含任何标签
    行内元素 一行可以放多个行内元素 不可以直接设置宽度高度 它本身内容的宽度 容纳文本或则其他行内元素
    行内块元素 一行放多个行内块元素 可以设置宽度和高度 它本身内容的宽度

    4.6 标签显示模式转换 display

    • 块转行内:display:inline;
    • 行内转块:display:block;
    • 块、行内元素转换为行内块: display: inline-block;

    此阶段,我们只需关心这三个,其他的是我们后面的工作。

    我们鼠标移动上去就弹出一个框,鼠标编程小手,在这框点击即可跳转,我们会发现a标签是不能设置宽度高度的,而这里却有宽度和高度。这里实际就是行内元素转化为了块级元素。

    在这里插入图片描述

    4.6.1 example10

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		span {
    			/*把行内元素转换为块级元素*/
    			display: block;
    			width: 100px;
    			height: 100px;
    			background-color: pink;
    		}
    		div {
    			/*把块级元素转换为行内元素*/
    			display: inline;
    			width: 200px;
    			height: 200px;
    			background-color: purple;
    		}
    		a {
    			/*转换为 行内块元素*/
    			display: inline-block;
    			width: 80px;
    			height: 25px;
    			background-color: orange;
    		}
    	</style>
    </head>
    <body>
    	<span>行内</span>
    	<span>行内</span>
    
    	<div>div 是块级元素</div>
    	<div>div 是块级元素</div>
    	<a href="#">百度</a>
    	<a href="#">新浪</a>
    </body>
    </html>
    

    在这里插入图片描述

    参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.28
    Branch: branch01

    commit description:a0.28(三种显示模式相互转换案例example10)

    tag:a0.28

    4.6.2 example11

    简单导航栏

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		/*1. 变化样式 有大小  一行显示  我们想到了 行内块元素*/
    		a {
    			/*一定要进行模式转换 行内块*/
    			display: inline-block;
    			width: 100px;
    			height: 30px;
    			background-color: pink;
    			/*可以让文字水平居中*/
    			text-align: center;
                 /*白色*/
    			color: #fff;
                 /*去除下划线*/
    			text-decoration: none;
    		}
    		/*2. 鼠标经过 变化底色 和 文字的颜色*/
    		a:hover {
    			background-color: orange;
    			color: yellow;
    		}
    	</style>
    </head>
    <body>
    	<a href="#">新闻</a>
    	<a href="#">体育</a>
    	<a href="#">汽车</a>
    	<a href="#">好用</a>
    </body>
    </html>
    

    在这里插入图片描述

    参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.29
    Branch: branch01

    commit description:a0.29(简单导航栏案例example11)

    tag:a0.29

    5. 行高那些事(line-height)

    目标

    • 理解
      • 能说出 行高 和 高度 三种关系
      • 能简单理解为什么行高等于高度单行文字会垂直居中
    • 应用
      • 使用行高实现单行文字垂直居中
      • 能会测量行高

    5.1 行高测量

    行高的测量方法:上一行的基线到下一行基线的距离(英文基线到基线,中底线到顶线即可。)
    在这里插入图片描述
    在这里插入图片描述

    ps测量行高:

    测量的时候截图注意浏览器显示和电脑显示都得是100%,否则像素必然发生变化。
    在这里插入图片描述
    在这里插入图片描述

    5.2 单行文本垂直居中

    行高我们利用最多的一个地方是: 可以让单行文本在盒子中垂直居中对齐。

    文字的行高等于盒子的高度。

    这里情况些许复杂,开始学习,我们可以先从简单地方入手学会。

    行高 = 上距离 + 内容高度 + 下距离

    在这里插入图片描述

    上距离和下距离总是相等的,因此文字看上去是垂直居中的。

    行高和高度(容器)的三种关系

    • 如果 行高 等 高度 文字会 垂直居中
    • 如果行高 大于 高度 文字会 偏下
    • 如果行高小于高度 文字会 偏上

    5.2.1 example12

    5.2.1.1 example12-1

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		div {
    			width: 100px;
    			height: 50px;
    			background-color: pink;
    			line-height: 50px;
    		}
    	</style>
    </head>
    <body>
    	<div> 文字垂直居中 </div>
    </body>
    </html>
    

    在这里插入图片描述

    参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.29
    Branch: branch01

    commit description:a0.29(单行文本垂直居中栏案例example12-1——值相等则居中,否则越大越往下偏移)

    tag:a0.29

    5.2.1.2 example12-2

    完善example11中的导航栏字体居中

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		/*1. 变化样式 有大小  一行显示  我们想到了 行内块元素*/
    		a {
    			/*一定要进行模式转换 行内块*/
    			display: inline-block;
    			width: 100px;
    			height: 30px;
    			/*行高等于高度 可以让单行文本呢垂直居中*/
    			line-height: 30px;
    			background-color: pink;
    			/*可以让文字水平居中*/
    			text-align: center;
    			color: #fff;
    			text-decoration: none;
    		}
    		/*2. 鼠标经过 变化底色 和 文字的颜色*/
    		a:hover {
    			background-color: orange;
    			color: yellow;
    		}
    	</style>
    </head>
    <body>
    	<a href="#">新闻</a>
    	<a href="#">体育</a>
    	<a href="#">汽车</a>
    	<a href="#">好用</a>
    </body>
    </html>
    

    在这里插入图片描述

    参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.31
    Branch: branch01

    commit description:a0.31(单行文本垂直居中栏案例example12-2——完善example11中的导航栏字体居中)

    tag:a0.31

    6. CSS 背景(background)

    目标

    • 理解
      • 背景的作用
      • css背景图片和插入图片的区别
    • 应用
      • 通过css背景属性,给页面元素添加背景样式
      • 能设置不同的背景图片位置

    6.1 背景颜色(color)

    • 语法:

      background-color:颜色值;   默认的值是 transparent  透明的
      

    6.1.1 example13

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		.bg {
    			width: 800px;
    			height: 500px;
    			/* 快捷键bgc */
    			background-color: pink;
    		}
    	</style>
    </head>
    <body>
    	<div class="bg">
    		12312312312312312312312312312
    	</div>
    </body>
    </html>
    

    在这里插入图片描述

    6.2 背景图片(image)

    • 语法:
    background-image : none | url (url) 
    
    参数 作用
    none 无背景图(默认的)
    url 使用绝对或相对地址指定背景图像
    background-image : url(images/demo.png);
    
    • 小技巧: 我们提倡 背景图片后面的地址,url不要加引号。

    背景图片和插入图片是有区别的。插入图片是在盒子内部放入图片,而背景图片是在盒子的底部。

    6.2.1 example14

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		.bg {
    			width: 800px;
    			height: 500px;
    			/* 快捷键bgc */
    			background-color: pink;
    			/*背景图片 1. 必须加url 2. url 里面的地址不要加 引号*/
    			/* bgi快捷键 */
    			background-image: url(images/l.jpg);
    		}
    	</style>
    </head>
    <body>
    	<div class="bg">
    		12312312312312312312312312312
    	</div>
    </body>
    </html>
    

    在这里插入图片描述

    参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.32
    Branch: branch01

    commit description:a0.32(背景图片案例example14)

    tag:a0.32

    6.3 背景平铺(repeat)

    • 语法:
    background-repeat : repeat | no-repeat | repeat-x | repeat-y 
    
    参数 作用
    repeat 背景图像在纵向和横向上平铺(默认的)
    no-repeat 背景图像不平铺
    repeat-x 背景图像在横向上平铺
    repeat-y 背景图像在纵向平铺

    6.3.1 example15

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		.bg {
    			width: 800px;
    			height: 500px;
    			background-color: pink;
    			/*背景图片 1. 必须加url 2. url 里面的地址不要加 引号*/
    			background-image: url(images/l.jpg);
    			/*默认的是平铺图 repeat*/
    			/*background-repeat: repeat;*/
    			/*背景图片不平铺*/
    			background-repeat: no-repeat;
    		}
    	</style>
    </head>
    <body>
    	<div class="bg">
    		12312312312312312312312312312
    	</div>
    </body>
    </html>
    

    在这里插入图片描述

    水平平铺

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		.bg {
    			width: 800px;
    			height: 500px;
    			background-color: pink;
    			/*背景图片 1. 必须加url 2. url 里面的地址不要加 引号*/
    			background-image: url(images/l.jpg);
    			/*默认的是平铺图 repeat*/
    			/* background-repeat: repeat; */
    			/*背景图片不平铺*/
    			/* background-repeat: no-repeat; */
    			/*横向平铺 repeat-x*/
    			background-repeat: repeat-x;
    		}
    	</style>
    </head>
    <body>
    	<div class="bg">
    		12312312312312312312312312312
    	</div>
    </body>
    </html>
    

    在这里插入图片描述

    纵向平铺

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		.bg {
    			width: 800px;
    			height: 500px;
    			background-color: pink;
    			/*背景图片 1. 必须加url 2. url 里面的地址不要加 引号*/
    			background-image: url(images/l.jpg);
    			/*默认的是平铺图 repeat*/
    			/* background-repeat: repeat; */
    			/*背景图片不平铺*/
    			/* background-repeat: no-repeat; */
    			/*横向平铺 repeat-x*/
    			/* background-repeat: repeat-x; */
    			/*纵向平铺*/
    			background-repeat: repeat-y;
    		}
    	</style>
    </head>
    <body>
    	<div class="bg">
    		12312312312312312312312312312
    	</div>
    </body>
    </html>
    

    在这里插入图片描述

    参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.33
    Branch: branch01

    commit description:a0.33(背景平铺案例example15)

    tag:a0.33

    6.4 背景位置(position) 重点

    • 语法:
    background-position : length || length
    
    background-position : position || position 
    
    参数
    length 百分数 | 由浮点数字和单位标识符组成的长度值
    position top | center | bottom | left | center | right 方位名词
    • 注意:
      • 必须先指定background-image属性
      • position后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。
      • 如果指定两个值,两个值都是方位名字,则两个值前后顺序无关,比如left toptop left效果一致
      • 如果只指定了一个方位名词,另一个值默认居中对齐。
      • 如果position后面是精确坐标, 那么第一个,肯定是x第二的一定是y
      • 如果只指定一个数值,那该数值一定是x坐标,另一个默认垂直居中
      • 如果指定的两个值是 精确单位和方位名字混合使用,则第一个值是x坐标,第二个值是y坐标

    实际工作用的最多的,就是背景图片居中对齐了。

    6.4.1 example16

    6.4.1.1 example16-1

    背景位置右上角

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		.bg {
    			width: 800px;
    			height: 500px;
    			background-color: pink;
    			/*背景图片 1. 必须加url 2. url 里面的地址不要加 引号*/
    			background-image: url(images/l.jpg);
    			/*背景图片不平铺*/
    			background-repeat: no-repeat;
    			/*背景位置*/
    			/*background-position: x坐标 y坐标;*/
    			/*右上角*/
    			background-position: right top;
    		}
    	</style>
    </head>
    <body>
    	<div class="bg">
    		12312312312312312312312312312
    	</div>
    </body>
    </html>
    

    在这里插入图片描述

    /*左下角*/
    background-position: left bottom;
    

    在这里插入图片描述

    			/* 水平居中 垂直居中*/
    			background-position: center center;
    

    在这里插入图片描述

    background-position:  center left;
    

    在这里插入图片描述

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		.bg {
    			width: 800px;
    			height: 500px;
    			background-color: pink;
    			/*背景图片 1. 必须加url 2. url 里面的地址不要加 引号*/
    			background-image: url(images/l.jpg);
    			/*背景图片不平铺*/
    			background-repeat: no-repeat;
    			/*背景位置*/
    			/*background-position: x坐标 y坐标;*/
    			/*background-position: right top; 右上角*/
    			/*background-position: left bottom; 左下角*/
    			/*background-position: center center; 水平居中 垂直居中*/
    			/*则两个值前后顺序无关 因为是方位名词*/
    			/* background-position:  center left; */
    			/*如果只指定了一个方位名词,另一个值默认居中对齐*/
    			background-position: top; 
    
    
    		}
    	</style>
    </head>
    <body>
    	<div class="bg">
    		12312312312312312312312312312
    	</div>
    </body>
    </html>
    

    在这里插入图片描述

    参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.34
    Branch: branch01

    commit description:a0.34(背景位置案例example16-1)

    tag:a0.34

    6.4.1.2 example16-2

    注意:网页端的坐标轴和我们数学中的坐标x轴相同,y轴刚好相反(即越往右x轴坐标越大、越往下y轴坐标越大)。草图如下:
    在这里插入图片描述

    background-position: 50px 10px ;
    

    在这里插入图片描述

    background-position: 10px center;
    

    在这里插入图片描述

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		.bg {
    			width: 800px;
    			height: 500px;
    			background-color: pink;
    			/*背景图片 1. 必须加url 2. url 里面的地址不要加 引号*/
    			background-image: url(images/l.jpg);
    			/*背景图片不平铺*/
    			background-repeat: no-repeat;
    			/*背景位置*/
    			/*background-position: x坐标 y坐标;*/
    			/*background-position: right top; 右上角*/
    			 /*那么第一个,肯定是 x 是 50   第二的一定是y 是 10*/
    			/* background-position: 50px 10px ; */
    			/*以下说明  x 10像素  y 垂直居中的*/
    			/* background-position: 10px center; */
    			background-position: center 10px;
    
    		}
    	</style>
    </head>
    <body>
    	<div class="bg">
    		12312312312312312312312312312
    	</div>
    </body>
    </html>
    

    在这里插入图片描述

    参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.35
    Branch: branch01

    commit description:a0.35(CSS背景位置2案例example16-2)

    tag:a0.35

    6.4.1.3 example16-3

    魔兽世界背景大图

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		body {
    			height: 3000px;
    			background-image: url(images/sms.jpg);
    			background-repeat: no-repeat;
    		}
    	</style>
    </head>
    <body>
    	
    </body>
    </html>
    

    图片默认是从左上角开始(该图片的1920*1080,如果电脑分辨率刚好则还好,如果不够,就是从左上角开始展示,会丢失一部分,如果放中间是最好的),这样的话是不太好的,因此通常需要左右居中然后顶部对齐显示。
    在这里插入图片描述

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		body {
    			height: 3000px;
    			background-image: url(images/sms.jpg);
    			background-repeat: no-repeat;
    			/*这种写法一般是我们以后 超大背景图片的做法 背景定位*/
    			background-position: center top;
    		}
    	</style>
    </head>
    <body>
    	
    </body>
    </html>
    

    小迪电脑是1920*1080,所以看不出明显的差异。

    在这里插入图片描述

    参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.36
    Branch: branch01

    commit description:a0.36(魔兽世界背景大图案例example16-3)

    tag:a0.36

    6.4.1.4 example16-4

    小图片在盒子左侧垂直居中
    在这里插入图片描述

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		.icon {
    			width: 150px;
    			height: 35px;
    			background-color: pink;
    			background-image: url(images/sina.png);
    			background-repeat: no-repeat;
    			background-position: 10px center;
    		}
    	</style>
    </head>
    <body>
    	<div class="icon"></div>
    </body>
    </html>
    

    在这里插入图片描述

    参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.37
    Branch: branch01

    commit description:a0.37(小图片左侧对齐盒子案例example16-4)

    tag:a0.37

    6.5 背景附着

    • 背景附着就是解释背景是滚动的还是固定的

    • 语法:

      background-attachment : scroll | fixed 
      
    参数 作用
    scroll(默认) 背景图像是随对象内容滚动
    fixed 背景图像固定

    6.5.1 example17

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		body {
    			height: 3000px;
    			background-image: url(images/sms.jpg);
    			background-repeat: no-repeat;
    			/*这种写法一般是我们以后 超大背景图片的做法 背景定位*/
    			background-position: center top;
    		}
    		p {
    			font-size: 30px;
    			color: #fff;
    		}
    	</style>
    </head>
    <body>
    	<p>天王盖地虎,小鸡炖蘑菇</p>
    	<p>天王盖地虎,小鸡炖蘑菇</p>
    	<p>天王盖地虎,小鸡炖蘑菇</p>
    	<p>天王盖地虎,小鸡炖蘑菇</p>
    	<p>天王盖地虎,小鸡炖蘑菇</p>
    	<p>天王盖地虎,小鸡炖蘑菇</p>
    	<p>天王盖地虎,小鸡炖蘑菇</p>
    	<p>天王盖地虎,小鸡炖蘑菇</p>
    	<p>天王盖地虎,小鸡炖蘑菇</p>
    	<p>天王盖地虎,小鸡炖蘑菇</p>
    	<p>天王盖地虎,小鸡炖蘑菇</p>
    	<p>天王盖地虎,小鸡炖蘑菇</p>
    	<p>天王盖地虎,小鸡炖蘑菇</p>
    	<p>天王盖地虎,小鸡炖蘑菇</p>
    	<p>天王盖地虎,小鸡炖蘑菇</p>
    	<p>天王盖地虎,小鸡炖蘑菇</p>
    	<p>天王盖地虎,小鸡炖蘑菇</p>
    	<p>天王盖地虎,小鸡炖蘑菇</p>
    	<p>天王盖地虎,小鸡炖蘑菇</p>
    	<p>天王盖地虎,小鸡炖蘑菇</p>
    	<p>天王盖地虎,小鸡炖蘑菇</p>
    </body>
    </html>
    

    在这里插入图片描述
    背景固定

    /*背景固定的*/
    background-attachment: fixed;
    

    在这里插入图片描述

    参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.38
    Branch: branch01

    commit description:a0.38(背景固定案例example17)

    tag:a0.38

    6.6 背景简写

    • background:属性的值的书写顺序官方并没有强制标准的。为了可读性,建议大家如下写:
    • background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
    • 语法:
    background: transparent url(image.jpg) repeat-y  scroll center top ;
    

    6.6.1 example18

    优化example17,进行背景简写

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		body {
    			height: 3000px;
    			/*background-color: #ccc;
    			background-image: url(images/sms.jpg);
    			background-repeat: no-repeat;
    			background-position: center top;
    			background-attachment: fixed;*/
    			/*background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;*/
    			background: #ccc url(images/sms.jpg) no-repeat fixed center top;
    		}
    		p {
    			font-size: 30px;
    			color: #fff;
    		}
    	</style>
    </head>
    <body>
    	<p>天王盖地虎,小鸡炖蘑菇</p>
    	<p>天王盖地虎,小鸡炖蘑菇</p>
    	<p>天王盖地虎,小鸡炖蘑菇</p>
    	<p>天王盖地虎,小鸡炖蘑菇</p>
    	<p>天王盖地虎,小鸡炖蘑菇</p>
    	<p>天王盖地虎,小鸡炖蘑菇</p>
    	<p>天王盖地虎,小鸡炖蘑菇</p>
    	<p>天王盖地虎,小鸡炖蘑菇</p>
    	<p>天王盖地虎,小鸡炖蘑菇</p>
    	<p>天王盖地虎,小鸡炖蘑菇</p>
    	<p>天王盖地虎,小鸡炖蘑菇</p>
    	<p>天王盖地虎,小鸡炖蘑菇</p>
    	<p>天王盖地虎,小鸡炖蘑菇</p>
    	<p>天王盖地虎,小鸡炖蘑菇</p>
    	<p>天王盖地虎,小鸡炖蘑菇</p>
    	<p>天王盖地虎,小鸡炖蘑菇</p>
    	<p>天王盖地虎,小鸡炖蘑菇</p>
    	<p>天王盖地虎,小鸡炖蘑菇</p>
    	<p>天王盖地虎,小鸡炖蘑菇</p>
    	<p>天王盖地虎,小鸡炖蘑菇</p>
    	<p>天王盖地虎,小鸡炖蘑菇</p>
    </body>
    </html>
    

    在这里插入图片描述

    参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.39
    Branch: branch01

    commit description:a0.39(优化example17,进行背景简写案例example18)

    tag:a0.39

    6.6.2 example19

    导航栏案例

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		.nav {
    			/*让里面的6个链接 居中对齐水平  这句话对 行内元素 行内块元素都有效果的*/
    			text-align: center;
    		}
    		.nav a {
    			/*有大小的 因为a 是行内元素 不能直接设置宽度和高 必须要转换 行内块元素*/
    			display: inline-block;
    			width: 120px;
    			height: 50px;
    			/*行高等于盒子的高度 就可以让单行文本垂直居中*/
    			line-height: 50px;
    			color: #fff;
    			/* 去除下划线 */
    			text-decoration: none;
    			/*背景简写:设置背景,不要平铺*/
    			background: url(images/bg.png) no-repeat;
    		}
    		/*鼠标经过nav里面的链接, 背景图片更换一下就好了*/
    		.nav a:hover {
    			background-image: url(images/bgc.png);
    		}
    	</style>
    </head>
    <body>
    	<div class="nav">
    		<a href="#">网站首页</a>
    		<a href="#">网站首页</a>
    		<a href="#">网站首页</a>
    		<a href="#">网站首页</a>
    		<a href="#">网站首页</a>
    		<a href="#">网站首页</a>
    	</div>
    	<a href="#">123</a>
    </body>
    </html>
    

    在这里插入图片描述

    参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.40
    Branch: branch01

    commit description:a0.40(导航栏案例example19)

    tag:a0.40

    6.7 背景透明(CSS3)

    我们把鼠标放上去,感觉是颜色加深了,实际上是在它们上面放了一个透明的盒子。
    在这里插入图片描述

    原理类似:
    在这里插入图片描述

    • 语法:
    background: rgba(0, 0, 0, 0.3);
    
    • 最后一个参数是alpha 透明度 取值范围 0~1之间
    • 我们习惯把0.30 省略掉 这样写 background: rgba(0, 0, 0, .3);
    • 注意: 背景半透明是指盒子背景半透明, 盒子里面的内容不受影响
    • 因为是CSS3,所以 低于 ie9的版本是不支持的。

    6.7.1 example20

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		.alpha {
    			width: 300px;
    			height: 300px;
    			/*  .2是0.2的缩写 */
    			background: #000;
    		}
    	</style>
    </head>
    <body>
    
    	<div class="alpha">
    		哒哒哒
    	</div>
    </body>
    </html>
    

    在这里插入图片描述

    改透明:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		.alpha {
    			width: 300px;
    			height: 300px;
    			/*  .2是0.2的缩写 */
    			/* background: #000; */
    			background: rgba(0, 0, 0, .2);
    		}
    	</style>
    </head>
    <body>
    
    	<div class="alpha">
    		哒哒哒
    	</div>
    </body>
    </html>
    

    在这里插入图片描述

    参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.41
    Branch: branch01

    commit description:a0.41(背景透明案例example20)

    tag:a0.41

    6.8 背景总结

    属性 作用
    background-color 背景颜色 预定义的颜色值/十六进制/RGB代码
    background-image 背景图片 url(图片路径)
    background-repeat 是否平铺 repeat/no-repeat/repeat-x/repeat-y
    background-position 背景位置 length/position 分别是x 和 y坐标, 切记 如果有 精确数值单位,则必须按照先X 后Y 的写法
    background-attachment 背景固定还是滚动 scroll/fixed
    背景简写 更简单 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; 他们没有顺序
    背景透明 让盒子半透明 background: rgba(0,0,0,0.3); 后面必须是 4个值

    7. CSS 三大特性

    目标:

    • 理解
      • 能说出css样式冲突采取的原则
      • 能说出那些常见的样式会有继承
    • 应用
      • 能写出CSS优先级的算法
      • 能会计算常见选择器的叠加值

    7.1 CSS层叠性

    在这里插入图片描述

    • 概念:

      所谓层叠性是指多种CSS样式的叠加。

      是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉

    • 原则:

      • 样式冲突,遵循的原则是就近原则。 那个样式离着结构近,就执行那个样式。
      • 样式不冲突,不会层叠
    CSS层叠性最后的执行口诀:  长江后浪推前浪,前浪死在沙滩上。
    

    7.1.1 examole21

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		div {
    			color: red;
    			font-size: 30px;
    		}
    
    		div {
    			color: pink;
    		}
    	</style>
    </head>
    <body>
    	<div>
    		 长江后浪推前浪,前浪死在沙滩上。
    	</div>
    </body>
    </html>
    

    在这里插入图片描述

    参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.42
    Branch: branch01

    commit description:a0.42(样式的层叠性案例example21)

    tag:a0.42

    7.2 CSS继承性

    如第一个标题栏的文字都是垂直居中,而一个大盒子都包起来,如果设置文字垂直居中,不用都把一个个居中,只需要把大盒子居中即可,剩下的子元素继承,减少了代码的冗余性。
    在这里插入图片描述
    在这里插入图片描述

    • 概念:

      子标签会继承父标签的某些样式,如文本颜色和字号。

      想要设置一个可继承的属性,只需将它应用于父元素即可。

    简单的理解就是: 子承父业。

    • 注意
      • 恰当地使用继承可以简化代码,降低CSS样式的复杂性。比如有很多子级孩子都需要某个样式,可以给父级指定一个,这些孩子继承过来就好了。
      • 子元素可以继承父元素的样式(text-,font-,line-这些元素开头的可以继承,以及color属性
    CSS继承性口诀:  龙生龙,凤生凤,老鼠生的孩子会打洞。
    

    在这里插入图片描述

    7.2.1 example22

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		div {
    			color: red;
    		}
    	</style>
    </head>
    <body>
    	<div>
    		<p>子孙后代</p>
    	</div>
    </body>
    </html>
    

    在这里插入图片描述

    参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.43
    Branch: branch01

    commit description:a0.43(样式的继承性案例example22)

    tag:a0.43

    7.3 CSS优先级(重点)

    在这里插入图片描述

    • 概念:

      定义CSS样式时,经常出现两个或更多规则应用在同一元素上,此时,

      • 选择器相同,则执行层叠性

        <!DOCTYPE html>
        <html lang="en">
        <head>
        	<meta charset="UTF-8">
        	<title>Document</title>
        	<style>
        		div {
        			color: red;
        		}
        		div {
        			color:pink;
        		}
        	</style>
        </head>
        <body>
        	<div> 权重还有30秒到达战场 </div>
        </body>
        </html>
        

      在这里插入图片描述

      • 选择器不同,就会出现优先级的问题。

    7.3.1 权重计算公式

    关于CSS权重,我们需要一套计算公式来去计算,这个就是 CSS Specificity(特殊性)

    标签选择器 计算权重公式
    继承或者 *(通配符) 0,0,0,0(无权重)
    每个元素(标签选择器) 0,0,0,1
    每个类,伪类 0,0,1,0
    每个ID 0,1,0,0
    每个行内样式 style="" 1,0,0,0
    每个!important 重要的 ∞ 无穷大
    • 值从左到右,左面的最大,一级大于一级,数位之间没有进制,级别之间不可超越。
    • 关于CSS权重,我们需要一套计算公式来去计算,这个就是CSS Specificity(特殊性)
    • div {
      color: pink!important;
      }
    7.3.1.1 example23

    类选择器(0,0,0,1)和标签选择器(0,0,1,0

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		/* div {
    			color: red;
    		} */
    		/*类选择器 权重 0,0,1,0 班长*/
    		.one {
    			color: blue;
    		}
             /*标签选择器 权重 0,0,0,1  小组长*/
    		div {
    			color:pink;
    		}
    
    	</style>
    </head>
    <body>
    	<div class="one"> 权重还有30秒到达战场 </div>
    </body>
    </html>
    

    在这里插入图片描述

    类选择器(0,0,0,1)和标签选择器(0,0,1,0)、id 选择器(0,1,0,0

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		/* div {
    			color: red;
    		} */
    		/*类选择器 权重 0,0,1,0 班长*/
    		.one {
    			color: blue;
    		}
    		/*id 选择器 权重 0,1,0,0  班主任*/
    		#two {
    			color: green;
    		}
    		/*标签选择器 权重 0,0,0,1  小组长*/
    		div {
    			color:pink;
    		}
    	</style>
    </head>
    <body>
    	<div class="one" id="two"> 权重还有30秒到达战场 </div>
    </body>
    </html>
    

    在这里插入图片描述

    类选择器(0,0,0,1)和标签选择器(0,0,1,0)、id 选择器(0,1,0,0)、行内样式表(1,0,0,0

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		/*类选择器 权重 0,0,1,0 班长*/
    		.one {
    			color: blue;
    		}
    		/*id 选择器 权重 0,1,0,0  班主任*/
    		#two {
    			color: green;
    		}
    		/*标签选择器 权重 0,0,0,1  小组长*/
    		div {
    			color:pink;
    		}
    
    		/*style= 行内样式表 权重 1,0,0,0  校长*/
    	</style>
    </head>
    <body>
    	<div class="one" id="two" style="color: yellow;"> 权重还有30秒到达战场 </div>
    </body>
    </html>
    

    在这里插入图片描述

    优先级老大!important

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		/* div {
    			color: red;
    		} */
    		/*类选择器 权重 0,0,1,0 班长*/
    		.one {
    			color: blue;
    		}
    		/*标签选择器 权重 0,0,0,1  小组长*/
    		/*!important 在样式属性的后面添加 权重最高 ∞  教育局局长*/
    		div {
    			/* color:pink; */
    			color: pink!important;
    		}
    
    		/*id 选择器 权重 0,1,0,0  班主任*/
    		#two {
    			color: green;
    		}
    		/*style= 行内样式表 权重 1,0,0,0  校长*/
    
    	</style>
    </head>
    <body>
    	<div class="one" id="two" style="color: yellow;"> 权重还有30秒到达战场 </div>
    </body>
    </html>
    

    在这里插入图片描述

    参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.44
    Branch: branch01

    commit description:a0.44(css优先级案例example23)

    tag:a0.44

    7.3.2 权重叠加

    我们经常用交集选择器,后代选择器等,是有多个基础选择器组合而成,那么此时,就会出现权重叠加。

    就是一个简单的加法计算

    • div ul li ------> 0,0,0,3
    • .nav ul li ------> 0,0,1,2
    • a:hover -----—> 0,0,1,1
    • .nav a ------> 0,0,1,1

    在这里插入图片描述 注意:

    1. 数位之间没有进制 比如说:0,0,0,5 + 0,0,0,5 =0,0,0,10而不是 0,0, 1, 0, 所以不会存在10个div能赶上一个类选择器的情况。
    7.3.2.1 example24

    需求:改第一个标签为紫色。

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		/*出现了权重叠加的现象 */
    		/*.nav a 权重 0,0,1,0  + 0,0,0,1  = 0,0,1,1 */
    		.nav a {
    			color: red;
    		}
    		/*.first  权重 0,0,1,0*/
    		.first {
    			color: pink;
    		}
    	</style>
    </head>
    <body>
    	<div> 人生四大悲 </div>
    	<div class="nav">
    		<a href="#" class="first">家里没宽带</a>
    		<a href="#">网速不够快</a>
    		<a href="#">手机没流量</a>
    		<a href="#">学校无wifi</a>
    	</div>
    </body>
    </html>
    

    失败了。因为权重问题,可以看我写的注释解释。
    在这里插入图片描述

    解决:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		/*出现了权重叠加的现象 */
    		/*.nav a 权重 0,0,1,0  + 0,0,0,1  = 0,0,1,1 */
    		.nav a {
    			color: red;
    		}
    		/*.first  权重 0,0,1,0*/
    		/* .first {
    			color: pink;
    		} */
    		/*0020*/
    		.nav .first {
    			color: pink;
    		}
    
    
    		/*0,0,0,5  + 
    		0,0,0,5  =
    		0,0,0,10*/
    	</style>
    </head>
    <body>
    	<div> 人生四大悲 </div>
    	<div class="nav">
    		<a href="#" class="first">家里没宽带</a>
    		<a href="#">网速不够快</a>
    		<a href="#">手机没流量</a>
    		<a href="#">学校无wifi</a>
    	</div>
    </body>
    </html>
    

    在这里插入图片描述

    参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.45
    Branch: branch01

    commit description:a0.45(权重叠加案例example24)

    tag:a0.45

    7.3.3 继承的权重是0

    这个不难,但是忽略很容易绕晕。其实,我们修改样式,一定要看该标签有没有被选中。

    1) 如果选中了,那么以上面的公式来计权重。谁大听谁的。
    2) 如果没有选中(如下例只选中了父级没有选儿子,那是没有用的),那么权重是0,因为继承的权重为0.

    7.3.3.1 example25
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		div {
    			color: red;
    		}
    		p {
    			color: green;
    		}
    		/*因为demo 没有选p标签,所以 继承的权重为 0*/
    		.demo {
    			color: blue;
    		}
    		#test {
    			color: pink;
    		}
    	</style>
    </head>
    <body>
    	<div class="demo" id="test">
    		<p>继承的权重为 0</p>
    	</div>
    </body>
    </html>
    

    在这里插入图片描述

    参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.46
    Branch: branch01

    commit description:a0.46(继承的权重为0案例example25)

    tag:a0.46

    8. CSS注释

    CSS注释规则:

    /*  需要注释的内容  */  进行注释的,即在需要注释的内容前使用 "/*" 标记开始注释,在内容的结尾使用 "*/"结束。
    

    例如:

    p {
     /* 所有的字体是14像素大小*/
      font-size: 14px;                 
    }
    

    9. CSS优先级笔试题

    9.1 01题

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
    http://www.w3.org/TR/html4/loose.dtd">
    <html>
    	<head>
    		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
    		<meta name="keywords" content="关键词1,关键词2,关键词3" />
    		<meta name="description" content="对网站的描述" />
    		<title>第1题</title>
    		<style type="text/css">
    			div div{ 
    				color:blue;
    			}
    			div{
    				color:red;
    			}
    		</style>
    	</head>
    	<body>
    		<div>
    			<div>
    				<div>
    					试问这行字体是什么颜色的?
    				</div>
    			</div>
    		</div>
    	</body>
    </html>
    
    

    首先看修改样式的标签有没有被选中,这里被选中了,再看权重,因此是蓝色。
    在这里插入图片描述

    9.2 02题

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
    http://www.w3.org/TR/html4/loose.dtd">
    <html>
    	<head>
    		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
    		<meta name="keywords" content="关键词1,关键词2,关键词3" />
    		<meta name="description" content="对网站的描述" />
    		<title>第2题</title>
    		<style type="text/css">
    			#father{
    				color:red;
    			}
    			p {
    				color:blue;  
    			}
    		</style>
    	</head>
    	<body>
    		<div id="father">
    			<p>试问这行字体是什么颜色的?</p>
    		</div>
    	</body>
    </html>
    
    

    #father未被选中,继承的权重是0,所以是蓝色。

    在这里插入图片描述

    9.3 03题

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    		div div div div div div div div div div div div{    
    			color:red;
    		}
    		.me {  
    			color:blue;
    		}
    	</style>
    </head>
    <body>
    	<div>
    		<div>
    			<div>
    				<div>
    					<div>
    						<div>
    							<div>
    								<div>
    									<div>
    										<div>
    											<div>
    												<div class="me">试问这行文字是什么颜色的</div>
    											</div>
    										</div>
    									</div>
    								</div>
    							</div>
    						</div>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    </body>
    </html>
    
    

    选中了我们看公式,标签选择器权重0,0,0,12与类选择器权重0,0,1,0,显然是蓝色。

    在这里插入图片描述

    9.4 04题

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
    http://www.w3.org/TR/html4/loose.dtd">
    <html>
    	<head>
    		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
    		<meta name="keywords" content="关键词1,关键词2,关键词3" />
    		<meta name="description" content="对网站的描述" />
    		<title>第4题</title>
    		<style type="text/css">
    			div p {   
    				color:red;
    			}
    			#father {
    				color:red;
    			}
    			p.c2{    
    				color:blue;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="father" class="c1">
    			<p class="c2">
    				试问这行字体是什么颜色的?
    			</p>
    		</div>
    	</body>
    </html>
    
    

    #father虽然权重最高,但是未被选中,直接排除。

    div p对应:0,0,0,2

    p.c2对应:0,0,1,1

    在这里插入图片描述

    9.5 05题

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    		.c1 .c2 div{  
    			color: blue;
    		}
    		div #box3 {  
    			color:green;
    		}
    		#box1 div { 
    			color:yellow;
    		}
    	</style>
    </head>
    <body>
    	<div id="box1" class="c1">
    		<div id="box2" class="c2">
    			<div id="box3" class="c3">
    				文字
    			</div>
    		</div>
    	</div>
    </body>
    </html>
    
    

    三个都满足条件,被选中。

    .c1 .c2 div首先被排除,后面都带#

    div #box3#box1 div权重都是一样的(0101),使用就近原则,则是黄色。
    在这里插入图片描述

    9.6 06题

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
    http://www.w3.org/TR/html4/loose.dtd">
    <html>
    	<head>
    		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
    		<meta name="keywords" content="关键词1,关键词2,关键词3" />
    		<meta name="description" content="对网站的描述" />
    		<title>第6题</title>
    		<style type="text/css">
    			#father #son{ 
    				color:blue;
    			}
    			#father p.c2{ 
    				color:black;
    			}
    			div.c1 p.c2{  
    				color:red;
    			}
    			#father{
    				color:green !important;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="father" class="c1">
    			<p id="son" class="c2">
    				试问这行字体是什么颜色的?
    			</p>
    		</div>
    	</body>
    	
    </html>
    
    

    #father未被选中,排除。

    #father #son肯定是最高的,因为两个#

    在这里插入图片描述

    参考:https://github.com/6xiaoDi/blog-CSS/tree/a0.47
    Branch: branch01

    commit description:a0.47(CSS优先级笔试题)

    tag:a0.47

    10. 总结

    在这里插入图片描述



    (后续待补充)
    展开全文
  • 回顾:大数据平台技术(ps:可点击查看),今天就来说说其中Spark!来自:ITPUBSpark 已经成为广告、报表以及推荐系统等大数据计算场景中首选系统,因效率高...
        

    640?wx_fmt=png

    回顾:大数据平台技术栈 (ps:可点击查看),今天就来说说其中的Spark!

    来自:ITPUB

    Spark 已经成为广告、报表以及推荐系统等大数据计算场景中首选系统,因效率高,易用以及通用性越来越得到大家的青睐,我自己最近半年在接触 spark 以及 spark streaming 之后,对 spark 技术的使用有一些自己的经验积累以及心得体会,在此分享给大家。本文依次从 spark 生态,原理,基本概念,spark streaming 原理及实践,还有 spark 调优以及环境搭建等方面进行介绍,希望对大家有所帮助。

    spark 生态及运行原理


      640

    Spark 特点


      运行速度快 => Spark 拥有 DAG 执行引擎,支持在内存中对数据进行迭代计算。官方提供的数据表明,如果数据由磁盘读取,速度是 hadoop MapReduce 的 10 倍以上,如果数据从内存中读取,速度可以高达 100 多倍。

      适用场景广泛 => 大数据分析统计,实时数据处理,图计算及机器学习

      易用性 => 编写简单,支持 80 种以上的高级算子,支持多种语言,数据源丰富,可部署在多种集群中

      容错性高。Spark 引进了弹性分布式数据集 RDD (Resilient Distributed Dataset) 的抽象,它是分布在一组节点中的只读对象集合,这些集合是弹性的,如果数据集一部分丢失,则可以根据 “血统”(即充许基于数据衍生过程) 对它们进行重建。另外在 RDD 计算时可以通过 CheckPoint 来实现容错,而 CheckPoint 有两种方式:CheckPoint Data,和 Logging The Updates,用户可以控制采用哪种方式来实现容错。

    Spark 的适用场景


      目前大数据处理场景有以下几个类型:

      复杂的批量处理 (Batch Data Processing),偏重点在于处理海量数据的能力,至于处理速度可忍受,通常的时间可能是在数十分钟到数小时;

      基于历史数据的交互式查询 (Interactive Query),通常的时间在数十秒到数十分钟之间

      基于实时数据流的数据处理 (Streaming Data Processing),通常在数百毫秒到数秒之间

      Spark 成功案例 目前大数据在互联网公司主要应用在广告、报表、推荐系统等业务上。在广告业务方面需要大数据做应用分析、效果分析、定向优化等,在推荐系统方面则需要大数据优化相关排名、个性化推荐以及热点点击分析等。这些应用场景的普遍特点是计算量大、效率要求高。腾讯 / yahoo / 淘宝 / 优酷土豆

    spark 运行架构


      spark 基础运行架构如下所示:

      640

      spark 结合 yarn 集群背后的运行流程如下所示:

      640

    spark 运行流程:

      Spark 架构采用了分布式计算中的 Master-Slave 模型。Master 是对应集群中的含有 Master 进程的节点,Slave 是集群中含有 Worker 进程的节点。Master 作为整个集群的控制器,负责整个集群的正常运行; Worker 相当于计算节点,接收主节点命令与进行状态汇报; Executor 负责任务的执行; Client 作为用户的客户端负责提交应用,Driver 负责控制一个应用的执行。

      Spark 集群部署后,需要在主节点和从节点分别启动 Master 进程和 Worker 进程,对整个集群进行控制。在一个 Spark 应用的执行过程中,Driver 和 Worker 是两个重要角色。Driver 程序是应用逻辑执行的起点,负责作业的调度,即 Task 任务的分发,而多个 Worker 用来管理计算节点和创建 Executor 并行处理任务。在执行阶段,Driver 会将 Task 和 Task 所依赖的 file 和 jar 序列化后传递给对应的 Worker 机器,同时 Executor 对相应数据分区的任务进行处理。

      Excecutor /Task 每个程序自有,不同程序互相隔离,task 多线程并行,

      集群对 Spark 透明,Spark 只要能获取相关节点和进程

      Driver 与 Executor 保持通信,协作处理

    三种集群模式:

      Standalone 独立集群

      Mesos, apache mesos

      Yarn, hadoop yarn

    基本概念:


      Application =>Spark 的应用程序,包含一个 Driver program 和若干 Executor

      SparkContext => Spark 应用程序的入口,负责调度各个运算资源,协调各个 Worker Node 上的 Executor

      Driver Program => 运行 Application 的 main() 函数并且创建 SparkContext

      Executor => 是为 Application 运行在 Worker node 上的一个进程,该进程负责运行 Task,并且负责将数据存在内存或者磁盘上。每个 Application 都会申请各自的 Executor 来处理任务

      Cluster Manager => 在集群上获取资源的外部服务 (例如:Standalone、Mesos、Yarn)

      Worker Node => 集群中任何可以运行 Application 代码的节点,运行一个或多个 Executor 进程

      Task => 运行在 Executor 上的工作单元

      Job => SparkContext 提交的具体 Action 操作,常和 Action 对应

      Stage => 每个 Job 会被拆分很多组 task,每组任务被称为 Stage,也称 TaskSet

      RDD => 是 Resilient distributed datasets 的简称,中文为弹性分布式数据集; 是 Spark 最核心的模块和类

      DAGScheduler => 根据 Job 构建基于 Stage 的 DAG,并提交 Stage 给 TaskScheduler

      TaskScheduler => 将 Taskset 提交给 Worker node 集群运行并返回结果

      Transformations => 是 Spark API 的一种类型,Transformation 返回值还是一个 RDD,所有的 Transformation 采用的都是懒策略,如果只是将 Transformation 提交是不会执行计算的

      Action => 是 Spark API 的一种类型,Action 返回值不是一个 RDD,而是一个 scala 集合; 计算只有在 Action 被提交的时候计算才被触发。

    Spark 核心概念之 RDD

      640

    Spark 核心概念之 Transformations / Actions

      640

      Transformation 返回值还是一个 RDD。它使用了链式调用的设计模式,对一个 RDD 进行计算后,变换成另外一个 RDD,然后这个 RDD 又可以进行另外一次转换。这个过程是分布式的。Action 返回值不是一个 RDD。它要么是一个 Scala 的普通集合,要么是一个值,要么是空,最终或返回到 Driver 程序,或把 RDD 写入到文件系统中。

      Action 是返回值返回给 driver 或者存储到文件,是 RDD 到 result 的变换,Transformation 是 RDD 到 RDD 的变换。

      只有 action 执行时,rdd 才会被计算生成,这是 rdd 懒惰执行的根本所在。

    Spark 核心概念之 Jobs / Stage


      Job => 包含多个 task 的并行计算,一个 action 触发一个 job

      stage => 一个 job 会被拆为多组 task,每组任务称为一个 stage,以 shuffle 进行划分

      640

    Spark 核心概念之 Shuffle


      以 reduceByKey 为例解释 shuffle 过程。

      640

      在没有 task 的文件分片合并下的 shuffle 过程如下:(spark.shuffle.consolidateFiles=false)

      640

    fetch 来的数据存放到哪里?


      刚 fetch 来的 FileSegment 存放在 softBuffer 缓冲区,经过处理后的数据放在内存 + 磁盘上。这里我们主要讨论处理后的数据,可以灵活设置这些数据是 “只用内存” 还是 “内存 + 磁盘”。如果 spark.shuffle.spill = false 就只用内存。由于不要求数据有序,shuffle write 的任务很简单:将数据 partition 好,并持久化。之所以要持久化,一方面是要减少内存存储空间压力,另一方面也是为了 fault-tolerance。

      shuffle 之所以需要把中间结果放到磁盘文件中,是因为虽然上一批 task 结束了,下一批 task 还需要使用内存。如果全部放在内存中,内存会不够。另外一方面为了容错,防止任务挂掉。

      存在问题如下:

      产生的 FileSegment 过多。每个 ShuffleMapTask 产生 R(reducer 个数) 个 FileSegment,M 个 ShuffleMapTask 就会产生 M * R 个文件。一般 Spark job 的 M 和 R 都很大,因此磁盘上会存在大量的数据文件。

      缓冲区占用内存空间大。每个 ShuffleMapTask 需要开 R 个 bucket,M 个 ShuffleMapTask 就会产生 MR 个 bucket。虽然一个 ShuffleMapTask 结束后,对应的缓冲区可以被回收,但一个 worker node 上同时存在的 bucket 个数可以达到 cores R 个 (一般 worker 同时可以运行 cores 个 ShuffleMapTask),占用的内存空间也就达到了 cores R 32 KB。对于 8 核 1000 个 reducer 来说,占用内存就是 256MB。

      为了解决上述问题,我们可以使用文件合并的功能。

      在进行 task 的文件分片合并下的 shuffle 过程如下:(spark.shuffle.consolidateFiles=true)

      640

      可以明显看出,在一个 core 上连续执行的 ShuffleMapTasks 可以共用一个输出文件 ShuffleFile。先执行完的 ShuffleMapTask 形成 ShuffleBlock i,后执行的 ShuffleMapTask 可以将输出数据直接追加到 ShuffleBlock i 后面,形成 ShuffleBlock i',每个 ShuffleBlock 被称为 FileSegment。下一个 stage 的 reducer 只需要 fetch 整个 ShuffleFile 就行了。这样,每个 worker 持有的文件数降为 cores * R。FileConsolidation 功能可以通过 spark.shuffle.consolidateFiles=true 来开启。

    Spark 核心概念之 Cache


      val rdd1 = ... // 读取 hdfs 数据,加载成 RDD

      rdd1.cache

      val rdd2 = rdd1.map(...)

      val rdd3 = rdd1.filter(...)

      rdd2.take(10).foreach(println)

      rdd3.take(10).foreach(println)

      rdd1.unpersist

      cache 和 unpersisit 两个操作比较特殊,他们既不是 action 也不是 transformation。cache 会将标记需要缓存的 rdd,真正缓存是在第一次被相关 action 调用后才缓存; unpersisit 是抹掉该标记,并且立刻释放内存。只有 action 执行时,rdd1 才会开始创建并进行后续的 rdd 变换计算。

      cache 其实也是调用的 persist 持久化函数,只是选择的持久化级别为 MEMORY_ONLY。

      persist 支持的 RDD 持久化级别如下:

      640

      需要注意的问题:Cache 或 shuffle 场景序列化时, spark 序列化不支持 protobuf message,需要 java 可以 serializable 的对象。一旦在序列化用到不支持 java serializable 的对象就会出现上述错误。Spark 只要写磁盘,就会用到序列化。除了 shuffle 阶段和 persist 会序列化,其他时候 RDD 处理都在内存中,不会用到序列化。

    Spark Streaming 运行原理


      spark 程序是使用一个 spark 应用实例一次性对一批历史数据进行处理,spark streaming 是将持续不断输入的数据流转换成多个 batch 分片,使用一批 spark 应用实例进行处理。

      640

      从原理上看,把传统的 spark 批处理程序变成 streaming 程序,spark 需要构建什么?

      640

      640

      需要构建 4 个东西:

      一个静态的 RDD DAG 的模板,来表示处理逻辑;

      一个动态的工作控制器,将连续的 streaming data 切分数据片段,并按照模板复制出新的 RDD 3. DAG 的实例,对数据片段进行处理;

      Receiver 进行原始数据的产生和导入; Receiver 将接收到的数据合并为数据块并存到内存或硬盘中,供后续 batch RDD 进行消费

      对长时运行任务的保障,包括输入数据的失效后的重构,处理任务的失败后的重调。

      具体 streaming 的详细原理可以参考广点通出品的源码解析文章:

      

      对于 spark streaming 需要注意以下三点:

      尽量保证每个 work 节点中的数据不要落盘,以提升执行效率。

      640

      保证每个 batch 的数据能够在 batch interval 时间内处理完毕,以免造成数据堆积。

      640

      使用 steven 提供的框架进行数据接收时的预处理,减少不必要数据的存储和传输。从 tdbank 中接收后转储前进行过滤,而不是在 task 具体处理时才进行过滤。

      640

      640

    Spark 资源调优


     内存管理:

      640

      Executor 的内存主要分为三块:

      第一块是让 task 执行我们自己编写的代码时使用,默认是占 Executor 总内存的 20%;

      第二块是让 task 通过 shuffle 过程拉取了上一个 stage 的 task 的输出后,进行聚合等操作时使用,默认也是占 Executor 总内存的 20%;

      第三块是让 RDD 持久化时使用,默认占 Executor 总内存的 60%。

      每个 task 以及每个 executor 占用的内存需要分析一下。每个 task 处理一个 partiiton 的数据,分片太少,会造成内存不够。

    其他资源配置:


    640

    640

    长按订阅更多精彩▼

    640?wx_fmt=jpeg

    展开全文
  • 利用元素索引(index)可以计算出该元素对应存储地址。它特点是提供随机访问并且容量有限。 假如数组长度为 n。 访问:O(1)//访问特定位置元素 插入:O(n )//最坏情况发生在插入发生在数组首部...
  • 一、 和堆特点 1、内存特点 内存存储都是局部变量,变量一旦出了自己作用域,这样才会释放内存空间。 2、堆内存特点 堆内存存储是对象数据(引用类型数据,除8种基本类型以外),对象一旦被...
  • 文章目录1. 盒子模型(CSS重点)1.1 看透网页布局本质1.2 盒子模型(Box Model)1.3 盒子边框(border)1.3.1 ...1.4.2 设置1.4.2.1 example041.4.2.2 example051.4.3 课堂案例: 新浪导航1.4.4 内盒尺寸计算(元素
  • 如果凭空想象会很难,但是结合题目给出的图解就非常清晰了,如果后面柱子高度比前面柱子高度小,那么是接不到雨水,而如果后面柱子高度是大于前面柱子高度,那么是有可能接到雨水(注意只是有可能,后面...
  • 递归-

    2019-02-03 19:52:21
    在看算法图解的时候看到递归时讲到了与栈的关系,递归是靠栈来实现的,书上讲的原理都能看懂,实践下吧。结果一写代码就出现各种问题,在解决这些问题时也加深了递归与栈的关系。 现来看个简单的程序吧,计算数组N个...
  • 给定n 个非负整数表示每个宽度为 1 柱子高度图,计算按此排列柱子,下雨之后能接多少雨水。 上面是由数组 [0,1,0,2,1,0,1,3,2,1,2,1] 表示高度图,在这种情况下,可以接 6 个单位雨水(蓝色部分表示...
  • 简单谈谈

    2019-09-20 02:37:30
    一、前言 计算机程序离不开算法和数据结构,数据结构这门学科...本文简单介绍(Stack)和队列(Queue)实现 二、图解 三、线性表 1、 顺序存储结构:用一段地址连续存储单元依次存储线性表数据元素 2、 链式...
  • 引入实例: 计算:7-2*3-1 ...//栈的大小 private int[] stack;//数组模拟栈 private int top = -1;//top表示栈顶,初始化为-1 //构造器 public ArrayStack2(int maxSize){ this.maxSize = maxSize;
  • 实现基本计算器

    2021-02-17 00:18:06
    文章目录基本计算器1.1 问题描述1.2 思路及复杂度分析逆波兰表达式求值思路及复杂度分析求解数组模拟求解趣味图解代码演示1.3 代码演示 基本计算器 1.1 问题描述 实现一个基本计算器来计算一个简单字符串...
  • 在发明网络之前,个人计算机之间是独立工作,没有网卡、网线或协议,主要使用磁盘、CD和其他东西来传输数据。 后来,网线出现了。最小网络单元由网线、网卡和协议组成。 网线起着物理介质作用,以...
  • java数据结构之“

    2021-05-27 13:06:01
    数据结构之"栈"数据结构之"栈"栈的一个实际需求栈的介绍栈的应用场景栈的快速入门用数组模拟栈的使用实现思路分析,并画出示意图代码实现栈实现综合计算器(中缀表达式)使用栈来实现综合计算器思路分析(图解)代码实现...
  • 深浅拷贝这个东西是十分基础的,它涉及到了堆栈的问题,如果想要理解深浅拷贝的区别,首先要明白堆和栈的区别。 所以我们先来说一说堆和栈的区别: 堆和栈你可以当成计算机内存中的两个不同的大盒子,不同的数据类型...
  • 堆栈——最神奇数据结构 4.完成一个自定义优先级综合计算器 ...如果有,那么此函数底层一定是用来实现 即使你使用 一个函数就可以把这个算出,它底层一定是堆栈来实现 步骤
  • 图解说明: 数据存储结构: 简单讲就是数据在计算机中存储方式。 常用数据存储方式有两种:顺序存储,非顺序存储。顺序存储就是把数据存储在一块联系存储介质(硬盘或内存等)中。反之就是非顺序存储咯。...
  • 现在越来越觉得对.NET基本概念理解和掌握对于提升编程水平重要性,先从.NET Stack()和Heap(堆)说起,计算机内存可以分为代码块内存,stack内存和heap内存。代码块内存是在加载程序时存放程序机器代码地方...
  • 图解JVM内存结构

    2020-10-30 10:19:43
    JVM内存结构大致如下: 其中白色块部分是线程共享,...方法里变量在执行时,会从局部变量表或对象实例字段里复制变量或常量,放入操作数计算时则从操作数里放入或取走数据。 本地方法 本地方法和虚拟机
  • 想要理解intern()方法必须先了解String创建对象方式,对String及字符串常量池有深入了解小伙伴可以直接跳到第二部分进行阅读,不了解...如果我们再创建一个“str2”,其值也是“计算机”话就会直接将“st
  • 上课时,你又会学习到链表,队列和等数据结构。这些都被统称为线性数据结构,因为它们在逻辑上都有起点和终点。 当你开始学习树和图数据结构时,你会觉得它是如此混乱。因为它存储方式不是线性,它们都...
  • 设计一个计算器,输入一个字符串存储数学表达式,可以计算包括 “(“、 ”)”、”+”、”-”四种符号数学表达式,输入数学表达式字符串保证是合 法。输入数学表达式中可能存在空格字符。 如计算: “(1 + 1...
  • 《Java虚拟机原理图解》3、JVM运行时数据区

    万次阅读 多人点赞 2014-10-13 14:50:08
    其实就是指JVM在运行期间,其对计算机内存空间划分和分配。本文将通过以下几个话题来讨论JVM运行时数据区。 Topic 1. JVM运行时数据区 里有什么?Topic 2. 虚拟机 是什么?虚拟机 里有什么?Topic 3. 栈帧...

空空如也

空空如也

1 2 3 4 5
收藏数 87
精华内容 34
关键字:

栈的计算图解