作业 1 - CSS

简介

CSS（Cascading Style Sheets）是用于描述网页中元素样式的语言。它可以控制元素的颜色、大小、位置、布局等方面，让页面看起来更加美观和整洁。CSS和HTML、JavaScript是web前端开发三大基石之一。

基本语法

CSS的基本语法由选择器、属性和属性值组成，如下所示：

/* 选择器 */ 
p {
    /* 属性 */ 
    color: red;
    /* 属性值 */ 
    font-size: 16px;
}

/* 多个属性 */
h1 {
    color: blue;
    font-size: 24px;
    text-align: center;
}

/* 多个选择器 */
h1, h2, h3 {
    color: #333;
}

/* 类选择器 */
.title {
    font-weight: bold;
}

/* ID选择器 */
#intro {
    font-style: italic;
}

/* 继承 */
.container {
    font-size: 18px;
    color: #999;
}
.container p {
    color: #333;
}

CSS优先级

其中，选择器的优先级是CSS样式生效的重要因素。CSS选择器的优先级表现为一个四元组，分类如下：

1. !important声明的样式
2. ID选择器的样式
3. 类选择器样式、属性选择器样式、伪类样式
4. 标签选择器的样式、伪元素样式

在同级别的情况下，后面的样式会覆盖前面的样式。在不同级别的情况下，优先级高的样式会覆盖优先级低的样式。

CSS盒子模型

CSS盒子模型将网页中所有元素看做一个个矩形的盒子，包括元素的内容、内边距、边框和外边距。这些盒子按照提供的位置信息排列，形成网页布局。

.box {
    width: 400px; /* 内容区宽度 */
    height: 200px; /* 内容区高度 */
    padding: 20px; /* 内边距 */
    border: 1px solid #ccc; /* 边框 */
    margin: 10px; /* 外边距 */
}

CSS布局方式

CSS可以将网页分成多个区域进行布局，这些布局方式一般由CSS盒子模型和CSS盒子模型的属性组成。例如：

块布局

块布局是一种基于垂直方向的布局方式，它会让元素逐个排列，每个元素独占一行。块布局通过设置元素的display属性为block来实现。

/* 块布局 */
div {
    display: block;
    margin: 10px;
    padding: 20px;
    border: 1px solid #ccc;
}

行内布局

行内布局是指元素在水平方向上依次排列，每个元素可以和其他元素在同一行上显示。行内布局通过设置元素的display属性为inline来实现。行内元素不支持宽度和高度，但可以使用padding和margin属性。

/* 行内布局 */
span {
    display: inline;
    margin: 10px;
    padding: 20px;
    border: 1px solid #ccc;
}

浮动布局

浮动布局是指元素在水平方向上排列，可以让元素“浮”在其他元素上方。这种布局方式广泛应用于网页的多列布局中。浮动布局通过设置元素的float属性来实现。

/* 浮动布局(左浮动) */
.left {
    float: left;
    width: 200px;
    height: 100px;
    margin: 10px;
    padding: 20px;
    border: 1px solid #ccc;
}

/* 浮动布局(右浮动) */
.right {
    float: right;
    width: 200px;
    height: 100px;
    margin: 10px;
    padding: 20px;
    border: 1px solid #ccc;
}

弹性布局

弹性布局是CSS3新增的一种布局方式，主要用于适应不同尺寸屏幕的响应式设计。它通过设置容器display属性为flex，同时设置一些弹性属性（如flex-direction、flex-wrap、justify-content、align-items等）来操纵内部元素的排列方式。

/* 弹性布局 */
.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.item {
    background-color: #ccc;
    color: #fff;
    padding: 10px;
    margin: 10px;
}

总结

本篇介绍了CSS的基本语法、优先级、盒子模型和常用布局方式。当然，CSS的应用还不仅限于此，还有各种有趣的特性和技巧等待着你去探索。