前端从零开始第二周

第六天

1.CSS复合选择器

• 作用： 基础选择器无法满足高效的选择标签，复合选择器可以选择更精确的目标元素标签

  • 复合选择器是由两个或以上的基础选择器，通过不同方式组合成的

1.1 后代选择器

• 作用： 用来选择单个或多个元素的后代元素

• 写法: 当标签存在嵌套层次时，只要在其内部的标签标签就是外层的后代标签

  <div>
      <p>haha</p>
      <div>
          <p>ohhhh</p>
      </div>
  </div>
  

  <!-- 父级 后代{ 属性: 属性值} 
      父级元素在前，子级元素在后，中间以空格隔开-->
  div p{ font-size: 14px;} // p标签都会改变
  

1.2 子元素选择器

• 作用： 子元素选择器只能选择某元素的子代元素（嵌套的第一层）

• 写法：

  <div>
      <p>haha</p>
      <div>
          <p>ohhhh</p>
      </div>
  </div>
  

  <!-- 父级元素在前，子级元素在后，中间以 >(小于号)隔开 
      父级>子级{ 属性: 属性值} -->
  div>p{color:red;font-size:14px;} //只有第一个p标签改变
  

  区别于后代选择器：子元素只包括亲儿子，不包括孙子等后代

1.3 交集选择器

• 作用： 由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。

• 写法： 交集选择器 是 并且的意思。 即...又...的意思

  <div>
      <p class="content">haha</p>
  </div>
  

  <!-- 注意中间没有间隙和符号 -->
  p.content{font-size:14px;}
  

1.4 并集选择器（重点）

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

• 写法：

  <div>
      <p class="content">haha</p>
      <h1 id="content">haha</h1>
      <span >haha</span>
  </div>
  

  <!-- 并集选择器（CSS选择器分组）是各个选择器通过`,`连接而成的，通常用于集体声明。 -->
  .content, #content, span {
      color: red;
  }
  

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

1.5 链接伪类选择器（重点）

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

因为伪类选择器很多，比如链接伪类，结构伪类等等。我们这里先给大家讲解链接伪类选择器。

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

CSS :target伪类用来改变页面中锚链接URL所指向的ID元素的样式

CSS :focus 伪类在元素获得焦点时向元素添加特殊的样式。

:focus-within 是一个CSS 伪类 ，表示一个元素或其后代元素获得焦点。

:focus-visible当元素匹配伪类并且客户端(UA)的启发式引擎决定焦点应当可见(在这种情况下很多浏览器默认显示“焦点框”。)

1.6 总结

选择器类型	作用	写法
后代选择器	选择嵌套的后代元素	标识是 空格： div a
子代选择器	选择最近一层嵌套的后代元素	标识是 >： div>a
交集选择器	选择两个选择器都拥有的元素	无特殊符号： div.wrapper
并集选择器	选择一部分相同样式的元素	标识是, div, .wrapper, a
链接伪类选择器	给链接加上某种状态	重点记住 a{} 和 a:hover 实际开发的写法

2.标签的显示模式（display）

• 概念： 标签的显示方式，独占一行或并列一行；分为块级元素，行内元素。

2.1 块级元素（block）

• 特点：

  • 独占一行

  • 高度、宽度（默认是父级宽度）以及内外边距都能够控制

  • 一般作为容器，在里面放行内元素

    常见块级元素标签：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

2.2 行内元素（inline-level）

• 特点：

  • 相邻的行内元素在同一行上，一行可显示多个

  • 直接设置高度和宽度是无效的

  • 默认宽度是其内容的宽度

  • 行内元素只能容纳文本或其他行内元素

    • 链接里面不能再放链接
    • 特殊情况a里面可以放块级元素，但给a标签转换成块级模式最好

2.3 行内块元素（inline-block）

• 特点：

  • 和相邻行内或行内块元素在同一行，但之间存在空白间隙
  • 默认宽度就是内容的宽度
  • 高度、行号、内外边距都可以控制

2.4 总结

元素转换：

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

