掌握前端开发：CSS基础指南（二）

摘要

        在上一篇文章中，我们介绍了CSS的基本概念和使用方法。这篇文章我们将深入探讨CSS的几个核心概念：标签显示模式、背景样式和盒子模型等。掌握这些基础知识将帮助你更好地理解和使用CSS。

1.标签显示模式

        什么是标签的显示模式？

        标签以什么方式进行显示，比如div 自己占一行， 比如span 一行可以放很多个

• 作用： 我们网页的标签非常多，再不同地方会用到不同类型的标签，以便更好的完成我们的网页。
• 标签的类型(分类) HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。

1.1 块级元素(block-level)

        每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布 局和网页结构的搭建。

常见的块级元素有：<h1>~<h6>、<div>、<p>、<ul>、<ol>、<li>

        块级元素的特点：

        （1）总是从新行开始。

        （2）高度、宽度、行高、外边距以及内边距都可以控制。

        （3）宽度默认是容器的100%。

        （4）可以容纳内联元素和其他块元素。

1.2 行内元素(inline-level)

        行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以 设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。

常见的行内元素有：<a>、<strong>、<em>、<del>、<s>、<span>

        行内元素的特点：

        （1）和相邻行内元素在一行上。

        （2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。

        （3）默认宽度就是它本身内容的宽度。

        （4）行内元素只能容纳文本或则其他行内元素。（a特殊）

1.3 行内块元素（inline-block）

        行内块元素的特点：

        （1）默认宽度就是它本身内容的宽度。

        （2）宽度，高度，行高、外边距以及内边距都可以控制。

        总结

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%	容器级可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽 度高度	它本身内容的宽度	容纳文本或则其他行内元素
行内块元素	一行放多个行内块元素	可以设置宽度和高度	它本身内容的宽度

2.背景样式

2.1 背景颜色

属性名	background-color
属性值	合法的颜色的名，比如： red ；十六进制值，比如： #ff0000 ；RGB 值，比如： rgb(255,0,0)
默认值	transparent
描述	设置背景颜色

.box {
    /* 下面3种写法是等价的 */
    background-color: red;
    background-color: rgb(255, 0, 0);
    background-color: #ff0000;
}

2.2 背景图片

属性名	background-image
属性值	图片所在路径
默认值	none
描述	设置背景图片

.box {
    background-image: url("./cat.jpg");
}

2.3 图片重复方式

属性名	background-repeat
属性值	repeat | repeat-x | repeat-y | no-repeat
默认值	repeat
描述	设置背景图片

.box {
    /* repeat 默认值，默认情况下，在水平和垂直方向上都重复*/
    background-repeat: repeat;
    background-repeat: repeat-x;
    background-repeat: repeat-y;
    background-repeat: no-repeat;
}

2.4 图片位置

属性名	background-position
属性值	长度 | 百分比 | 表示方位的单词
默认值	0% 0%
描述	背景图片的位置

/*
   水平：left center right
   垂直：top center bottom
*/
.box {
    background-position: 40px 40px;（水平位置、垂直位置）
    background-position: 20% 20%;
    background-position: right bottom;
}

3. 盒子模型

3.1 盒子模型（Box Model）

        CSS盒子模型是理解和设计网页布局的基础。每个HTML元素都可以看作一个矩形盒子，盒模型包括：

• 内容区域 ：显示文本和图像。
• 内边距（padding）：内容区域与边框之间的空间。
• 边框（border）：围绕内容和内边距的边框。
• 外边距（margin）：元素与其他元素之间的空间。

div {
    width: 300px;
    padding: 20px;
    border: 5px solid black;
    margin: 10px;
}

        在上述示例中，'div' 元素的总宽度是：300px（内容宽度） + 40px（左右内边距） + 10px（左右边框） + 20px（左右外边距）= 370px。

3.2 盒子边框（border）

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式
border-color	边框颜色

边框属性—设置边框样式（border-style）

边框样式用于定义页面中边框的风格，常用属性值如下：

        none：没有边框即忽略所有边框的宽度（默认值）

        solid：边框为单实线(最为常用的)

        dashed：边框为虚线  

        dotted：边框为点线

        double：边框为双实线

总结

        通过学习和掌握这些CSS基础知识，你将能够更好地控制网页的样式和布局。在接下来的文章中，我们将深入探讨更多高级的CSS技术和实际应用。