深入理解CSS伪元素

Posted 2023-05-01

参考技术A

伪元素顾名思义伪装成元素，但不是元素，这与生成内容相关。生成内容主要指由浏览器创建的内容，而不是由标志或内容来表示。生成内容主要由:before和:after伪元素来实现，当然伪元素还包括:first-line,:first-letter和::selection

:first-letter

指定一个元素第一个字母的样式

注意1：所有前导标点符号应与第一个字母一同应用该样式

注意2：只能与块级元素关联

注意3：只有当选择器部分和左大括号之间有空格时，IE6-浏览器才支持。因为first-letter中存在连接符的原因

:first-line

设置元素中第一行文本的样式

注意1：只能与块级元素关联

注意2：只有当选择器部分和左大括号之间有空格时，IE6-浏览器才支持。因为first-line中存在连接符的原因

:before(IE7-浏览器不支持)

在元素内容的最开始插入生成内容

注意：默认这个伪元素是行内元素，且继承元素可继承的属性；IE7-浏览器中必须声明!DOCTYPE，否则不起作用

:after(IE7-浏览器不支持)

在元素内容的最后插入生成内容

注意：默认这个伪元素是行内元素，且继承元素可继承的属性；IE7-浏览器中必须声明!DOCTYPE，否则不起作用

::selection(IE8-浏览器不支持)

匹配被用户选择的部分

注意1：firefox浏览器需要添加-moz-前缀

注意2：只支持双冒号写法

注意3：只支持颜色和背景颜色两个样式

下面是伪元素的速查表

【content属性】

content属性应用于before和after伪元素

【1】 <string> 里面的内容会原样显示，即使包含某种标记也不例外。

注意1：如果希望生成内容中有一个换行，则需要使用\\A

注意2：若是一个很长的串，需要它拆分成多行则需要用\\对换行符转义

【2】 <uri>

【3】attr( <identifier> )

<补充>【quotes属性】

管理引号

【4】open-quote|close-quote

【5】counter

首字下沉

钉子效果

图片叠加效果

深入理解CSS浮动

×

目录

[1]定义 [2]特性 [3]表现 [4]重叠

前面的话

　　浮动最早的使用是出自<img src="#" align="right">，用于文本环绕图片的排版处理。如今浮动作为CSS中常用的布局方式，本文将就浮动内容做详细介绍和梳理

 

定义

　　float 浮动　

　　浮动元素脱离普通流，然后按照指定方向，向左或者向右移动，碰到父级边界或者另外一个浮动元素停止

　　值: left | right | none | inherit

　　初始值: none

　　应用于: 所有元素

　　继承性: 无

　　[注意]若浮动一个非替换元素，则必须为该元素声明一个width，否则，根据CSS规范，元素的宽度趋于0

 

特性

　　【1】浮动流

　　正常流中元素一个接一个排列；浮动元素也构成浮动流

　　【2】块级框

　　浮动元素自身会生成一个块级框，而不论这个元素本身是什么，使浮动元素周围的外边距不会合并

　　【3】包裹性

　　浮动元素的包含块是指其最近的块级祖先元素，后代浮动元素不应该超出包含块的上、左、右边界。若不设置包含块的高度，包含块若浮动，则包含块会延伸，进而包含其所有后代浮动元素；若不设置包含块的宽度，包含块若浮动，则包含块宽度由后代浮动元素撑开

　　【4】破坏性

　　浮动元素脱离正常流，并破坏了自身的行框属性，使其包含块元素的高度塌陷，使浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框重新排列

表现

　　[1]浮动元素的左(或右)外边界必须是源文档中之前出现的左浮动(或右浮动)元素的右(左)外边界。除非后出现浮动元素的顶端在先出现浮动元素的底端下面

　　[2]左浮动元素的右外边界不会在其右边右浮动元素的左外边界的右边。右浮动元素的左外边界也不会在其左边任何左浮动元素的右外边界的左边

　　[3]左(或右)浮动元素左边(右边)有另一个浮动元素，前者右外边界不能在其包含块右(左)边界的右边(左边)

　　[4]浮动元素的左(或右)外边界不能超出其包含块的左(或右)内边界

　　[5]一个浮动元素的顶端不能比其父元素的内顶端更高。如果一个浮动元素在两个合并外边距之间，放置这个浮动元素时就好像在两个元素之间有一个块级父元素

　　[6]浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高

　　[7]如果源文档中一个浮动元素之前出现另一个元素，浮动元素的顶端不能比包含该元素所生成框的任何行框的顶端要高

　　[8]浮动元素必须尽可能高地放置

　　[9]左浮动元素必须向左尽可能远，右浮动元素则必须向右尽可能远。位置越高，就会向右或向左浮动得越远

 

重叠

　　浮动元素超出父元素边界的方法有两种：一种是浮动元素的宽度大于父元素的宽度，另一种就是设置负外边距。如果浮动元素存在负外边距，且浮动元素与正常流元素重叠

　　【1】行内框与一个浮动元素重叠时，其边框、背景和内容都在该浮动元素之上显示

　　【2】块框与一个浮动元素重叠时，其边框和背景在该浮动元素之下显示，而内容在浮动元素之上显示