前端CSS

最新推荐文章于 2025-12-04 17:59:42 发布

原创最新推荐文章于 2025-12-04 17:59:42 发布 · 246 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #javascript

CSS

Cascading Style Sheets 层叠样式表

用于控制HTML中标签样式的语言。可以精确到像素，美化修饰HTML标签。

CSS语法

样式名：样式值；

color:red;

font-size:20px;

选择器

用于选择页面中元素(标签)的工具。

id选择器

1.给标签添加id属性，对其命名

2.在style标签中通过#id名获取

通常用于选择某一个元素

<html>
<head>
<style>
#test{
}
</style>
</head>
<body>
<div id="test">
</div>
</body>
</html>

class选择器

1.给标签添加class属性，对其命名

2.在style标签中通过.class名获取

通常用于选择一组元素

<html>
<head>

<style>
.test{
}
</style>
</head>
<body>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</body>
</html>

元素/html/标签选择器

直接通过标签名获取。

通常用于选择一组元素。

<html>
<head>
<style>
div{
}
</style>
</head>
<body>
<div ></div>

</body>
</html>

层次选择器

通过空格或>获取某个元素的子元素。

"元素A 元素B" 表示获取元素A下的所有元素B

""元素A > 元素B" 表示获取元素A下的第一层元素B

<html>
  <head>
    <style>
      #father div{
       //获取其中的所有子元素
     }
      #father > div{
       //获取其中的第一层子元素
     }
    </style>
  </head>
  <body>
    <div id="father">
      <div>
        <div>使用>无法获取该div</div>
      </div>
      <div></div>
    </div>
  </body>
</html>

群组选择器

通过，同时选择多个元素

创建一个独立的.css文件，通过link标签引入

1.创建一个.css文件，将原本写在style标签中的内容保存在该文件中

2.在页面的head标签中，使用以下代码引入

CSS优先级

style属性==>style标签==>引入css文件。

如果某个元素同时拥有id、class以及style属性时。

优先级从高到低

style属性==>id选择器==>类选择器==>元素选择器

常用样式

尺寸

只能对块级元素设置尺寸。

如果要对行内元素设置尺寸，需要先将其改为块级元素。

设置为像素时，元素不会根据浏览器的窗口大小变化而变化，是固定值。

设置为百分比或vh/vw时，元素会根据浏览器的窗口大小变化二变化，都是百分比。

如果元素需要根据实际窗口变化，宽度建议使用百分比，高度建议使用vh。

背景background

边框border

边框会"套"在元素外层，元素原本大小不变，但所占区域会变为原本大小+边框宽度

字体font

文本text

列表list

伪类

表示某个元素的某种状态。

用于对某些元素在不同的情况下呈现不同的效果。

如a标签在访问前、悬停时、访问时、访问后的四个状态对应四个伪类

以上的:hover可以适用于很多标签，如div:hover。

但其余伪类只适用于a标签。

鼠标样式cursor

显示方式display

浮动float

让某个元素脱离原本的位置，朝某个方向对齐。

float:left和display:inline-block的区别

相同点：都能让多个独占一行的块级元素位于同一行

display:inline-block

多个元素最终会位于同一行内，保留该行位置，元素以下线对齐，保留元素间的缝隙，后续元素是新的

一行。

float:left

多个元素脱离自身的位置向指定方向贴合，不保留该行位置，元素向上线对齐，不保留元素间的缝隙，

后续元素会顶替之前元素的位置

盒子模型

页面中的所有块级元素，都是一个“盒子”，每个“盒子”由元素自身、内边距padding、边框border、外边距margin组成

内边距padding：边框与元素自身之间的距离
外边距margin：元素A的边框与元素B的边框之间的距离

一个元素的所占位置是外边距+边框+内边距+元素自身的大小。

溢出overflow

当子元素超出父元素的范围时，称为溢出。通过overflow控制溢出部分的表现。

默认显示溢出部分，溢出部分不会影响后续元素。

盒子模型阴影box-shadow

类似于text-shadow，通常设置4个值颜色左右位置上下位置模糊程度

box-shadow:gray 4px 5px 6px 灰色阴影向右4px 向下5px 模糊6px

定位position

将元素以像素为单位调整位置

配合定位使用样式

文档流

页面中每个元素默认都有自己的位置，这个位置称为文档流。

如果某个元素脱离文档流，就会失去原本所占位置，让后续元素顶替其位置。

可以通过浮动float、固定定位fixed和绝对定位absolute让元素脱离文档流。

脱离文档流后，通过改变元素的left、top、bottom、right移动其位置

相对定义relative

让某个元素，相对于原本的位置进行定位。定位原点为元素本身的位置。

元素不会脱离文档流(后续元素不会顶替其位置)。

固定定位fixed

让某个元素脱离文档流，默认根据页面的四个边界进行定位。

通常用于放置一些工具、广告、返回首页等。

绝对定位absolute

让某个元素脱离文档流，根据已定位的父元素进行定位。如果没有已定位的父元素，会根据页面定位。

层叠z-index

某个已定位的元素，可以通过z-index控制其层叠顺序。

z-index是一个数字，数字越大，距离视线越近。

不透明度

取值范围[0,1]，值越大，越不透明