显示模式	元素排列	样式	内容
块级元素	独占一行	可以设置高度宽度，默认宽度为容器的宽度	可包含任何元素
行内元素	一行可以放多个	不可以直接设置高宽度，默认为内容的宽度	只能包含文本和行内元素
行内块元素	一行可以放多个	可以设置高宽度，默认为内容的宽度

3. 行高（line-height）

作用： 设置文本在垂直方向的位置

行高和高度的三种关系

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

4.CSS背景样式（background）

作用： 通过css的背景属性，给元素添加背景样式，设置背景图的位置和大小

• background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
• 语法：

background: transparent url(image.jpg) repeat-y  scroll center top ;

4.1 背景颜色（color）

• 语法：

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

4.2 背景图片（image）

• 语法：

  background-image : none(默认) | url (url) 
  

  background-image : url(images/demo.png);
  

  • 小技巧： 我们提倡 背景图片后面的地址，url不要加引号。

4.3 背景平铺（repeat）

• 语法：

  background-repeat : repeat | no-repeat | repeat-x | repeat-y 
  

参数	作用
repeat	背景图像在纵向和横向上平铺（默认的）
no-repeat	背景图像不平铺
repeat-x	背景图像在横向上平铺
repeat-y	背景图像在纵向平铺

4.4 背景位置（position）

• 语法：

background-position : length || length
​
background-position : position || position 

参数	值
length	百分数	由浮点数字和单位标识符组成的长度值
position	top	center	bottom	left	center	right 方位名词

• 注意点

  • 必须先指定backgound-image属性
  • 指定后面都是方位名词时，则名词的先后顺序不要求
  • 只制定一个方位名词，另一个则是默认居中
  • 前一个为x坐标，后一个为y坐标

4.5 背景附着（attachment）

• 语法：

  background-attachment : scroll | fixed 
  

参数	作用
scroll	背景图像是随对象内容滚动
fixed	背景图像固定

4.6 背景透明（CSS3）

• 语法：

  background: rgba(0, 0, 0, 0.3);
  

  • 最后一个参数是alpha 透明度 取值范围 0~1之间
  • 我们习惯把0.3 的 0 省略掉 这样写 background: rgba(0, 0, 0, .3);
  • 注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不受影响

4.7 背景总结

属性	作用	值
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个值

第七天

1.CSS三大特性

1.1 层叠性

理解： 多种CSS样式的叠加，样式如果冲突的话，遵循就近原则（即：离标签元素越近样式会生效！）

<style>
    .box { color: red;}
    .box1 { color: blue;}
</style>

<!-- 生效的是box1 -->
<div class="box box1">
    芜湖
</div>

1.2 继承性

理解： 后代标签会继承父标签的文本内容的样式属性，形状的样式则不会继承。

.box1 {
       width: 100px;
       height: 100px;
       color: blue;
       font-size: 16px;
       text-align: center;
}
span {
   background-color: #f0f066;
}

    <div class="box1">
        <span>起飞</span>
    </div>

1.3 CSS优先级（权重）

理解： 当不同规则作用在同一元素，相同选择器会进行层叠，但选择器不同会出现优先级问题。 （!important > 内联样式 > id选择器 > 类（伪类）选择器 ，属性> 标签选择器 > 通配符、继承）

标签选择器	计算权重公式
继承或者 *	0,0,0,0
每个元素（标签选择器）	0,0,0,1
每个类，伪类	0,0,1,0
每个ID	0,1,0,0
每个行内样式 style=""	1,0,0,0
每个!important 重要的	∞ 无穷大

        div span {
            background-color: red;
        }
        
        .box1 span {
            background-color: rosybrown;
        }
        
     <div class="box1">
        <span>再次起飞！！！</span>
    </div>

div span 权重： 0 0 0 2； .box1 span权重： 0 0 1 1

2. 盒子模型

• 标准盒子模型(border-box): 真实width = width + padding + border + margin
  • 内容和边框会撑大盒子的大小
• 怪异盒子模型(content-box): 真实width =width + margin
  • 注意：设置边框和内边距虽然宽度不变，但是会挤压内容的大小

