CSS_css font-color-CSDN博客

本文链接：https://blog.csdn.net/qq_42179997/article/details/108778358

INFO

作者：mango @芒果小洛

QQ：2099432021

个人主页 qkmango.cn

项目测试 qkmango.top

CSS

CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

⛵️网页加入CSS的方式

1️⃣内联样式

在标签内部使用style属性来设置元素的css样式，这种方式称为内联样式/行内样式

语法格式

<标签 style="样式名:值;样式名:值;..."></标签>

<p style="color: red; font-size: 30px;">芒果小洛</p>

芒果小洛

2️⃣内部样式表

在head标签中使用style块，这种方式称为样式块方式/内部样式表

通过CSS选择器为多个标签同时设置相同的样式

语法格式

<head>
    <sytle type="text/css">
        选择器 {
        	样式名:值;
        	样式名:值;
        	......
        }
    	选择器 {
        	样式名:值;
        	样式名:值;
        	......
        }
    </sytle>
</head>

<head>
    <style type="text/css">
        p{
            color: #008B8B;
        }
    </style>
</head>
<body>
    <!-- 内部样式表：在head标签中使用style标签 -->
    <p>芒果小洛</p>
</body>

3️⃣✅外部样式表

链入外部样式表文件，这种方式最常用（将样式写到一个独立的css文件，在需要的网页上直接引入css文件，样式就引入了），通过link标签引入到网页

这种方式易于维护，维护成本底，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高体验

语法格式

<link rel="stylesheet" type="text/css" href="css文件路径"/>

✈️选择器

选择器是可以多个搭配使用

元素选择器

类选择器

id选择器#
元素选择器span
类选择器.
通配选择器*
复合选择器
- 交集选择器选择器1选择器2...
- 并集选择器选择器1,选择器2...
- 关系选择器
  - 子元素选择器父元素 > 子元素
  - 后代选择器祖先元素后代元素
  - 兄弟选择器前一个 + 后一个，兄 ~ 弟
属性选择器[attr=value]
伪类选择器:
伪元素选择器::

🍋id选择器

#号开始，后面跟标签的id

<style>
	#title {
        color: red;
}
</style>

根据元素的id属性值选中一个元素（id不能重复）

<html>
	<head>
		<meta charset="utf-8">
		<title>test</title>
		<style type="text/css">
			#usernameErrorMsg {
				background-color: cornflowerblue;
				font-size: 50px;
				color: aliceblue;
				font-style: oblique;
				outline: cadetblue dashed 5px;
			}
		</style>
	</head>
	<body>
		<span id="usernameErrorMsg">用户名不对</span>
	</body>
</html>

🍉标签选择器/元素选择器

根据标签选择一些元素

标签名{}

<!--选中h1-->
<style>
    h1 {
        color: red;
    }
</style>

<html>
	<head>
		<meta charset="utf-8">
		<title>test</title>
		<style type="text/css">
			div {
				font-size: 20px;
				background-color: #5F9EA0;
				height: 100px;
				width: 300px;
			}	
			input {
				border: 2px solid  darkcyan;
				height: 25px;
			}
		</style>
	</head>
	<body>
		<div class="userinfodiv">
			用户名：
			<input type="text" name="username" class="userinfoInput" /><br/>
			密 &nbsp;&nbsp;码：
			<input type="password" name="userpwd" class="userinfoInput" />
		</div>
	</body>
</html>

在这里插入图片描述

🍇类选择器

.后面跟标签类名

根据标签的class属性值选中一些元素，class值可以有多个，使用空格间隔

<!--选中class="title"-->
<style>
    .title {
        color: red;
    }
</style>

<html>
	<head>
		<meta charset="utf-8">
		<title>test</title>
		<style type="text/css">
			
			.userinfodiv {
				font-size: 20px;
				background-color: #5F9EA0;
				height: 100px;
				width: 300px;
			}
			
			.userinfoInput {
				border: 2px solid  darkcyan;
				height: 25px;
			}
		</style>
	</head>
	<body>
		<div class="userinfodiv">
			用户名：
			<input type="text" name="username" class="userinfoInput" /><br/>
			密 &nbsp;&nbsp;码：
			<input type="password" name="userpwd" class="userinfoInput" />
		</div>
	</body>
</html>

在这里插入图片描述

🍍通配选择器

<!--选中页面所有元素-->
<style>
    * {
        color: red;
    }
</style>

🍐交集选择器

满足多个选择条件

选择器1选择器2选择器3... {

}

⚠️注意：交集选择器中如果有标签选择器（元素选择器），那么元素选择器放在最前面

