给自己时间，不要焦急，一步一步来，一日一日过，

请相信生命的韧性是惊人的，跟自己向上的心去合作，不要放弃对自己的爱护。

元素的显示与隐藏

display显示

使用disply隐藏之后，不再保留原来的位置，会被之后正常的文档流覆盖

display: none 隐藏对象

display：block 除了转换为块级元素之外，同时还有显示元素的意思。

visibility可见性

和display隐藏不同的是，使用可见性隐藏，元素仍然会保留原来的位置

visibility：visible ; &emsp;对象可视

visibility：hidden; &emsp;  对象隐藏

overflow溢出

这是一个神奇的单词哈😄，很多地方都会用到它，之前提到的清除浮动也使用到了overflow

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

综合运用

核心代码github地址

HTML部分

CSS部分（很重要的思想转换，一定要记得）

CSS用户界面样式

鼠标样式cursor

属性值	描述
default	小白默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

轮廓线

平时我们最直接的写法是：outline: none，取消轮廓线。

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

防止文本域拖拽

平时使用文本域布局的时候，如果不设置任何属性，用户抗议自己修改文本域的大小，会影响页面的整体布局，这时我们就要注意了：实际开发中，我们文本域右下角是不可以拖拽的 ❗

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

vertical-align 垂直对齐

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

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

vertical-align : baseline |top |middle |bottom

对齐方式依次是：基线、顶线、中线、底线

溢出的文字省略号显示

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

text-overflow : clip ；不显示省略标记（...），而是简单的裁切 

text-overflow：ellipsis ； 当对象内文本溢出时显示省略标记（...）

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

white-space:normal ；默认处理方式

white-space:nowrap ；&emsp;强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。

省略号三部曲

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

CSS精灵技术（sprite） `很重要`

为什么需要sprites技术

👇图为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展示给用户，但是一个网页中往往会应用很多小的背景图作为修饰，当网页中的图像过多，服务器就会频繁的接收和发送请求，会降低页面的加载速度

特点：有效的减少服务器接收和发送请求的次数，提高页面的加载速度

精灵技术讲解

CSS精灵图实际上是将网页中的一些背景图整合到一张大图中，这样当用户访问该页面时，只需要向服务器发送一次请求，网页中的背景图像即可全部展示出来

需要使用到的CSS技术：background-image、background-repeat、background-position属性进行背景定位。

精灵技术使用的核心总结

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

CSS布局的三种机制

普通流

块级元素会独占一行，从上向下顺序排列；

 - 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table

行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行；

 - 常用元素：span、a、i、em等

浮动

浮动最主要的价值是可以让多个块级元素在同一行内展示出来。

元素的浮动是指设置了浮动属性的元素会

脱离标准普通流的控制
移动到指定位置。

选择器 { float: 属性值; }

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

我们使用浮动的核心目的——让多个块级盒子在同一行显示。这个也是我们最常见的一种布局方式

一个完整的网页，是标准流 + 浮动 + 定位一起完成的。

浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流，每个标准流单独占一行。

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

下面我们来看以下👇几种情况：

以下所说的div结构均为此：

<div>
     <div class="a"></div>
     <div class="b"></div>
</div>

当a盒子浮动，b盒子也浮动的时候，a、b两盒子会显示在同一行。当a盒子不浮动，b盒子浮动的时候，a盒子即是标准的文档流，是很霸道的哈，他会单独占据一行，所以b盒子会依照a盒子为参考，b盒子浮动。

清除浮动

我们为什么要清除浮动呢 ❓

父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，注意哦，浮动的盒子不占位置。最后父级盒子高度为0，就影响了下面的标准流盒子，下面的标准流盒子会覆盖原本想展示的内容。

总结：
- 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响
- 准确地说，并不是清除浮动，而是清除浮动后造成的影响。

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。

清除浮动的方法

如下图所示，若父元素nav盒子没有设置高度，子元素均设置浮动，则会导致子元素浮动在正常文档流之外，父元素的高度为：0，影响之后正常的文档流，所以此时我们会清除浮动。

以下👇所示的四种清除浮动的方式，均以此案例为参照

1.额外标签法(隔墙法)

注意此处说的浮动元素是指浮动的最后一个元素哈

W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 < div style=”clear:both”>< /div>。

2.父级添加overflow属性方法

可以给父级添加： overflow为 hidden| auto| scroll 都可以实现。

一般我们会在父级元素样式后加：overflow：hidden。

缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

3.使用after伪元素清除浮动

此方式虽然代码多一点，但是不会改变html的结构

:after相当于在结构后用css添加了一个新的标签。

