CSS基础

最新推荐文章于 2023-09-27 22:09:36 发布

先模仿再超越

最新推荐文章于 2023-09-27 22:09:36 发布

阅读量1.5k

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_51220629/article/details/124365016

版权

3.2 边框（border）- 单方向设置：

8.1. 外边距折叠现象 – ① 合并现象

8.2 外边距折叠现象 – ② 塌陷现象

一、css三大特性

1. 继承性

特性：子元素有默认继承父元素样式的特点（子承父业）

➢ 可以继承的常见属性(文字控制属性都可以继承)

1. color

2. font-style、font-weight、font-size、font-family

3. text-indent、text-align

4. line-height

5. ……

➢ 注意点： • 可以通过调试工具判断样式是否可以继承

继承的好处就是在一定程度上可以减少代码量，常见应用场景：

1. 可以直接给ul设置 list-style:none 属性，从而去除列表默认的小圆点样式

2. 直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小

继承失效的特殊情况：

如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式

比如：（其实它们都继承了属性样式，只是优先显示浏览器默认样式）

1、a标签的color会继承失效

2、h系列标签的font-size会继承失效

例如：继承的原则是我有的就不会继承，没有的才会继承，比如超链接的字体颜色是蓝色（默认颜色），虽然父级标签设置文字颜色是红色，但是并不会改变超链接文字颜色！！！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 默认字体大小是16 */
			div {
				color: red;
			}
		</style>
	</head>
	<body>
		<div>
			<a href="#">这是一个a标签</a>
			<h1>一级标题</h1>
		</div>
	</body>
</html>

显示结果：

2. 层叠性

➢ 特性：

1. 给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上

2. 给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效

➢ 注意点：

当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

3. 优先级

特性：（优先级排序原则：选择器选择范围越广优先级越低）

不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式

➢ 优先级公式：

继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择器优先级测试</title>
		<style type="text/css">
			/* 优先级顺序：继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important */
			
			/* 继承 */
			body{
				color: red;
			}
			/* 通配符选择器 */
			*{
				color: blue;
			}
			/* 标签选择器 */
			div{
				color: black;
			}
			/* 类选择器 */
			.box{
				color: #00FFFF !important;
				/* 注意！important是加在属性后面分号前面的位置 */
			}
			/* id选择器 */
			#box{
				color: #FFAAFF;
			}
		</style>
	</head>
	<body>
		<!-- 行内样式 -->
		<div class="box" id="box" style="color: #FFFF00;">
			这是一个div
		</div>
	</body>
</html>

➢ 注意点：

1. !important写在属性值的后面，分号的前面！

2. !important不能提升继承的优先级，只要是继承优先级最低！

3.1权重叠加计算

场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效

特殊情形：

1、当权重相同时比较层叠性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>当权重相同时比较层叠性</title>
		<style type="text/css">
			/* (0,0,2,1) */
			.c1 .c2 div{
				color: blue;
			}
			/* (0,1,0,1) 这里不是继承关系，因为选择器是后代选择器，能选中所有后代 */
			div #box3{
				color: green;
			}
			/* (0,1,0,1) 这里不是继承关系，因为选择器是后代选择器，能选中所有后代 */
			#box1 div{
				color: pink;
			}
			/* 当权重相同时后面的会覆盖前面的 */
		</style>
	</head>
	<body>
		<div id="box1" class="c1">
			<div id="box2" class="c2">
				<div id="box3" class="c3">
					这行文字是什么颜色
				</div>
			</div>
		</div>
	</body>
</html>

当权重相同时后面的会覆盖前面的，显示结果为：

2、当全是继承的特殊情况

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>当全是继承的特殊情况</title>
		<!-- 都是继承，继承的父级里面谁最高（看是否是直接继承，下面这个例子是直接继承p标签），那个选择器生效 -->
		<style type="text/css">
			/* (0,0,0,2) */
			div p{
				color: red;
			}
			/* (0,0,1,0) */
			.father{
				color: blue;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<p class="son">
				<span>文字</span>
			</p>
		</div>
	</body>
</html>

都是继承，继承的父级里面谁最高（看是否是直接继承，下面这个例子是直接继承p标签），那个选择器生效，显示结果为：

二、盒子模型

1. 盒子模型的介绍

CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（ margin）构成，这就是盒子模型。

2. 内容区域的宽度和高度

作用：利用 width 和 height 属性默认设置是盒子内容区域的大小

➢ 属性：width / height

➢ 常见取值：数字+px

注意：设置的是盒子内容大小而不是盒子大小！！！

3. 边框（ border ）

3.1 边框（border）- 连写：

快捷键：bd + tab

属性值：单个取值的连写，取值之间以空格隔开 • 如：border : 10px solid red;

3.2 边框（border）- 单方向设置：

➢ 场景：只给盒子的某个方向单独设置边框

➢ 属性名：border - 方位名词

➢ 属性值：连写的取值

例如：

➢ 给盒子设置四周 20像素、实线、蓝色的边框，属性应该如何设置？

• border：20px solid blue；

➢ 给盒子设置上边框 10像素、虚线、黄色的边框，属性应该如何设置？

• border-top：10px dashed yellow；

4. 内边距（ padding ）

作用：设置边框与内容区域之间的距离

记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！！!

单方向设置样式与border类似。

5. 外边距（margin）

作用：设置边框以外，盒子与盒子之间的距离

记忆规则，单方向设置样式和padding一样。

6.盒子模型样例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<style type="text/css">
			body{
				background-color: #CCCCCC;
			}
			div{
				width: 400px;
				height: 400px;
				background-color: pink;
				
				/* 边框 有三个属性：大小 形状 颜色（三个属性顺序写法无所谓）*/
				/* border: black 2px dashed; */
				/* solid表示实线 dashed表示虚线 dotted表示点线 */
				/* 如果想要border在某一个方向有边框：border-方向 */
				border-top: black 2px dashed;
				/* 外边距 */
				margin: 20px;
				/* 内边距 */
				padding: 20px;
			}
		</style>
	</head>
	<body>
		<div id="">
			
		</div>
	</body>
</html>