前端基础知识——CSS-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44992607/article/details/128835419

这篇文章介绍了CSS的核心概念，包括选择器的用法，如ID、类选择器和伪类、伪元素。讨论了CSS的排版属性，以及@media规则在响应式设计中的应用。还提到了CSS3的新特性，如多列布局、弹性盒子模型和网格布局，以及如何创建动画和实现响应式设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS

CSS 基于 HTML 中的父子元素思想。
CSS 有很多类似 Word 的排版功能（颜色、字体、文字环绕等）的属性。

相关语法说明：

基本语法：

选择器
{
  属性:值;   /*声明*/
  属性:值;   /*声明*/
  属性:值;   /*声明*/
}

* 选择器：
所有元素
id 和 class 选择器：
#para1
.center、p.center
属性选择器（=、~=、|=、^=、$=、*=）：
[title~=runoob]
分组和嵌套选择器：
h1,h2,p
.marked p
组合选择符（后代选择器、子元素选择器、相邻兄弟选择器、普通兄弟选择器）：
div p、div>p、div+p、div~p
伪类：
```
选择器:伪类  { 声明; }
```
“选择器:伪类”的意义是：符合伪类条件的选择器
:first-child、:lang()

伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。
伪元素：
```
选择器:伪元素  { 声明; }
```
“选择器:伪元素”的意义是：选择器元素内部，符合伪元素条件的抽象元素
:first-line、:first-letter、:before、:after

与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。
@media 规则：
```
@media 媒体类型  { 声明; }
```
@media screen、@media print
!important 规则：
CSS 中的 !important 规则用于增加样式的权重。
!important 与优先级无关，但它与最终的结果直接相关，使用一个 !important 规则时，此声明将覆盖任何其他声明。

插入样式表的方法：
外部样式表、内部样式表、内联样式
优先级：内联样式 > id 选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器

CSS3

对于CSS3中的属性，不同的浏览器从特定版本开始支持。
有些属性会带有 -webkit-、-ms- 、 -moz- 前缀。

不同模块的属性：

多列
column-count、column-span、column-width
用户界面
 resize（允许用户调整大小） [ none | both | horizontal | vertical ]

box-sizing（定义如何计算一个元素的总宽度和总高度，是否包含内边距和边框） [ content-box | border-box ]

content-box 是默认的盒子模型，即 W3C 标准盒子模型，现如今所有主流浏览器都支持并使用该模型渲染布局，包括 IE。在这模型下，border与padding的设置会破坏元素的尺寸，导致最终展现出来的布局效果并不符合理想效果，而如果想要达到理想效果，又需要去计算宽高，非常麻烦。

而 border-box 则指 IE盒子模型，也称为“怪异盒子模型”。此模型下，边框和填充并不会影响元素的宽高，相当于是将元素的空间霸占成自己的空间，元素总体大小不变，内容空间变小，边框、填充则霸占着原本属于内容空间的地方。这在平时设计布局时，就非常的舒服，因为在指定元素尺寸并设置该属性值后，元素尺寸就不会因被破坏而又得重新计算了。

outline-offset（轮廓框架在 border 边缘外的偏移）
弹性盒子(Flex Box)
由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性盒模型用于在不同尺寸的显示界面上，浏览器根据相关属性的设置，自动调整弹性容器内部的弹性子元素的排列及显示。

弹性容器属性：
display: flex; 或 display: inline-flex;
flex-direction、justify-content、align-items、flex-wrap、align-content

弹性子元素属性：
order、margin、align-self、flex

多媒体查询

@media not|only mediatype and (expressions) {
    CSS代码
}

网格布局（grid）
由一个网格容器（grid-container）及一个或多个网格元素（grid-item）组成。
网格元素会根据设置，自动占据一个或多个网格单元，排列在网格容器内。
网格单元是网格容器的最小单位。
网格区域由一个或若干个网格单元组成。
网格线是列与列，行与行之间的交接处。

网格容器属性：
display: grid; 或 display: inline-grid;
grid-template-columns、grid-template-rows（一个 fr 单位代表网格容器中可用空间的一等份）
grid-column-gap、grid-row-gap、grid-gap
justify-content、align-content
grid-template-areas

网格元素属性：
grid-column、grid-column-start、grid-column-end
grid-row、grid-row-start、grid-row-end
grid-area（功能：grid-column 和 grid-row 的结合；命名网格元素）

以下实例 item1 命名为 “myArea”, 并跨越五列：
```
.item1 {
  grid-area: myArea;
}
.grid-container {
  grid-template-areas: 'myArea myArea myArea myArea myArea';
}
```

@keyframes 规则（创建动画）
定义动画规则：

@keyframes 动画规则名
{
    0%   {属性: 值;}  /* 或 from */
    25%  {属性: 值;}
    50%  {属性: 值;}
    100% {属性: 值;}  /* 或 to */
}

使用动画规则：

div
{
    animation: 动画规则名 持续时间 是否循环播放 ... ;
}

响应式布局：

viewport （用户网页的可视区域）

<meta name="viewport" content="width=device-width, initial-scale=1.0">

响应式网格视图（12 列，在浏览器窗口大小调整时会自动伸缩）：
class=“col-” 用于定义每列有几个 span：
```
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
...
.col-12 {width: 100%;}
```
每一行使用 <div> 包裹。所有列数加起来应为 12：
```
<div class="row">
  <div class="col-3">...</div>
  <div class="col-9">...</div>
</div>
```

断点（在不同大小的显示界面，借助断点来设置元素排列方式和尺寸）
下例中，768px 即为一个断点：

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}

@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    ...
    .col-12 {width: 100%;}
}