3. 内外边距

• 内边距： 指的是内容和边框之间的距离
• 外边距： 指的是该盒子和其他盒子之间的距离 写法是相同的

            /* 设置上下左右内边距都是10px */
            padding: 10px;
            /* 设置上下和左右的边距是10px */
            padding: 10px 10px;
            /* 设置上、左右、下内边距为10px */
            padding: 10px 10px 10px;
            /* 设置 上、右、下、左内边距为10px */
            padding: 10px 10px 10px 10px;
            /* 外边距同样如此 */

4. 边框

写法： border : border-width || border-style || border-color

            border: 1px solid #000;

• 边框的样式：
  • none：没有边框即忽略所有边框的宽度（默认值）
  • solid：边框为单实线(最为常用的)
  • dashed：边框为虚线
  • dotted：边框为点线

很多情况下，我们不需要指定4个边框，我们是可以单独给4个边框分别指定的。

上边框	下边框	左边框	右边框
border-top-style:样式;	border-bottom-style:样式;	border-left-style:样式;	border-right-style:样式;
border-top-width:宽度;	border- bottom-width:宽度;	border-left-width:宽度;	border-right-width:宽度;
border-top-color:颜色;	border- bottom-color:颜色;	border-left-color:颜色;	border-right-color:颜色;
border-top:宽度 样式 颜色;	border-bottom:宽度 样式 颜色;	border-left:宽度 样式 颜色;	border-right:宽度 样式 颜色;

第八天

1. 圆角边框

• 语法：

  border-radius:length; 
  /* lenght: 可以使数值或百分比 */
  

• 小技巧

  • 设置length为50%：正方形变成了圆
  • 设置length为高度的一半，则就是圆角矩形

2. 盒子阴影

• 语法：

  盒子阴影：box-shadow：（inset/outset） 水平偏移值 垂直偏移值 blur spead color 内部阴影

  box-shadow:水平阴影 垂直阴影 模糊距离（虚实）  阴影尺寸（影子大小）  阴影颜色  内/外阴影；
  div {
          width: 200px;
          height: 200px;
          border: 10px solid red;
          box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);
          /* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色  内/外阴影； */
  }
  

• 属性值

  属性	描述
  h-shadow	必需。水平阴影的位移
  v-shadow	必需。垂直阴影的位移
  blur	可选。模糊距离
  spread	可选。阴影的尺寸
  color	可选。阴影的颜色
  inset	可选。将外部阴影该为内部阴影

3. 浮动（float）

• 作用： 解决块级元素的间隔问题、左右排序问题、文字包围图片、使得块级和行级变成行内块级元素效果。

• 写法：

  选择器 { float: 属性值; }
  

  属性值	描述
  none	元素不浮动（默认值）
  left	元素向左浮动
  right	元素向右浮动

• 概要： 脱离标准的文档流，漂浮在指定位置

  .box1 {
      width: 200px;
      height: 200px;
      background-color: rgba(255, 0, 0, 0.5);
      float: left;
  }
  .box2 {
      width: 250px;
      height: 300px;
      background-color: green;
  }
  

  float 属性会让盒子漂浮在标准流的上面，所以第二个标准流的兄弟盒子跑到浮动盒子的底下了。

  浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流。

  如果一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动。防止引起问题

  ---

  注意： 浮动的元素互相贴靠一起的，但是如果父级宽度装不下这些浮动的盒子， 多出的盒子会另起一行对齐，并且父级宽度不会因此撑开。

• 引起的问题： 浮动导致父元素高度塌陷（即：父元素如果没设置高度，子元素浮动，父元素不会被撑开，而是height为0）

• 浮动影响的清除解决办法

  • 给父元素设置高度

  • 父元素设置属性 overflow：hidden

  • 添加子级块级元素并设置CSS属性 clear:both

  • 伪元素清除浮动（推荐）

    父元素::after {
        display: block;
        clear: both;
        content: '';
    }
    

  • 双伪元素清除浮动

