浮动和定位

浮动的定义

因为浮动（盒）不在普通流内，在浮动盒之前或者之后创建的未定位的（non-positioned）块盒会竖直排列，就像浮动不存在一样。然而，接着（next to）浮动（盒）创建的当前及后续行盒会进行必要的缩短，为了给浮动（盒）的margin box让出空间

浮动元素并不是完全的脱离文档流

• 注意和absolute不同

块级元素浮动宽度收缩

• 浮动元素使得块级元素进行宽的收缩，也使得行内元素可以设置width,height,和padding
• 行内元素可以发现浮动元素

清除浮动

实现两栏布局

• 左侧宽度固定，右侧宽度自适应

实现三栏边距布局

• 浮动元素可以看见块级元素
• DOM顺序不变

导航栏的浮动定位

• ul->li后面的

清除浮动的概念

• 浮动的副作用
• 会对后续元素产生影响
• 父容器的高度计算出现了问题

clear:left

• 该盒子的top border边位于该源文件中在之前的元素形成大的所有左浮动盒的bottom外边下方

clear:right

• 该盒子的top border边位于该源文件中在之前的元素形成大的所有u右浮动盒的bottom外边下方

-只要在navbar浮动元素的后面有一个普通元素，就会把原来的父元素撑开

伪元素after的使用说明

E::AFTER

<p>这是不无聊也不有趣的文字</p>
<p class="exciting-text">在MDN上做贡献简单又轻松。
按右上角的编辑按钮添加新示例或改进旧示例！</p>
.exciting-text::after {
  content: "<- 让人兴兴兴奋!"; 
  color: green;
}

.boring-text::after {
   content:    "<- 无聊!";
   color:      red;
}

块级元素下面要加回块级元素才可以把元素撑开。

水平布局的两种方法

-使用浮动元素进行包裹住。

• inline-block 优势: 不需要清除浮动，简单，在设置居中时更方便,适合子内容不多的元素水平排列
• inline-block 劣势: 需要注意缝隙，注意对齐，ie8以下不能用
• float优势: 兼容性好，没缝隙问题
• float劣势: 需要清除浮动，适合稍大的布局

浮动和下移元素

定位

normal flow

• normal flow 即浏览器默认的文档布局方式

相对定位 relative

• 相对定位，相对于以前的位置

###绝对定位 absolute

• 绝对定位 其他元素已经看不见你了，其它的box产生了重叠

• 相对于父元素的relative absolute fix的定位进行查找 如果没有的话再从上一级进行查找

• 一个元素设置了absolute，另一个元素设置relative

• 绝对定位元素可以添加宽高

z-index

• 设置层叠顺序
• 谁的值大，谁就可以覆盖

固定定位 fixed

• 相对于浏览器定位

粘性定位

• stick
• 有了他更好，没有他也无所谓

用定位还使用浮动

• 大布局、自适应 用浮动
• 小元素、固定宽高 用定位
• 结合实际情况是关键

小demo问题

ul里面不可以直接加div 因为li的父元素只可以是相对的

box-shadow设置阴影

• 这是第三个值。该值越大，模糊越大，阴影变得越来越大。不允许使用负值。如果没有指定，它将是0（阴影的边缘是锐利的）。该规范不包括如何计算模糊半径的精确算法，但是，它详细说明如下：·

-设置的颜色是rgba不是什么其他的

nav::after{
	content:""
	dispaly:block;
	clear:both;	
}

-伪类选择器 ：li:nth-of-type(3)
选择第三个li

-inline-block
会使得字体收缩
不能很好的填充

-使得菜单进行隐藏

ul>li:hover .child{
      display:block;
    }

浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响？

一个浮动盒会向左或向右移动，直到其外边（outer edge）挨到包含块边沿或者另一个浮动盒的外边。如果存在行盒，浮动盒的外top（边）会与当前行盒的top（边）对齐 如果没有足够的水平空间来浮动，它会向下移动，直到空间合适或者不会再出现其它浮动了

因为浮动（盒）不在普通流内，在浮动盒之前或者之后创建的未定位的（non-positioned）块盒会竖直排列，就像浮动不存在一样。然而，接着（next to）浮动（盒）创建的当前及后续行盒会进行必要的缩短，为了给浮动（盒）的margin box让出空间

• 对父容器
  对于其父元素来说，元素浮动之后，它脱离当前正常的文档流，所以它也无法撑开其父元素，造成父元素的塌陷

• 对其它浮动元素

  同一个方向的浮动元素：当一个浮动元素在浮动过程中碰到同一个方向的浮动元素时，它会紧跟在它们后面
  反方向的浮动元素：互不影响，位于同一条水平线上，当空间不够时会被挤下

• 对普通元素

  普通元素会忽略浮动元素的存在，并会处在浮动元素的下层

• 对文字

  文字和其他行内元素会发现浮动元素并环绕着浮动元素进行排列

清除浮动指什么？如何清除浮动？ 两种以上方法。

• 在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。 这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动

e:after{
	content:"";
	display:block;
	clear:both;
}

2. 给父元素添加overflow：hidden

3. 在浮动元素后面加一个普通元素，设置属性clear

.clear{
float: none;
clear: left; /*clear: right;*/  /*clear: both;*/
}

有几种定位方式？分别是如何实现定位的？参考点是什么？使用场景是什么？

• absolute relative fixed staticed
• absoulte 相对父元素为参考点
• relative 自己原本的位置作为参考点
• fixed 相对屏幕的位置作为参考点
• staticed 默认位置

！imges

• 参考点 ：在参考点的content+padding的内容上

z-index 有什么作用？ 如何使用？

可以解决元素的覆盖问题，决定那个元素在上方，哪一个在下方；
z-index的值可以是负数，也可以为0，也可以无群大，数值大的在上方；
z-index父元素设置的值权重比较大，当两个父元素相比的时候，父元素起决定作用，其中的子元素设置多大都没有用；

给覆盖的元素设置z-index,哪个的值大就会覆盖哪一个值

###实现如下导航栏效果 ：
查看效果，在下方附上线上预览地址
demo

###实现如下效果，回复预览链接效果预览

demo

把下面的话抄写三遍;

• 如果用了浮动，其父元素一般（最好）需要清除浮动
• 如果用了绝对定位，一般（最好）要给参考点设置position:relative;

-如果用了浮动，其父元素一般（最好）需要清除浮动

• 如果设置了绝对定位，一般（最好）要给参考点设置：poition:relative

• 如果用了浮动，其父元素一般（最好）需要清楚浮动

• 如果设置了绝对顶，一般(最好)哟啊给参考点设置position:relative