ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

定位浮动伪类伪元素

2021-05-06 19:05:16  阅读:28  来源: 互联网

标签:浮动 定位 伪类 样式 元素 color 点击 文本


浮动

文档流

文档流的简单定义:正常文档流,将窗体自上而下地分成一行一行,块元素 独占一行,相邻行元素在每行中按照从左到右依次排列顺序。
在这里插入图片描述
而脱离正常文档流可以将正常显示顺序打乱,比如将最底部的某个div元素抽出来,显示在其他元素前边。
float脱离正常文档流,但不脱离正常文本流。
其他元素会无视它所占据了的区域,直接在它身下布局。

在这里插入图片描述

demo1设置float以后
在这里插入图片描述

但是文字却会认同浮动元素所占据的区域,围绕它布局,也就是没有拖出文本流。
在这里插入图片描述

float属性值样式
left元素浮动到其容器的左侧
right元素浮动在其容器的右侧
none元素不会浮动(将显示在文本中刚出现的位置)。默认值。
inherit元素继承其父级的 float 值

clear

浮动框旁边的行框被缩短,从而给浮动框留出空间,行框围绕浮动框。

因此,创建浮动框可以使文本围绕图像:
在这里插入图片描述
要想阻止行框围绕浮动框,需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none,它表示框的哪些边不应该挨着浮动框。

为了实现这种效果,在被清理的元素的上外边距上添加足够的空间,使元素的顶边缘垂直下降到浮动框下面:
在这里插入图片描述

定位

position属性样式
static默认
relative相对定位
absolute绝对定位
fixed混合定位(滑动鼠标但是位置不变)
inherit继承父类
z-index指定元素的堆栈顺序

代码示例:

position: absolute;
top: 10px;
left: 10px;    

伪类伪元素

a:link{
    color:black;}
a:hover{
    color:red;}
a:visted{
    color:purple;}
a:active{
    color:green;}

link为未点击时的样式,hover为鼠标悬停时的样式,visted为点击过的样式,active为点击的一瞬间的样式。
点击前在这里插入图片描述鼠标悬停在这里插入图片描述点击的一瞬间在这里插入图片描述点击以后在这里插入图片描述
结构伪类选择器:

table tr:nth-child(odd){
    color:red;
}

可以对table的odd奇数或者even偶数行进行设定。
在这里插入图片描述
还有一些其他的:

::first-line 伪元素用于向文本的首行添加特殊样式。

p::first-line {
  color: red;
}

::first-letter 伪元素用于向文本的首字母添加特殊样式。

p::first-letter {
  color: red;
}

::before 伪元素可用于在元素内容之前插入一些内容。

h1::before {
  content:"before";
}

::after 伪元素可用于在元素内容之后插入一些内容。

h1::after {
  content:"after";
}

在这里插入图片描述

标签:浮动,定位,伪类,样式,元素,color,点击,文本
来源: https://blog.csdn.net/gwhfamily/article/details/116429979

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有