• 小结

  特点	说明
  浮	加了浮动的盒子是浮起来的，漂浮在其他标准流盒子的上面。
  漏	加了浮动的盒子是不占位置的，它原来的位置漏给了标准流的盒子。
  特	特别注意：浮动元素会改变display属性， 类似转换为了行内块，但是元素之间没有空白缝隙

4. 定位（position）

概念： 将盒子定在某一个位置，漂浮在其他的盒子上面。

标准流在最底层 (海底) ------- 浮动 的盒子在中间层 (海面) ------- 定位的盒子在最上层 （天空）

4.1 定位详解

定位也是布局模式，由两部分组成：定位 = 定位模式 + 边偏移

4.1.1 边偏移

• 作用： 定位的盒子是通过边偏移来移动位置的，有定位的地方必有边偏移。

  在CSS中，通过方位名词top、bottom、left 和 right 属性定义元素的边偏移

  边偏移属性	示例	描述
  top	top: 80px	顶端偏移量，定义元素相对于其父元素上边线的距离。
  bottom	bottom: 80px	底部偏移量，定义元素相对于其父元素下边线的距离。
  left	left: 80px	左侧偏移量，定义元素相对于其父元素左边线的距离。
  right	right: 80px	右侧偏移量，定义元素相对于其父元素右边线的距离

4.1.2 定位模式（position）

在 CSS 中，通过 position 属性定义元素的定位模式，语法如下：

选择器 { position: 属性值; }

定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式。

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位
sticky	粘性定位

4.2 定位模式

4.2.1 静态定位（static）- 了解

• 静态定位是元素默认是定位方式，没有定位的意思
• 按照标准流特性摆放位置，无边偏移

4.2.2 相对定位（relative）- 重要

• 相对定位是相对于它在标准流中的位置进行定位

• 原本占有的位置依然存在，不会引起布局变化

4.2.3 绝对定位（absolute）- 重要

• 绝对定位是元素以带有定位（绝对、固定或相对定位(常用) ）属性的父级（祖先）元素进行定位

  • 完全脱标 —— 完全不占位置
  • 父元素没有设置定位，则以body元素为基准定位（一般使用都搭配父元素一起使用）

4.2.4 固定定位（fixed）- 重要

• 完全脱标 -- 完全不占有位置

• 只基准于浏览器的可视窗口 ——浏览器可视窗口 + 边偏移属性

  • 跟父元素没有任何关系，单独使用的定位
  • 不随滚动条滚动（参考各大网站的客服/联系二维码）

4.2.5 粘性定位（sticky）

• static（没有定位） 和 固定定位fixed 的结合；它主要用在对 scroll 事件的监听上；在滑动过程中，某个元素距离其父元素的距离达到 sticky 粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。
• 父元素不能overflow:hidden或者overflow:auto属性。
• 必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
• 父元素的高度不能低于sticky元素的高度
• sticky元素仅在其父元素内生效

4.2.6 总结

display 是 显示模式， 可以改变显示模式有以下方式:

• 可以用inline-block 转换为行内块
• 可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
• 绝对定位和固定定位也和浮动类似， 默认转换的特性 转换为行内块。

所以说， 一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。

定位模式	是否脱标占有位置	移动位置基准	模式转换（行内块）	使用情况
静态static	不脱标，正常模式	正常模式	不能	几乎不用
相对定位relative	不脱标，占有位置	相对自身位置移动	不能	基本单独使用
绝对定位absolute	完全脱标，不占有位置	相对于定位父级移动位置	能	要和定位父级元素搭配使用
固定定位fixed	完全脱标，不占有位置	相对于浏览器移动位置	能	单独使用，不需要父级
粘性定位	完全脱标，不占有位置	相对于父级移动位置，设置到达指定位置后成为固定定位	能	需要搭配父级使用

注意：

1. 边偏移需要和定位模式联合使用，单独使用无效；
2. top 和 bottom 不要同时使用；
3. left 和 right 不要同时使用。

4.3 定位的拓展

4.3.1 绝对定位的盒子居中

