CSS的基础知识讲解-Toy模板网

这篇具有很好参考价值的文章主要介绍了CSS的基础知识讲解。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一.什么是CSS

CSS的基础知识讲解

一般来说我们CSS就是我们对浏览器的第二个操作,就是给网页穿衣服.让网页变得更好看.
CSS的基础知识讲解

二. 选择器

在CSS中，选择器用于选择HTML文档中的元素，从而将样式应用于这些元素。选择器通常基于元素的标签名、类名、ID、属性值或父子关系等特征来进行匹配。

2.1 标签选择器

标签选择器：选择某个 HTML 标签，并将样式应用于所有这样的元素。例如，以下代码将应用于文档中的所有段落元素：

p {
  color: red;
}

2.2 类名选择器

类选择器：选择具有指定类的元素，并将样式应用于这些元素。例如，以下代码将应用于所有具有 “highlight” 类的元素：

.highlight {
  background-color: yellow;
}

2.3 ID选择器

ID 选择器：选择具有指定 ID 的元素，并将样式应用于该元素。例如，以下代码将应用于具有 “header” ID 的元素

#header {
  font-size: 24px;
}

2.4 属性选择器

属性选择器：选择具有指定属性的元素，并将样式应用于这些元素。例如，以下代码将应用于具有 “target” 属性的所有链接元素：

a[target="_blank"] {
  color: blue;
}

2.5 子选择器

子选择器：选择作为某个元素子元素的元素，并将样式应用于这些元素。例如，以下代码将应用于所有作为 div 元素子元素的 p 元素：

div > p {
  font-weight: bold;
}

2.6 后代选择器

后代选择器：选择某个元素的后代元素，并将样式应用于这些元素。例如，以下代码将应用于所有作为 div 元素后代的 p 元素：

div p {
  color: blue;
}

2.7 伪类选择器

伪类选择器：选择某个元素的特定状态，并将样式应用于该状态的元素。例如，以下代码将应用于所有被鼠标悬停的链接元素：

a:hover {
  color: red;
}

综合示例

<div id="container">
  <h1 class="title">Welcome to my website</h1>
  <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

css选择器示例

/* 选择所有元素，并设置默认字体大小和颜色 */
* {
  font-size: 16px;
  color: #333;
}

/* 选择 ID 为 container 的元素，并设置背景颜色和内边距 */
#container {
  background-color: #f5f5f5;
  padding: 20px;
}

/* 选择类名为 title 的 h1 元素，并设置字体加粗和颜色 */
.title {
  font-weight: bold;
  color: navy;
}

/* 选择类名为 description 的 p 元素，并设置字体样式 */
.description {
  font-style: italic;
}

/* 选择 ul 元素中的所有 li 元素，并设置列表样式和间距 */
ul li {
  list-style: none;
  margin-bottom: 10px;
}

/* 选择 ul 元素中的所有 a 元素并设置文本装饰和颜色 */
ul a {
  text-decoration: none;
  color: #008080;
}

/* 选择 ul 元素中的第一个 li 元素之后的所有 li 元素，并设置颜色 */
ul li + li {
  color: #999;
}

/* 选择鼠标悬停在 a 元素上的状态，并设置背景颜色 */
a:hover {
  background-color: #eee;
}

三.盒子模型

3.1 什么是盒子模型

先来看一段文字:
盒子模型是 CSS 中用于布局和渲染 HTML 元素的基本概念。
CSS的基础知识讲解

3.2 盒子的组成部分

内容区域（content）、内边距（padding）、边框（border）和外边距（margin）

边框

基础属性
粗细: border-width
样式: border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框
颜色: border-color

<!DOCTYPE html>
<html>
<head>
<style> 
.box {
  width: 200px; /* 盒子宽度 */
  height: 100px; /* 盒子高度 */

  border-left: 1px solid black; /* 边框 */
  border-right: 1px dashed red;
  border-top: 1px dotted blue;
  border-bottom: 1px  pink;


}
</style>
</head>
<body>
    <div class="box">
        <p>Hello, world!</p>
      </div>


</body>
</html>

边框效果:

CSS的基础知识讲解

内边距

基础写法
默认内容是顶着边框来放置的. 用 padding 来控制这个距离
可以给四个方向都加上边距

