浮动、定位、伪类以及伪元素٩ξ°v°ʔو~

浮动、定位、伪类以及伪元素٩ξ°v°ʔو~

浮动

1. 关于浮动
2. 用法
3. 布局
4. 清除浮动

定位

1. 组成
2. 静态定位
3. 相对定位
4. 绝对定位
5. 固定定位
6. 粘性定位
7. 定位叠放

伪类

1. 语法
2. 伪元素

遇到的一些问题QAQ

浮动

关于浮动

1)为什么要用浮动？

总结︰有很多的布局效果， 标准流没有办法完成 ，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式。 浮动最典型的应用：让多个块级元素在一行内排列。

关于标准流：
标准流又被称为（普通流/文档流）
顾名思义，所谓的标准流就是标签按照规定好的默认方式排列。默认方式如
1.常用元素:div、hr、p、h1~h6、ul、ol、dl、form、table
2.行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。
3.常用元素: span、a、i、em等
以上都是标准流布局，我们前面学习的就是标准流，标准流是最基本的布局方式

2）什么是浮动？

浮动（float）属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

用法

1）语法

选择器 {

float：属性值；

}

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

2）浮动特性

1.脱离标准普通流的控制（浮）移动到指定位置（动），即脱标 2.浮动的盒子不在保留原先的位置 3.浮动的语速会具有行内块元素的特性 4.任何元素都可以进行浮动

3）效果图

布局

1）浮动和标准流的父盒子相搭配

2）一个元素府东路，其他兄弟元素也要浮动

浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

清除浮动

1）语法：

选择器 {
clear:属性值；
}

属性值	描述
both	同时清除左右两侧浮动的影响
–	–
left	清除左侧浮动的影响
–	–
right	清除右侧浮动的影响

例如：












以上是浮动（float）与清除浮动（clear）同时使用的情况
一般情况下用的都是clear：both；
清除浮动的策略是：闭合浮动

2）清除浮动方法

（1）额外标签法
例如

.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

这种情况下，出现了一个问题。因为浮动元素脱离了标准流，所以包围图片和文本的 div 不占据空间。因此我们需要需要在这个元素中的某个地方应用 clear。
这时候问题就来了，在上面的代码块内并没有现成的元素可以进行清理，所以我们只能添加一个空元素来清理他。

.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

.clear {
  clear: both;
  }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>

这样就可以实现清理，但往往会添加很多没有意义的代码块。
注意：这个新的空标签必须是块级元素

（2）父级添加overflow属性
给父级添加overflow属性，将其属性值设置为hidden、auto或scroll。
（3）父级添加：after伪元素
：after方法是额外标签法的升级版。
给父级元素添加

.clearfix:after {
content : "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { 
/* IE6、7专有*/
*zoom: 1;
}

（4）父级添加双伪元素
同：after伪元素法，只不过代码不一样

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

3）清除浮动总结

为什么要清除浮动?

①父级没高度
②子盒子浮动
③影响了之后的布局

方式比较

---

定位

定位组成

定位：将盒子定在某一个位置，所以定位也是摆放盒子，按照定位的方式移动盒子。
定位=定位模式+边偏移
定位模式用于指定一个元素在文档中的定位方式。
边偏移则决定了钙元素的最终位置

1）定位模式

值	语义
static	静态定位
–	–
relative	相对定位
–	–
absolute	绝对定位
–	–
fixed	固定定位

2）边偏移

边偏移就是定位的盒子移动到最终位置。

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

静态定位static

静态定位是元素默认定位方式，无定位的意思

语法

选择器 {
position：static；
}

特点

1.静态定位按照标准流特性摆放位置，没有边偏移
2.很少用到

相对定位relative

相对定位是以原本位置为基准进行移动的定位

语法

选择器 {
position：relative；
}

特点

1.相对于自己原本的位置进行移动
2.原来在标准流的位置继续占有，后面的盒子仍以标准流的方式对待它，即不脱标

绝对定位absolute

绝对定位是元素在移动位置的时候，先对与其祖先元素进行移动的

语法

选择器 {
position：absolution；
}

特点

1.如果没有祖先元素或其没有定位，贼已浏览器为准
2.如祖先元素有定位，则以最近的一级有定位的祖先元素为参考点进行移动

固定定位fixed

固定定位是元素固定于浏览器可视区的位置

语法

选择器 {
position：fixed；
}

特点

1.以浏览器的可视窗口为参照点移动元素
·跟父元素没有任何关系
·不随滚动条滚动
2.固定定位不占有原先位置，即脱标，可看作是一种特殊的绝对定位

粘性定位sticky

粘性定位可以被认为是相对定位和固定定位的混合

语法

选择器 {
position：sticky；
top：10px；
}

特点

1.以浏览器的可视窗口为参照点移动元素
2.粘性定位占有原先的位置
3.必须添加top、left、right、bottom中的一个才有效

定位叠放次序z-index

选择器 {
z-index：1；
}

特点

1.数值可以是整数、负数或0，默认是auto，数值越大，盒子越靠上
2.如果属性值相同，则后来者居上
3.数字后面不能加单位
4.只有定位的盒子才有z-index属性

伪类

伪类用于定义元素的特殊状态。

例如，它可以用于：

设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式

语法

selector:pseudo-class {
  property: value;
}

举个栗子٩ξ°v°ʔو~

例
/* 未访问的链接 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}

注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。

伪元素

CSS 伪元素用于设置元素指定部分的样式。

例如，它可用于：

设置元素的首字母、首行的样式
在元素的内容之前或之后插入内容

伪类有哪些，微元素又有哪些，请见这里这里

问题QAQ

就是我index和army的盒子是一样的，但最终结果不一样

第一个图是index的，第二个是army的，index的右边那个会跟着屏幕滑动一起走，始终在右下角显示，而army里却不走


我用的是sticky，不知道为什么明明盒子一样却不可以QAQ
当然fixed肯定是可以的了
所以问题就在sticky上了QAQ