• 完全脱标只能使用边偏移来设置位置，不能通过auto来居中

4.3.2 层叠顺序（z-index)

在使用定位布局时，可能会出现盒子重叠的情况。

加了定位的盒子，默认后来者居上， 后面的盒子会压住前面的盒子。

应用 z-index 层叠等级属性可以调整盒子的堆叠顺序。如下图所示：

z-index 的特性如下：

1. 属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；
2. 如果属性值相同，则按照书写顺序，后来居上；
3. 数字后面不能加单位。

注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。

• flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。
• 当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。

5. flex布局

5.1 父元素常见属性

• flex-direction：设置主轴的方向
• justify-content：设置主轴上的子元素排列方式
• flex-wrap：设置子元素是否换行
• align-content：设置侧轴上的子元素的排列方式（多行）
• align-items：设置侧轴上的子元素排列方式（单行）
• flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

5.1.1 flex-direction

• 在 flex 布局中，是分为主轴和侧轴两个方向，同样的叫法有 ： 行和列、x 轴和y 轴
• 默认主轴方向就是 x 轴方向，水平向右

• 默认侧轴方向就是 y 轴方向，水平向下
• 注意： 主轴和侧轴是会变化的，就看 flex-direction 设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的

5.1.2 justify-content

属性值	描述
flex-start	从主轴头部开始
flex-end	从主轴尾部开始
center	居中
space-around	平分剩余空间
space-between	两头先紧贴，再平分剩余空间

5.1.3 flex-wrap

• 默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，flex布局中默认是不换行的。
• nowrap 不换行

• wrap 换行

5.1.4 align-content——多行

设置子项在侧轴上的排列方式 并且只能用于子项出现 换行 的情况（多行），在单行下是没有效果的

属性值	描述
flex-start	从主轴头部开始排列
flex-end	从主轴尾部开始
center	居中
space-around	平分剩余空间
space-between	两头先紧贴，再平分剩余空间
stretch	子元素平分父元素的高度

align-content 和align-items区别

• align-items 适用于单行情况下， 只有上对齐、下对齐、居中和 拉伸
• align-content适应于换行（多行）的情况下（单行情况下无效）， 可以设置 上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。

• 总结就是单行找align-items 多行找 align-conten

5.1.5 align-items——单行

• 该属性是控制子项在侧轴（默认是y轴）上的排列方式 在子项为单项（单行）的时候使用
• flex-start 从头部开始

• flex-end 从尾部开始
• center 居中显示

• stretch 拉伸

5.1.6 flex-flow ——复合属性

flex-flow:row wrap;

5.2 子元素常见属性

• flex子项目占的份数
• align-self控制子项自己在侧轴的排列方式

• order属性定义子项的排列顺序（前后顺序）

5.2.1 flex属性

flex 属性定义子项目分配剩余空间，用flex来表示占多少份数

.item {
    flex: <number>; /* 默认值 0 */
}

5.2.2 align-self

• align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。

• 默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。

span:nth-child(2) {
      /* 设置自己在侧轴上的排列方式 */
      align-self: flex-end;
}

5.2.3 order

数值越小，排列越靠前，默认为0。

注意：和 z-index 不一样。

.item {
    order: <number>;
}

第九天

1. 元素的显示与隐藏

1.1 display显示

• display设置元素是否显示

  display: none 隐藏对象
  ​
  display：block 除了转换为块级元素之外，同时还有显示元素的意思。
  

• 特点： 隐藏之后，文档流位置不保留

1.2 visibility可见性

• visibility设置元素是否显示

  visibility：visible ; 　对象可视
  ​
  visibility：hidden; 　  对象隐藏
  

• 特点： 隐藏后，原有位置依然存在。

1.3 overflow 溢出

• 当内容超出容器大小，通过overflow管理超出内容

  属性值	描述
  visible	不剪切内容也不添加滚动条
  hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
  scroll	不管超出内容否，总是显示滚动条
  auto	超出自动显示滚动条，不超出不显示滚动条

1.4 opacity 透明度