padding-top
padding-bottom
padding-left
padding-right

<!DOCTYPE html>
<html>
<head>
<style> 
.box {
  width: 200px; /* 盒子宽度 */
  height: 100px; /* 盒子高度 */
  padding: 20px; /* 内边距 */
  border: 1px solid black; /* 边框 */
  margin: 10px; /* 外边距 */
}
</style>
</head>
<body>
    <div class="box">
        <p>Hello, world!</p>
      </div>


</body>
</html>

没设内边距之前
CSS的基础知识讲解
设置了内边距之后

此时可以看到带有了一个绿色的内边距.
复合写法

padding: 5px; 表示四个方向都是 5px
padding: 5px 10px; 表示上下内边距 5px, 左右内边距为 10px
padding: 5px 10px 20px; 表示上边距 5px, 左右内边距为 10px, 下内边距为 20px
padding: 5px 10px 20px 30px; 表示 上5px, 右10px, 下20px, 左30px (顺时针)

外边距

控制盒子和盒子之间的距离.
属性:
可以给四个方向都加上边距
margin-top
margin-bottom
margin-left
margin-right

在这里插入代码片

设置外边距之前:
CSS的基础知识讲解

设置之后
CSS的基础知识讲解
复合写法
规则同 padding

margin: 10px; // 四个方向都设置
margin: 10px 20px; // 上下为 10, 左右 20
margin: 10px 20px 30px; // 上 10, 左右 20, 下 30
margin: 10px 20px 30px 40px; // 上 10, 右 20, 下 30, 左 40

四.弹性盒子布局

4.1 什么是块级元素和行内元素

块级元素（Block-level element）通常被用来构建页面的结构，它们会在页面上创建一个矩形的块，独占一行或多行空间。块级元素可以包含其他块级元素和行内元素，可以设置宽度、高度、内外边距、背景色、边框等样式属性。常见的块级元素包括 <div>、<h1>、<p>、<ul>、<li> 等。

行内元素（Inline element）通常被用来构建文本内容和内联元素，它们不会在页面上创建一个矩形的块，而是在行内显示，并且只占据必要的宽度。行内元素不能设置宽度、高度、内外边距（上下无效）、背景色、边框等属性。常见的行内元素包括、、<em>、<strong>、<img> 等。

在 HTML 中，元素的类型决定了它们的默认行为和样式。但是，可以通过 CSS 来改变元素的默认样式，并将行内元素转换为块级元素，或者将块级元素转换为行内元素。这些 CSS 属性包括 display、width、height、margin、padding 等。

块级元素

特点
独占一行
高度, 宽度, 内外边距, 行高都可以控制.
宽度默认是父级元素宽度的 100% (和父元素一样宽)
是一个容器(盒子), 里面可以放行内和块级元素.

具体实例

<!DOCTYPE html>
<html>
<head>
<style> 
.demo1 .parent {
    width: 500px;
    height: 500px;
    background-color: green;
 }
    .demo1 .child {
     /* 不写 width, 默认和父元素一样宽 */
    /* 不写 height, 默认为 0 (看不到了) */
    height: 200px;
    background-color: red;
    }

</style>
</head>
<body>
 
    <div class="demo1">
        <div class="parent">
            <div class="child">
               child1
            </div>
            <div class="child">
               child2
            </div>
        </div>
    </div>

</body>
</html>

CSS的基础知识讲解

行内元素

不独占一行, 一行可以显示多个
设置高度, 宽度, 行高无效
左右外边距有效(上下无效). 内边距有效.
默认宽度就是本身的内容
行内元素只能容纳文本和其他行内元素, 不能放块级元素

具体实例

<!DOCTYPE html>
<html>
<head>
<style> 

.demo2 span {
 width: 200px;
 height: 200px;
 background-color: red;
}


</style>
</head>
<body>
 
    <div class="demo2">
           <span>child1</span>
           <span>child2</span>
           <span>child3</span>
    </div>

</body>
</html>

CSS的基础知识讲解

行内元素和块级元素的区别

块级元素独占一行, 行内元素不独占一行
块级元素可以设置宽高, 行内元素不能设置宽高.
块级元素四个方向都能设置内外边距, 行内元素垂直方向不能设置.

改变显示模式

