CSS简述（2）

css列表

在CSS中，列表（List）主要有两种类型：有序列表（Ordered List）和无序列表（Unordered List）。每种列表类型都可以通过CSS进行样式化

1. 无序列表（Unordered List）

无序列表使用 <ul> 标签定义，列表项使用 <li> 标签定义。默认情况下，无序列表的列表项前会有小圆点作为标记

CSS样式化：

ul {  list-style-type: square; /* 可以将标记更改为方块 */  padding: 0; /* 移除默认的填充 */  margin: 0; /* 移除默认的边距 */  
}  li {  margin-bottom: 10px; /* 添加列表项之间的垂直间距 */  
}

2. 有序列表（Ordered List）

有序列表使用 <ol> 标签定义，列表项使用 <li> 标签定义。默认情况下，有序列表的列表项前会有数字作为标记

ol {  list-style-type: upper-roman; /* 可以将标记更改为大写罗马数字 */  padding: 0; /* 移除默认的填充 */  margin: 0; /* 移除默认的边距 */  
}  li {  margin-bottom: 10px; /* 添加列表项之间的垂直间距 */  
}

其他CSS列表属性：

list-style-position: 控制列表项标记的位置（inside 或 outside）。
list-style-image: 使用图像作为列表项标记。

ul {  list-style-image: url('bullet.png'); /* 使用自定义图像作为标记 */  padding-left: 20px; /* 为图像标记添加一些左填充 */  
}

请注意，使用自定义图像作为列表项标记时，你可能需要调整列表的填充（padding）或边距（margin）以确保图像正确对齐

css伪类

CSS伪类专门用来表示标签的一种特殊的状态，当我们为处在这些特殊状态的标签设置样式时，就可以使用伪类

hover - 选择鼠标指针浮动在上面的元素

active - 选择被用户激活的元素（例如，被点击且尚未释放的按钮）

focus - 选择获得焦点的元素（例如，通过点击或键盘导航）

实例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">img{opacity: 0.555;/* 设置标签透明度 0完全透明 1完全不透明 */}a{color: black;text-decoration: none;}/* 当鼠标移动到时标签上时发生的改变 */a:hover{color: blue;font-weight: bold;}/* 鼠标点击标签时发生的改变 */a:active{color: royalblue;}p:hover{color: red;}/* 向拥有鼠标焦点的标签（输入框）添加样式 */.txt:focus{font-weight: bold;color: darkblue;background-color: bisque;}</style></head><body><img src="../img/pear.jpg"/><input class="txt"/><input class="txt" type="button" value="点我"/><p>我爱你</p><a href="">点击有惊喜！！！</a></body>
</html>

块级、行级、行级块标签

在HTML中，标签可以按照其显示特性被分为块级标签、行级标签和行级块标签。以下是关于这三种标签的详细解释：

块级标签

特点：

独占一行：每个块级标签都会在其前后各创建一个“换行符”，因此它们通常占据整行空间。
可以设置宽高：可以通过CSS来设置块级标签的宽度和高度。
宽度自适应：块级标签的宽度默认会随浏览器窗口的宽度自适应。
内部可嵌套：块级标签内部可以嵌套任何类型的标签，但需要注意某些特定标签的嵌套限制，如p标签内不能嵌套块级标签。

常见标签：

<div>
<p>
<h1>至<h6>
<ul>、<ol>、<li>
<blockquote>
<form>
<table>、<tr>、<tbody>等表格相关标签

行级标签

特点：

内容决定位置：行级标签所占的位置由其内容决定，不会在其前后创建“换行符”。
不可设置宽高：无法通过CSS直接设置行级标签的宽度和高度。
只能嵌套行级标签：行级标签内部只能嵌套其他行级标签，但同样存在特定限制，如a标签内不能嵌套a标签。

常见标签：

<span>
<a>
<img>（在某些上下文中作为行级标签）
<strong>、<b>
<em>、<i>
<s>、<u>等文本格式化标签

行级块标签

特点：

内容决定位置：与行级标签类似，行级块标签的位置由其内容决定。
可以设置宽高：与块级标签类似，可以通过CSS设置行级块标签的宽度和高度。

常见标签：

<img>（在某些上下文中作为行级块标签）
<input>
<textarea>
<select>
<label>

注意：任何标签在设置了position: absolute或float: left/right后，都会表现出行级块标签的特性。

综上所述，块级、行级和行级块标签在HTML中各自扮演不同的角色，为网页的布局和内容展示提供了灵活的选择

Display

Display在HTML和CSS中是一个非常重要的属性，它用于定义元素在页面上的显示方式。以下是关于Display属性的详细解释：

none：元素不显示，即隐藏元素。被隐藏的元素不占据页面空间，并且不会对页面布局产生影响。
block：元素以块级元素的方式显示。块级元素会独占一行，并且可以设置宽度、高度、外边距和内边距等属性。常见的块级元素有div、p、h1等。
inline：元素以内联元素的方式显示。内联元素不会独占一行，可以和其他元素在同一行显示。常见的内联元素有span、a、img等。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- 设置块级标签为行级标签 --><p style="background-color: blanchedalmond;display: inline;">块标签——————段落</p>dididi<!-- 设置行级标签为块级标签 --><b style="display: block;background-color: blanchedalmond;">行级标签——————加粗</b>dididi<!-- 设置标签隐藏 --><img src="../img/pear.jpg" style="display: none;background-color: blanchedalmond;"/>dididi</body>
</html>

div和span