• 通过设置样式透明，使其不可见

  opacity: 0;
  

• 特点： 文档流依旧存在

1.5 总结

属性	区别	用途
display	隐藏对象，不保留位置	配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛
visibility	隐藏对象，保留位置	使用较少
overflow	只是隐藏超出大小的部分	1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围
opacity	只是设置其透明

2. 界面样式

2.1 鼠标样式——cursor

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

cursor: 属性值

属性值	描述
default	小白 默认
pointer	小手
move	移动
text	文本
not-allowed	禁止
url(图片路径)	鼠标变成指定图片

2.2 轮廓线——outline

是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

 outline : outline-color ||outline-style || outline-width 

但是我们都不关心可以设置多少，我们平时都是去掉的。 li

最直接的写法是 ： outline: 0; 或者 outline: none;

 <input  type="text"  style="outline: 0;"/>

2.3 拖拽——resize

实际开发中，我们文本域右下角是不可以拖拽：

<textarea  style="resize: none;"></textarea>

同样resize不限于文本域的用法，任意元素都能够使用 注： 如果希望此属性生效，需要设置元素的 overflow 属性，值可以是 auto、hidden 或 scroll。

值	描述
none	用户无法调整元素chicun
both	用户可调整元素的高度和宽度
horizontal	用户可调整元素的宽度
vertical	用户可调整元素的高度

3. 溢出文字处理

3.1 white-space

• white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容

white-space:normal ；默认处理方式
​
white-space:nowrap ；　强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。

3.2 text-overflow 文字溢出

• 设置或检索是否使用一个省略标记（...）标示对象内文本的溢出

text-overflow : clip ；不显示省略标记（...），而是简单的裁切 
​
text-overflow：ellipsis ； 当对象内文本溢出时显示省略标记（...）

注意：

一定要首先强制一行内显示，再次和overflow属性 搭配使用

3.3 总结三步曲

  /*1. 先强制一行内显示文本*/
      white-space: nowrap;
  /*2. 超出的部分隐藏*/
      overflow: hidden;
  /*3. 文字用省略号替代超出的部分*/
      text-overflow: ellipsis;

4. 精灵图技术

为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。

• css精灵技术主要针对于背景图片，插入的图片img 是不需要这个技术的。

  • 精确测量，每个小背景图片的大小和 位置。
  • 给盒子指定小背景图片时， 背景定位基本都是 负值。

• 需要使用CSS的

  • background-image
  • background-repeat
  • background-position属性进行背景定位，
  • 其中最关键的是使用background-position 属性精确地定位。

5.vertical-align 垂直对齐

vertical-align : baseline |top |middle |bottom 

设置或检索对象内容的垂直对其方式。

• 注意：

  vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，

  特别是行内块元素， 通常用来控制图片/表单与文字的对齐。

5.1 图片、表单和文字对齐

所以我们知道，我们可以通过vertical-align 控制图片和文字的垂直关系了。 默认的图片会和文字基线对齐。

5.2 去除图片底侧空白缝隙

• 原因：

  图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。

  就是图片底侧会有一个空白缝隙。

• 解决的方法就是：

  • 给img vertical-align:middle | top| bottom等等。 让图片不要和基线对齐。

第十天

三维坐标系

• x 轴：水平向右 -- 注意：x 轴右边是正值，左边是负值
• y 轴：垂直向下 -- 注意：y 轴下面是正值，上面是负值
• z 轴：垂直屏幕 -- 注意：往外边的是正值，往里面的是负值

3D 呈现 transform-style

transform-style

• 控制子元素是否开启三维立体环境

• transform-style: flat 代表子元素不开启 3D 立体空间，默认的 - transform-style: preserve-3d 子元素开启立体空间

• 代码写给父级，但是影响的是子盒子

1.translate 位移

