浮动、定位、伪类、伪元素

原创已于 2022-04-20 18:46:27 修改 · 324 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2022-04-20 18:44:20 首次发布

浮动同时被 3 个专栏收录

1 篇文章

订阅专栏

定位

1 篇文章

订阅专栏

伪类

1 篇文章

订阅专栏

一、浮动

1. 文档流、文本流

文档流（normal flow）

是相对于盒子模型讲的，是在浏览器中的规则：块状元素从上到下排序，行内元素和行内块从左到右排序。

文本流（text flow）

是相对于文字段落讲的，是一系列字符，是文档的读取和输出顺序

2. 分类

float 属性定义元素在哪个方向浮动

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

3. 浮动的特性

（1）可以设置宽高，一行排列。

（2）浮动的元素在一个父盒子里依次贴边

如果父盒子装不下所有盒子，后面的盒子会自动换行去贴上一个盒子的边
子盒子如果高矮不同，中间出现缝隙，后面的浮动元素不会钻空，该盒子的顶部与上层的子盒子的底边对齐
如果两个方向都有浮动的元素，下一个元素会去找相同方向的浮动元素贴边

（3）浮动没有margin塌陷（重叠）---锤子方向塌陷失效

（4）浮动的元素脱离标准文档流，但未脱离文本流；元素浮动后，它的位置会让给后面的标准文档流里的元素

（5）浮动有字围效果

图片浮动，文字不浮动

4.清除浮动（重点）

（1）原因

浮动元素之后的普通元素被覆盖（浮动元素在普通元素上方）
父元素高度的塌陷（如果子元素浮动，那么父元素高度无法被子元素的内容撑开）

举个例子：

若要使bottom在1和2下面显示，就需要消除浮动

（2）方式

额外标签法

通过在box里新增一个盒子，给这个新增的盒子设置clear:both即可。

注意：这个新增的盒子要求必须是块级元素不能是行内元素

父元素overflow

直接给父元素添加overflow:hidden即可

伪元素清除

双伪元素清除（闭合浮动）

二、定位

1. 作用

使得盒子自由的在某个盒子里面移动位置或者固定在屏幕中某个位置
可以压住其他盒子

这是浮动和标准流无法做到的

2.组成

定位=定位模式+边偏移

1. 定位模式

（1）静态定位--static

浏览器默认的定位模式

（2）相对定位--relative 相对于自身原来位置，做偏移量移动

（3）绝对定位--absolute

绝对定位是元素在移动的时候，是相对于它祖先元素来说的。

特点：

如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位
如果祖先元素有定位（相对，绝对，固定定位），则以最近一级的有定位的定位祖先元素为参考点移动位置
绝对定位不会占有原先的位置（脱标）

注意：一般会使用子绝父相的定位模式

（4）固定定位--fixed

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

特点：

以浏览器的可使用窗口为参照点移动元素

跟父元素没有任何关系

不能滚动条滚动而滚动

固定定位不在占有原先的位置

（5）粘性定位--sticky

用于一个盒子最初位于某个位置，滚动滚动条后会粘于页面最上方

static	默认值。没有定位，元素出现在正常的流中（忽略top,bottom,left,right或者z-index声明）。
relative	生成相对定位的元素，相对于其正常位置进行定位。
fixed	生成固定定位的元素，相对于浏览器窗口进行定位。
absolute	生成绝对定位的元素，相对于除static定位以外的第一个父元素进行定位。
inherit	规定应该从父元素继承position属性的值。
sticky	是CSS定位新增属性；是相对定位和固定定位fixed的结合；它主要用对scroll事件的监听上。

2. 边偏移

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

三、伪类及伪元素

1. 定义

伪类是添加到选择器的关键字，指定要选择的元素的特殊状态
伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。

2. 常用

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



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



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



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



/*获得焦点*/
input:focus {
    background-color: #f00ff0;
}


/*选择ul元素的第一个子元素，且此元素为li*/
ul>li:first-chlid {
    color: blue;
}