CSS样式引用

​ css样式写法分为：内联样式 ，内嵌样式，外联样式；其中内联优先级最高，外部样式表的优先级最低

​ !important 规则可以增加样式的权重，覆盖任何其他声明

内联样式，直接在html标签加上style属性

1
<p style="color: red;">这是一段带有内联样式的文本。</p>

和html元素放在同一个html文件下，用<style> 标签包裹

1
2
3
4
5
6
7
<head>
  <style>
    p {
      color: blue;
    }
  </style>
</head>

单独创建.css 文件，在需要用到的html文件内使用link导入

1
2
3
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

css选择器

​ 选择器用于指定要样式化的HTML元素。选择器可以根据元素的标签名、类名、ID等属性来选择元素。

元素选择器

​ 元素选择器（Element Selector）：根据元素的标签名选择元素。例如，选择所有段落元素可以使用 p：

1
2
3
p {
  color: blue;
}

类名选择器

​ 类选择器（Class Selector）：根据元素的类名选择元素。类选择器以.开头，后面跟类名。例如，选择类名为 highlight 的元素可以使用 .highlight：

1
2
3
.highlight {
  background-color: yellow;
}

ID选择器

​ ID选择器（ID Selector）：根据元素的ID选择元素。ID选择器以#开头，后面跟ID名。每个页面中的ID应该是唯一的。例如，选择ID为 header 的元素可以使用 #header：

1
2
3
#header {
  font-size: 24px;
}

后代选择器

​ 后代选择器（Descendant Selector）：选择指定元素的后代元素。后代选择器使用空格分隔不同的选择器。例如，选择 .content 元素内的所有 p 元素：

1
2
3
.content p {
  font-weight: bold;
}

子元素选择器

​ 子元素选择器（Child Selector）：选择指定元素的直接子元素。子元素选择器使用 > 分隔不同的选择器。例如，选择 .menu 元素的直接子元素 li：

1
2
3
.menu > li {
  list-style-type: none;
}

通用选择器

​ 通用选择器（Universal Selector）：选择所有元素。通用选择器使用 * 表示。例如，为所有元素设置默认边框：

1
2
3
* {
  border: 1px solid black;
}

案例

​ 通过css就可以将html表格进行优化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格样式</title>
	<style type="text/css">
		
		.goods_list{
			width:600px;
			height:200px;
			border:1px solid #333;
			border-collapse:collapse;
			font-family: 'Microsoft Yahei';
		}


		.goods_list th,.goods_list td{
			border:1px solid #333;
			text-align:center;
		}

		.goods_list th{
			background-color:#3366cc;
			color:#fff;
		}




	</style>
</head>
<body>
	<table class="goods_list">
		<tr>
			<th>序号</th>
			<th>名称</th>
			<th>数量</th>
			<th>价格</th>
			<th>备注</th>
		</tr>
		<tr>
			<td>1</td>
			<td>苹果</td>
			<td>1000</td>
			<td>¥ 5.00</td>
			<td>销售中</td>
		</tr>
		<tr>
			<td>2</td>
			<td>苹果</td>
			<td>1000</td>
			<td>¥ 5.00</td>
			<td>销售中</td>
		</tr>
		<tr>
			<td>3</td>
			<td>苹果</td>
			<td>1000</td>
			<td>¥ 5.00</td>
			<td>销售中</td>
		</tr>
		
	</table>
</body>
</html>

CSS 盒子模型

​ CSS盒模型是指在网页布局时，每个元素被看作一个矩形的盒子，这个盒子包括内容区域、内边距（padding）、边框（border）和外边距（margin）。

  • 内容区域（Content）：内容区域包含元素的实际内容，例如文本、图片等。内容区域的宽度和高度可以通过设置元素的 width 和 height 属性来控制。

  • 内边距（Padding）：内边距是内容区域与边框之间的空白区域，用于控制元素内容与边框之间的距离。内边距的大小可以通过设置元素的 padding-top、padding-right、padding-bottom 和 padding-left 属性来指定，也可以使用 padding 属性简写设置所有方向的内边距。

  • 边框（Border）：边框包围在内边距的外侧，用于围绕元素内容和内边距创建可见的边界。边框的样式、宽度和颜色可以通过设置元素的 border-style、border-width 和 border-color 属性来指定。

  • 外边距（Margin）：外边距是边框与相邻元素之间的空白区域，用于控制元素与其他元素之间的距离。外边距的大小可以通过设置元素的 margin-top、margin-right、margin-bottom 和 margin-left 属性来指定，也可以使用 margin 属性简写设置所有方向的外边距。

    在CSS中，元素的宽度（width）和高度（height）指的是内容区域的宽度和高度，而元素的总宽度和总高度还要加上内边距、边框和外边距的宽度。这个概念称为“盒模型”。

