html基础、css基础（前端基础知识入门）
html以及css知识点总结
前言：大家好啊，我是小编达闻西。我相信在茫茫的文海之中相遇，这是一份莫大的缘分。在武侠小说中，遇见有缘人都会传你绝世神功，从而你就可以称霸武林，迎娶白富美，走上人生巅峰。而今天你遇到了我，而我就只是一个写代码的，我没有什么绝世神功，要找绝世神功建议你去崖底去找找。所以，我就把我之前在公司实习的时候，学到的html和css基础给你做了一个总结，我的话可能不够官方，都是我自己的大白话、再结合自己的一部分代码。有缘人、希望我的文章能给你的前端之路献上绵薄之力。陌生人、加油。
html总结xmind图
css总结xmind图
文章目录
- html以及css知识点总结
-
- html总结xmind图
- css总结xmind图
- html
-
- 一、html的相关概念
-
- html是什么?
- html5是什么?
- w3c是什么?
- xhtml是什么?
- html4.01是什么?
- 二、html的理论基础
-
- 2.1 一个基本的html的写法：
- 2.2 html的路径
- 2.3 html的文本标记内容
- 2.4 html的特殊符号
- 2.5 命名规范
- 三、元素的分类
-
- 3.1 常规分类
- 3.2 非常规元素
- 3.3 元素嵌套规则
- 3.4元素类型的转化
-
- 语法：
- 伪类选择器
- 注意：
- 四、html常用标签
-
- 4.1 最常用的
- 4.2 超链接
- 4.2 锚点链接
- 4.3 布局标签
- 五、html5新增标签
-
- 5.1 h5新增的结构化的标签
- 5.2 新增其他标签
- 5.3新增音影类标签
-
- 音频标签
- 视频标签
- 多媒体标签
- 5.4 表单新增的属性和标签
-
-
- 5.4.1表单新增的属性
- 5.4.2表单新增的标签
-
- 六、列表标签
-
- 6.1列表的注意事项
- 6.2无序列表ul
- 6.3有序列表ol
- 6.4定义列表
- 七、表单标签
-
- 7.1 表单介绍
- 7.2 一个表单的基本写法
- 7.3 在表单中：get和post的区别是什么？
- 7.4 表单域
- 7.5 表单按钮
- 7.6表单字段集
-
- 表单字段集
- lable标签：改善用户的鼠标体验
- 下拉列表
- 7.7 表单身上的bug
- 7.8 表单新增的属性和标签
-
- 7.8.1表单新增的属性
- 八、表格
-
-
- 8.1 表格合并的步骤思想
- 8.2 表格的具体写法
- 8.3 表格的属性
- 8.4 表格的标签
-
- css
-
- 一、css的基本概念
- 二、css的三种引入方式
-
- 2.1内联式
- 2.2内部式
- 2.3 外链式
- 三、css选择器
-
- 3.1基础选择器
- 注意：id名是唯一的，类名是可以有多个的
- 3.2 伪类选择器
-
- 伪类选择器
- 3.3 属性选择器
- 3.4 结构伪类选择器
- 3.5 UI状态伪类选择器
- 3.6 目标伪类选择器
- 3.7 选择器的优先级
-
-
-
- 计算权重之和，比较大小、越大越优先、一致就后者覆盖前者 （越精确越优先）
-
-
- 3.8 继承
- 四、浮动
-
- 4.1 浮动基础
- 4.2 清除浮动
-
- 清除浮动的三种方式
- 五、盒子模型
-
- 5.1 设置边框
-
- 边框线类型
- 边框线方向
- 边框示例代码
- 5.2 内边距
- 5.3 外边距
- 5.4 弹性盒子
-
- 5.4.1 主轴方向
- 5.4.2 侧轴方向
- 5.4.3 多轴
- 5.4.4 弹性盒子项目身上的属性
- 5.5 盒子模型的BUG
- 5.6 标准盒子模型和怪异盒子模型
- 六、文本相关属性
-
- 6.1 文本基础属性
- 字体大小
- 颜色的表示方式
- 字体类型
- 文字粗细
- 文字倾斜
- 文本修饰线
- 文本水平对齐--水平方向对齐
- 文本缩进
- 行高 --一行文本所占据的高度
- 其他属性
- 6.2 单行文本溢出
- 6.3 css3新增的属性
-
- 文字的阴影
- 盒子阴影
- 圆角边框：以值为半径画圆
- 背景图大小
- 七、 背景
-
- 7.1背景基础
- 7.2 背景和图片的选择
- 7.3 精灵图、雪碧图、sprites
- 7.4 背景渐变
-
- 线性渐变
- 径向渐变
- 重复渐变
- 7.5 透明度和背景图大小
-
- 透明度
- 背景图大小
- 八、定位
-
- 8.1 定位基础
-
- 语法：
- 8.2**定位方式**
-
- 小结：
- 8.3 z轴上的堆叠层次
- 8.4 盒子完全居中的两种方式
- 九、自适应
-
- 9.1 宽度自适应
- 9.2 高度自适应
-
- 1.不设置高度
- 2.使用百分比设置高度
- 3.使用最大最小高
- 十、移动端
-
- 10.1 移动端视口设置
- 10.2 移动端适配
- 十一、BFC
-
-
-
- ==触发、创建BFC的情况：==
-
-
- 十二、兼容性
-
-
- 1、什么是兼容性
-
- ==css3提出解决兼容性问题的方式：====添加私有前缀==
-
- 2、精灵图、雪碧图、sprites：多张小盒组合
- 3、常見的的兼容性問題
- 4、行内块元素水平方向上、元素与元素之间的间隔问题
- 5、表单元素垂直方向上没有对齐
- 6、margin的粘连问题
- 7、margin的塌陷问题
- 8、鼠标形状
- 十三、过渡和动画
-
- 13.1 过渡：需要碰触到之后触发
- 13.2 动画
-
- 定义动画：自己就可以动的画面
- 绑定动画、执行动画
- 十四、扩展知识
-
- 14.1 多列布局
- 14.2 转化、旋转、放缩
-
- 1、转换
- 2、旋转
- 3、放缩
- 14.3 三角形
- 14.4 粘性定位
html
一、html的相关概念
-
html是什么?
超文本标记语言
-
html5是什么?
html的最新版本+代指前端的相关技术
-
w3c是什么?
万维网联盟：中立非盈利的组织
-
xhtml是什么?
可扩展的html
-
html4.01是什么?
最经典的版本
二、html的理论基础
2.1 一个基本的html的写法：
-
<开始标签 属性=“属性值” 属性=“属性值”>被标记的内容
-
属性：是对标签进行细节描述的
-
注意事项
-
所有的符号都应该是英文输入状态下的符号
-
属性值可以是单引号或者双引号都可以
-
-
基础代码示例
<html> <head> <meta charset="utf-8"> <title>title> head> <body> 内容文字 <body> html>
2.2 html的路径
| 绝对路径 | 从盘符或者协议出发得到的路径 |
|---|---|
| 相对路径 | 从当前文件出发得到的路径 |
| 同级 | 直呼其名（默认./自动添加了的） |
| 上级 | …/ |
| 下级 | /文件名 |
2.3 html的文本标记内容
| 加粗 | < strong> < /strong> 或者< b>< /b> |
|---|---|
| 倾斜 | < em>< /em>或者< i>< /i> |
| 变大 | < big>< /big> 注意：浏览器默认·字体大小为16px，最小为12px |
| 变小 | < small> < /small> 注意：最小不能小于12px |
| 上标 | < sup> < /sup> 实例： 42 |
| 下标 | < sub> < /sub> 实例： H2O |
2.4 html的特殊符号
| & gt； | 大于 |
|---|---|
| & lt; | 小于 |
| & nbsp； | 小空格 |
| & emsp； | 大空格 |
| & copy； | 版权符号： |
| & reg; | 商权符号； |
2.5 命名规范
| 命名规范 | 注意 |
|---|---|
| 1 | 由数字、字母、下划线组成、不能数字开头 |
| 2 | 尽量使用对应内容英文 |
| 3 | 推荐使用驼峰命名（小驼峰命名） |
三、元素的分类
3.1 常规分类
- 块级元素：默认独占一整行、可以设置宽高、内外边距等
- 行级元素：有多宽设置多宽，不可以设置宽高、垂直方向的内外边距
- 行内块元素：有多宽占据多宽、可以设置宽高等
- 可变元素：根据周围元素决定自己的类型。
3.2 非常规元素
-
置换元素：浏览器根据元素的属性和属性值。决定渲染的什么效果【img、button、input】
-
非置换元素：不是置换元素的元素
3.3 元素嵌套规则
-
块级元素里面可以有任何元素、行级元素里面只能放行级元素
-
p元素里面就只能有行级元素
-
a元素可以包裹块级元素
-
ol、ul里面只能有li，li外面只能有ol、ul
3.4元素类型的转化
-
语法：
- display：block块级元素|inline-block行内块元素|inline行内元素|none隐藏（不占据原位置）
-
伪类选择器
- e:hover 鼠标悬停在e身上、并给e做样式
- e:hover f 鼠标悬停在e身上 给里面f做样式（显示隐藏 隐藏盒子属性）
-
注意：
- visibility：visible可见 |hidden隐藏；是会占据原位置的|display：none隐藏（不占据原位置）
四、html常用标签
4.1 最常用的
| 标题 ：hn | < hn>标题内容< /hn> n:1-6 |
|---|---|
| 段落： | < p> < /p> |
| 水平线 | < hr> |
| 换行 | < br> |
| 图片标签 |
4.2 超链接
-
概念：从一个位置跳到另一个位置
-
<a href="https:www.jd.com" target="_blank（新窗口页面） | _self(当前页面)">显示到网页的字体或者图片放置处a>
4.2 锚点链接
-
概念：就是实现在本页面的相关跳转
-
语法
<a href="#对应区域的id名">链接的内容a> <div id="区域的id名">区域内的内容div> -
代码示例
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <style> div{ height: 300px; width: 100%; /* background-color: skyblue; */ border: 1px red solid; } .right{ width: 85px; height: 150px; background-color: pink; position: fixed; right: 0; top: 50%; line-height: 30px; } style> head> <body> <div id="content1">内容1div> <div id="content2">内容2div> <div id="content3">内容3div> <div id="content4">内容4div> <div class="right"> <a href="#content1">跳到内容1a> <a href="#content2">跳到内容2a> <a href="#content3">跳到内容3a> <a href="#content4">跳到内容4a> div> body> html>
4.3 布局标签
-
div:默认独占整行，可以设置宽高
<div>块级标签div> -
span: 有多宽占据多款，无法设置宽高
<span>行及标签（无意义标签）span> -
使用方法：
- 当一行内容种有某些内容有特殊样式的时候，使用span，其他的时候用div
-
盒子模型（扩展）：
- 概念：是一种思维模型，主要用于实现布局效果。由尺寸大小+内边距+外边距+边框组成
五、html5新增标签
5.1 h5新增的结构化的标签
-
优点：
- 方便SEO
- 代码具有可读性、方便更新和维护
- 有意义的标签、见名知意。提倡用正确的标签去描述对应的内容。
-
h5新增的结构化的标签
页头 < header>< /header> 导航 nav 主体 main 侧栏 aside 文章 article 页脚 footer 独立的区域 section
5.2 新增其他标签
-
图文列表标签
<figure> <img> <figure>内容figure> figure> -
高亮标签：
<mark>黄色mark> -
标题组：
<hgroup>hgroup> -
对话框：
<dialog open>内容dialog>[有open属性才能实现显示、没有就隐藏] -
画布：
<canvas><canvas>
5.3新增音影类标签
-
音频标签
<audio controls autoplay loop> <source src="放资源的路径"> audio> 说明： controls是播放控件。不添加就没有进度条 autoplay：自动不妨、谷歌不支持 loop：循环 如果没有source标签、可以将src放在audio身上 多个source、会按顺序解析类型是否支持、支持就播放、不支持就往下解析。。。不支持给提示 -
视频标签
<video controls width="" height="" poster=''> <source src='路径'> video> -
多媒体标签
<embed src='图片、视频、音频的路径'>
5.4 表单新增的属性和标签
5.4.1表单新增的属性
-
form
<form novalidate autocomplete='on / off'>form>novalidate 设置表单不做验证(提交一次后自动填充) autocomplete 设置是否打开提示 -
input
<input type="" name="" value="值" placeholder="占位符" autofocus minlength="最小长度" maxlength="最长长度" multiple required checked>autofocus 自动获取焦点 minlength 最小长度 maxlength 最大长度 multiple 设置多选（选中文件的时候可以多选type=‘file’） required 设置为必选（条款选项不看不通过按钮） checked 只有单选和复选有该属性、实现默认选项已选中 readonly 只能读
5.4.2表单新增的标签
- 数据列表datalist（热搜相关）
<input list="对应的datalist的id值">
<datalist id="">
<option value="值">内容option>
datalist>
注意事项；有值就会显示值和内容、没有就会显示内容、但是不可以value值为空；
- 输出：< output>< /output>
六、列表标签
6.1列表的注意事项
- ul/ol里面只能由li标签
- li外面的标签只能是ul、ol包裹
- li里面可以有任何元素
6.2无序列表ul
-
代码演示
<ul> <li>列表项li> <li>列表项li> ul>
6.3有序列表ol
-
代码示例
<ol> <li>列表项目li> <li>列表项目li> ol>
6.4定义列表
-
用处：商场导航、图文列表时，很少用到
-
代码示例
<dl> <dt>零食分区dt> <dd>旺仔小饼干dd> <dd>旺仔果冻dd> <dt>饮料分区dt> <dd>可乐dd> <dd>雪碧dd> dl>
七、表单标签
7.1 表单介绍
| 名称 | 概念 |
|---|---|
| 表单标签 | 负责数据提交的地址和方式 |
| 表单域 | 数据填入的部分 |
| 表单按钮 | 负责时间的标识（提交按钮、重置按钮、普通按钮） |
| 表单 | 页面中负责数据采集功能的 |
7.2 一个表单的基本写法
<form action='数据提交的地址' method="数据提交的方式 get|post">
表单域
表单按钮
form>
7.3 在表单中：get和post的区别是什么？
| get | post |
|---|---|
| 小，快，不安全（数据量小、不太安全、传输速度快） | 大，慢，相对安全 |
| 会追加到地址栏上面 | 不会追加到地址栏上，会以服务器的方式 |
| 2Kb | 4MB |
7.4 表单域
| 表单域 | 写法 |
|---|---|
| 文本输入框 | < input type=‘text’ name=‘名字’> |
| 密码输入框 | < input type=‘password’ name=‘password’> |
| 单选输入框 | < input type=‘radio’ name=“名字”> |
| 复选输入框 | < input type=“checkbox”> |
| 文件 | < input type=‘file’> |
| 隐藏域 | < input type=‘hidden’ value=‘要提交的值’> |
| 提交 | < input type=‘submit’ value=‘按钮上的值’> |
| 重置 | < input type=‘reset’ value=‘按钮上的值’> |
| 普通 | < input type=‘button’ value=‘按钮上的值’> |
7.5 表单按钮
| 提交按钮 | < button type=‘submit’>提交按钮< /button> |
|---|---|
| 重置按钮 | < button type=‘reset’>重置按钮< /button> |
| 普通按钮 | < button type=‘button’>普通按钮< /button> |
7.6表单字段集
-
表单字段集
<fieldset> <legend>字段集的标题< /legend> < /fieldset> -
lable标签：改善用户的鼠标体验
<input id="id名"> <label for="要关联选项的id名">内容< /label>语法2
<label> <input>要关联的内容 <label> -
下拉列表
<select name="" > <option value="值">内容option> <option value="值">内容option> select> 提交的时候、先提交value的值、如果没有设置value属性 提交option的内容option的属性selected代表默认选中该选项 -
多行文本域
-
注意：标签之间不能有任何的空格和换行
<textarea name="" placeholder="">textarea>
-
7.7 表单身上的bug
- 行内块元素水平方向上、元素与元素之间的间隔问题
- 设置浮动
- 给表单元素设置vertical-align、属性值不为默认值即可
7.8 表单新增的属性和标签
7.8.1表单新增的属性
-
form
<form novalidate autocomplete='on / off'>form>novalidate 设置表单不做验证(提交一次后自动填充) autocomplete 设置是否打开提示 -
input
<input type="" name="" value="值" placeholder="占位符" autofocus minlength="最小长度" maxlength="最长长度" multiple required checked>autofocus 自动获取焦点 minlength 最小长度 maxlength 最大长度 multiple 设置多选（选中文件的时候可以多选type=‘file’） required 设置为必选（条款选项不看不通过按钮） checked 只有单选和复选有该属性、实现默认选项已选中 readonly 只能读
7.8.1表单新增的标签
- 数据列表datalist（热搜相关）
<input list="对应的datalist的id值">
<datalist id="">
<option value="值">内容option>
datalist>
注意事项；有值就会显示值和内容、没有就会显示内容、但是不可以value值为空；
八、表格
8.1 表格合并的步骤思想
| 第一步 | 实现基本表格 |
|---|---|
| 第二步 | 判定跨行还是跨列，给单元格添加属性（colspan跨列|rowspan跨行） |
| 第三步 | 属性值是占据的单元格数量，有几格写几个数字 |
| 第四步 | 给对应行多的单元格删除{从后往前删除} |
8.2 表格的具体写法
-
表格快速生成语法：
table>tr*3行>td*3列 -
表格具体写法：
<table border='边框粗度' cellspacing='双线边框之间的间隔' cellpadding='边框和内容之间的间隔'> <tr> <td>内容（单元格）td> <td colspan="2（跨两列）">td> <td rowspan="2（跨两行）">td> tr> table>
8.3 表格的属性
-
border-spacing：*px； 表格双线边框之间的间隔
-
border-collapse:collapse; 表格细边框 【如果要实现真正意义上的细边框，需要td也设置边框】
-
table-layout：fixed； 单元格按价等分
- 注意事项：必须要给table设置宽度才生效
-
empt-cells:hide|show；空单元格是否显示
-
caption-side：left | right |top |bottom；设置表格标题的位置
8.4 表格的标签
- < thead> < /thead>头
- < body>< /body>身体
- < tfoot>< /tfoot>脚
- 注意事项：如果没有设置行分组标签、会自动添加tbody包裹所有的tr
- table>tbody>tr
- < caption>< /caption>
- 注意事项：如果没有设置行分组标签、会自动添加tbody包裹所有的tr
css
一、css的基本概念
-
css层叠样式表：多个样式可以叠加在一个元素身上
-
语法
选择器： { 属性：属性值； 属性：属性值； }
二、css的三种引入方式
概念：
| 内联式、行内式 | 在标签里面加一个style标签直接写css样式 |
|---|---|
| 内部式 | 就是在head头部里面加一个style标签，在里面写样式 |
| 外链式 | 新建一个.css文件夹，在文件夹里面去写css代码，然后引入进来 |
2.1内联式
<p style="color: pink;font-size: 40px;">这是一段话p>
2.2内部式
DOCTYPE html>
<html lang="en">
<head>
<style>
p{
color: pink;
font-size: 40px;
}
style>
head>
<body>
<p>使用内部式，变换样式p>
body>
html>
2.3 外链式
-
新建一个以,css为后缀的css文件
-
在head标签里面写link标签
<head> <link rel="stylesheet" href="css文件路径"> head> -
在css文件里面写对应代码
-
代码示例
DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="./4、外链.css"> head> <body> <p>这是使用外链式的代码p> body> html>css代码：
p{ color: pink; font-size: 40px; }
三、css选择器
3.1基础选择器
-
通配符*选中所有的元素
*{ } -
标签选择器 --选中所有对应的标签
标签名（a|P）{ } -
id选择器 --选中指定id名
<head> #id名{ } head> <元素 id=“自己取得名字”>内容<元素> -
类选择器 --选中所有指定类名的元素
.类名{} <元素 class="自己取得类名">内容元素> --类名就是属性值注意：id名是唯一的，类名是可以有多个的
- 项目中给大盒子使用id名，里面的元素使用类名 （id优先级最高）
3.2 伪类选择器
伪类选择器
- e:hover 鼠标悬停在e身上、并给e做样式
- e:hover f 鼠标悬停在e身上 给里面f做样式（显示隐藏 隐藏盒子属性）
3.3 属性选择器
| 选中有attr属性的元素e | e[attr] |
|---|---|
| 选中有attr属性的值为val的元素e | e[ attr=‘val’] |
| 选中有attr属性的值为val开头的元素e | e[ attr^=‘val’] |
| 选中有attr属性的值为val结尾的元素e | e[attr$=‘val’] |
3.4 结构伪类选择器
child系列
| e:first-child | 选中第一个元素e |
|---|---|
| e:last-child | 选中最后一个元素e |
| e:nth-child | 选中第n个元素 |
| e:nth-last-child | 选中倒数第n个元素 |
| n是一个乘法因子 | 可以是数字，单词even偶数、odd奇数、可以是带n的数学表达式 |
| e:only-child | 选中唯一元素e【场景判定】 |
| 注意事项 | child系列强调的是元素在父元素的所有子元素中的排序 |
tupe系列强调的是元素在所有同类型的兄弟元素之间的排序
#search .container div:nth-child(2){
width: 64px;
height: 20px;
background-color: red;
}
3.5 UI状态伪类选择器
| e:enbled | 可用的e元素设置样式 |
|---|---|
| e:disabled | 不可用的e元素设置样式 |
| e：cheched | 给选中的元素e设置样式 |
3.6 目标伪类选择器
e:target=>当选中e是目标元素的时候
3.7 选择器的优先级
计算权重之和，比较大小、越大越优先、一致就后者覆盖前者 （越精确越优先）
| 优先级等级 | 类别 |
|---|---|
| 无穷 | ！important（属性：属性值 ！important；） |
| 1000 | 行内样式{内嵌式} |
| 100 | id |
| 10 | class |
| 1 | 标签 |
| 0 | * |
| -1 | 继承 |
| -2 | 默认 |
3.8 继承
- 概念：有上下级关系的元素之间、上级元素的样式被下级元素拥有
- 文本的相关样式
- 列表相关的样式
- 注意事项：
- a标签的的自带样式优先级高于继承{所以当需要更改a标签的样式的时候需要去到a标签里面}
- 可以使用继承的属性（扩展）
- word-break：break-all；单词是否打断
- word-wrap：break-word；单词是否换行
四、浮动
4.1 浮动基础
-
概念：是一种布局属性，实现一行多列的效果
-
作用：
-
实现多个元素横着排列
-
实现元素周围有文字环境[ 图文环绕]
-
-
三种写法
float浮动 三种写法 float（左边） left float (右边) right float (不浮动) none
4.2 清除浮动
- 解决问题：当希望高度自适应的时候，不设置高度，但是子元素设置了浮动就会脱离文档流，造成高度塌陷，这个时候我们就可以使用清除浮动
清除浮动的三种方式
清楚浮动、高度塌陷的解决方案：
方案1：
给浮动元素最后一个添加一个空的兄弟元素div
给div设置类名clear
设置样式 .clear{clear:both |left |right;}
注意：加的元素不能有任何其他的样式和内容
方案2：(推荐指数：满天星)
给浮动元素元素的父亲添加类名clearfix;
设置样式
.clearfix:after{
display:block; 设置是一个块元素
content:''; 设置内容为空
clear:both; 清除浮动
height:0; 解决兼容问题
}
方案3：
给浮动元素的父亲设置overflow：hidden;
五、盒子模型
概念：是一种思维模型，主要用于实现布局效果。由尺寸大小+内边距+外边距+边框组成
5.1 设置边框
border：*px（线的宽度） solid（线的形状） red（边框的颜色）;
边框线类型
| solid | 实线 |
|---|---|
| dashed | 虚线 |
| dotted | 点线 |
| double | 双线 |
边框线方向
| 设置上边框 | border-top 线性 边框的颜色 |
|---|---|
| 设置下边框 | border-bottom |
| 设置左边框 | border-left |
| 设置右边框 | border-right |
复合和单个同时出现，单个效果在复合后面
边框示例代码
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.size{
width: 400px;
height: 300px;
border-top: 10px dashed green;
border-left: 10px double red;
border-right: 10px solid blue;
border-bottom: 10px dotted blue;
}
style>
head>
<body>
<div class="size">
div>
body>
html>
5.2 内边距
概念：盒子边框和内容之间的距离
| 设置上内边距 | padding-top： *px； |
|---|---|
| 设置右内边距 | padding-right： *px； |
| 设置下内边距 | padding-bottom： *px； |
| 设置左内边距 | padding-left： *px； |
| 设置四个边的内边距 | padding：*px；属性值可以是1-4个，顺时针出发。有缺时取对边 |
5.3 外边距
| 设置上外边距 | margin-top： *px； |
|---|---|
| 设置右外边距 | margin-right： *px； |
| 设置下外边距 | margin-bottom： *px； |
| 设置左外边距 | margin-left： *px； |
| 设置四个边的外边距 | margin：*px；属性值可以是1-4个，顺时针出发。有缺时取对边 |
5.4 弹性盒子
概念：是一种新的布局模式、主要应用于手机端、让元素有能力控制子元素的排列
5.4.1 主轴方向
- flex-direction:参数（决定排列的方向）
- row
- column
- row-reverse
- column-reverse
- 项目在主轴身上的排列样式
- justify-content：参数；
- flex-start
- center中间
- flex-end终点
- space-between间隔之间
- space-around周围
- space-evenly均分
- justify-content：参数；
5.4.2 侧轴方向
- align-items：参数；
- stretch拉伸 注意：默认是stretch拉伸铺满整个容器，但是如果项目设置了高度就以高度为准。
- flex-start起点
- flex-end终点
- center中间
- baseline基线
5.4.3 多轴
多根轴线侧轴的排列设置【单根无效】
- align-content：参数；
- flex-start
- center中间
- flex-end终点
- space-between间隔之间
- space-around周围
- space-evenly均分
5.4.4 弹性盒子项目身上的属性
-
项目中的排序【了解】
order:*; 默认为0，从小到大的顺序排列 -
项目是否缩小
flex-shrink:*; 默认是1，会缩小，设置为0，不缩小。 如果是其他值，就用需要缩小的值，除以所有项目的flex-shrink的总和，得到一份的值、然后每个项目缩小指定份数 -
项目是否放大
flex-grow:*; 默认是0，不放大，设置为1，会放大 -
项目的基准尺寸【了解】
flex-basis:*px;等价于width -
项目的复合属性
flex:flex-grow flex-shrink flex-basis; 说明：flex:1;代表的含义是1 1 auto； -
项目单独的排列方式
align-self:stretch拉伸 |flex-start |center |flex-end |baseline基线；
5.5 盒子模型的BUG
-
粘连问题、父岁子动（可内可外，一定用内）
-
解决方案1：给父元素设置padding来实现（记得修改padding撑大后的值）
-
解决方案2：给父元素添加一个上边框。
border:1px solid transparent(透明色); -
解决方案3：给父元素添加overflow:hidden；
-
-
塌陷问题：在mrgin垂直方向上，边距大的会吃掉小的
- 解决方案：在一个元素身上设置足够的间隔
-
注意事项：在做项目之前先清除所有元素的内外边距
-
盒子水平居中
margin：0 auto；
5.6 标准盒子模型和怪异盒子模型
-
他们都是盒子模型、只是模式不一样、元素实际占据的宽高的计算方式不一致
-
标准模式下实际占据的宽度= width + border + padding + margin
-
怪异模式下实际占据的宽度= width + margin
设置盒子模型的语法：
- box-sizing:border-box怪异盒子 | content-box 标准模式；
- 【默认情况标准模式、没有文档声明的就是怪异盒子】
六、文本相关属性
6.1 文本基础属性
-
字体大小
- font-size：*px | *em | *rem；
- px是像素、绝对尺寸
- em是相对尺寸、是父元素文字大小的倍数
- rem是相对尺寸、是根元素html文字大小的倍数
- pc使用px，移动端使用的em、rem
-
颜色的表示方式
-
四种表示方式 颜色表示 1 英文单词 2 #16进制 3 rgb（R，G，B） ； 4 rgba（R,G,B,a（0-1））；
-
-
字体类型
-
font-family:'类型一'，'类型二';
-
-
文字粗细
-
注意不带单位
-
400|normal ：正常
-
700|bold：加粗
font-weight：100-900;
-
-
文字倾斜
font-style:normal； 正常 font-style:italic； 倾斜 font-style:oblique； 倾斜 -
文本修饰线
text-decoration:none； 无修饰线 text-decoration:through； 删除线 text-decoration:underline； 下划线 -
文本水平对齐–水平方向对齐
-
注意：行级元素不能使用该元素
-
text-align:left|center|right|justify两端对齐
-
-
-
文本缩进
text-indent:*px |*em; -
行高 --一行文本所占据的高度
- line-height：*px；
- 应用：单行文本垂直居中
- 多行文本调整整行间距
-
其他属性
- font：字体的复合属性
- letter-spacing：*px；字间距
- word-spacing：*px；词间距
6.2 单行文本溢出
| 设置宽度 | width：*px； |
|---|---|
| 强制不换行 | white-sapce：nowrap； |
| 超出隐藏 | overflow：hidden； |
| 溢出的标识是省略号 | text-overflow：ellipsis； |
white-space：参数；
-
normal正常
-
nowrap不换行
-
pre保留空格以及换行
overflow：参数；
-
hidden：隐藏
-
auto：自动判定是否需要滚动条
-
visible：可见的； 【内容超出的时候的相关设置】
-
scroll 必须有滚动条
text-overflow：参数；
-
clip:裁剪
-
ellipsis：省略号【文本溢出的标识的设置】
6.3 css3新增的属性
-
文字的阴影
- text-shadow：x的偏移、y的偏移 模糊程度 阴影的颜色
-
盒子阴影
- box-shadow：x的偏移、y的偏移 模糊程度 延生半径 阴影的颜色 inset；
- inset不要，就只有外阴影、要就是内阴影
-
圆角边框：以值为半径画圆
- border-radius：*px | *%;
- 正圆：保证宽高一样、50%；否则是椭圆
- 胶囊状：横着的圆角，高度的一半
-
背景图大小
- background-size:宽度 高度；
-
英文大小写转换
- text-transform:lowercase小写 | uppercase大写 | capitalize首字母大写
-
word-break:break-all; 单词是否打断（继承相关属性）
- word-wrap:break-word; 单词是否换行
七、 背景
7.1背景基础
背景的复合属性
background:颜色 url（路径） 重复方式 x的位置 y的位置 ;[不分先后以及个数]
背景相关属性
| 背景颜色 | background-color：颜色； |
|---|---|
| 背景图片 | background-image：url（图片地址）； |
| 背景图的平铺方式【重复】 | background-repeat：np-repeat；【不重复】 |
| 背景图的起始位置 | background-position：x的位置，y的位置； |
| 背景图固定 | background-attachment:fixed;[了解] |
7.2 背景和图片的选择
使用图片
- 经常更换的图片、使用img 【 广告】
- 数据从数据库来的、使用img【产品图等】
- 网页的结构使用img 【logo】
使用背景
- 不经常更换、精灵图。使用背景图实现图片
代码示例：
DOCTYPE html>
<html lang="en">
<head>
<style>
.banner{
width: 590px;
height: 470px;
border: 3px solid red;
margin-left: 60px;
position: relative;
}
.banner div{
width: 20px;
height: 60px;
background-color: skyblue;
}
.left{
position: absolute;
left:0%;
top: 50%;
margin-top: -30px;
}
.right{
position: absolute;
right:0%;
top: 50%;
margin-top:-30px;
}
style>
head>
<body>
<div class="banner">
<a href="https:www.jd.com"><img width="590" height="470" src="https://img20.360buyimg.com/pop/s1180x940_jfs/t1/219820/23/14530/71295/6231376dE48d3177e/3ffd0f997591be3b.jpg.webp" alt="jd">a>
<div class="left"><div>
<div class="right">>div>
div>
body>
html>
7.3 精灵图、雪碧图、sprites
步骤：
-
1、实现一个指定大小的盒子
-
2、将精灵图设置成盒子的背景图
-
3、设置背景图的起始位置、调整出想要的背景图的位置【background-position】
-
精灵图的优点 精灵图的缺点 减少请求、提升性能 步骤繁琐 减少文件数量、降低命名难度 增删图片麻烦 减少内存占用
-
7.4 背景渐变
线性渐变
-
普通渐变
background: linear-gradient(颜色1，颜色2); -
设置渐变方向
background: linear-gradient(to 方向，颜色1，颜色2..); -
设置对角渐变
background: linear-gradient(to 方向1，方向2，颜色1，颜色2); -
设置渐变角度
background: linear-gradient(*deg， 颜色1，颜色2); -
设置渐变比例
background: linear-gradient(颜色1，*%，颜色2，*%。。);
径向渐变
-
设置普通渐变
background: radial-gradient(颜色1，颜色2...); -
设置渐变比例
background: radial-gradient(颜色1，*%，颜色2 *%..); -
设置渐变图形
background: radial-gradient(circle圆或者ellipse椭圆，颜色1，*%，颜色2 *%..);
重复渐变
注意事项：必须要有比例才能看到效果
-
设置重复线性渐变
background: raepeating-linear-gradient(颜色1，*%，颜色2，*%。。); -
设置重复径向渐变
background: -linear-gradient(颜色1，*%，颜色2，*%。。);
7.5 透明度和背景图大小
透明度
- opacity：0-1的数字；
- filter：alpha（opactiy =0-100的数字）；【低版本兼容写法】
- 0代表完全透明
背景图大小
background-size:宽度 高度；
八、定位
8.1 定位基础
概念：将元素放在指定的位置上：以后特指position
语法：
-
position：定位方式；
-
left：*px；或者 right： *px；
-
top：*px；或者bottom： *px；
-
注意事项
- 不同的定位方式区别在于；元素的参照不一样；
8.2定位方式
- static静态定位。元素自带的定位方式
- fixed固定定位：基于浏览器当前屏幕进行定位
- position：fixed；
- left：*px；或者 right： *px；
- top：*px；或者bottom： *px；
- relative相对定位：基于元素自身所在的位置进行定位
- position：relative；
- left：*px；或者 right： *px；
- top：*px；或者bottom： *px；
4.absolute绝对定位：基于最近的被设置非静态定位的上级元素进行定位，如果没有就基于浏览器第一屏
- position：absolute；
- left：*px；或者 right： *px；
- top：*px；或者bottom： *px；
- 常用场景：子绝父相
小结：
- 绝对定位和固定定位会脱离文档流
- 如果块级元素没有设置宽度、设置了绝对或者固定定位之后、元素的宽度由内容决定
8.3 z轴上的堆叠层次
- z-index：数字
- 元素默认的值为0.值可正可负
- 大的覆盖小的
- 注意：该元素要生效、元素身上必须有设置非静态定位
8.4 盒子完全居中的两种方式
-
第一种
- position：fixed；
- top：50%；
- left：50%；
- margin-left:-150px;
- margin-top:-150px;
-
第二种
- position:fixed;
- top:0;
- bottom: 0;
- left: 0;
- right: 0;
- margin: auto;
DOCTYPE html>
<html lang="en">
<head>
<style>
body{
height: 3000px;
background-color: pink;
}
.right{
border:1px red solid;
background-color: blue;
height: 300px;
width: 300px;
/* 第一种居中方式 */
/* position: fixed;
left: 50%;
margin-left:-150px;
top: 50%;
margin-top:-150px; */
/* 第二种居中方式 */
position:fixed;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
style>
head>
<body>
<div class="right">
div>
body>
html>
九、自适应
概念：
- 自适应：能够根据设备类型、大小等自动调整元素的大小、以保证得到一个正常的效果
- 响应式：利用媒体查询、可以根据设备的类型、设备的大小等自动调整样式得到一个正常的效果
- 原理：媒体查询。关键字是==@media==
9.1 宽度自适应
-
不设置宽度
-
使用百分比
-
使用最大最小宽度
max-width：*px; 设置最大宽度 min-width：*px; 设置最小宽度 -
在项目中的整屏 的盒子设置最小宽度为版心的宽度
9.2 高度自适应
1.不设置高度
-
注意存在问题：
- 子元素如果设置了浮动、元素会脱离文档流，造成高度塌陷【清除浮动】
清楚浮动、高度塌陷的解决方案： 方案1： 给浮动元素最后一个添加一个空的兄弟元素div 给div设置类名clear 设置样式 .clear{clear:both |left |right;} 注意：加的元素不能有任何其他的样式和内容 方案2：(推荐指数：满天星) 给浮动元素元素的父亲添加类名clearfix; 设置样式 .clearfix:after{ display:block; 设置是一个块元素 content:''; 设置内容为空 clear:both; 清除浮动 height:0; 解决兼容问题 } 方案3： 给浮动元素的父亲设置overflow：hidden; -
代码示例
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <style> .clearfix{ width: 100%; background-color: pink; } .clearfix .box1{ border: 1px red solid; width: 100px; height: 100px; float: left; } /* .wrap .clear{ clear: both; } */ .clearfix:after{ display: block; content: ''; clear: both; height: 0; } style> head> <body> <div class="clearfix wrap"> <div class="box1">div> <div class="box1">div> <div class="box1">div> div> body> html>
注意事项：在项目中给高度可变的盒子不设置高度了，如果遇到浮动、就记得给他的父元素添加类名clearfix，清楚浮动。
2.使用百分比设置高度
-
如果要实现一整屏的页面，需要设置
html,body{ height:100%; }
3.使用最大最小高
min-height:*px; 最小高度
max-height:*px; 最大高度
十、移动端
10.1 移动端视口设置
-
css像素：逻辑像素-写代码使用的单位
-
物理像素：设备像素-屏幕出厂就决定了的像素
-
dpr = 物理像素/ 逻辑像素
-
视觉视口：看到的区域
-
布局视口:整个网页区域
-
理想视口：视觉视口：布局视口 = 1：1
-
设置移动端视口
<meta name="viewport" content="width=device-width, initial-scale=1.0">- width=device-width宽高等于设备宽度
- initial-scale=1.0 初始比例是1
- maximum-scale=1.0 可变的最大比例为1
- minimum-scale=1.0 可变的最小比例为1
- user-scalable=no 用户不可改变比例
-
1px边框问题：
- 使用图片背景图
- 0.5px+transfrom的缩放
10.2 移动端适配
- 使用百分比
- 使用rem单位+js实现
- 750的视口，约定html的文字大小为100px
- 1rem=100px;
- 获取视口的宽度，然后动态的改变html的文字大小、以达到对应以rem为单位的元素的大小的改变、从而适配
- 将插件的html的值改成对应的大小 【750设计稿html文字大小为100】
- 将代码中的px转为rem单位
- 引入js文件、达到判定不同视口改变对应文字大小的效果，实现适配
- < script>< /script>
- 使用vw和vh
- 视口的宽度=100vw
- 视口的高度=100vh
- 可以用来实现整屏页面
- vw是单位、视口的宽度是100vw
十一、BFC
-
概念：快格式化上下文、是一个独立的区域、区域与区域之间不会互相影响。
-
触发、创建BFC的情况：
- 1、浮动
- 2、定位-position的值威fixed或者absolute
- 3、overflow的值不为默认值visible的时候都会 【auto|hidden|scroll】
- 4、dispaly的值为flex |inline-flex |inlin-block；
-
BFC的应用：
-
解决margin的bug
-
清除浮动
-
实现两列的自适应布局
左边固定宽度，左边左浮动。右边不设置宽度，设置overflow:hidden
-
十二、兼容性
1、什么是兼容性
-
概念：浏览器厂商不一样、解析不一样、导致页面效果不一样
-
hack：针对特定的浏览器、写特定的代码、以达到页面效果统一
-
==css3提出解决兼容性问题的方式：==添加私有前缀
-
前缀 代表浏览器 浏览器内核
-
前缀 代表浏览器 浏览器内核 -o- 欧朋 presto -ms- IE trident -moz- 火狐 gecko -webkit- 谷歌safari webkit 欧朋和谷歌联合开发 blink
-
2、精灵图、雪碧图、sprites：多张小盒组合
-
步骤：
-
1、实现一个指定大小的盒子
-
2、将精灵图设置成盒子的背景图
-
3、设置背景图的起始位置、调整出想要的背景图的位置【background-position】
-
精灵图的优点 精灵图的缺点 减少请求、提升性能 步骤繁琐 减少文件数量、降低命名难度 增删图片麻烦 减少内存占用
-
-
3、常見的的兼容性問題
-
图片3px问题：解决的两种方式
- vertical-align：top | middle | bottom
- 给图片设置成块元素
-
图片外面有链接、在低版本浏览器会有边框
- 给图片设置border:none;
-
图片是png24格式的时候、子低版本会显示成不透明的样子
- 保存png8
- 保存成gif
| gif | 动图 |
|---|---|
| svg | 矢量图、放大缩小不失帧 |
| jpg | 可以提高、降低图片压缩级别、会自动填充透明色为白色 |
| png | 带透明格式 |
切图步骤
- 移动工具状态下、按住alt键盘、鼠标单击右键、可以快速定位到图层
- 将不相干的图片隐藏掉、直到底色是马赛克为止
- 带圆角、弧形、不规则的等、保存png其他优先jpeg
4、行内块元素水平方向上、元素与元素之间的间隔问题
- 设置浮动（float）
- 将元素与元素代码之间的空白行取消掉{<代码><代码>}
5、表单元素垂直方向上没有对齐
- 设置浮动
- 给表单元素设置vertical-align、属性值不为默认值即可
6、margin的粘连问题
- 使用padding
- 给父元素添加over-flow：hidden
- 给父元素添加上边框、transparent透明色
7、margin的塌陷问题
- 在一个元素上设置足够的间隔
8、鼠标形状
-
cursor:hand;低版本
-
cursor:pointer;高版本
-
cursor:url(.ico)；
十三、过渡和动画
13.1 过渡：需要碰触到之后触发
transition:过度的属性1 执行的时间 延迟时间 变化曲线，过度的属性2 执行的时间 延迟的时间 变化的曲线；
变化的曲线-匀速liner
一个盒子100*100 鼠标悬停的时候，先用1秒修改高度为300，然后再修改高度为300，再加背景
.box1{
width: 100px;
height: 100px;
background-color: aqua;
transition: width 1s,height 1s 1s,background 2s 2s ;
}
.box1:hover{
width: 300px;
height: 300px;
background-color: blue;
/* transition: width 1s,height 1s 1s; */
}
13.2 动画
-
定义动画：自己就可以动的画面
@keyframs 动画名{ 0%{ 开始状态的形式 } *%{ 中间状态的形式 } 100%{ 最终状态的形式 } } -
绑定动画、执行动画
-
animation:动画名1 动画执行时间 延迟时间 执行次数 变化次数 执行的方向，动画名2 动画执行时间 延迟时间 执行次数 变化次数 执行的方向
-
执行次数infinite是无穷次
-
执行方向 alternate交叉
-
动画的执行状态
animation-play-state:paused暂停 | running选择；
-
十四、扩展知识
14.1 多列布局
| 列数 | column-count:*; |
|---|---|
| 列宽 | column-width:*; |
| 列间宽 | column-gap：*px; |
| 列边框 | column-rule:*px 线性 颜色； |
14.2 转化、旋转、放缩
1、转换
- 位移：位置变化
- transform：translate(x距离,y距离)；
- transform：translateX(x)；
- transform：translateY(y)；
- transform：translateZ(z)；
- transform：translate3d(x,y,z)；
2、旋转
-
transform：rotate（*deg） 平面旋转
-
transform：rotateX（*deg）x平面旋转
-
transform：rotateY（*deg）y平面旋转
-
transform：rotateZ（*deg）z平面旋转
-
transform：rotate3d(x,y,z,*deg) 前面3个值为0/1代表不旋转或旋转
3、放缩
- transform:scale(宽度的倍数，高度的倍数)
- transform:scaleX(x)
- transform:scaleY(y)
- transform:scaleZ(z)
- transform:scale3d(x,y,z)
14.3 三角形
- 实现一个盒子宽高为0
- 给四边设置为透明色 border:transparent
- 给想要方向的边框设置成对应的颜色
14.4 粘性定位
position:sticky:当元素移动到父元素的指定位置时 会固定下来
top:*px; | bottom :*px;