html以及css知识点总结
前言:大家好啊,我是小编达闻西。我相信在茫茫的文海之中相遇,这是一份莫大的缘分。在武侠小说中,遇见有缘人都会传你绝世神功,从而你就可以称霸武林,迎娶白富美,走上人生巅峰。而今天你遇到了我,而我就只是一个写代码的,我没有什么绝世神功,要找绝世神功建议你去崖底去找找。所以,我就把我之前在公司实习的时候,学到的html和css基础给你做了一个总结,我的话可能不够官方,都是我自己的大白话、再结合自己的一部分代码。有缘人、希望我的文章能给你的前端之路献上绵薄之力。陌生人、加油。
html总结xmind图
css总结xmind图
文章目录
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> |
图片标签 | <img src=”图片地址" alt=“故障时显示文字”> |
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>Document</title> <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">内容1</div> <div id="content2">内容2</div> <div id="content3">内容3</div> <div id="content4">内容4</div> <div class="right"> <a href="#content1">跳到内容1</a> <a href="#content2">跳到内容2</a> <a href="#content3">跳到内容3</a> <a href="#content4">跳到内容4</a> </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>Document</title>
<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>Document</title> <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 class="clear"></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;