浮动、定位、伪类、伪元素
定位
css有三种定位机制：文档流定位（默认定位）、浮动定位、层定位
文档流定位（默认定位）
特点
- 除非专门指定，否则所有框都在普通流中定位。
- 普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
- 每一种元素在当前网页按次序排列
元素类型转化
- 通过
display进行类型转化，display可以取值none, block, inline, inline-block
block类型元素
特点
- 独占一行，元素的height、width、margin、padding都可设置
< div >、< p >、< h1 >…< h6 >、< ol >、< ul >、< table >、< form >为常见block元素
语法
a{
display:block;
}
inline类型元素
特点
- 不单独占用一行，width，height不可设置
- width就是本身内部包含的文字或图片的宽度，不可改变
< span >,< a >是常见的inline元素
语法
div{
display:inline;
}
inline-block类型元素
特点
- 同时具有
inline和block的特点，不单独占用一行，元素的height，width，margin，padding都可以设置，可以看作是水平排列的block元素
< img >是常见的inline-block
语法
div{
display:inline-block;
}
浮动
float属性定义元素在哪个方向浮动，浮动元素会生成一个块级框，而不论它本身是何种元素
| 值 | 描述 |
|---|---|
| none | 默认值，不浮动，并会显示在其在文本中出现的位置 |
| left | 向左浮动 |
| right | 向右浮动 |
| inherit | 规定应该从父元素继承 float 属性的值 |
浮动特点
-
浮动元素会完全从文档流脱离，不再占用文档流的位置，所以元素下面的还在文档流中的元素会自动向上移动
-
设置浮动以后元素会向父元素的左侧或右侧移动（设置left就往左移，right就往右移）
-
浮动元素默认不会从父元素中移出
-
浮动元素向左或向右移动时，不会超过它前面的其他浮动元素
-
如果浮动元素的上面是一个没有浮动的块元素，则浮动元素无法上移
-
浮动元素不会超过它上边的浮动的兄弟元素，最多和它一样高，如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”。
-
如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。
-
浮动元素不会盖住文字，回自动环绕在元素的周围，所以我们可以利用浮动来设置文字环绕图片（报纸）的效果
浮动主要作用让页面中的元素可以水平排列，来制作水平布局
清除浮动
特点
- 如果我们不希望某个元素因为其他元素浮动的影响而改变位置，我们可以通过
clear属性来清除浮动元素对当前元素所产生的影响。clear属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧。
| 值 | 描述 |
|---|---|
| none | 默认值，允许两侧都有浮动元素 |
| left | 左侧不允许浮动元素 |
| right | 右侧不允许浮动元素 |
| both | 左侧或右侧均不允许浮动元素 |
| inherit | 规定应该从父元素继承 clear属性的值 |
-
设置浮动以后，浏览器会自动为元素添加上一个外边框，以保证其他位置不受影响。
-
在清除浮动时，应该对清除与浮动进行匹配：如果某个元素浮动到左侧，则应清除左侧。您的浮动元素会继续浮动，但是被清除的元素将显示在其下方
语法
div {
clear: left;
}
脱离文档流的特点：
块元素：
- 块元素不再独占页面的一行
- 脱离文档流后，块元素的宽度和高度默认都被内容撑开
行内元素：
- 脱离文档流后变成块元素，特点和块元素一样
层定位
定位的简介
定位：是一种更加高级的布局手段，通过定位可以将元素摆放到页面的任意位置，使用position来设置定位
| 值 | 描述 |
|---|---|
| static | 默认值，元素静止未开启定位 |
| relative | 开启元素相对定位 |
| absolute | 开启元素绝对定位 |
| fixed | 开启元素固定定位 |
| sticky | 开启元素的粘滞定位 |
静态定位
当元素的position属性值设置为static时则开启了元素的相对定位
特点
- HTML 元素默认情况下的定位方式为 static（静态）
- 静态定位的元素不受 top、bottom、left 和 right 属性的影响
- position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位
div.static {
position: static;
border: 3px solid #73AD21;
}
相对定位
当元素的position属性值设置为relative时则开启了元素的相对定位
特点
- 当元素开启相对定位后，如果不设置偏移量元素不会发生任何变化
- 相对定位是参照于元素在文档流中的位置进行定位的
- 相对定位会提升元素的层级
- 相对定位不会使元素脱离文档流
- 相对定位不会改变元素的性质，块还是块，行内还是行内
语法
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
偏移量
当元素开启定位后，可以通过偏移量来设置元素
| 值 | 描述 |
|---|---|
| top | 定位元素和定位位置上边的距离 |
| bottom | 定位元素和定位位置下边的距离 |
| left | 定位元素和定位位置左侧的距离 |
| right | 定位元素和定位位置右侧的距离 |
定位元素垂直方向的位置由top和bottom两个属性来控制，但通常只选其一，top越大，定位元素越向下移动，bottom越大，定位元素越向上移，left和right同理。
绝对定位
当元素的position属性值设置为absolute时则开启了元素的绝对定位
特点
- 开启绝对定位后，如果不设置偏移量，元素的位置不会发生变化
- 开启绝对定位后，元素会从文档流中脱离
- 绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开
- 绝对定位会使元素提升一个层级
- 绝对定位元素是相对于其包含块进行定位的
语法
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
包含块（containing block）
-
正常情况下，包含块就是离当前元素最近的祖先块元素
-
绝对定位的包含块就是离它最近的开启了定位的祖先元素，如果所有的祖先元素都没有开启定位，则根元素就是它的包含块
绝对定位的盒子水平居中
- 绝对定位要和带有定位的父级搭配使用，也就是子绝父相——子级是绝对定位，父级是相对定位
<style>
#outer{
width:200px;
height: 100px;
border:2px solid black;
position:relative;
}
#outer>div{
margin-left: -40px;/*小盒子宽度的一半*/
width: 80px;
height: 60px;
background-color: hotpink;
position:absolute;
left:50%;
bottom:0;
}
</style>
<body>
<div id="outer">
<div>水平居中</div>
</div>
</body>
固定定位
万恶之源的广告就是固定定位
当元素的position属性值设置为fixed时则开启了元素的固定定位
特点
- 固定定位也是一种绝对定位，所以固定定位的大部分特点和绝对定位一样，唯一不同的是固定定位永远参照于浏览器的视口进行定位
- 固定定位的元素不会随网页的滚动条滚动
- 固定定位的元素不会在页面中通常应放置的位置上留出空隙
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
粘滞定位
当元素的position属性值设置为sticky时则开启了元素的粘滞定位
特点
粘性元素根据滚动位置在相对和固定之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置
由于这个定位不常用，所以不做过多介绍
堆叠顺序
在使用定位布局时，可能会出现盒子重叠的情况，加了定位的盒子，默认是后来者居上，后面的盒子会压住前面的盒子，此时，可以用z-index来调整盒子的堆叠顺序
特点
- 属性值：正整数、负整数、0，默认值是0，数值越大，盒子越靠上
- 属性值相同，则后来者居上
- 数字后不可以加单位
- 如果两个定位的元素重叠而未指定
z-index，则位于 HTML 代码中最后的元素将显示在顶部 z-index只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效
伪类、伪元素
伪类
伪类（不存在的类，特殊的类）：用来描述一个元素的特殊状态，比如，第一个元素、被点击的元素、鼠标移入的元素
语法
selector:pseudo-class {
property: value;
}
实例
以下的伪类都是根据所有元素进行排序的
- ：first-child第一个子元素
- ：last-child最后一个子元素
- ：nth-child（）选中第n个元素
n的范围是0到正无穷，2n/even是偶数位元素，2n+1/odd是奇数位元素
这些和上述功能相似，但他们是同类型元素中进行排序
- ：first-of-type
- ：last-of-type
- ：nth-of-type
将符合条件的元素从选择器中去除
- :not否定伪类
匹配所有 < p > 元素中的首个 < i > 元素
p i:first-child {
color: blue;
}
匹配所有首个 < p > 元素中的所有 < i > 元素
p:first-child i {
color: blue;
}
伪类可以与 CSS 类结合使用
a.highlight:hover {
color: #ff0000;
}
超链接的伪类
1.没有访问过的链接
a:link {
color: red;
}
2.访问过的链接（由于隐私原因，只能更改链接的颜色）
a:visited {
color: green;
}
3.鼠标移入的状态
a:hover {
color: #FF00FF;
}
4.鼠标点击的状态
a:active {
color: #0000FF;
}
a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效
a:active 必须在 CSS 定义中的 a:hover 之后才能生效
伪类名称对大小写不敏感
伪元素
伪元素：页面中一些并不真实存在的元素（特殊的位置），用
：：开头,用于设置元素指定部分的样式.
语法
selector::pseudo-element {
property: value;
}
实例
- ::first-letter：第一个字母
- ::first-line：第一行
- ::selection：选中的内容
- ::before：元素的开始
- ::after：元素的最后
- ::clear-fix：同时解决外部塌陷和外边距重叠的问题
before和after必须结合content属性来使用
高度塌陷问题
默认情况下，父元素不设置高度，其高度由内容撑开，这样子元素浮动后，父元素会出现如下塌陷
有如下解决方法：
- 额外标签：给最后的子元素添加一个高度为0的块元素，在给块元素添加clear清除浮动
- overflow：hidden：给父元素添加此标签，就会溢出隐藏，但会无法显示溢出的部分
- after伪元素法：给父元素后面添加一个行内元素，是最好的解决方案
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box1 {
border: 10px solid red;
}
#box2 {
width: 100px;
height: 100px;
background-color: #bfa;
float: left;
}
#box1::after {
content: "";
clear: both;
/* 这里虽然清除了，但是没用，因为after伪元素默认添加的是行内元素 */
/* 变成块元素，最终解决高度塌陷问题 */
display: block;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2"></div>
</div>
</body>
</html>
区别
| 伪类 | 伪元素 |
|---|---|
| 存在DOM文档中，逻辑上存在，但在文档树中却无需识别 | 不存在DOM文档中，是虚拟的元素 |
| 伪类的效果可以通过添加实际的类来实现 | 伪元素的效果可以通过添加实际的元素来实现 |
| 只能用： | 可以使用：，也可以使用：： |
总结
1）标准流
让盒子上下或者左右排列
2）浮动
让多个块级元素一行显示或者左右对齐盒子，浮动的盒子就是按照顺序左右排列
3）定位
定位是多个盒子层叠的概念
4)伪类
本质上是为了弥补常规css不足
5）伪元素
本质上是创建一个有内容的虚拟容器
728
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