div 和 span 是HTML中常用的两个内联元素（div 实际上是块级元素，但经常通过CSS被设置为内联或内联块级元素）。这两个元素在语义上并没有特别的意义，它们主要用于为页面上的内容提供结构和背景，或者用于样式化和脚本化。

div（division）

默认显示类型：块级元素（block）
用途：通常用于组合块级元素，从而通过CSS来设置这些元素的样式。div 元素经常用作CSS布局的关键部分，因为块级元素可以包含其他块级元素和内联元素。

span

默认显示类型：内联元素（inline）
用途：用于对文本中的一部分进行样式化，或者用于在文本中嵌入脚本。由于 span 是内联元素，它不会打断文本的行进，而是会和其他文本一起显示。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- 块级标签 --><!-- 无论内容多少都会独占一行，一般用来进行网页布局，可以设置 width宽  height高 --><p style="width: 200px;height :300px;background-color: aqua;">段落</p><!-- “纯净版”块标签————div（主要作用是用来布局网页）--><div>纯净块标签</div><!-- 行级标签 --><!-- 只占自身大小，不会占一行，设置宽高无效，主要对文字进行修饰 --><b style="width: 200px;height :300px;background-color: aqua;">aaa</b><!-- "纯净版"行级标签————span（被用来选中文档中的文字） --><span>"纯净版"行级标签</span><!-- 行级块 --><!-- 不占一行可以设置宽高 -->请输入：<input type="width: 200px;height :300px;background-color: aqua"/></body>
</html>

盒子模型

盒子模型（Box Model）是CSS中用于设计和布局网页的重要概念。在盒子模型中，每个HTML元素都可以看作是由内容、内边距（padding）、边框（border）和外边距（margin）组成的矩形盒子。以下是对盒子模型的详细解释：

内容（Content）：
- 内容是盒子模型的核心部分，用于显示文本、图片、视频等实际内容。
- 内容的尺寸可以通过设置元素的宽度（width）和高度（height）属性来控制。
内边距（Padding）：
- 内边距是内容与其边框之间的空间，用于控制内容与边框之间的距离。
- 内边距分为上、下、左、右四个方向，可以分别设置或统一设置。
- 设置内边距会增加盒子的总尺寸（宽度和高度）。
边框（Border）：
- 边框是包裹在内边距和内容外面的线框，用于突出元素的轮廓。
- 边框可以设置样式（如实线、虚线、点线等）、颜色、宽度等属性。
- 边框也会增加盒子的总尺寸（宽度和高度）。
外边距（Margin）：
- 外边距是盒子与其他盒子之间的空间，用于控制元素之间的间距。
- 外边距同样分为上、下、左、右四个方向，可以分别设置或统一设置。
- 设置外边距不会影响盒子本身的尺寸，但会影响盒子在页面上的定位。

盒子模型的实际应用：

盒子模型在网页布局中起着至关重要的作用，通过调整元素的宽度、高度、内边距、边框和外边距等属性，可以实现复杂的页面布局和样式设计。
在实际开发中，我们经常使用盒子模型进行元素布局和样式调整。例如，通过设置元素的宽度和高度属性可以控制盒子的大小，通过设置内边距属性可以调整元素的内部空间，通过设置边框属性可以添加边框样式，通过设置外边距属性可以控制元素与其他元素之间的间距。
盒子模型还可以用于实现居中布局和多列布局等复杂布局效果。通过合理设置盒子模型的属性和布局技巧，可以创建出优雅、灵活且具有良好用户体验的页面。

总结：

盒子模型是CSS中用于设计和布局网页的重要工具，它通过将HTML元素视为由内容、内边距、边框和外边距组成的矩形盒子，为开发者提供了强大的布局和样式控制能力。掌握盒子模型的原理和应用，对于优化页面布局和样式的设计和开发具有重要意义。

<!-- 盒子模型 -->
<!-- 在前端开发中，一个盒子（块）分成四个部分，分别是：内容区，内边距，边框，外边距 -->
<!-- 内容区 -->
<!-- 盒子中存放内容的区域，可以通过width和height‘设置内容区的大小（不是整个盒子的大小）在未设置内边距和边框的情况下，默认和盒子大小一致--><!-- 内边距 --><!--  --><!-- 边框 --><!-- 可以在标签周围创建边框，边框是标签课件框的最外部 --><!-- 外边距 --><!-- 外边距是标签框和周围标签相聚的空间，使用margin属性可以设置外边距，用法和padding类似，同事提供了四个方向 --><!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.box{background-color: beige;/* 设置内容区大小 */width: 200px;height: 100px;/* 设置内边距---padding */padding: 10px;padding-top: 20px;/* 设置内边距快捷:上，右，下，左 */padding: 10px 20px 30px 40px;/* 设置边框---border *//* 设置一侧边框 */border-top: 2px;border-top-color: black;border-top-style: solid;/* 常用的边框定义形式有：dottder（点线）dashed（虚线）soild（实线）double（双线）groove（槽线） *//* 在边框的定义中需要注意的是：边框在定义时需至少同时完成边框粗细，颜色，样式这三种属性，边框才会在网页中显示 *//* 边框的快捷定义方式 */border: red solid 3px;border-radius:10px;border-top-left-radius: 30px;/* 设置外边距 */margin-top: 30px;margin: 10px;/* auto为外边距的最大值 */margin-left: auto; /* 垂直设置为auto时，值为0 */margin-right: auto; /* 当左右都设置为auto时，意味着左右两边外边距相同，即水平居中 */margin: 0 auto;/* 同样表示水平居中 */}</style></head><body><div class="box">盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型</div></body>
</html>