HTML+CSS - 前端开发基础（2）- 必掌握知识点-#博学谷IT学习技术支持#-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44946585/article/details/125011358

文章目录

CSS
学习心得

CSS

外边距合并和塌陷

合并现象

垂直布局的块级元素，上下的 margin 会合并，结果两者之间的 margin 为其中的最大值。（所以只给一个盒子设置 margin 即可）【不会 1 + 1，谁大要谁】

塌陷现象

互相嵌套的块级元素（父子），子元素的 margin-top 会作用在父元素上，结果导致父元素一起下移。
❗❗ 解决办法：
1. 给父元素设置 border-top 或者 padding-top （分割父子元素的 margin-top）
2. 给父元素设置 overflow: hidden;
3. 转换成行内块元素
4. 设置浮动

行内元素的垂直内外边距

现象：用 margin 和 padding 改行内标签的垂直位置，结果不生效
解决办法：
1. 转显示模式
2. 加行高 line-height

结构伪类选择器

选择器
1. E:first-child {}
2. E:last-child {}
3. E:nth-child(n) {}
4. E:nth-last-child(n) {}
  n 的注意点：
  1. n 写数字从 1开始，n 写式子从 0开始
  2. 常见公式
    1. 偶数：2n、even
    2. 奇数：2n + 1、2n - 1、odd
    3. 找前 5 个：-n + 5
    4. 找第 5 个后面的：n + 5
伪元素：由 CSS 模拟出的标签效果（项目中用于装饰性的小图）
1. ::before在父元素内容的最前添加一个伪元素
2. ::after在父元素内容的最后添加一个伪元素
  注意：
  1. ❗ 必须设置cotent:'';属性才生效
  2. 伪元素默认是行内元素

❗ 浮动

标准流
规则:
1. 块级元素：从上往下、垂直布局、独占一行
2. 行内元素或行内块元素：从左往右，水平布局，空间不够自动折行
❗❗❗❗浮动
浮动的特点：
1. 浮动会脱标，在标准流不占位置
2. 浮动比标准流高半个级别，可以覆盖标准流中的元素
3. 下一个浮动元素会在上一个浮动元素后面左右浮动
4. 一行显示多个，可以设置宽高
CSS 书写顺序（浏览器执行效率更高）
1. 浮动 / display
2. 盒子模型
3. 文字样式
❗❗❗❗ 清除浮动
浮动的影响：父子级标签，子级浮动，父级没设高度，后面的标准流盒子会受影响。
解决方法：
1. 直接设置父元素高度
2. 额外标签法：
在父级的最后添加一个块级元素（div），并设置属性clear: both;
缺点：HTML 结构变复杂
3. 单伪元素清楚法：

.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

	4. 双伪元素清除法：

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}
.clearfix::after {
  clear: both;
}

	5. 给父元素设置  overflow: hidden;

CSS 定位

定位方式
1. 静态定位 static （默认）
2. 相对定位 relative
  - 相对于自己之前的位置进行移动
  - 占有原来的位置——>未脱标
  - 仍然具有标签原有的显示模式特点
  - 注意：如果 left 和 right 都有，以 left 为准；top 和 bottom 以 top 为准。
3. 绝对定位 absolute
  - 先找以及定位的父级，如果有这样的父级就以这个父级为参照物进行定位；如果有父级但父级没有定位，以浏览器窗口作为参照进行定位。
  - 脱标，不占位置
  - 改变标签的显示模式特点：具体行内块特点（在一行共存，宽高生效）（要设置宽高）
  - 注意：绝对定位的盒子不能使用左右 margin: auto 居中
    解决办法：
```
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
```
4. 固定定位 fixed
  - 脱标，不占位置
  - 改变位置参考浏览器窗口
  - 具备行内块特点（所以要设置宽高）
偏移值
方向属性名属性值
水平 left 数字+px
水平 right 数字+px
垂直 top 数字+px
垂直 bottom 数字+px
不同布局方式元素的层级关系：
- 标准流 < 浮动 < 定位
- 都设置了定位的元素，默认情况下，定位的盒子后来者居上。
  - z-index：整数; 取值越大，显示顺序越靠上，z-index的默认值是0
  - z-index 必须配合定位才生效