盒子尺寸

标准盒模型 vs. IE 盒模型

  • 标准盒模型（content-box）：元素的宽度和高度只包括内容区域，不包括内边距（padding）、边框（border）和外边距（margin）。
  • IE 盒模型（border-box）：元素的宽度和高度包括内容区域、内边距和边框，但不包括外边距。

盒子尺寸计算公式

  • 对于标准盒模型：总宽度 = 内容宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距
  • 对于 IE 盒模型：总宽度 = 内容宽度 + 左边框 + 右边框 + 左外边距 + 右外边距

盒模型的设置

  • 可以通过设置 CSS 的 box-sizing 属性来指定盒模型的类型，取值可以是 content-box 或 border-box。
  • 在保证兼容性的前提下，可以使用以下代码设置盒模型： box-sizing: border-box;（部分浏览器支持）

兼容性问题

  • 在编写 CSS 样式时，应该尽量考虑跨浏览器的兼容性问题。特别是在处理盒子尺寸时，需要谨慎选择盒模型，以确保页面在不同浏览器下显示一致。
  • 在处理盒子尺寸和布局时，可以使用现代的布局技术（如 Flexbox 和 Grid）来简化代码并提高兼容性。

垂直margin合并问题

​ 两个相邻块级元素的上下 margin 相遇时，它们的 margin 会合并成一个 margin 的现象

  1. 同一方向相邻元素的 margin 会合并：
    • 当两个相邻的块级元素中的 margin 相遇时，它们的 margin 会合并为一个 margin，取两者中较大的那个值作为最终的 margin。
  2. 没有边框、padding、inline内容或 clearance 分隔的父子元素 margin 也会合并：
    • 如果一个父元素没有 border、padding、inline 内容或 clearance 分隔，且其第一个或最后一个子元素的 margin 会和父元素的 margin 合并。
  3. 为了避免垂直 margin 合并带来的意外结果，可以考虑以下方法来解决或减少合并问题
    • 设置一个元素的 border、padding 或 overflow 属性可以防止其 margin 和其子元素的 margin 合并。
    • 在两个相邻元素之间插入一个空的内联元素，可以阻止它们的 margin 合并。
    • 为一个块级元素添加一个 display: inline-block; 可以阻止其 margin 与相邻元素的 margin 合并。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>垂直margin合并</title>
	<style type="text/css">
		.box{
			width:600px;
			border:1px solid #333;
			margin:50px auto;
		}

		.box div{
			
			text-indent:32px;
			/* margin-left:20px;
			margin-right:20px;
			margin-top:30px;
			margin-bottom:30px; */

			margin:30px 20px;
		}
		
	</style>
</head>
<body>
	<div class="box">
		<div>
			外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。解决方法如下：

1、使用这种特性
2、设置一边的外边距，一般设置margin-top
3、将元素浮动或者定位
		</div>
		<div>
			外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。解决方法如下：

1、使用这种特性
2、设置一边的外边距，一般设置margin-top
3、将元素浮动或者定位
		</div>
		<div>
			外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。解决方法如下：

1、使用这种特性
2、设置一边的外边距，一般设置margin-top
3、将元素浮动或者定位
		</div>
		<div>
			外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。解决方法如下：

1、使用这种特性
2、设置一边的外边距，一般设置margin-top
3、将元素浮动或者定位
		</div>
		<div>
			外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。解决方法如下：

1、使用这种特性
2、设置一边的外边距，一般设置margin-top
3、将元素浮动或者定位
		</div>

	</div>
</body>
</html>

margin-top 塌陷问题

​ margin-top 塌陷问题通常发生在块级元素上，当一个块级元素的第一个子元素设置了 margin-top 时，其自身的 margin-top会塌陷到父元素上。这可能导致页面布局出意外的间距和位置。

解决这个问题的方法有几种：

  1. 将父容器设置为 overflow: auto; 或 overflow: hidden; 可以清除塌陷。
  2. 使用-top 替代 margin-top。
  3. 使用 border-top 替代 margin-top。 . 设置父级容器为 display: flex; 或 display: grid; 可能也会解决这个问题。

css布局

块级元素

  • 特点：
    • 默认情下，块级元素会独占一行，从上至下排。
    • 块级元素可以设置 width、height、margin、padding 等属性控制其尺寸和布局。
  • 优点： -适合用于创建页面结构，比如
    和
    标签。
    • 可以通过设置属性来控制盒模型相关样式（width、height等）。
  • 缺点 - 默认情况下会独占一行，不适合在水平排内容时使用。

