p.s.这是萌新自己自学总结的笔记，如果想学习得更透彻的话还是请去看大佬的讲解
目录
CSS：层叠样式表，是一种样式表 语言，用来描述HTML文档的呈现(美化内容)
书写位置：title标签下方添加style双标签，style标签里面书写CSS代码
.
选择器
作用：查找标签，设置样式
基础选择器：
标签选择器
类选择器
id选择器
通配符选择器
标签选择器
使用标签名作为选择器，即选中同名标签设置相同的样式
例如p、h1、div、a、img
举例
html
<title>Title</title>
<!-- 特点：选中同名标签设置相同的格式，无法差异化同名标签 -->
<style>
p{
color: red;
}
</style>
</head>
<body>
<p>这是第一个段落</p>
<p>这是二个段落</p>
</body>类选择器
查找标签，差异化设置标签的显示效果
html
<title>Title</title>
<!--一个类选择器可以给多个标签使用-->
<style>
.red{
color: red;
}
.size{
font-size: 35px;
}
</style>
</head>
<body>
<!--一个标签可以使用多个类名-->
<p class="red size">这是第一个段落</p>
<p class="red">这是二个段落</p>
</body>id选择器
查找标签，差异化设置标签的显示效果
id选择器一般配合js使用，很少用来设置CSS样式
同一个id选择器在一个页面只能使用一次
html
<title>Title</title>
<style>
#red{
color: red;
}
</style>
</head>
<body>
<p id="red">这是第一个段落</p>
<p>这是二个段落</p>
</body>通配符选择器
查找页面所有标签，设置相同样式
不需要调用，浏览器查找页面所有标签，设置相同样式
html
<title>Title</title>
<style>
*{
color: red;
}
</style>
</head>
<body>
<p>这是第一个段落</p>
<p>这是二个段落</p>
</body>复合选择器
由两个或多个基础选择器，通过不同的方式组合而成
作用：更准确、更高效的选择目标元素(标签)
后代选择器
后代选择器:选中某元素的后代元素
语法：父选择器 子选择器{CSS属性}
举例
html
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div span{
color: skyblue;
}
div p span{
color: fuchsia;
}
</style>
</head>
<body>
<span>span 标签</span>
<div>
<span>div标签中的span标签</span>
<p>
<span>div标签中的p标签中的span标签</span>
</p>
</div>
</body>结构伪类选择器
作用：根据标签的结构关系查找元素
:nyh-child(公式)
作用：根据元素的结构关系查找多个元素
举例
html
<style>
li:first-child{
color: aqua;
}
li:last-child{
color: red;
}
li:nth-child(2){
color: blue;
}
li:nth-child(2n){
background-color: green;
}
li:nth-child(5n){
background-color:pink;
}
li:nth-child(n+5){
font-family: 楷体;
}
</style>
</head>
<body>
<ul>
<li>li 1</li>
<li>li 2</li>
<li>li 3</li>
<li>li 4</li>
<li>li 5</li>
<li>li 6</li>
<li>li 7</li>
</ul>伪元素选择器
作用：创建虚拟元素(伪元素)，用来摆放装饰性的内容
注意点：
content：""，用来设置伪元素的内容，如果没有内容，则引号留空即可
伪元素默认是行内显示模式 (宽高属性)
权重和标签选择器相同
举例
html
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
}
div:before{
content: "伪元素";
}
div:after{
content: "伪元素";
}
</style>
</head>
<body>
<div>真元素</div>
</body>子代选择器
子代选择器：选中某元素的子代元素(最近的子级)
语法：父选择器>子选择器{CSS属性}
举例
html
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div>span{
color: skyblue;
}
</style>
</head>
<body>
<span>span 标签</span>
<div>
<span>div标签中的span标签</span>
<p>
<span>div标签中的p标签中的span标签</span>
</p>
</div>
</body>并集选择器
并集选择器：选中多组标签设置相同的样式
语法:选择器1,选择器2,...,选择器n
举例
html
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div,
span,
p{
color: skyblue;
}
</style>
</head>
<body>
<span>span标签</span>
<div>div标签</div>
<p>p标签</p>
</body>交集选择器
交集选择器：选中同时满足多个条件的元素
语法:选择器1选择器2{CSS属性}
举例
html
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p.box{
color: skyblue;
}
</style>
</head>
<body>
<p class="box">p+box类标签</p>
<div class="box">div+box标签</div>
<p>p标签</p>
</body>伪类选择器
伪类选择器：伪类表示元素状态，选中元素的某个状态设置样式
鼠标悬停状态:选择器:hover{CSS属性}
举例
html
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div:hover{
color: skyblue;
}
.box:hover{
color: fuchsia;
}
</style>
</head>
<body>
<div>div标签</div>
<div class="box">div+box标签</div>
</body>
画盒子
html
<title>Title</title>
<style>
.box1{
width: 100px;
height: 100px;
background-color: aqua;
}
.box2{
width: 150px;
height: 150px;
background-color: fuchsia;
}
</style>
</head>
<body>
<div class="box1">div1</div>
<div class="box2">div2</div>
</body>字体
字体大小
html
<title>Title</title>
<style>
p{
/* 必须有单位，否则不生效 */
font-size:30px;
}
</style>
</head>
<body>
<p>测试字体大小</p>
</body>字体加粗
字体倾斜
html
<title>Title</title>
<style>
p{
font-style: italic;/* 倾斜 */
}
div{
font-style: normal;/* 清除倾斜 */
}
</style>
</head>
<body>
<p>测试字体倾斜</p>
<div>测试字体</div>
</body>行高
设置多行文本的间距
html
<title>Title</title>
<style>
p{
line-height: 30px;
}
</style>
</head>
<body>
<p>《泰拉瑞亚》是冒险之地！是神秘之地！是可让你塑造、捍卫、享受的大地。在《泰拉瑞亚》，你有无穷选择。手指发痒的动作游戏迷？建筑大师？收藏家？探险家？每个人都能找到自己想要的。
从建造基本的藏身之处开始，接着挖掘矿石及其他资源。探索并制作超过 500 种各式魔法、远程、近战、和召唤武器，以及盔甲，借助它们与数百种不同的敌怪战斗。很快，你将直面十多个巨大的 Boss。
还可以去钓鱼、骑上坐骑、找寻漂浮岛、为 NPC 建造房屋，有很多很多事情可以做。</p>
</body>当行文字垂直居中(不是水平居中)：使行高属性值等于盒子高度属性值
html
<title>Title</title>
<style>
div{
height: 100px;
background-color: skyblue;
line-height: 100px;
}
</style>
</head>
<body>
<div>《泰拉瑞亚》</div>
</body>字体族
html
<title>Title</title>
<style>
div{
font-family: 楷体;
}
</style>
</head>
<body>
<div>测试字体楷体</div>
<p>测试字体</p>
</body>font属性
通常在设置网页文字公共样式时使用
font是一个复合属性，即属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开
语法：(必须按顺序书写!)
html
div {
font:是否倾斜 是否加粗 字号/行高 字体;
}字号和字体值必须书写，否则font属性不生效
html
<title>Title</title>
<style>
div{
/* 文字倾斜、文字加粗、字体大小、行高、字体类型 */
font: italic 700 20px 楷体;
}
</style>
</head>
<body>
<div>测试字体楷体</div>
<p>测试字体</p>
</body>文本缩进
html
<title>Title</title>
<style>
p{
text-indent: 2em;
}
</style>
</head>
<body>
<p>《泰拉瑞亚》是冒险之地！是神秘之地！是可让你塑造、捍卫、享受的大地。在《泰拉瑞亚》，你有无穷选择。手指发痒的动作游戏迷？建筑大师？收藏家？探险家？每个人都能找到自己想要的。
从建造基本的藏身之处开始，接着挖掘矿石及其他资源。探索并制作超过 500 种各式魔法、远程、近战、和召唤武器，以及盔甲，借助它们与数百种不同的敌怪战斗。很快，你将直面十多个巨大的 Boss。
还可以去钓鱼、骑上坐骑、找寻漂浮岛、为 NPC 建造房屋，有很多很多事情可以做。</p>
</body>文本、图片对齐
html
<title>Title</title>
<style>
p{
text-align: right;
}
div{
text-align: center;
}
</style>
</head>
<body>
<p>《泰拉瑞亚》</p>
<hr>
<div>《泰拉瑞亚》</div>
<div>
<img src="kirara.jpg">
</div>
</body>文本修饰线
html
<title>Title</title>
<style>
p{
text-decoration: underline;
}
</style>
</head>
<body>
<p>测试文字下划线</p>
<div>测试文字</div>
</body>文字颜色
CSS三大特性
CSS特性：化简代码/定位问题，并解决问题
继承性、层叠性、优先级
背景属性
网页中，使用背景图实现装饰性的图片效果
注意:关键字取值方式写法，可以颠倒取值顺序
可以只写一个关键字，另一个方向默认为居中；数字只写一个值表示水平方向，垂直方向为居中
举例
html
<style>
div {
width: 400px;
height: 400px;
background-color: fuchsia;
/*背景图默认是平铺的效果*/
background-image: url("background.png");
/*在盒子上方显示背景图*/
background-repeat: no-repeat;
/*background-repeat: repeat;*/
/*background-repeat: repeat-x;*/
/*background-repeat: repeat-y;*/
/* 左上角 */
/*background-position: left top;*/
/* 右下角 */
background-position: right bottom;
/*也可以用xy坐标进行位置选定*/
}
</style>
显示模式
显示模式:标签(元素)的显示模式
作用：布局网页的时候，根据标签的显示模式选择合适的标签摆放内容
块级元素：
独占一行
宽度默认是父级的100%
添加宽高属性生效
.
如div标签
行内元素一行可以共存多个元素
尺寸由内容长度决定
添加宽高属性不生效
.
如span标签
行内块元素一行可以共存多个元素
尺寸由内容大小决定
添加宽高属性生效
.
如img标签
盒子模型
作用：布局网页，摆放盒子和内容
盒子模型一般由一下部分组成
- 内容区域：width & height
- 内边距：padding(出现在内容与盒子边缘之间)
- 边框线：border
- 外边距：margin(出现在盒子外面)
举例
html
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
padding: 10px;
border: 1px solid blue;
margin: 50px;
}
</style>
</head>
<body>
<div>div标签</div>
</body>边框线
属性名：border
属性值：边框线粗细 线条样式 颜色(不区分顺序)
设置单方向边框
属性名：border-方位名词
属性值：边框线粗细 线条样式 颜色(不区分顺序)
内边距
作用：设置内容与盒子边缘之间的距离
属性名：padding/padding-方位名词
外边距
作用：拉开两个盒子之间的距离
属性名：margin
与padding属性值写法、含义相同
尺寸计算
默认情况：
盒子尺寸 = 内容尺寸+border尺寸+内边距尺寸
结论：给盒子加border/padding会撑大盒子
使用内减模式解决：box-sizing:border-box
清楚默认样式
清楚标签默认的样式，比如默认的外边距
元素溢出
作用：控制溢出的元素的内容的显示方式
属性名：overflow
圆角
作用：设置元素的外边框为圆角
属性：border-radius
属性值：数字+px/百分比
属性值即为圆角半径
常见应用
正圆形状：给正方形盒子设置圆角属性值为宽高的一半
胶囊形状：给长方形盒子设置圆角的属性值为盒子高度的一半
阴影
作用：给元素设置阴影效果
属性名：box-shadow
属性值：x轴偏移量 y轴偏移量 模糊半径 扩散半径 颜色 内外阴影
举例
html
<style>
*{
/*清楚默认内外边距*/
margin: 0;
padding: 0;
/*内减模式*/
box-sizing: border-box;
}
#div1{
width: 200px;
height: 200px;
background-color: pink;
/*内边距*/
padding: 10px;
/*padding-top: 50px;*/
/*边框线*/
border: 1px solid blue;
/*border-left: pink;*/
/*外边距*/
margin: 50px;
/*设置圆角*/
/*border-radius: 10px;*/
/*分别设置四个圆角*/
border-radius: 10px 20px 10px 20px;
}
li{
/*去除列表的项目符号*/
list-style: none;
}
#div2{
width: 200px;
height: 200px;
background-color: red;
overflow: scroll;
}
</style>
</head>
<body>
<div id = "div1">div标签</div>
<div id = "div2">fbudsifagiufgeabfjsdkfalheuhfuvbfjdkhfieryiqgffbduvbsjkhfurhfsjk
fehufhuiefyiwuahfeuawihfeuwifhaweuifheaufheiabnvfcoJDi
eowhfalfjieoahbzlfuaeiwl</div>
</body>外边距问题--合并现象
场景：垂直排列的兄弟元素，上下margin会合并
现象：取两个margin中的较大值生效
外边距问题--塌陷问题
场景：父子级的标签，子级的添加上外边距会产生塌陷问题
现象：导致父级一起向下运动
解决方法：
取消子级margin，父级设置padding
父级设置overflow:hidden
父级设置border-top
行内元素-内外边距问题
场景：行内元素添加margin和padding，无法改变元素垂直位置
解决方法：给行内元素添加line-height可以改变垂直位置
浮动
标准流也叫文档流，指的是标签在页面中默认的排布规则，例如块元素独占一行，行内元素可以一行显示多个
浮动的本质作用是实现图文混排效果
浮动：让块元素水平排列
属性值：float
属性值
left：左对齐
right：右对齐
举例
html
<style>
/*特点：顶对齐，具备行内块显示模式特点；浮动的盒子会脱离标准流(即脱标)*/
.one{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.two{
width: 200px;
height: 200px;
background-color: orange;
/*float: right;*/
}
</style>
</head>
<body>
<div class="one">第一个盒子</div>
<div class="two">第二个盒子</div>
</body>清除浮动
场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度(可能导致页面布局错乱)
解决方法：清除浮动(清除浮动带来的影响)
.
方法一：额外标签法
在父级元素内容的最后一个添加一个块级元素，设置CSS属性clear:both
.
方法二：单伪元素法
html.clearfix ::after{ content: ""; display: block; clear: both; }.
方法三：双伪元素法(推荐)
html.clearfix ::before .clearfix ::after{ content: ""; display: table; } .clearfix ::after{ clear: both; }。
方法四：overflow
父元素添加CSS属性overflow：hidden
Flex布局
Flex布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力
Flex模型不会产生浮动布局中脱标现象，布局页面更简单、更灵活
设置方式：给父元素设置display:flex。子元素可以自动挤压或拉伸
- 组成部分：
- 弹性容器
- 弹性盒子
- 主轴：默认在水平方向
- 侧轴/交叉轴：默认在垂直方向
