蓝旭春季培训——浮动、定位、伪类、伪元素

南喑

已于 2022-07-09 17:33:56 修改

阅读量546

点赞数 1

文章标签： css

于 2022-04-22 20:00:47 首次发布

本文链接：https://blog.csdn.net/weixin_57178511/article/details/124309418

版权

蓝旭春季培训——浮动、定位、伪类、伪元素

文档流
浮动
定位
- position属性
- z-index
伪类
伪元素

文档流

文档流（normal flow）是相对于盒子模型讲的，是在浏览器中的规则：块状元素从上到下排序，行内元素和行内块从左到右排序。
网页布局

浮动

float属性

作用：div实现横向多列布局
left—左浮动
right—右浮动
none—不浮动
inherit—元素继承其父级的 float 值
特性
1. 浮动元素会脱离标准流移动到指定位置，浮动的盒子不再保留原先的位置
2. 多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列，互相贴靠在一起的（不会有缝隙）；如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐子盒子；如果高矮不同，中间出现缝隙，后面的浮动元素不会钻空，该盒子的顶部会与上层的子盒子的底边对齐；如果两个方向都有浮动的元素，下一元素会去找相同方向的浮动元素贴边

父元素坍塌问题

给父元素设置宽高

clear属性

作用：clear 属性指定元素两侧不能出现浮动元素（可解决）
none - 允许两侧都有浮动元素。默认值
left - 左侧不允许浮动元素
right- 右侧不允许浮动元素
both - 左侧或右侧均不允许浮动元素
inherit - 元素继承其父级的 clear 值

overflow 属性

作用：在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条（仅适用于具有指定高度的块元素）
visible - 默认。溢出没有被剪裁。内容在元素框外渲染
hidden - 溢出被剪裁，其余内容将不可见
scroll - 溢出被剪裁，同时添加滚动条以查看其余内容
auto - 与 scroll 类似，但仅在必要时添加滚动条
解决坍塌问题原理

都让盒子进入了BFC模式，为这个块级元素生产一个独立的块级上下文，使这个块级元素内部的排版完全独立；独立的块级上下文可以包裹浮动流，全部浮动子元素也不会引起容器高度塌陷，就是说包含块会把浮动元素的高度也计算在内，所以就不用清除浮动来撑起包含块的高度

定位

定位模式：static、relative、fixed、absolute等
边偏移：top、right、bottom、left
压盖顺序：z-index

position属性

static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
relative：相对于其正常位置进行定位。
fixed：相对于浏览器窗口进行定位，在屏幕窗口上的位置固定，不会随内容滚动。
absolute：相对于除 static 定位以外的第一个父元素进行定位，如果没有找到，则相对根元素进行定位。
sticky：是css定位新增属性，是相对定位和固定定位fixed 的结合，它主要用在对 scroll 事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到 sticky 粘性定位的要求时(比如top：100px)，position:sticky这时的效果相当于fixed定位，固定到适当位置；必须指定top、bottom、left、right4个值之一，否则只会处于相对定位

定位模式	是否脱标	移动位置
relative	否	相对自身位置
fixed	是	浏览器可视区
absolute	是	带有定位的父级
sticky	否	浏览器可视区

height:100%时，fixed和relative的区别：fixed相对html，而relative相对父元素

例：w3school

z-index

设置元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。仅能在定位元素上奏效（例如 position:absolute;）

伪类

用来添加一些选择器的特殊效果，定义元素的特殊状态

锚伪类

链接能够以不同的方式显示：

/* 未访问的链接 */
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 之后才能生效;伪类名称不区分大小写。

简单的工具提示悬停

把鼠标悬停到 a 元素以显示 b元素（类似工具提示的效果）,语法：

b {
  display: none;
}
a:hover b{
  display: block;
}

例：悬停

:first-child 伪类

:first-child 伪类与指定的元素b匹配：选择父元素a的第一个子元素b.

选择器匹配作为任何元素的第一个子元素的b元素：

b:first-child
{
    color:blue;
}

匹配所有a元素中的第一个 b元素

a > b:first-child
{
    color:blue;
}

匹配所有作为第一个子元素的b元素中的所有 c元素

b:first-child c
{
    color:blue;
}

例：:first-child 伪类

:lang 伪类

:lang 伪类允许您为不同的语言定义特殊的规则，语法：

:lang 为属性为 lang="x" 的y元素定义引号：
<html>
<head>
<style>
y:lang(x) {
  quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <y lang="x">A quote in a paragraph</y> Some text.</p>
</body>
</html>

伪元素

设置元素的首字母、首行的样式

::first-line 伪元素向文本的首行添加特殊样式
::first-letter 伪元素向文本的首字母添加特殊样式
例：精灵图

在元素的内容之前或之后插入内容

::before 伪元素在元素内容之前插入一些内容
::after 伪元素在元素内容之后插入一些内容

::selection 伪元素

匹配用户选择的元素部分

南喑

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
蓝旭春季培训——浮动、定位、伪类、伪元素

蓝旭培训——浮动、定位、伪类、伪元素文档流浮动float属性父元素坍塌问题clear属性overflow 属性定位position属性z-index伪类锚伪类简单的工具提示悬停:first-child 伪类:lang 伪类文档流文档流（normal flow）是相对于盒子模型讲的，是在浏览器中的规则：块状元素从上到下排序，行内元素和行内块从左到右排序。浮动float属性作用：div实现横向多列布局left—左浮动right—右浮动none—不浮动inherit—元素继承其父级的 flo
复制链接

扫一扫