<html>
	<head>
		<style>
			/* class=red的元素设置为红色 */
			.red {
				color: red;
			}

			/* class=red的div字体设置为30px */
			div.red {
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<div class="red">我是div</div>
		<p class="red">我是p元素</p>
	</body>
</html>

🍓并集选择器

选中复合选择器任意一个，多个选择器之间使用逗号分隔，相当于或|

选择器1,选择器2,... {

}

<html>
	<head>
		<style>
			/* 并集选择器 */
            /* 选中span、h1、class=green */
			span,h1,.green {
				color: green;
			}
		</style>
	</head>
	<body>
		<span>我是span</span>
		<h1>我是h1元素</h1>
		<p class="green"></p>
	</body>
</html>

🍒关系选择器

1️⃣子元素选择器

作用：选中指定父元素的子元素

<!--使用大于号连接-->
父元素 > 子元素 {

}

<!--选中div里面的sapn-->
<style>
    div > span {
        color: red;
    }
</style>

2️⃣后代元素选择器

作用：选中指定元素的后代元素

<!--使用空格分隔-->
祖先元素 后代元素 {

}

<!--选中所有p元素中的span元素，包括子span元素和后代span元素-->
<style>
    p span {
        font-size: 40px;
    }
</style>

DEMO

<head>
    <style>
        p span {
            font-size: 40px;
        }
    </style>
</head>
<body>
    <div>one
        <p>two
            <span>three
                <span>seven</span>
            </span>
            <p>four
                <span>five</span>
            </p>
        </p>
    	<span>six</span>
    </div>
</body>

3️⃣兄弟选择器

选择下一个兄弟：选择指定的相邻的下一个同级元素

前一个元素 + 下一个元素 {

}

<!--选择p元素同级的下一个sapn元素-->
p + span {
	color: red;
}

⚠️注意：选择p元素同级的相邻的下一个span元素，如果p元素与span元素之间还有其他元素，那么就无法选中

选择下边所有的兄弟：选择同级元素的下面的所有指定元素

兄 ~ 第 {

}

<!--选择p元素下面的所有span元素-->
p ~ span {
	color: red;
}

DEMO

选择下面一个兄弟

<head>
    <style>
    	p + span {
            color: red;
        }
    </style>
</head>
<body>
    <div>one
        <p>two
            <p>four
                <span>five</span>
            </p>
            <span>five</span>
        </p>
        <span>six</span>
        <span>six</span>
        <span>six</span>
    </div>
</body>

选择下面所有兄弟

<head>
    <style>
        /* 
        兄弟选择器
        选择下面所有指定的兄弟
        */
        p ~ span {
            color: red;
        }
    </style>
</head>
<body>
    <div>one
        <p>two
        	<span>five</span>
        </p>
        <span>six</span>
        <span>six</span>
        <span>six</span>
    </div>
</body>

在这里插入图片描述

🍊属性选择器

选择指定属性/属性=值的元素

[attr]选择含有指定属性的元素
[attr=value]选择指定属性值的元素
[attr^=value]选择指定属性值以指定值开头的元素
[attr$=value]选择指定属性值以指定值结尾的元素
[attr*=value]选择属性值含有某值的元素

<!--选择div元素的子元素p且元素含有title属性的元素-->
<!--div与p：子元素选择器 p与[title]：并集选择器  [title]属性选择器-->
div > p[title] {
	color: red;
}
<!--选择div元素的子元素p且元素含有title=abc的元素-->
div > p[title=abc] {
	color: red;
}
<!--选择title值以abc开头的元素-->
[title^=abc] {
	color: red;
}
<!--选择title值以abc结尾的元素-->
[title$=abc] {
	color: red;
}
<!--选择title含有e值的元素-->
[title*=e] {
	color: red;
}

🍈伪类选择器

伪类表示元素的特殊状态，如：第一个子元素，鼠标进入…（子元素中的某些元素）

伪类选择器一般都是:开头

🚩组成元素本身的“特殊位置”

- 以下的伪类都是根据所有子元素进行排序
    :first-child 第一个子元素
    :last-child 最后一个子元素
    :nth-child(n) 第n个子元素
    几个特殊值：n的范围0~正无穷
    	n 如果是具体的数值选中第n个；如果是就填n表示全选
    	2n 或 even 选中偶数位个
    	2n+1 或 odd 选中奇数位个

- 以下的伪类都是根据同类型的子元素进行排序
    :first-of-type
    :last-of-type
    :nth-of-type()

- 否定伪类
    :not() 将参数中的元素除外，选中其他元素

<head>
    <style>
        /* ul中的所有元素，并且是所有元素的第一个 */
        ul > *:first-child {
            color: blueviolet;
        }
        /* ul中的子元素li，并且是所有子元素的第三个 */
        ul > li:nth-child(3) {
            color: red;
        }
        /* ul中的子元素li，并且是所有子元素的最后一个 */
        ul > li:last-child {
            color: red;
        }
        /* ul中的子元素li，并且是与li同类型的第一个 */
        ul > li:first-of-type {
            color: blue;
        }
        /* ul中的子元素li，并且是与li同类型的最后一个 */
        ul > li:last-of-type {
            color: red;
        }
        /* ul中的子元素span，并且是与span同类型的第三个 */
        ul > span:nth-of-type(3) {
            color: red;
        }
        /* ul中的子元素p，除去第二个p，选中其他的p */
        ul > p:not(:nth-of-type(2)) {
            color: blue;
        }
    </style>
</head>
<body>
    <ul>
        <span>我是span</span>
        <li>第0个</li>
        <li>第1个</li>
        <li>第2个</li>
        <li>第3个</li>
        <li>第4个</li>
        <span>span2</span>
        <span>span3</span>
        <p>p1</p>
        <p>p2</p>
        <p>p3</p>
    </ul>
</body>

🚩a元素及其他元素的伪类

伪类表示元素的特殊状态，以a的伪类，有访问过的链接状态、未访问过的链接状态、鼠标移入的状态、鼠标点击时的状态

（1）静态伪类：只能用于超链接的样式。
    :link 超链接点击之前
    :visited 链接被访问过之后
（2）动态伪类：针对所有标签都适用的样式。
    :hover “悬停”：鼠标放到标签上的时候
    :active “激活”： 鼠标点击标签，但是不松手时。
    :focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）

<head>
    <style>
        /* link 选中a元素的特殊状态：未访问过的链接（正常的链接） a专享*/
        a:link {
            color: red;
            font-size: 30px;
        }
        /* visited 选中a元素的特殊状态：访问过的链接  a专享*/
        a:visited {
            color: orange;
            /* 注意：由于隐私的原因，链接访问过的状态只能修改字体颜色，无法修改字体大小 */
            /* font-size: ; */
        }
        /* hover 鼠标移入的状态 非a专享*/
        a:hover {
            background-color: black;
        }
        /* active 鼠标点击的状态  非a专享*/
        a:active {
            background-color: green;
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com">Baidu</a>
    <br><br>
    <a href="https://www.baidu123.com">Baidu</a>
</body>

🍏伪元素选择器

不存在的元素，元素的特殊状态，例如一段文字的第一个字，选中的状态…（元素本身的“组成元素”）

伪元素选择器使用::开头
::first-letter 表示第一个字母
::first-line 表示首行
::selection 选中的内容

::before 元素的开始位置之前（标签的开始位置）
::after元素的结束位置之后（标签的结束位置）
    before和after需要结合content属性使用，否则原来此位置是没有任何内容的，无法显示出样式
    content属性设置值

<head>
    <style>
        /* p元素的第一个字母 */
        p::first-letter {
            font-size: 20px;
        }
        /* p元素的第一行 */
        p::first-line {
            background-color: yellow;
        }
        /* p元素中选中的部分 */
        p::selection {
            background-color: green;
        }
        /* div元素开始位置 */
        div::before {
            /* content设置值 */
            content: '『';
            color: blue;
        }
        /* div元素开始位置 */
        div::after {
            /* content设置值 */
            content: '』';
            color: blue;
        }
    </style>
</head>
<body>
    <div>Hello Word</div>
    <p>
        Low data networking fees and automated migration;Oracle Cloud Infrastructure platform is built for enterprises that are looking for higher performance computing with easy migration of their on-premises applications to the Cloud.
    </p>
</body>

🌽继承

样式的继承，会设置应用到她的后代元素上

⚠️注意：但不是所有样式都会被继承，如背景相关的、布局相关的等都不会被继承

<head>
    <style>
        div {
            color: blue;
            /* 注意：虽然此时背景色都是yellow，但是这是整个div的背景色，
            p和span背景色是透明的，所以看起来是同一个颜色 */
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div>我是div
        <p>我是p
            <span>我是span</span>
        </p>
    </div>
</body>

在这里插入图片描述

🍯选择器的权重

通过不同的选择器选中相同元素，并且设置相同的属性时，就发生了样式设置的冲突，就由优先级权重来决定

权重

选择器	选择器权重
内联样式	1,0,0,0（MAX）
id选择器	0,1,0,0
类、伪类选择器	0,0,1,0
元素选择器	0,0,0,1
通配选择器	0,0,0,0
继承的样式	无优先级（MIN）

比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则优先显示
分组选择器（并集选择器）是单独计算的，每一组单独进行计算
选择器的累加不会超过其最大的数量级，如类选择器再高也不会超过id选择器
如果优先级计算后相同，此时使用靠下的样式，即后面的样式覆盖前面的样式
可以在某个样式的后面加上 !important，则此时该样式会获取到最高优先级，甚至超过内联样式，在开发中慎用

<head>
    <style>
        /*0100*/
        #box1 {
            background-color: red;
        }
		/*0010*/		
        .red {
            background-color: blue;
        }
		/*0001*/
        div {
            background-color: green;
        }
		/*0011 = 0001 + 0010*/
        div.red {
            background-color: black;
        }
		/*0101 = 0001 + 0100*/
        div#box1 {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="box1" class="red">我是一个div</div>
</body>

🚠长度单位

`em`

em是按照字体的默认大小来设置的，
会随着设置的字体大小改变而改变，
默认字体大小是16px，所以默认1em = 1font-size = 16px;

`rem`

rem时根据根元素<html>的字体大小而改变的，默认也是16px

<head>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: green;
        }
        .box2 {
            /* 不设置字体大小，默认1em=16px */
            width: 10em;
            height: 10em;
            background-color: blueviolet;
        }
        .box3 {
            /* 设置字体大小，此时1em=10px */
            font-size: 10px;
            width: 10em;
            height: 10em;
            background-color: yellow;
        }
        /* rem时根据根元素<html>的字体大小而改变的，默认也是16px */
        .box4 {
            width: 10rem;
            height: 10rem;
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</body>

布局

文档流

<head>
    <style> 
        .box1 {
            width: 100px;
            background-color: yellow;
        }
        .box2 {
            width: 100px;
            background-color: red;
        }
        span {
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
<!-- 
    文档流（normal flow） 
    - 网页是一个多层结构，一层叠着一层
    - 通过css可以分别为每一层设置样式
    - 作为用户来说，只能看到最顶层
    - 这些层中，最底下的一层成为文档流，文档流是网页的基础
    	我们所创建的元素默认都是杂文档流中进行排列的
    - 对于我们来说元素主要有两个状态
    	在文档流中
    	不再文档流中（脱离文档流）

    - 元素在文档流中有什么特点？
    	- 块元素
    		- 块元素独占一行（不论是否设置宽高）
    		- 默认宽度是父元素的全部（会把父元素撑满）
    		- 默认高度是被内容撑开的（子元素）
    	- 行内元素
        - 行内元素不会独占一行，只占自身大小
        - 行内元素在页面中自左向右水平排列
        - 如果一行中不能容纳下所有的行内元素，会自动换行
        - 行内元素的默认宽高都是被内容（子元素）撑开
-->
    <div class="box1">我是div1</div>
    <div class="box2">我是div2</div>
    <span>我是span1</span>
    <span>我是span2</span>
    <span>我是span2</span>
    <span>我是span2</span>
    <span>我是span2</span>
    <span>我是span2</span>
    <span>我是span2</span>
    <span>我是span2</span>
</body>

在这里插入图片描述

盒子模型

box model

css将页面中所有的元素都设置了一个矩形的盒子

盒子模型（box model）

css将页面中所有的元素都设置了一个矩形的盒子
将元素设置为矩形的盒子后，对页面的布局就变成了将不同的盒子摆放到不同的位置
每个盒子都由以下几个部分组成
内容区（content）
内边距（padding）内容区和边框之间的距离
边框（border）
外边距（margin）
盒子模型的可见框的大小是由内容区、内边框、边框共同决定的

在这里插入图片描述

边框（border）

边框包括三个要素：宽度、颜色、线型

边框宽度（border-width）

/* 一个值 上下左右*/
border-width: 20px;

/* 两个值 上下 左右*/
border-width: 10px 20px;

/* 三个值 上 左右 下 */
border-width: 10px 20px 30px;

/* 四个值 上 左 右 下 */
border-width: 10px 20px 30px 40px;

✅以后遇到可以指定不同数量值的时候，也是按照这个规律

属性不同数量值的分配

一个值上下左右

两个值上下：左右

三个值上：左右：下

四个值上：左：右：下

也可以使用（border-XXX-width）分别指定边框的宽度

XXX可以是 top left right bottom
border-top-width: 10px;
border-left-width: 20px;
border-right-width: 30px;
border-bottom-width: 40px;

边框颜色（border-color）

边框颜色同边框边度一样，border-color可以指定多个值，也有border-XXX-color分别指定各边框的颜色

（查看：属性不同数量的值的分配）

✅color属性是前景色，如字体的颜色使用的就是color前景色，如果没有指定边框颜色border-color，那么就会找到使用color属性，如果没有指定color属性，color属性默认是black黑色

/* border-color */
border-color: orange; /*单个值*/
border-color: orange orchid dodgerblue rosybrown; /*多个值*/

/* border-XXX-color */
border-top-color: orange;
border-left-color: orchid;
border-right-color: dodgerblue;
border-bottom-color: rosybrown;

边框样式（border-style）

边框样式有以下值

solid 实线
dotted 点状虚线
dashed 虚线
double 双实线

none 默认值，无边框

同边框宽度和边框颜色属性一样，边框样式也可以指定多个值，以及分别指定各边框的样式

（查看：属性不同数量的值的分配）

/* 同边框宽度和边框颜色属性一样，边框样式也可以指定多个值，以及分别指定各边框的样式 */
/* border-style */
border-style: solid;
border-style: solid dashed double;

/* border-XXX-style */
border-top-style: solid;
border-left-style: dotted;
border-right-style: dashed;
border-bottom-style: double;

边框简写属性（border）常用

通过border属性可以直接设置变宽的所有属性，而且没有先后顺序

同样可以使用border-XXX单独设置一个边的所有样式（查看：属性不同数量的值的分配）

border: 10px solid green;

内边距（padding）

内容区和边框之间的距离是内边距
padding依旧可以是多个值（1到4个值）（查看：属性不同数量的值的分配）
也可以使用padding-top padding-right padding-bottom padding-left分别设置不同方向的值
内边距的设置会影响到盒子的大小
背景颜色会延伸到内边距上

/*padding设置内边距*/
padding: 10px 20px 30px 40px;

/*padding-XXX分别设置不同方向的值*/
padding-top: 30px;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 30px;

因为背景色会延伸到内边距，所以为了观察，将内容区添加了一个div，将div设置为黄色，那么紫色的地方就是内边距的颜色

外边距（margin ）

外边距不会影响盒子的可见框的大小

外边距的值默认为auto：参见水平方向布局

但是外边距会影响盒子的位置，影响盒子的实际占地大小
同样有四个方向的外边距
margin-top
margin-right
margin-bottom
margin-left
也可以通过margin直接设置多个值

<head>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
            border: 10px solid green;
            margin: 50px 100px;
        }
        body {
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>

总结

边框（border）：设置三个值指定宽度、颜色、样式，空格隔开，不分先后顺序
- 边框宽度（border-width）：可设置多个值：也有border-XXX-width
- 边框颜色（border-color）：可设置多个值：也有border-XXX-color
- 边框样式（border-style）：可设置多个值：也有border-XXX-style
内边距（padding）：可设置多个值
- 也有padding-XXX
外边距（margin）：可设置多个值
- 也有margin-XXX

✅XXX可取值为（top、right、bottom、left）；每个属性都可以指定多个值，也可以单独设置每个方向的值，对于边框，border可以直接对边框的宽度、颜色、样式三个值直接设置，空格隔开，部分先后

水平方向的布局

元素在其父元素中的水平方形布局的位置由左右外边距(margin)、左右边框(border-wdth)、左右内边距(padding)决定

子元素在其父元素中，左右外边距(margin)、左右边框(border-wdth)、左右内边距(padding)、宽度（width）之和要等于其父元素的内容区宽度
如果之和不等于其父元素的内容区宽度，那么会调整值为auto的值，使其撑满度元素
如果没有值等于auto的，会自动调整右外边距(margin-right)的值，使其撑满度元素
根本含义是子元素要撑满父元素，即div独占一行（子元素的所占空间要撑满父元素）

多个值为auto时

当宽度（width）为auto时，会将宽度调整为最大，其他auto调整为最小
当宽度固定，左右相应的属性为auto时，会将对应的属性设置为同样的值，视觉上会有居中效果

✅如果元素的宽度超过父元素，会将margin外边距设置为负值，依旧满足左右外边距(margin)、左右边框(border-wdth)、左右内边距(padding)、宽度（width）之和要等于其父元素的内容区宽度

如图的黄色区域就是margin，浏览器自动调整值使子元素撑满父元素

在这里插入图片描述

垂直方向的布局

默认情况下，父元素如果没有设置高度，那么是被内容撑开的

子元素在父元素内容区排列的，如果子元素的大小超过了父元素的大小，则子元素会从父元素中溢出
使用overflow属性来设置父元素如何处理溢出的子元素

overflow 属性可选值
    visible 默认值，子元素会从父元素中溢出
    hidden 溢出内容直接进行裁剪，溢出内容不会显示
    scroll 生成滚动条
    auto 根据需要生成滚动条
overflow-x和overflow-y对水平和垂直溢出分别进行设置，可选值与overflow相同

<head>
    <style>
        .box1 {
            width: 200px;
            height: 100px;
            background-color: #BBFFAA;
            overflow-y: scroll;
        }
    </style>
</head>
<body>
    <div class="box1">
Linux 内核最初只是由芬兰人林纳斯·托瓦兹（Linus Torvalds）在赫尔辛基大学上学时出于个人爱好而编写的.Linux 是一套免费使用和自由传播的类 Unix 操作系统，是一个基于 POSIX 和 UNIX 的多用户、多任务、支持多线程和多 CPU 的操作系统。Linux 能运行主要的 UNIX 工具软件、应用程序和网络协议。它支持 32 位和 64 位硬件。Linux 继承了 Unix 以网络为核心的设计思想，是一个性能稳定的多用户网络操作系统。
    </div>
</body>

Linux 内核最初只是由芬兰人林纳斯·托瓦兹（Linus Torvalds）在赫尔辛基大学上学时出于个人爱好而编写的.Linux 是一套免费使用和自由传播的类 Unix 操作系统，是一个基于 POSIX 和 UNIX 的多用户、多任务、支持多线程和多 CPU 的操作系统。Linux 能运行主要的 UNIX 工具软件、应用程序和网络协议。它支持 32 位和 64 位硬件。Linux 继承了 Unix 以网络为核心的设计思想，是一个性能稳定的多用户网络操作系统。

垂直外边距的重叠

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

仅相邻垂直方向两个元素的外边距会发生重叠现象
兄弟元素
- 兄弟元素之间的垂直外边距会取两者之间的较大值（两者都是正值）
- 极少的特殊情况
  - 如果相邻的元素的外边距一正一负，取两者之和
  - 如果相邻元素的外边距都为负值，则取两者之间绝对值较大的
父子元素
- 父子元素相邻外边距，子元素的外边距会传递给父元素（上外边距）
```
.box1 {
    width: 200px;
    height: 200px;
    background-color: #BBFFAA;
}
.box2 {
    width: 100px;
    height: 100px;
    background-color: orange;
    /*子元素的上外边距设置为100px，父元素也会跟着下移*/
    margin-top: 100px;
}
```
- 父子元素的外边距重叠会影响页面，必须处理（不太好的两种方法）
  - 设置父元素的上内边距，将子元素挤下来
  - 设置父元素有上边框，使父子元素的外边框不会重叠

行内元素的盒子模型

行内元素不支持设置宽高
行内元素垂直方向的padding、border、margin不会影响页面的布局，不会挤其他元素（垂直方向本来没有这些属性时，其他元素的位置在垂直方向的哪里，即使设置了这些属性，其他元素垂直方向上的位置还是在哪里）
水平方向的外边距margin不会重叠

<head>
    <style>
        .s1 {
            background-color: orange;
            padding: 10px;
            margin: 100px;
        }

        .box1 {
            width: 200px;
            height: 200px;
            background-color: #BBFFAA;
        }
    </style>
</head>
<body>
    <span class="s1">我是span</span>
    <div class="box1"></div>
</body>

display属性

display属性设置元素的显示的类型

可选值：
inline 将元素设置为行内元素
block 将元素设置为块元素
inline-block 将元素设置为行内快元素，既可以设置宽高，也不会独占一行
table 将元素设置为表格
none 元素不在页面中显示

a标签属于行内元素，不能设置宽高，使用display属性设置元素的显示类型，使其显示状态为块元素或行内块元素

<head>
    <style>
        a {
			background-color: orange;
            display: inline-block;
            width: 100px;
            height: 50px;
        }
    </style>
</head>
<body>
    <a href="#">超链接</a>
</body>

超链接

visibility属性

设置元素的显示状态

可选值：
visible 默认值，元素在页面中显示
hidden 元素在页面中隐藏不显示，但是依旧占据页面位置，于display:none不同，display:none是将元素不在页面中显示展示，不会占据页面的空间，但是visibility:hidden是将元素隐藏，但是还是会占据页面位置

清除浏览器默认样式

因为不同的浏览器会有不同的样式，所以默认样式需要清除或者统一

解决css样式常用的有两个文件

reset.css清除样式
normalize.css统一样式i

<!-- reset.css是清除默认样式 -->
<link rel="stylesheet" type="text/css" href="reset.css"/>

<!-- normalize.css是统一默认样式 -->
<link rel="stylesheet" type="text/css" href="normalize.css"/>

盒子尺寸计算方式（box-sizing）

box-sizing 设置盒子大小的计算方式（设置width和height的作用）

可选值

content-box 默认值，宽高为内容区大小
border-box 从边框开始计算，盒子的可见框大小，宽高是内容区、内边距、边框之和

<head>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            border: 10px green solid;
            background-color: greenyellow;
            box-sizing: content-box;
        }
        .box2{
            width: 100px;
            height: 100px;
            border: 10px green solid;
            background-color: greenyellow;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="box1">content-box，内容区宽高</div><br />
    <div class="box2">border-box，从边框开始计算宽高</div>
</body>

轮廓（outline）

outline 设置元素的轮廓线，用法同border一样，但是不会影响布局
outline: 10px green solid;

outline: 10px green solid;

阴影（box-shadow）

box-shadow 设置元素的阴影，不会影响布局
box-shadow: 10px 20px 10px seagreen;（水平偏移量、垂直偏移量、模糊半径、颜色）

box-shadow: 10px 20px 10px rgba(0,128,0,.5);

圆角（border-radius）

border-radius 设置圆角
border-radius: 10px 20px; 值为圆角半径，可以有多个值，不同数量的值代表不同的角
同样也有以下四个单独设置4个角的圆角
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
单独设置4个角的圆角，可以是1个值，也可以是2和值，如border-bottom-right-radius: 20px 30px，体现为一个椭圆

border-radius: 10px 20px 40px;

border-radius: 20px/40px;/*每个角水平方向20px，垂直方向40px*/

border-bottom-right-radius: 20px 40px;

border-top-left-radius: 20px 40px;
border-top-right-radius: 10px 20px;
border-bottom-right-radius: 20px 40px;
border-bottom-left-radius: 10px 20px;

/*等价于*/
border-radius: 20px 10px/40px 20px;

/*圆形*/
border-radius: 50%;

浮动（float）

浮动元素可以使一个元素脱离文档流，在其父元素的内容区内向左/右靠近

通过浮动可以使一个元素在其父元素的左侧或右侧靠近
使用float属性设置元素的浮动

float可选值：
    none 默认值，无浮动
    left 向左浮动
    right 向右浮动

注意

元素设置浮动后，水平布局块元素便不会独占一行，大小仅为设置的大小
设置浮动以后，元素便会从文档流中脱离，就像气球一样，不会占用其他文档流中的元素的位置

浮动的特点

浮动元素会完全脱离文档流，不会占用文档流中的位置
设置浮动以后，元素会向其父元素左/右移动
浮动元素默认不会超出父元素的范围
浮动元素向左/右移动时，不会超过它前面的浮动元素
浮动元素不会超过其父元素中的块元素，就像一道墙一样
浮动元素不会超过它上面浮动的兄弟元素

简单总结

浮动目前来讲，主要作用就是让页面中的元素可以水平排列，通过浮动元素可以制作一些水平方向的布局

<head>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: green;
        }

        .box2 {
            width: 200px;
            height: 200px;
            background-color: orange;
            float: left;
        }

        .box3 {
            width: 200px;
            height: 200px;
            background-color: yellow;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>

浮动的其他特点（元素脱离文档流的特点）

元素设置浮动之后，将会从文档流中脱离，从文档流脱离后，元素的一些特点将会改变，所以下面说的不仅仅是浮动，而是脱离文档流后元素的特点

块元素：

块元素不再独占一行
脱离文档流之后，如果没有指定宽高，默认被内容撑开

行内元素：

行内元素脱离文档流之后，就会变成块元素脱离文档流之后的特点一样，可以设置宽高，不会独占一行

所以说，脱离文档流之后，不需要区分块元素和行内元素了

clear属性

浮动导致元素脱离文档流之后，会遮住其他非浮动元素，要解决这个问题，使用clear属性，清除浮动元素对其位置的影响

作用属性清除浮动元素对当前元素的影响
可选值
left清除往左侧浮动的元素对当前元素的影响
right清除往右侧浮动的元素对当前元素的影响
both清除两侧中影响较大的那一侧（哪一侧的浮动元素高度更大）
原理
设置clear属性之后，浏览器会自动为元素添加上一个外边距，以使其位置不受其他元素的影响（在浏览器的开发者工具中是看不出来的）

/*未清除浮动元素的影响时，box4被覆盖遮挡*/
.box1 {
    width: 200px;
    height: 200px;
    background-color: #BBFFAA;
    float: left;
}
.box4 {
    width: 250px;
    height: 250px;
    background-color: green;
}

/*清除浮动元素的影响后，box4回到了本来应该的位置*/
.box1 {
    width: 200px;
    height: 200px;
    background-color: #BBFFAA;
    float: left;
}
.box4 {
    width: 250px;
    height: 250px;
    background-color: green;
}

高度塌陷 & BFC

高度塌陷

父元素如果没有设置高度，那么父元素默认是被子元素撑开的，当子元素设置浮动后，子元素会脱离文档流，父元素不被子元素撑开，就会出现父元素的高度塌陷问题；
父元素的高度塌陷问题会影响到其他元素的布局；
高度塌陷问题是浮动布局中比较常见的问题，我们需要处理

<!--子元素设置浮动后，无法撑开父元素，父元素存在高度塌陷问题-->
<head>
    <style>
        .outter {
            border: 10px green solid;
        }
        .inner {
            width: 100px;
            height: 100px;
            background-color: #BBFFAA;
            float: left;
        }
        .bottom {
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="outter">
        <div class="inner"></div>
    </div>
    <div class="bottom"></div>
</body>

BFC

BFC（Block Formatting Context）块级格式化环境

BFC是CSS中一个隐含的属性，可以为一个元素开启BFC，开启BFC该元素会变成独立的布局区域

开启BFC后的特点

开启BFC的元素不会被浮动元素所覆盖
开启BFC的元素和父元素外边距不会重叠
开启BFC的元素可以包含浮动子元素

可以通过一些特殊的方式开启BFC

设置元素的浮动float

将元素设置为行内快元素 display: inline-block

设置元素的 overfloat值为非visible值（常用overflow: hidden）

等等…

每种方式都是一种属性，BFC只是一种隐含的属性，所以通过一些特殊方式开启BFC，
都会有一些副作用，推荐使用overflow: hidden;

<!--父元素开启BFC-->
<head>
    <style>
        .outter {
            border: 10px green solid;
			/* 使用 overflow 开启BFC*/
			overflow: hidden;
        }
        .inner {
            width: 100px;
            height: 100px;
            background-color: #BBFFAA;
			float: left;
        }
        .bottom {
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="outter">
        <div class="inner"></div>
    </div>
    <div class="bottom"></div>
</body>

解决高度塌陷

开启BFC

推荐overflow: hidden;开启BFC后，父元素可以包含浮动元素，所以是可以被浮动元素撑开的

使用`clear`属性

清除浮动元素对其布局位置的影响（解决高度塌陷的最终方案）

使用clear属性解决高度塌陷的原理

既然clear属性可以清除浮动元素对其的影响，那么直接往高度塌陷的父元素的最后添加一个空白的div，此时div实际上是被浮动元素覆盖的，由于这个div并没有浮动，所以他是可以撑开父元素的高度的，然后对其设置clear属性，浏览器会自动为div添加一个上外边距，使其不被浮动元素覆盖，由于div被添加了一个上边距，所以父元素也被其撑开了，解决了高度塌陷的问题

<head>
    <style>
        .outter {
            width: 300px; background-color: #BBFFAA; border: 10px red solid;
        }
        .inner {
            height: 100px; width: 100px; background-color: orange; float: left;
        }
        .clear {
            clear: left; height: 10px; background-color: #000000;
        }
    </style>
</head>
<body>
    <div class="outter">
        <div class="inner"></div>
        <!-- 添加的一个空div，设置clear属性解决高度塌陷 -->
        <div class="clear"></div>
    </div>
</body>

解决前：

解决后：黑色部分就是添加的空白div，为了使其显眼，设置了黑色边框

但是多余的一个空的div属于html的结构，这样解决也不是太好，可以使用CSS的::after伪元素选择器添加一个块元素

<head>
    <style>
        .outter {
            width: 300px; border: 10px red solid;
        }
        .inner {
            height: 100px; width: 100px; background-color: orange; float: left;
        }
		.outter::after {
			content: '';
			/* ::after默认添加的是一个行内元素，手动将其设置为块元素 */
			display: block;
			clear: both;
		}
    </style>
</head>
<body>
    <div class="outter">
        <div class="inner"></div>
    </div>
</body>

`clearfix`类解决高度塌陷、外边距重叠

clearfix类是自定义的一个类选择器，用来解决高度塌陷和外边距重叠问题

clearfix类选择器选中元素开始和结束位置，解决高度塌陷的问题、外边距重叠问题
这样在需要解决高度塌陷和外边距重叠的问题时，只需要对元素添加clearfix类即可

.clearfix::after,
.clearfix::before{
	content: '';
    /* 解决 高度塌陷的问题、外边距重叠问题，因为解决外边距重叠问题，
    display: blob不行，只能使用table，所以使用display: table*/
	display: table;	
    /* 仅解决高度塌陷的问题 */
	clear: both;
}

定位（position）

概述

定位是一种更加高级的布局手段
通过定位可以将元素摆放到页面的任意位置
使用position属性来设置定位

可选值

static 		默认值，元素是静止的没有开启定位
relative 	相对定位
absolute 	绝对定位
fixed 		固定定位
sticky 		粘滞定位

偏移量

当元素开启了定位以后，可以通过设置偏移量来设置元素的位置

top
bottom
left
right

相对定位（relative）

position: relative;

相对于元素的原来的位置定位，元素的原来位置是坐标圆点，不会影响其他元素的位置
开启相对定位后，可以设置偏移量来设置元素的位置
相对定位会提升元素的层级
相对定位不会脱离文档流
相对定位不会改变元素的性质
元素依旧占据原来的位置

没有设置相对定位

对box2添加相对定位并设置偏移量后

.box2 {
    position: relative;
    top: -100px;
    left: 100px;
}

绝对定位（absolute）

position: absolute

开启元素的绝对定位以后，如果不设置偏移量，元素的位置不会发生变化
开启绝对定位后，元素会从文档流中脱离
绝度定位会改变元素的性质，行内变成块
绝对定位会使元素提升一个层级
绝对定位元素是相对于其[包含块]进行定位的

/*使用绝对定位将元素放在了其包含块的右下角*/
.box1 {
	position: absolute;
    bottom: 0;
    right: 0;
}

绝对定位元素的布局

水平布局

margin + border + padding + width + left + right = 包含块内容区的宽度
当开启了绝对定位以后，水平方向布局就多了 left和 right两个值
当发生过渡约束时（9个值加在一起不满足等式）
如果9个值中没有auto时，则自动调整 right值以使等式满足
如果有auto，则自动调整auto值以使等式满足
可设置auto值的属性
margin width left right
因为left 和 right的默认值是auto，如果left和 right值为auto时，会优先调整
指定left和 right为0时，如果margin: auto时，有居中效果，margin会调整上下左右的margin值对称相等

垂直方向布局

margin + border + padding + hight + top + bottom = 包含块内容区的高度
以前垂直布局等式可以不满足（在正常的文档流中），但是在绝对定位后，脱离文档流后，等式也要满足
当发生过渡约束时（9个值加在一起不满足等式）
如果9个值中没有auto时，则自动调整 bottom值以使等式满足
如果有auto，则自动调整auto值以使等式满足
指定top和 bottom为0时，如果margin: auto时，有居中效果，margin会调整上下左右的margin值对称相等

包含块

正常情况下

一般情况下未开启定位的元素，其包含块就是最近的祖先块元素
绝对定位的包含块

元素开启了绝对定位，其包含块就是离它最近的开启了定位的祖先元素（position值非static）如果其所有的祖先元素都没有开启定位，则根元素html就是它的包含块；html（根元素、初始包含块）

<head>
    <style>
        .box1{
            width: 200px; height: 200px; background-color: #BBFFAA;
            position: relative;
        }
        .box2{
            width: 100px; height: 100px; background-color: orange;
            position: absolute;
            margin: auto;/**/
            left: 0;/*指定上下左右时，margin:auto时，会自动调整auto，有居中效果*/
            right: 0;
            top: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

在这里插入图片描述

固定定位（fixed）

position: fixed;

固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样
1. 如果不设置偏移量，元素的位置不会发生变化
2. 元素会从文档流中脱离
3. 会改变元素的性质，行内变成块
4. 会使元素提升一个层级
唯一不同的是固定定位永远参照于浏览器的视口进行定位，视口是浏览器的可视窗口，固定不变，所以元素不会跟着页面的滚动而滚动

.box1 {
    /* 固定定位，此时此元素不会随着页面滚动而滚动，定位相对于浏览器的视口左上角 */
    position: fixed;
    top: 0;
    left: 0;
}

粘滞定位（sticky）

position: sticky;

粘滞定位和相对定位的特点基本一致
不同的是粘滞定位可以在元素到达某个位置时将其固定，不随滚动条滚动而滚动，相对于body元素
兼容性不好，一些低版本浏览器可能不支持

元素的层级（z-index）

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

元素可拥有负的 z-index 属性值。
注意：Z-index 仅能在定位元素上奏效（设置position属性）
如果同时出现两个相同的z-index值，那么在后面的元素层级会高于前面的元素
祖先元素的层级再高，也不会盖住后代元素（水涨船高）

其他几大块

字体（font）

字体相关的样式
font-style：指定文本字体样式
font-variant：指定文本是否为小型的大写字母
font-weight：指定文本字体的粗细
font-stretch：指定文本字体拉伸变形
font-size：指定文本字体尺寸
line-height：指定文本字体的行高
font-family：指定文本使用某个字体或字体族

`color` 字体颜色

其实是前景色，一般主要用于字体颜色

`font-size` 字体大小

每个文字都是在一个框里面，font-size实际上就是设置字体框的高度

字体大小相关的单位

em 是相对于当前元素的font-size，如果当前元素未被设置font-size，那么会从父元素继承，font-size，1em相对于一个font-size
rem 相对于根元素HTML的font-size

`font-family` 字体族

可选值
- 字体名称如 microsoft yahei
- serif 衬线字体
- sans-serif 非衬线字体
- monospace 等宽字体
serif、sans-serif、monospace代表一类字体
font-family可以同时指定多个字体，之间使用逗号隔开，优先使用前面的字体
如：Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif

`@font-face`引用计算机上没有的字体

当用户没有安装某个字体时，可以使用@font-face属性引用服务器上的字体

<style>
    @font-face {
        font-family: 'myfont'; /* 为引用的字体起一个名字，后面的代码可以使用此字体 */
        src: url('../fontFile/Rock Bottom.ttf'); /* 字体的路径 */
    }
	body{
        font-family: myfont; /* 使用myfont引用字体 */
	}
</style>

`line-height` 行高

文字占用元素的实际高度

行高不仅可以设置一行文字的高度，也可以设置多行文字的行间距

可以指定带有单位的值
也可以指定一个整数，指定一个整数后，表示是字体大小的多少倍
字体框：每个文字所在的格子，设置font-size实际上就是设置字体框的高度
字体框是被font-size撑开的
行高会在字体框的上下平均分配，单行文字有垂直居中效果

line-height: 100px; /* 行高为100px */
line-height: 2;		/* 行高为字体大小的2倍 */

CSS

CSS

⛵️网页加入CSS的方式

1️⃣内联样式

2️⃣内部样式表

3️⃣✅外部样式表

✈️选择器

🍋id选择器

🍉标签选择器/元素选择器

🍇类选择器

🍍通配选择器

🍐交集选择器

🍓并集选择器

🍒关系选择器

1️⃣子元素选择器

2️⃣后代元素选择器

3️⃣兄弟选择器

🍊属性选择器

🍈伪类选择器

🚩组成元素本身的“特殊位置”

🚩a元素及其他元素的伪类

🍏伪元素选择器

🌽继承

🍯选择器的权重

🚠长度单位

em

rem

布局

文档流

盒子模型

盒子模型（box model）

边框（border）

边框宽度（border-width）

边框颜色（border-color）

边框样式（border-style）

边框简写属性（border）常用

内边距（padding）

外边距（margin ）

总结

水平方向的布局

垂直方向的布局

垂直外边距的重叠

行内元素的盒子模型

display属性

visibility属性

清除浏览器默认样式

盒子尺寸计算方式（box-sizing）

轮廓（outline）

阴影（box-shadow）

圆角（border-radius）

浮动（float）

注意

浮动的特点

简单总结

浮动的其他特点（元素脱离文档流的特点）

clear属性

高度塌陷 & BFC

高度塌陷

BFC

解决高度塌陷

开启BFC

使用clear属性

clearfix类解决高度塌陷、外边距重叠

定位（position）

概述

偏移量

相对定位（relative）

绝对定位（absolute）

绝对定位元素的布局

水平布局

垂直方向布局

包含块

固定定位（fixed）

粘滞定位（sticky）

元素的层级（z-index）

其他几大块

字体（font）

color 字体颜色

font-size 字体大小

font-family 字体族

`em`

`rem`

使用`clear`属性

`clearfix`类解决高度塌陷、外边距重叠

`color` 字体颜色

`font-size` 字体大小

`font-family` 字体族

`@font-face`引用计算机上没有的字体

`line-height` 行高