行内元素

  • 特点：

  • 行内元素在默认情况下不会换行，在同一行。

    • 行内元素无法直接设置 width 和 height 属性，并且垂直方向上的 margin 和 padding 不会产生效果（只有水平方向上有效）。
    • 优点：
      • 适包裹文本或者小片段内容，比如 <span> 和 <a> 标签。
      • 不会独占一行，在水排列内容时非常便利。 缺点： -宽高无效
    • 对外边距垂直方向不起作用

行内元素

​ 具备了同时拥有块级和行内特性 邻两个inline-block之间存在空格回车符缩进导致间现 （解决办法：将 HTML 文档写成一整行。当然这个体验定不好） 定义 inline-block 元素除了添加 display: inline-block 属性之外， 还需要修复于字符间距带来额外空白间隙问题

浮动

浮动

​ 浮动是一种常用的布局方式，可以让元素脱离正常的文档流，悬浮在其他元素的周围

  • 介绍
    • 通过 float 属性可以将元素向左或向右浮动，周围的内容会围绕着浮动元素排列。
    • 可以使用 left、right、none 或 inherit 来定义元素的浮动方向。
  • 优点
    • 创造多栏布局：通过浮动可以实现多栏布局，例如实现文字环绕图片的效果。
    • 响应式设计：在响应式网页设计中，浮动可以很好地适应不同屏幕尺寸。
  • 缺点
    • 清除浮动：浮动元素可能造成父元素塌陷，需要清除浮动以避免影响布局。
    • 破坏文档流：浮动的元素脱离了文档流，有时会引起布局混乱。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>浮动</title>
	<style type="text/css">
		
		.box01,.box02,.box03{
			width:200px;
			height:200px;
			font:30px/200px 'Microsoft Yahei';
			background-color:gold;
			text-align:center;
			margin:20px;
		}


		.box01{
			float:left;
		}

		.box02{
			float:right;
		}

		.box03{
			float:left;
		}



	</style>

</head>
<body>
	<div class="box01">1</div>
	<div class="box01">1</div>
	<div class="box01">1</div>
	<a href="#" class="box01">a标签</a>
	<div class="box02">2</div>
	<div class="box03">3</div>
</body>
</html>

浮动制作文字缠绕效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>浮动文字饶图</title>
	<style type="text/css">
		.con{
			width:400px;
			border:1px solid #000;
			margin:100px auto 0;
		}

		.pic{
			width:100px;
			height:100px;
			background-color:gold;
			float:left;
			margin:0 10px 5px 0;
		}

		.duanluo{
			background-color:green;
			width:400px;
			height:200px;
			color:#fff;
		}


	</style>
</head>
<body>
	<div class="con">
		<div class="pic"></div>

		<div class="duanluo">1、浮动元素有左浮动(float:left)和右浮动(float:right)两种
		
		2、浮动的元素会向左或向右浮动，碰到父元素边界、浮动元素、未浮动的元素才停下来
		
		3、相邻浮动的块元素可以并在一行，超出父级宽度就换行
		
		4、浮动让行内元素或块元素自动转化为行内块元素
		2、浮动的元素会向左或向右浮动，碰到父元素边界、浮动元素、未浮动的元素才停下来
		
		3、相邻浮动的块元素可以并在一行，超出父级宽度就换行
		
		4、浮动让行内元素或块元素自动转化为行内块元素</div>
	</div>
</body>
</html>

清除浮动

原因：在使用CSS浮动布局时，需要清除浮动的主要原因是为了避免父元素塌陷。父元素塌陷是指当包含浮动元素的元素高度无法自适应子元素高度时所发的问题，导致布局混乱。

当父元素不给高度的时候，内部元素不浮动时会撑开，而浮动的时候，父元素变成一条线

  1. 清除浮动的传统方式是在浮动元素后面添加一个空元素，并为其设置 clear: both; 的样式
1
2
3
4
5
<div class="parent">
  <div class="float-left">浮动左侧</div>
  <div class="float-right">浮动右侧</div>
  <div style="clear: both;"></div>
</div>
  1. 使用伪元素 ::after 来清除浮动，这是一种比较常用且优雅的方法，代码如下：
1
2
3
4
5
.parent::after {
  content: "";
  display: table;
  clear: both;
}

  1. 父元素触发 BFC（块级格式化上下文）也可以清除浮动，可以给父元素添加 overflow: hidden; 或 overflow: auto; 触发 BFC，这样也能清除浮动效果。

    缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素