• 语法：
  • x 就是 x 轴上水平移动,y 就是 y 轴上水平移动,z 就是 z 轴上水平移动
  • 2D 的移动主要是指 水平、垂直方向上的移动
  • translate 最大的优点就是不影响其他元素的位置
  • translate 中的100%单位，是相对于本身的宽度和高度来进行计算的
  • 行内标签没有效果

  transform: translate(x, y)
  transfrom: translate3d(x, y, z)
  /* 注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充 */
  transform: translateX(n)
  transfrom: translateY(n)
  transfrom: translateZ(n)

代码示例

div {
  background-color: lightseagreen;
  width: 200px;
  height: 100px;
  /* 平移 */
  /* 水平垂直移动 100px */
  /* transform: translate(100px, 100px); */
​
  /* 水平移动 100px */
  /* transform: translate(100px, 0) */
​
  /* 垂直移动 100px */
  /* transform: translate(0, 100px) */
​
  /* 水平移动 100px */
  /* transform: translateX(100px); */
​
  /* 垂直移动 100px */
  transform: translateY(100px)

透视 perspective——针对于translateZ

• 知识点讲解

  • 如果想要网页产生 3D 效果需要透视(理解成 3D 物体投影的 2D 平面上)

  • 实际上模仿人类的视觉位置，可视为安排一直眼睛去看

  • 透视也称为视距，所谓的视距就是人的眼睛到屏幕的距离

  • 距离视觉点越近的在电脑平面成像越大，越远成像越小

  • 透视的单位是像素

• 知识要点

  • 透视需要写在被视察元素的父盒子上面

  • 注意下方图片

    • d：就是视距，视距就是指人的眼睛到屏幕的距离

    • z：就是 z 轴，z 轴越大(正值)，我们看到的物体就越大

代码演示

```
body {
  perspective: 1000px;
}
```

• translateZ 与 perspecitve 的区别

translateZ 与 perspecitve 的区别 perspecitve 给父级进行设置，translateZ 给 子元素进行设置不同的大小

2.scale 缩放

• 作用： 用来控制元素的方法和缩小

• 语法：

  transform: scale(x, y)
  

  • 注意点

    • 注意，x 与 y 之间使用逗号进行分隔
    • transform: scale(1, 1): 宽高都放大一倍，相当于没有放大
    • transform: scale(2, 2): 宽和高都放大了二倍
    • transform: scale(2): 如果只写了一个参数，第二个参数就和第一个参数一致
    • transform:scale(0.5, 0.5): 缩小
    • scale 最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子

• 代码演示

   div:hover {
       /* 注意，数字是倍数的含义，所以不需要加单位 */
       /* transform: scale(2, 2) */
   
       /* 实现等比缩放，同时修改宽与高 */
       /* transform: scale(2) */
   
       /* 小于 1 就等于缩放*/
       transform: scale(0.5, 0.5)
   }

3.rotate 旋转

• 语法：
• • transform: rotateX(45deg) -- 沿着 x 轴正方向旋转 45 度
  • transform: rotateY(45deg) -- 沿着 y 轴正方向旋转 45 度

• • transform: rotateZ(45deg) -- 沿着 z 轴正方向旋转 45 度

  • transform: rotate3d(x, y, z, 45deg) -- 沿着自定义轴旋转 45 deg 为角度

  • • transform: rotate3d(x, y, z, deg) -- 沿着自定义轴旋转 deg 为角度
    • x, y, z 表示旋转轴的矢量，是标识你是否希望沿着该轴进行旋转，最后一个标识旋转的角度

  • 代码案例

    div {
      perspective: 300px;
    }
    ​
    img {
      display: block;
      margin: 100px auto;
      transition: all 1s;
    }
    ​
    img:hover {
      transform: rotateX(-45deg)
    }
    

    • transform: rotate3d(1, 1, 0, 180deg) -- 沿着对角线旋转 45deg
    • transform: rotate3d(1, 0, 0, 180deg) -- 沿着 x 轴旋转 45deg

transform-origin: center; 
/* 设置旋转的中心点；以方位名词为属性值，可以写成 left top；*/

• 左手准则

• • 左手的手拇指指向 轴的正方向
  • 其余手指的弯曲方向就是该元素沿着 轴旋转的方向