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

最新推荐文章于 2024-03-21 10:12:30 发布

m0_63483865

最新推荐文章于 2024-03-21 10:12:30 发布

阅读量563

点赞数

分类专栏： CSS 文章标签：前端 css

本文链接：https://blog.csdn.net/m0_63483865/article/details/124302842

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

4.3 ::first-letter 伪元素

一.浮动

1.1标准流(普通流/文档流)

标签按照规定好默认方式排列。

1.块级元素独占一行，从上向下顺序排列

常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table

2.行内元素会按照顺序，从左到右顺序排列、碰到父元素边缘则自动换行

常用元素：span、a、i、em等

1.2浮动的语法

float属性用于创建浮动框，将其移动到一遍，直到左边缘或右边缘触及包含块火另一个浮动框的边缘。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

float是CSS中的定位属性，用于设置对象的浮动布局，分为左浮动、右浮动和不浮动

属性值	描述
none	元素不浮动
left	元素向左浮动
right	元素向右浮动

<style>
  
    div{
      float:left;
      }

      div{
      float:right;
      }

      div{
      float:none;
      }

</style>

1.3 浮动的特性

1.浮动元素会脱离标准流，移动到指定位置。

2.浮动的元素会一行内显示并且元素顶部对齐

3.浮动的元素会具有行内块元素的特性

4.浮动的盒子不再保留原来的位置，会被后面的元素占据

1.4常见网页布局

1.5 浮动布局注意

浮动元素经常和标准流父级搭配使用：先用标准流的父元素排列上下位置，之后内部子元素采用浮动排列左右位置
一个盒子里有多个子盒子，其中一个浮动其他也会浮动
浮动盒子只会影响浮动盒子后的标准流，不会影响盒子前的标准流

1.6清除浮动

清除浮动的本质就是清除浮动元素造成的影响
如果父盒子本身有高度，则不需要清除浮动
清除浮动之后，父级救回根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流

语法：

选择器{clear：属性值；}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

清除浮动的策略是：闭合浮动

1.6.1额外标签法

额外标签法也称为隔墙法

额外标签法会在浮动元素末尾添加一个空的标签，新标签必须是块级元素。<div>、<br/>

<div class="box">
    <div>第一个浮动</div>
    <div>第二个浮动</div>
    <div>第三个浮动</div>
    <div style="clear:both"></div>
</div>

通俗易懂，书写方便，但添加许多无意义的标签，结构化较差。

1.6.2父级添加overflow属性

给父元素添加overflow属性，将其属性值设置为hidden、auto或scroll

<style>
    .box{
    overflow:hidden;
    }
</style>

<div class="box">
    <div>第一个浮动</div>
    <div>第二个浮动</div>
    <div>第三个浮动</div>
</div>

1.6.3父级添加after伪元素

.clearfix:after {
    content:"";
    displat:block;
    height: 0;
    clear:both;
    visibility: hidden;
}

.clearfix{ /* IE6、7专有 */

    *zoom： 1;
}

没有增加标签，结构更简单；照顾低版本浏览器

1.6.4父级添加双伪元素

.clearfix:before,.clearfix:after {
    content:"";
    display:table;
}

.clearfix:after {
    clear:both;
}

.clearfix {
    *zoom:1;
}

清除浮动的方式	优点	缺点
额外标签法(隔墙法)	通俗易懂，书写方便	添加许多无意义的标签，结构化较差
父级overflow：hidden；	书写简单	溢出隐藏
父级after伪元素	结构语义化正确	由于IE6-7不支持：after，兼容性问题
父级双伪元素	结构语义化正确	由于IE6-7不支持：after，兼容性问题

1.6.5PS切图

常见的图片格式

1.jpg图像格式：JEPG(JPG)对色彩的信息保存较好，高清，颜色较多，我们产品累的图片经常用jpg格式的

2.gif图像格式：GIF格式最多只能存储256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果，实际经常用于一些图片小动画效果

3.png图像格式是一种新型的网络图形格式，结合了GIF和JEPG的优点，具有存储形式丰富的特点，能够保持透明背景。如果想要切成背景透明的图片，选择png格式

4.PSD图像格式：是Photoshop的专用格式，里面可以存放图层、通道遮罩等多种设计稿。可以直接从上面复制文字、获得图片，测量大小和距离

1.选中需要的图层：图层菜单、合并图层

2.快速导出为png

二.定位

1.浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。

2.定位可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

定位：将盒子定在某一个位置，定位是在摆放盒子，按照定位的方式移动盒子。

定位=定位模式+边偏移

定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

2.1定位模式

定位模式决定元素的定位方式，它通过CSS的position属性来设置，其值可以分为四个：

值	语义	解释
static	静态定位	默认值，没有定位，相当于取消定位属性或者不设置定位属性
relative	相对定位	元素所占据文档流的位置保留，元素本身相对自身原位置进行偏移
absolute	绝对定位	文档脱离文档流，相对于上一个设置定位属性position(body)的父元素进行定位
fixed	固定定位	文档脱离文档流，漂浮在文档流上方，相对于浏览器窗口进行定位