使用 display 属性可以修改元素的显示模式. 
可以把 div 等变成行内元素, 也可以把 a , span 等变成块级元素. 
display: block 改成块级元素 [常用]
display: inline 改成行内元素 [很少用]
display: inline-block 改成行内块元素

4.2 flex布局初步概念

Flex 是 CSS3 中的一个布局模型，它提供了一种更加灵活的方式来布局和排列元素。使用 Flex 布局，可以轻松地对页面中的元素进行对齐、分布和排序，而不需要使用复杂的 CSS 或 JavaScript。

Flex 布局的核心是一个容器和容器内的一个或多个项目。容器通过设置 display: flex; 或 display: inline-flex; 来启用 Flex 布局。容器内的项目可以通过设置 flex 属性来控制它们相对于容器的大小、位置和间距。Flex 布局还提供了许多其他属性来控制项目的排列方式、顺序、对齐方式等等。

下面来介绍flex常用基本属性

justify-content

定义
设置水平元素的子元素排列方式.
属性
CSS的基础知识讲解
具体实例

使用flex前
CSS的基础知识讲解

<!DOCTYPE html>
<html>
<head>
<style> 

div {
        width: 100%;
        height: 150px;
        background-color: red;
        display: flex; 
}
div span {
        width: 100px;
        height: 100px;
        background-color: green;}

</style>
</head>
<body>
 
    <div>
           <span>1</span>
           <span>2</span>
           <span>3</span>
           <span>4</span>
           <span>5</span>
       </div>

</body>
</html>

使用之后flex,可以明显看出行内元素变得可以修改大小了:
CSS的基础知识讲解

设置 justify-content: flex-end之后:此时元素都排列到右侧了.
CSS的基础知识讲解

设置 jutify-content: center之后 , 此时元素居中排列 CSS的基础知识讲解

设置 justify-content: space-around之后,平分了剩余空间.
CSS的基础知识讲解
设置 justify-content: space-between之后,先两边元素贴近边缘, 再平分剩余空间.

align-items

设置垂直元素排列方式
在上面的代码中, 我们是让元素按照主轴的方向排列, 同理我们也可以指定元素按照侧轴方向排列.
具体属性
CSS的基础知识讲解

具体实例

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
         width: 500px;
         height: 500px;
         background-color: green;
         display: flex;
        /* justify-content: space-around; */
        }
        div span {
         width: 150px;
         background-color: red;
        }
        </style>
</head>
<body>
    <div>
       
        <span>1</span>
        <span>2</span>
        <span>3</span>
        </div>
       

</body>
</html>

未设置参数之前
CSS的基础知识讲解

设置 align-items: center之后
CSS的基础知识讲解

如果最后没理解,我们来个综合的例子

<!DOCTYPE html>
<html>
<head>
    <style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 300px;
  background-color: #f5f5f5;
}

.item {
  width: 200px;
  height: 50px;
  margin: 10px;
  background-color: #008080;
  color: #fff;
  text-align: center;
  line-height: 50px;
}
    </style>

</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
      </div>
       

</body>
</html>

好的，下面是一个具体的实际例子，演示如何使用 align-items 属性来控制 Flex 容器内项目的垂直对齐方式：

HTML 代码：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

CSS 代码：

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 300px;
  background-color: #f5f5f5;
}

.item {
  width: 200px;
  height: 50px;
  margin: 10px;
  background-color: #008080;
  color: #fff;
  text-align: center;
  line-height: 50px;
}

具体展示:
CSS的基础知识讲解

在这个示例中，我们创建了一个 Flex 容器，并使用 align-items 属性将项目居中对齐。容器的主轴方向为垂直方向，因为我们设置了 flex-direction: column;。容器的高度为 300 像素，背景色为浅灰色。每个项目使用固定的宽度和高度，并在项目之间留有一些间距。项目的背景色为深绿色，文本颜色为白色，水平和垂直居中显示。

通过使用 align-items: center; 属性，我们可以将所有项目在垂直方向上居中对齐，即使它们的高度不同也可以正确对齐。这个例子展示了 align-items 属性的实际用途，帮助我们更好地控制 Flex 容器内项目的对齐方式。文章来源地址https://www.toymoban.com/news/detail-449224.html

到了这里，关于CSS的基础知识讲解的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！