10月15日本周知识回顾

秋风吹到梧桐树

已于 2023-10-16 11:40:35 修改

阅读量17

点赞数

文章标签： css css3 前端

于 2023-10-16 10:07:36 首次发布

本文链接：https://blog.csdn.net/2301_80137575/article/details/133851959

版权

1 伪类和伪元素

1.1 伪类

1.1.1 定义

伪类⽤于向某些选择器添加特殊的效果

1.1.2 超链接伪类

给a链接添加⼏种状态：

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

其他常⻅的伪类选择器 :focus :checked :first-child :last-child等

1.1.3 元素获取

伪元素不是真正的元素，不存在与⽂档之中，所以 js ⽆法对它进行操作。为什么叫他“元素”？因为我们可以对其进⾏跟元素⼏乎⽆差别的操作。

:first-child  /* 第一个子元素 */
:last-child  /* 最后一个子元素 */
:only-child /* 只有一个子元素 */
:root  /* 根标签 */
:nth-child(n)   /* 第几个子元素 */
ul li:nth-child(1){color:#f00;}   /* 第一个子元素 - 从1开始 */ 
ul li:nth-child(2n){color:#f00;} /* 偶数行的子元素 - 2的倍数的所有元素 */ 
:nth-child(odd)  /* 奇数元素 */
:nth-child(even)  /* 偶数元素 */
:nth-last-child(-n+4) /* 后4个元素 */

注：nth-child( ) IE8 及更早的版本不支持

1.2 伪类

1.2.1 定义

CSS伪元素是⽤来添加⼀些选择器的特殊效果。最好使⽤双冒号，防⽌与伪类混淆

1.2.2 first-letter首字母

first-letter 伪元素⽤于向⽂本的⾸字⺟设置特殊样式：

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

其他常⻅的伪元素选择器

::first-line 首行
::first-letter 首字母
::before 元素前插入
::after 元素后插入

1.2.3 before与after的⽤法总结

before定位的基准是其主元素的右上⻆，after定位的基准是主元素的结尾处。当主元素没有内容时before与after仍会正常⼯作，属性为行内元素，若需要设置⾼宽度等属性需要首先设置为块元素。 content是伪元素必需的属性。若伪元素没有内容，需赋值为空格：content:' '; before与after的主要⽤途是对元素默认样式的的美化：美化时需要结合定位于内容。⼀般讲主元素设置为position：relative，伪元素设置为position：absolute，以⽅便对伪元素定位。

a:hover::before,
a:hover::after {
    position: absolute;
}

a:hover::before {
    content: "我是前"; left: -20px;
}

a:hover::after {
    content: "我是后"; right: -20px;
}

1.3 伪类与伪元素区别

<style>
    li.first-item {
        color: orange
    }
</style>
<ul>
    <li class="first-item">我是第一个</li>
    <li>我是第二个</li>
</ul>

如果想要给第一项添加样式，可以在为第一个

添加一个类，并在该类中定义对应样式

如果不用添加类的方法，我们可以通过给设置第一个

的:first-child伪类来为其添加样式。这个时候，被修饰的
元素依然处于文档树中。

<style>
    .first{
        font-size:18px;
    }
    p::first-letter {
        font-size:18px;
    }
</style>
<p><span class="first">我</span>是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落</p>

如果想要给该段落的第一个字添加样式，可以在第一个字中包裹一个元素，并设置该span元素的样式如果不创建一个元素，我们可以通过设置的::first-letter伪元素来为其添加样式。这个时候，看起来好像是创建了一个虚拟的元素并添加了样式，但实际上文档树中并不存在这个元素。

伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档数外的元素。因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。

CSS3规范中的要求使用双冒号(::)表示伪元素，以此来区分伪元素和伪类，比如::before和::after等伪元素使用双冒号(::)，:hover和:active等伪类使用单冒号(:)。除了一些低于IE8版本的浏览器外，大部分浏览器都支持伪元素的双冒号(::)表示方法。除了少部分伪元素，如::backdrop必须使用双冒号，大部分伪元素都支持单冒号和双冒号的写法，比如::after，写成:after也可以正确运行。建议使用双冒号的写法，更容易识别出是伪类还是伪元素。

2 定位属性（position）

2.1 定义

position 属性指定了元素的定位类型。取值：

static 静态定位【默认值】
relative 相对定位
absolute 绝对定位
fixed 固定定位
sticky 粘性定位

2.1.1 static 定位

HTML 元素的默认值，即没有定位，遵循正常的⽂档流对象。静态定位的元素不会受到 top, bottom, left, right影响。

.static {
    position:static;
    background-color:red;
}

2.1.2 relative 定位

相对定位元素的定位是相对自身的正常位置。移动相对定位元素，但它原本所占的空间不会改变。相对定位元素经常被⽤来作为绝对定位元素的容器块。

.relative {
    position:relative;
}

2.1.3 absolute 定位

绝对定位的元素的位置相对于最近的已定位⽗元素，如果元素没有已定位的⽗元素，那么它的位置相对于文档定位。 absolute 定位使元素的位置与⽂档流⽆关，因此不占据空间。 absolute 定位的元素和其他元素重叠。

.absolute {
    position:absolute;
    left:20px;
    top:20px;
}

1.1.4 fixed 定位

元素的位置相对于浏览器窗⼝是固定位置。即使窗⼝是滚动的它也不会移动。

.fixed {
    position:fixed;
    left:20px;
    top:20px;
}

2.1.5 sticky 定位

基于⽤户的滚动位置来定位
在未滚动出目标区域时，类似 position:relative;
当⻚⾯滚动超出⽬标区域时，类似 position:fixed;，它会固定在⽬标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位

这个特定阈值指的是 top, right, bottom 或 left 之⼀，换⾔之，指定 top, right, bottom 或 left 四个阈值其中之⼀，才可使粘性定位⽣效。否则其⾏为与相对定位相同。注意: Internet Explorer, Edge 15 及更早 IE 版本不⽀持 sticky 定位。 Safari 需要使⽤ -webkit- prefix。

.sticky{
    position:-webkit-sticky;
    position:sticky;
    top:0;
    background-color:red;
    border:2px solid orange;
}

2.2 堆叠的元素

元素的定位与⽂档流⽆关，所以它们可以覆盖⻚⾯上的其它元素
z-index属性指定了⼀个元素的堆叠顺序（哪个元素应该放在前⾯，或后⾯）
⼀个元素可以有正数或负数的堆叠顺序

具有更⾼堆叠顺序的元素总是在较低的堆叠顺序元素的前⾯。注意：如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前⾯。

.zindex {
    position:absolute;
    left:0;
    top:0;
    z-index:-1;
}

2.3 position 难点分析

2.3.1 绝对定位vs相对定位

绝对定位就像把不同元素安排到了⼀栋楼的不同楼层，文本流在首层，互不影响
相对定位在首层，与文本流在同一层，互相影响
绝对定位元素不占据空间，设置绝对定位后，元素浮起来，在文档流中位置被删除，可以被其他元素占据
相对定位也让元素浮起来，但是它本身位置不会被删除，也不会被占据
通过z-index来设置堆叠的顺序

2.3.2 层级问题

总结：标准流盒子，低于浮动的盒子，浮动的盒子又低于定位的盒子。定位高于浮动，浮动高于标准流。（高低和占不占位置无关）给定 z-index 的值为层级的值。（不给默认为0）

层级为 0 的盒子，也比标准流和浮动高
层级为负数的盒子，比标准流和浮动低
层级不取小数
层级一样，后面的盒子比前面的层级高
浮动或者标准流的盒子，后面的盒子比前面的层级高
abselute是不占位置的，relative是站位的。而层级的高低，是和占不占位置没有关系的。

3 浮动（float）

3.1 定义

float 属性定义元素向哪个⽅向浮动。之前这个属性应⽤于图像，使⽂本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会⽣成⼀个块级框，⽽不论它本身是何种元素。取值：

none 默认值，不浮动
left 左浮动
right 右浮动

3.2 用法

li {
    float:left;
}

横向排列布局

<style>
  div{
    width: 100px;
    height: 100px;
    float: left;
  }
  .one{
    background-color: red;
  }
  .two{
    background-color: green;
  }
  .thr{
    background-color: blue;
  }
</style>
<div class="one"></div>
<div class="two"></div>
<div class="thr"></div>

左右排列布局

<style> 
  div{
    width: 100px;
    height: 100px;
  }
  .one{
    background-color: red;
    float: left;
  }
  .two{
    background-color: green;
    float: right;
  }
  .thr{
    background-color: blue;
    float: left;
  }
</style>
</head>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="thr">three</div>
</body>

3.3 特性

浮动元素会去找离它最近的有浮动的元素进⾏贴边
假如在⼀⾏之上只有极少的空间可供浮动元素，那么这个元素会跳⾄下⼀⾏
右浮动会颠倒盒⼦顺序
⾏内元素设置了浮动后，默认已转为块级元素，可以直接设置宽⾼，⽆需转换
块级元素，如果没有设置宽⾼，浮动后，会收缩到内容的⼤⼩
浮动元素会脱离⽂档流，会压住下⼀个块元素，但不会压住其内容

<style>
    /* 特性1 特性2 */
    .box{
        width:500px;
    }
    .box-item{
        float:left;
        width:200px;
        height:200px;
        border:2px solid red;
    }
    /* 特性3 */
    .box-item{
        float:right;
        width:200px;
        height:200px;
        border:2px solid red;
    }
    /* 特性4 */
    .box-span{
        float:right;
        width:200px;
        height:200px;
        border:2px solid red;
    }
    /* 特性5 */
    .box-div{
        float:left;
    }
</style>
<div class="box">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
    <span class="box-span">5</div>
    <div class="box-div">6</div>
</div>

3.4 清除浮动

3.4.1 父元素高度塌陷

⼦元素浮动，⽗元素没有设置⾼度，会出现⾼度撑不开的现象，称之为⽗元素⾼度塌陷

<style>
    .box {
        width:500px;
        border:2px solid black;
    }
    .box-item {
        float:left;
        width:200px;
        height:200px;
        border:2px solid red;
    }
</style>
<div class="box">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
</div>

3.4.2 清浮动本质

元素浮动后会出现相对应的⻚⾯布局问题，清除浮动的本质是解决元素浮动后造成的⻚⾯布局的问题

3.4.3 常见的清除浮动方式

加额外标签浮动元素后⾯加⼀个空标签，设置样式 clear:both;，左右两侧均不允许浮动元素
定⾼法给浮动元素的⽗元素设置⾼度⼤于或等于最⾼的浮动元素的⾼度，⽤于⼩板块，⾼度可以写死的部分
⽗元素添加 overflow:hidden 属性利⽤ overflow:hidden 清除浮动时，⽗元素⾥⾯不能有定位超出的元素，如果有，超出的部分会被隐藏
利⽤after伪元素清除浮动

注意：项目中我们常⽤after伪元素清除浮动，因为它不会额外增加标签，⽽且不会出现因为⽤overflow:hidden超出的部分会被隐藏，⽗元素⾼度也不⽤写死，我们只要在⻚⾯写⼀次清浮动的代码，在需要清浮动的位置加上 clearfix 类名就可以了

<style>
    /* 方法一： 浮动元素后⾯加⼀个空标签，设置样式 clear:both; */ 
    .box {
        width:500px;
        border:2px solid black;
    }
    .box-item {
        float:left;
        width:200px;
        height:200px;
        border:2px solid red;
    }
    .clear{
        clear:both;
    }
</style>
<div class="box">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
    <div class="clear"></div>
</div>

<style>
    /* 方法二：定⾼法 给浮动元素的⽗元素设置⾼度⼤于或等于最⾼的浮动元素的⾼度 */
    .box {
        width:500px;
        height:500px;
        border:2px solid black;
    }
    .box-item {
        float:left;
        width:200px;
        height:200px;
        border:2px solid red;
    }
</style>
<div class="box">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
</div>

<style>
    /* 方法三： 给父级元素添加 overflow: hidden; */
    .box {
        width:500px;
        border:2px solid black;
        overflow:hidden;
    }
    .box-item {
        float:left;
        width:200px;
        height:200px;
        border:2px solid red;
    }
</style>
<div class="box">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
</div>

<style>    
  .box {        
    width:500px;        
    border:2px solid black;    
  }    
  .box-item {        
    float:left;        
    width:200px;        
    height:200px;        
    border:2px solid red;    
  }    
  .clearfix::after {        
    content: "";
    clear: both;
    display: block;
  }
</style>
<div class="box clearfix">    
  <div class="box-item">1</div>    
  <div class="box-item">2</div>    
  <div class="box-item">3</div>    
  <div class="box-item">4</div>
</div>

3.4.4 清除浮动注意事项

同级的元素，要么全部浮动，要么全部不浮动
⼦元素浮动，⽗元素去清除浮动，如果⽗元素也浮动，寻找距离最近的没有浮动的祖先元素去做清除浮动的操作
⽗元素有绝对定位的不需要清除浮动

4 背景属性（background）

4.1 定义

background 设置背景的显示方式，是一个间歇属性

设置顺序为：background-color background-image background-repeat background-attachment background-position

可以设置如下属性：

background-color 背景颜色
background-image 背景图片
background-repeat 背景平铺方式
background-attachment 背景图片固定方式
background-position 背景图片位置
background-size 背景图片尺寸
background-origin 背景图片显示区域
background-clip 背景显示区域
inherit 继承父元素的背景属性样式

p {
    background: #ff0000 url() no-repeat fixed center;
}

4.2 背景颜色（background-color）

background-color 属性设置元素的背景颜⾊

元素背景范围 background-color 属性为元素设置⼀种纯⾊。这种颜⾊会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景⾊。

取值：

transparent 默认，透明背景
color_name 颜色名称，比如red
hex_number 十六进制颜色，比如#ff000
rgb_number rgb色值，比如rgb(255,0,0)或者rgba(255,0,0,.2)
inherit 继承父元素背景色

div {
    background-color: red;
}
h1 {
    background-color: #ff0000;
}
p { 
    background-color: rgb(255, 0, 0);
}

4.3 背景图片（background-image）

background-image 属性设置元素的背景图⽚，元素的背景占据了元素的全部尺⼨，包括内边距和边框，但不包括外边距。默认，背景图像位于元素的左上⻆，并在⽔平和垂直⽅向上重复。

p {
    background-image:url("./img.jpg")
}

4.4 背景平铺（background-repeat）

background-repeat 属性设置是否重复背景图像。取值：

repeat 默认值，⽔平垂直⽅向上平铺
no-repeat 不平铺
repeat-x ⽔平⽅向平铺
repeat-y 垂直⽅向平铺

div {
    background-repeat:no-repeat; // 不平铺
}
div {
    background-repeat:repeat; // 默认值，⽔平垂直⽅向上平铺
}
div {
    background-repeat:repeat-x; // ⽔平⽅向平铺
}
div {
    background-repeat:repeat-y; // 垂直⽅向平铺
}

4.5 背景图片固定（background-attachment）

background-attachment 属性设置背景图像是否固定或者随着⻚⾯的其余部分滚动。取值：

scroll 默认值。背景图像会随着⻚⾯其余部分的滚动⽽移动
fixed 当页面的其余部分滚动时，背景图像不会滚动

div {
    background-image:url("");
    background-repeat:no-repeat;
    background-attachment:fixed;
}
div {
    background-image:url("");
    background-repeat:no-repeat;
    background-attachment:scroll;
}

4.6 背景定位（background-position）

background-position 属性设置背景图像的起始位置。这个属性设置背景原图像的位置，背景图像如果要重复，将从这⼀点开始。取值：

上下左右第一个位置定义上下的位置（top/center/bottom），第二个定义左右位置(left/center/right)，如果仅定义一个值，第二个值为 center
x y 第一个值为水平位置，第二个为垂直位置，可以是百分比或者px，如果仅定义一个值，第二个值为50%

div {
    background-position: top left;
}
div {
    background-position: center;
}
div {
    background-position: 20% 60%;
}
div {
    background-position: 0 10px;
}
div {
    background-position: 50% 10px;
}

4.7 背景图片尺寸（background-size）【CSS3】

background-size 属性规定背景图像的尺寸。取值：

length 设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
percentage 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

div {
    background-size:80px 60px;
}
div {
    background-size:50% 50%;
}
div {
    background-size:cover;
}
div {
    background-size:contain;
}

4.8 背景图片显示区域（background-origin）【CSS3】

background-origin 属性规定 background-position 属性相对于什么位置来定位。注意：如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。取值：

padding-box 默认值，背景图像相对于内边距定位
border-box 背景图像相对于边框定位
content-box 背景图像相对于内容边框定位

div {
    background-origin:padding-box;
}
div {
    background-origin:border-box;
}
div {
    background-origin:content-box;
}

4.9 背景显示区域（background-clip）【CSS3】

background-clip 属性规定背景的绘制区域。取值：

border-box 默认值，背景填充全部
padding-box 背景填充不包括边框
content-box 背景只填充内容部分

div {
    backgorund-color:red;
    background-origin:border-box;
}
div {
    backgorund-color:red;
    background-origin:padding-box;
}
div {
    backgorund-color:red;
    background-origin:content-box;
}

4.10 雪碧图 /精灵图（CSS Sprites）

碧图就是将很多很多的小图标放在一张图片上,就称之为雪碧图使用雪碧图的优势：

将多张图片合并到一张图片中，可以减小图片的总大小。
将多张图片合并成一张图片后，下载全部所需的资源，只需一次请求。可以减小建立连接的消耗。

Sprite Cow - Generate CSS for sprite sheets

<style>
  div{
    width: 30px;
    height: 30px;
    border: 1px solid #f00;
    background: url('./淘宝雪碧图.png') no-repeat;
  }
  .box1{
    background-position: 3px 3px;
  }
  .box2{
    /* 通过背景图片定位，调整图片的位置 */
    background-position: 3px -40px;
  }
</style>
</head>
<body>
<div class='box1'></div>
<div class='box2'></div>

4.10.1 为什么使用雪碧图

网站开发90%会用到小图标，多小图标调用显示是前端开发常见的问题，如果每个小图标都单独调用一张图片，即意味着每个小图标的显示都产生一个HTTP请求；每个请求都需要一定的性能开销，主要在请求、以及响应阶段。为了减少http请求数量，加速网页内容显示，很多网站的导航栏图标、登录框图片等，使用的并不是标签，而是CSS Sprite雪碧图。

4.10.2 什么样的图片适合拼成雪碧图

静态图片，不随用户信息的变化而变化
小图片，图片容量比较小（一些大图不建议拼成雪碧图）
加载量比较大

4.10.3 iconfont阿里巴巴矢量图

除了iconfont阿里巴巴矢量图，还有其他的小图标Font Awesome 地址：iconfont-阿里巴巴矢量图标库注册微博，git或者淘宝账号登陆

1.搜索要下载的图标（如：小米购物车）

将当前图标加入购物车

2.点击购物车下载对应的图片或者代码

图片可以直接使用，但是咱们使用的是代码

3.下载好的目录

下载好的代码中有三种引入方式：class类，symbol引入，unicode引用方式

class类： a. 兼容性良好，支持ie8+，及所有现代浏览器。 b. 相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。 c. 因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。 d. 不过因为本质上还是使用的字体，所以多色图标还是不支持的。

symbol引入： a. 支持多色图标了，不再受单色限制。 b. 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。 c. 兼容性较差，支持 ie9+,及现代浏览器。 d. 浏览器渲染svg的性能一般，还不如png。

unicode引用： a. 兼容性最好，支持ie6+，及所有现代浏览器。 b. 支持按字体的方式去动态调整图标大小，颜色等等。 c. 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色

各有各的优势，咱们使用的是class类的引入方式 css引入

<link rel="stylesheet" href="./iconfont.css">

html引入

<span class="iconfont icon-xxx"></span>

秋风吹到梧桐树

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
10月15日本周知识回顾

伪类⽤于向某些选择器添加特殊的效果CSS伪元素是⽤来添加⼀些选择器的特殊效果。最好使⽤双冒号，防⽌与伪类混淆before定位的基准是其主元素的右上⻆，after定位的基准是主元素的结尾处。当主元素没有内容时before与after仍会正常⼯作，属性为行内元素，若需要设置⾼宽度等属性需要首先设置为块元素。content是伪元素必需的属性。before与after的主要⽤途是对元素默认样式的的美化：美化时需要结合定位于内容。
复制链接

扫一扫