2.1.1静态定位

静态定位是元素的默认定位方式，无定位的意思。

语法：选择器{position: static；}

静态定位按照标准流特性摆放位置，它没有边偏移
静态定位很少使用

2.1.2相对定位

相对定位是元素在移动位置的时候，是相对于它原来的位置来说。

语法：选择器{position：relative；}

移动位置参照点是原来的位置
原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待，不脱标

2.1.3绝对定位

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

语法：选择器{position：absolute；}

如果没有祖先元素或者祖先元素没有定位，则以浏览器为标准定位(Document文档)
如果祖先元素有定位(相对、绝对、固定)，则以最近一级的有定位祖先元素为参考点移动位置
绝对定位不再占有原来位置

2.1.4固定定位

固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以再浏览器页面滚动时元素的位置不会改变。

语法：选择器{position：fixed；}

固定定位的特点：

1.以浏览器的可视窗口为参照点移动元素

跟父元素没有任何关系
不跟随滚动条滚动

2.固定定位不再占有原来位置

固定定位脱标，可以看做特殊的绝对定位

固定定位小技巧：固定在版心右侧位置

1.让固定定位的盒子left：50%。走到浏览器可视区一半的位置

2.让固定定位的盒子margin-left：版心宽度的一半距离

子绝父相

子级绝对定位，不会占有位置，可以放到父盒里面的任何一个地方，不会影响其他的兄弟盒子
父盒子需要加定位限制子盒子在父盒子内显示
父盒子布局时，需要占有位置，因此父亲只能是相对定位

2.1.5粘性定位

粘性定位被认为相对定位和固定定位的结合

语法：选择器{position：sticky；top：10px；}

粘性定位特点

1.以浏览器可视窗口为参照点移动元素(固定定位特点)
2.粘性定位占有原来位置(相对定位特点)
2.必须添加top、left、right、bottom其中一个有效

2.1.6定位叠放次序

在使用定位布局是，可能会出现盒子重叠的情况，此时，可以使用z-index来控制盒子的前后次序

语法：选择器{z-index：1；}

数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上
如果属性值相同，则按照书写顺序，后来居上
数字后面不能加单位
只有定位的盒子才有z-index属性

2.1.7定位的拓展

绝对定位盒子居中

加了绝对定位的盒子不能通过margin：0 auto 水平居中

left：50%；让盒子的左侧移动到父级元素的水平中心位置
margin-left：-100px 让盒子向左移动自身宽度的一半

定位的特殊性

绝对定位和固定定位和浮动类似

行内元素添加绝对或者固定定位，可以直接设置高度和宽度
块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小

2.2边偏移

边偏移就是定位的盒子移动到最终位置。有top、bottom、left和right 4个属性。

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

三、伪类

3.1定义

　伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。

语法：

selector:pseudo-class {
  property: value;
}

3.2CSS伪类种类

选择器	例子	例子描述
:active	a:active	选择活动的链接。
:checked	input:checked	选择每个被选中的 <input> 元素。
:disabled	input:disabled	选择每个被禁用的 <input> 元素。
:empty	p:empty	选择没有子元素的每个 <p> 元素。
:enabled	input:enabled	选择每个已启用的 <input> 元素。
:first-child	p:first-child	选择作为其父的首个子元素的每个 <p> 元素。
:first-of-type	p:first-of-type	选择作为其父的首个 <p> 元素的每个 <p> 元素。
:focus	input:focus	选择获得焦点的 <input> 元素。
:hover	a:hover	选择鼠标悬停其上的链接。
:in-range	input:in-range	选择具有指定范围内的值的 <input> 元素。
:invalid	input:invalid	选择所有具有无效值的 <input> 元素。
:lang(language)	p:lang(it)	选择每个 lang 属性值以 "it" 开头的 <p> 元素。
:last-child	p:last-child	选择作为其父的最后一个子元素的每个 <p> 元素。
:last-of-type	p:last-of-type	选择作为其父的最后一个 <p> 元素的每个 <p> 元素。
:link	a:link	选择所有未被访问的链接。
:not(selector)	:not(p)	选择每个非 <p> 元素的元素。
:nth-child(n)	p:nth-child(2)	选择作为其父的第二个子元素的每个 <p> 元素。
:nth-last-child(n)	p:nth-last-child(2)	选择作为父的第二个子元素的每个<p>元素，从最后一个子元素计数。
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择作为父的第二个<p>元素的每个<p>元素，从最后一个子元素计数
:nth-of-type(n)	p:nth-of-type(2)	选择作为其父的第二个 <p> 元素的每个 <p> 元素。
:only-of-type	p:only-of-type	选择作为其父的唯一 <p> 元素的每个 <p> 元素。
:only-child	p:only-child	选择作为其父的唯一子元素的 <p> 元素。
:optional	input:optional	选择不带 "required" 属性的 <input> 元素。
:out-of-range	input:out-of-range	选择值在指定范围之外的 <input> 元素。
:read-only	input:read-only	选择指定了 "readonly" 属性的 <input> 元素。
:read-write	input:read-write	选择不带 "readonly" 属性的 <input> 元素。
:required	input:required	选择指定了 "required" 属性的 <input> 元素。
:root	root	选择元素的根元素。
:target	#news:target	选择当前活动的 #news 元素（单击包含该锚名称的 URL）。
:valid	input:valid	选择所有具有有效值的 <input> 元素。
:visited	a:visited	选择所有已访问的链接。

