浮动定位伪类伪元素

Y76

已于 2022-04-21 20:23:28 修改

阅读量576

点赞数

文章标签：前端

于 2022-04-21 19:41:59 首次发布

本文链接：https://blog.csdn.net/qq_67673170/article/details/124308968

版权

一、浮动

1.float属性：规定元素如何浮动，用于定位和格式化内容。

2.clear属性：规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。

3.clearfix属性：解决元素的溢出问题。

一、浮动

1.float属性：规定元素如何浮动，用于定位和格式化内容。

left - 元素浮动到其容器的左侧

right - 元素浮动在其容器的右侧

none - 元素不会浮动（将显示在文本中刚出现的位置）,默认值。

inherit - 元素继承其父级的 float 值

no-float:图像将显示在文本中刚出现的位置

2.clear属性：规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。

none - 允许两侧都有浮动元素,默认值

left - 左侧不允许浮动元素

right- 右侧不允许浮动元素

both - 左侧或右侧均不允许浮动元素

inherit - 元素继承其父级的 clear 值

3.clearfix属性：解决元素的溢出问题。

overflow：指定如果内容溢出元素框会发生什么情况

overflow-x：指定当溢出元素的内容区域时，如何处理内容的左/右边缘。

overflow-y：指定当溢出元素的内容区域时，如何处理内容的上/下边缘。

属性值：visible：默认，不裁剪，在元素框外渲染。

hidden：裁剪，不可见。

scroll：裁剪，添加滚动条。

auto：类似于scroll，仅在必要的时候添加滚动条。

二、定位

1、文档流（flow）定位

块级元素 display：block；

元素的width、height、padding、margin都可以进行设置。

常用元素：<div> <p> <h1>-<h6> <ol> <ul> <table> <form>

<!DOCTYPE html>
<html>
<head>
<style>
span {
  display: block;
}
</style>
</head>
<body>

<span>值为 "block" 的 display 属性会导致</span><span>两元素间的换行。</span>

</body>
</html>

行内（内联）元素 display：inline；

不单独占一行，width、height不可进行设置。

常用元素：<span> <a> <br>

<!DOCTYPE html>
<html>
<head>
<style>
div {
  display: inline;
}
</style>
</head>
<body>
<div>inline使得块级元素变成行内样式</div>
<div>inline使得块级元素变成行内样式</div>
</body>
<html>

行内块级元素 display：inline-block；

同时具备inline元素、block元素的特点，不单独占据一行，元素的width、height、padding、margin都可以进行设置。

常用元素：<img> <input>

元素不被显示的时候使用 display：none；

2、浮动（float）定位(同浮动）

3、层（layer）定位

1、平面定位的属性：top，bottom，left，right（必须先使用position属性）

2、position属性：static、fixed、relation、absolute

position：static；

HTML 元素默认情况下的定位方式为 static（静态）。

静态定位的元素不受 top、bottom、left 和 right 属性的影响。

position: static; 的元素不会以任何特殊方式定位，它始终根据页面的正常流进行定位。

position：fixed；

position：fixed；的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。

固定定位的元素不会在页面中通常应放置的位置上留出空隙。

position：relative；

position：relative；的元素相对于其正常位置进行定位。

设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。

position：absolute；

position：absolute；的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。

然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。

三、伪类

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

作用：设置鼠标悬停在元素上时的样式；

为已访问和未访问链接设置不同的样式；

设置元素获得焦点时的样式；

1、anchor伪类

a:link：未访问的链接

a:visited ：已访问的链接

a:hover ：鼠标划过链接

a:active ：已选中的链接

注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

伪类的名称不区分大小写。

2、伪类和CSS

伪类和CSS 可以配合使用。

a.red:visited {color:#FF0000;}
 
<a class="red" href="css-syntax.html">CSS 语法</a>

3、first-child

1、 first-child：选择父元素的第一个子元素。

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child
{
	color:red;
} 
</style>
</head>
<body>
<p>This is some text.</p>
<p>This is some text.</p>
<p>在此例中，只有第一个标签p才会变成红色，其他的P标签都没有颜色的变化。</p>
</body>
</html>

2、<p>元素的第一个 <i> 元素

<!DOCTYPE html>
<html>
<head>
<style>
p > i:first-child
{
	color:red;
} 
</style>
</head>

<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>

3、选择器匹配所有 <p> 元素中的第一个 <i> 元素

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child i {
  color: blue;
} 
</style>
</head>
<body>

<p>我是一个<i>强壮</i>的男人。我是一个<i>强壮</i>的男人。</p>

<p>我是一个<i>强壮</i>的男人。我是一个<i>强壮</i>的男人。</p>

</body>
</html>

4、lang伪类

<!DOCTYPE html>
<html>
<head>
<style>
q:lang(en) {
  quotes: "~" "~";
}
</style>
</head>
<body>

<p>Some text <q lang="en">A quote in a paragraph</q> Some text.</p>

<p>在本例中，:lang 为 lang="en" 的 q 元素定义引号：</p>

</body>
</html>

四、伪元素

CSS 伪元素是用来添加一些选择器的特殊效果。

1、"first-line"伪元素

用于向文本的首行设置特殊样式。

注意：1、"first-line" 伪元素只能用于块级元素。

           2、下面的属性可应用于 "first-line" 伪元素：

                font properties

                color properties

                background properties

                word-spacing

                letter-spacing

                text-decoration

                vertical-align

                text-transform

                line-height

                clear

2、"first-letter" 伪元素

用于向文本的首字母设置特殊样式

注意： 1、"first-letter" 伪元素只能用于块级元素。

2、下面的属性可应用于 "first-letter" 伪元素：

                font properties

                color properties

                background properties

                margin properties

                padding properties

                border properties

                text-decoration

                vertical-align (only if "float" is "none")

                text-transform

                line-height

                float

                clear

3、":before" 伪元素

可以在元素的内容前面插入新内容。

<!DOCTYPE html>
<html>
<head>
<style>
h1::before {
  content: url(/i/photo/smile.gif);
}
</style>
</head>
<body>

<h1>这是一个标题</h1>

<p>::before 伪元素在一个元素的内容之前插入内容。</p>

<h1>这是一个标题</h1>

</body>
</html>

4、":after" 伪元素

可以在元素的内容之后插入新内容。

<!DOCTYPE html>
<html>
<head>
<style>
h1::after {
  content: url(/i/photo/smile.gif);
}
</style>
</head>
<body>

<h1>这是一个标题</h1>

<p>::before 伪元素在一个元素的内容之前插入内容。</p>

<h1>这是一个标题</h1>

</body>
</html>

五、总结

1、通过多次写博客，我可以感受到自己的知识得到了扩充，同时写博客可以让自己巩固所学的知识，加深理解。

2、我觉得在今后的学习过程当中，还需要多动手实践，把自己的所学的知识应用到实际问题当中。

Y76

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浮动定位伪类伪元素

一、浮动1.float属性：规定元素如何浮动，用于定位和格式化内容。left - 元素浮动到其容器的左侧right - 元素浮动在其容器的右侧none - 元素不会浮动（将显示在文本中刚出现的位置）,默认值。inherit - 元素继承其父级的 float 值no-float:图像将显示在文本中刚出现的位置2.clear属性：规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。none - 允许两侧都有浮动元素,默认值left - 左侧不允许浮动元素...
复制链接

扫一扫