方向	属性名	属性值
水平	left	数字+px
水平	right	数字+px
垂直	top	数字+px
垂直	bottom	数字+px

CSS 进阶

垂直对齐方式（浏览器遇到行内和行内块标签当作文字处理，默认文字是按基线对齐）
- 属性名：vertical-align
- 属性值：baseline（默认、基线对齐）、top（顶部对齐）、middle（中部对齐）、bottom（底部对齐）
光标类型
- 属性名：cursor
- 属性值：default、pointer（小手效果）、text（工字型）、move（十字光标）
边框圆角
- 属性名：border-radius: 左上角右上角右下角左下角;
- 常见取值：数字+px、百分比
- 例：
  - 画一个正圆：border-radius: 50%;
  - 胶囊按钮：border-radius: 盒子高度的一半;
溢出部分显示效果
- 属性名：overflow
- 常见属性值：visible（默认值，溢出部分可见）、hidden（溢出部分隐藏）、scroll（无论是否溢出，都显示滚动条）、auto（根据是否溢出，自动显示或隐藏滚动条）
元素本身隐藏
- 常见属性：
  1. visibility: hidden（占位隐藏，工作中不常用）
  2. display: none（不占位隐藏）

CSS 样式补充

精灵图：
1. 优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度
2. 使用步骤
  1. 创建一个盒子，设置盒子的尺寸和小图尺寸相同
  2. 将精灵图设置为盒子的背景图片
  3. 使用 PxCook 测量，分别取负值给盒子的 background-position: x y
背景图片大小（设置背景图片的大小）

语法：background-size: 宽度高度;

取值	场景
数字+px	简单方便，常用
百分比	相对于当前盒子自身的宽高百分比
contain	将背景图片等比例缩放，直到不会超出盒子的最大
cover	将背景图片等比例缩放，直到刚好填满整个盒子没有空白

background 连写
background: color image repeat position/size;
注意： background-size 和 background 连写同时设置时，需要注意覆盖问题。
盒子阴影

属性名：box-shadow

参数	作用
h-shadow	必须，水平偏移量。允许负值
v-shadow	必须，垂直偏移量。允许负值
blur	可选，模糊度
spread	可选，阴影扩大
color	可选，阴影颜色
inset	可选，将阴影改为内部阴影

过渡

属性名：transition
常见取值：
- 参数取值
  过渡的属性 all：所有能过渡的属性都过渡、具体属性名如：width：只有width又过渡
  过渡的时长数字 + s（秒）

参数	取值
过渡的属性	`all`：所有能过渡的属性都过渡、`具体属性名如：width`：只有width又过渡
过渡的时长	数字 + s（秒）

写前端项目的准备工作

骨架认知

<!DOCTYPE html>	<!-- 文档类型声明，告诉浏览器该网页的 HTML 版本 -->
<html lang="en">	<!-- 标识网页使用的语言  zh-CN简体中文、en英文 -->
<head>
    <meta charset="UTF-8">	<!-- 规定网页的字符编码 UTF-8万国码 -->
    <!-- 兼容性问题 解决ie兼容性问题差 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 宽度 = 设备宽度 ：移动端网页的时候要用 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

SEO 简介

SEO：搜索引擎优化
SEO 三大标签
1. title：网页标题标签
2. description：网页描述标签 meta:description
3. Keywords：网页关键词标签meta:Keywords

ico 图标设置

显示在标签页标题左侧的小图标，习惯使用 .ico 格式的图标
常见代码：<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">（link: favicon）

❗❗ 项目文件夹准备

项目文件名
|— index.html --------------首页的 html 文件
|— favicon.ico --------------ico 图标
|— images --------------固定使用的图片素材，如： logo、样式修饰图片… 等
|— uploads --------------非固定使用的图片素材，如：商品图片、宣传图片…等
|— css --------------css 文件夹
   |— base.css --------------基础公共样式
   |— common.css --------------重复样式，如：头部、底部
   |— index.css --------------首页样式

index.html 引入 css 样式

<!-- 按顺序引入：外联式样式表后写的生效 -->
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/common.css"
<link rel="stylesheet" href="./css/index.css">