3.3锚伪类

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

为超链接添加不同样式

<!DOCTYPE html>
<html>
<head>
<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}

a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}

a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}

a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}

a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>
<body>

<p>请把鼠标移到链接上并观察样式的变化：</p>

<p><b><a class="one" href="default.asp" target="_blank">此链接改变颜色</a></b></p>
<p><b><a class="two" href="default.asp" target="_blank">此链接改变字体大小</a></b></p>
<p><b><a class="three" href="default.asp" target="_blank">此链接改变背景色</a></b></p>
<p><b><a class="four" href="default.asp" target="_blank">此链接改变字体族</a></b></p>
<p><b><a class="five" href="default.asp" target="_blank">此链接改变文本装饰</a></b></p>

</body>
</html>

3.4 :first-child 伪类

:first-child 伪类与指定的元素匹配：该元素是另一个元素的第一个子元素。

/*选择器匹配作为任何元素的第一个子元素的任何 <p> 元素：*/
p:first-child {
  color: blue;
}

/*选择器匹配所有 <p> 元素中的第一个 <i> 元素：*/
p i:first-child {
  color: blue;
}
/*选择器匹配作为另一个元素的第一个子元素的 <p> 元素中的所有 <i> 元素：*/
p:first-child i {
  color: blue;
}

3.5:lang伪类

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

/*:lang 为属性为 lang="en" 的 <q> 元素定义引号：*/
<html>
<head>
<style>
q:lang(en) {
  quotes: "~" "~";
}
</style>
</head>
<body>

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

</body>
</html>

四、伪元素

伪元素用于创建一些不在文档树中的元素，并为其添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

4.1CSS伪元素

CSS 伪元素用于设置元素指定部分的样式。

例如，它可用于：

设置元素的首字母、首行的样式
在元素的内容之前或之后插入内容

语法:

selector::pseudo-element {
  property: value;
}

选择器	例子	例子描述
::after	p::after	在每个 <p> 元素之后插入内容。
::before	p::before	在每个 <p> 元素之前插入内容。
::first-letter	p::first-letter	选择每个 <p> 元素的首字母。
::first-line	p::first-line	选择每个 <p> 元素的首行。
::selection	p::selection	选择用户选择的元素部分。

4.2::first-line 伪元素

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

/*为所有 <p> 元素中的首行添加样式：*/
p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

注意：::first-line 伪元素只能应用于块级元素。

以下属性适用于 ::first-line 伪元素：

字体属性
颜色属性
背景属性
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

4.3 ::first-letter 伪元素

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

/*设置所有 <p> 元素中文本的首字母格式：*/
p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

注意：::first-letter 伪元素只适用于块级元素。

下面的属性适用于 ::first-letter 伪元素：

字体属性
颜色属性
背景属性
外边距属性
内边距属性
边框属性
text-decoration
vertical-align（仅当 "float" 为 "none"）
text-transform
line-height
float
clear

4.4::before 伪元素

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

/*在每个 <h1> 元素的内容之前插入一幅图像：*/
h1::before {
  content: url(smiley.gif);
}

4.5::after 伪元素

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

/*在每个 <h1> 元素的内容之后插入一幅图像：*/
h1::after {
  content: url(smiley.gif);
}

4.6::selection 伪元素

::selection 伪元素匹配用户选择的元素部分。

以下 CSS 属性可以应用于 ::selection：

color
background
cursor
outline

/*使所选文本在黄色背景上显示为红色：*/
::selection {
  color: red; 
  background: yellow;
}

4.7伪元素和 CSS 类

/*将以红色和较大的字体显示 class="intro" 的段落的首字母。*/
p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

m0_63483865

关注

0
点赞
踩
0

收藏

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

传统网络布局的三种方式：普通流(标准流) 浮动定位浮动标准流(普通流/文档流)标签按照规定好默认方式排列。1.块级元素独占一行，从上向下顺序排列常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table2.行内元素会按照顺序，从左到右顺序排列、碰到父元素边缘则自动换行常用元素：span、a、i、em等浮动的语法float属性用于创建浮动框，将其移动到一遍，直到左边缘或右边缘触及包含块火另一个浮动框的边缘。由于浮动框不在文档的普通流中，所以文档的
复制链接

扫一扫