/*声明清除浮动的样式 */
.clearfix:after{
	content: "";
	display: block;
	height: 0;
	visibility: hidden;
	clear: both;
}
.clearfix{
	*zoom:1; /* ie6，7专门清除浮动的样式*/
}

4.使用双伪元素清除浮动跟第三种方式差不多哈，在盒子的前后插入一个盒子

.clearfix:before,.clearfix:after { 
  content:"";
  display:table; 
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

定位与塌陷（塌陷的解决方法）

之前我们有提到过，当给一个父元素内部的子元素设置margin值的时候，父级元素可能也会发生改变，即外边距合并就是通常所说的塌陷，但是绝对定位和浮动不会触发外边距合并👇：

什么是塌陷

为什么会出现塌陷呢，只有父子元素会出现塌陷吗，下面会进行详细的讲解，很重要的，一定要掌握理解，只有了解了原因才会自然的想起他的解决方式。

原因：在标准文档流中，竖直方向的margin会出现叠加现象（水平方向不会塌陷），两个margin紧挨着，中间没有border或者padding，当两个margin直接接触，就产生了合并，即外边距合并，表现为较大的margin会覆盖掉较小的margin，竖直方向的两个盒子中间只有一个较大的margin，这就是margin塌陷现象。

出现塌陷的对象

兄弟关系的盒子
父子关系的盒子

塌陷的解决方案

这里总结了一下七种解决方案，需要根据项目的要求，选择适合的解决方案即可

定位详解

语法：定位 = 定位模式 + 边偏移

边偏移

在 CSS 中，通过 top、bottom、left 和 right 属性定义元素的边偏移，简单的说就是上下左右四个方向名词😀

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

定位的盒子有了边偏移才有价值。一般情况下，凡是有定位地方必定有边偏移。

定位模式

在CSS中，通过position的属性定义元素的定位模式，就是定位的分类，很重要的需要掌握的

选择器 { position: 属性值; }

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

值	语义
`static`	静态定位（默认）
`relative`	相对定位
`absolute`	绝对定位
`fixed`	固定定位

相对定位（relative）`很重要`

相对定位是元素相对于他自己原来在标准流中的位置来移动的。

相对定位的特性：

相对于他自己原来在标准流中的位置来移动的。
定位的盒子原来在标准流中的区域继续占有，后面的盒子仍然以标准流的方式来对待他。

绝对定位（absolute）`很重要`

绝对定位是元素以带有定位的父级元素来移动的 绝对定位的特性：

完全不占任何位置
依据最近的已经定位（绝对、固定或者相对定位）的父元素进行定位。
父元素如果没有定位，则以浏览器为标准定位

如👇图所示的，父级元素有一个相对定位模式，给子元素设置一个绝对定位，此时子盒子会以父级的左上角为标准点进行定位。

如下图所示，父级元素没有定位的时候，给子元素设置一个绝对定位，该子盒子就会以文档即浏览器为标准进行定位。注意这里的父级元素不仅指子元素的上一级父亲元素，会一级一级元素的向上找，如果父亲元素的上一级有定位，就以爷爷元素为准进行定位。

总结一下：将元素依据最近的已经定位（绝对、固定或者相对定位）的父元素进行定位。

固定定位（fixed）`很重要`

固定定位是绝对定位的特殊形式

固定定位的特性：

完全不占有位置
只认浏览器的可视窗口，跟父级元素无任何关系，不随滚动条而滚动

绝对定位盒子居中对齐

绝对定位的盒子不能通过margin:0 auto水平居中。

这里有一个简单的计算公式让绝对定位的盒子水平居中，我们先让盒子左移50%，这时我们会发现，移动位置多了呀，多的长度是盒子的一般，那我们就需要减去盒子一半的长度，可以设置margin-left为负数，负数的值就等于盒子宽度的一半。

我们可以来实践一下：给父级元素盒子设置一个position：relative，给需要居中的盒子设置绝对定位，left等于50%，margin-left等于－盒子宽度的一半。

绝对定位盒子垂直水平居中`hin重要`

👆上面主要是对绝对定位水平居中有一个详细的讲解，接下来通过一张图对绝对定位的的垂直水平居中，以及其他位置的居中进行详细的讲解：

我们先看这个图片，整个黑色边框是一个长800px，高度为400px的大盒子，示例盒子宽度为200px，高度为100px，上下两个盒子分别水平居中，左右两个盒子是垂直居中，和水平居中原理一致。

重点来啦，我们平时经常会用到的垂直水平居中，给盒子设置绝对定位后，设置：left：50%，top：50%，这时会发现盒子距离中间位置向右多偏移了宽度的一半，向下多偏移了高度的一半，所以也是需要减去的，给盒子来一个margin：-50px -100px；具体代码示例如下👇：