HTML+CSS+CSS3学习笔记
何为前端？
看的到的东西
前端三层
前端页面由三层组成：HTML（结构层）、CSS（样式/美化/表现层）、JS（行为/交互层）
一、HTML
1、基本结构：
xml
<!DOCTYPE html> <!-- 版本 -->
<html lang="en"> <!-- html的属性 -->
<head>
<meta charset="UTF-8"> <!-- 字符集：charset,防止页面乱码 -->
<title>Document</title>
</head>
<body>
</body>
</html>2、标签分类
单标签和双标签
3、标签关系
嵌套关系和并列关系
4、标签语义
css
<div>
没有语义的标签，但是布局用的非常多，块级元素
</div>
<span>
没有语义的标签，里面一般只放文字，行内元素
</span>
<h3>
h系列标签(标题标签)的作用：给一段文字加上的标签的语义
</h3>
<p>
p标签(段落标签)的作用：给一段文字加上的段落的语义
</p>5、文本格式化标签
| 标签名 | 备注 |
|---|---|
<strong></strong><b></b> |
粗体 |
<em></em><i></i> |
斜体 |
<del></del><s></s> |
删除线 |
<ins></ins><u></u> |
下划线 |
6、图像标签
ini
<img src="图像URL" alt="图像不能显示时的替换文本" title="鼠标悬停时显示的内容"
width="图像的宽度,单位px" height="图像的高度，单位px"
border="设置图像边框的宽度" />7、链接标签
ini
<a href="跳转目标" target="目标窗口的弹出方式（默认 _self/_blank）"></a>
_self 原窗口 _blank 新窗口打开7.1 锚点链接
ini
<a href="锚点的id名称（例如#people）">人物介绍</a>
<h2 id="people">人物介绍</h2>7.2 控制页面所有a标签的跳转方式
xml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<base target="_blank"> <!-- 控制页面中所有a标签的跳转方式 -->
</head>
<body>
</body>
</html>8、特殊符号
xml
以下是 p标签的作用 <!-- 一个空白符 -->
<br />
以下是 p标签的作用 <!--   两个空白符 -->
<br />
衬衫的价格：¥999; <!-- ¥ 钱的符号 -->
<br />
©上海诚盛集团 <!-- © 版权符号 -->
<br />
<p></p> <!-- < >标签的开括号和收括号 -->9、多媒体标签
xml
<!-- audio 音频标签 -->
<!-- <audio src="#" controls loop autoplay></audio> -->
<!-- controls 控件 -->
<!-- loop 循环播放 -->
<!-- autoplay 自动播放-->
<audio src="./2 素材/最伟大的作品.flac" controls loop autoplay>
<!-- <source></source> 用于准备多少音质音乐准备 -->
</audio>
<!-- video 视频标签 -->
<video src="./2 素材/jay.mp4" controls loop autoplay muted></video>
<!-- controls 控件 -->
<!-- loop 循环播放 -->
<!-- autoplay 自动播放-->
<!-- muted 静音 -->
<!-- 视频自动播放必须静音 -->
<!-- marquee 跑马灯标签 -->
<marquee behavior="" direction="">(>0__0<)</marquee>
<!-- iframe 在页面嵌套一个网页 -->
<iframe src="https://www.bilibili.com" frameborder="0"
style="overflow: hidden; width: 100%;height: 100%;"
></iframe>10、表格
css
<table>
<caption></caption> 表格标题
<tr> 表格的行
<th></th> 表格的表头
</tr>
<tr>
<td></td> 表格的单元格
</tr>
</table>
css
快捷表格生成：table>tr>td*310.1 table属性：
css
border 边框
width 宽度
height 高度
align 表格对齐方式
cellspacing 单元格与单元格边框之间的空白间距
cellpadding 单元格内容与单元格边框之间的距离10.2 合并单元格：
markdown
合并单元格
合并行 rowspan
合并列 colspan
合并单元格步骤：
1、先确定是跨行还是跨列。
2、如果是跨行，那么从上到下找到对应的单元格，在此单元格上用rowspan属性，合并几个单元格属 性值就写几；如果是跨列，从左到右，找到单元格，用colspan，合并几个单元格属性值就写几。
3、把多余的单元格删掉。11、列表
11.1 无序列表
css
<ul>
<li>确实</li>
<li>真不错</li>
<li>还行</li>
</ul>11.2 有序列表
css
<ol>
<li>确实</li>
<li>真不错</li>
<li>还行</li>
</ol>11.3 自定义列表
css
<dl>
<dt>商品分类</dt>
<dd>菜</dd>
<dd>粮油</dd>
<dd>食品</dd>
</dl>12、表单标签
12.1 表单组成：提示文本、表单控件、表单域
12.2 表单控件：
scss
<input type="" value="" />
属性：
type(输入框属性)
value(默认文本)
placeholder(占位符)
name(控件名称) ***
size(控件的宽度)
checked(控件默认被选中的项)
maxlength(控件允许输入的最多字符数)
autofocus（自动聚焦）
autocomplete（自动补全）
multiple(文件多选)12.3 输入框属性（type）：
| 属性值 | 说明 |
|---|---|
| text | 文本输入框 |
| password | 密码框输入框 |
| button | 普通按钮 |
| submit | 提交按钮 |
| radio | 单选按钮 |
| checkbox | 多选按钮 |
| reset | 重置按钮 |
| image | 图像形式的提交按钮 |
| file | 文件域 |
| 邮箱输入框 | |
| number | 数字输入框 |
| color | 颜色选择框 |
| tel | 电话输入框 |
| date | 日期选择框 |
| week | 周选择框 |
| range | 移动条 |
| time | 时间 |
| search | 搜索框 |
12.4 单选、多选默认选中
ini
男
<input type="radio" name="sex" checked="checked">
 
女
<input type="radio" name="sex">
//使用单选框时需要给单选框一个相同的id名
唱<input type="checkbox">
跳<input type="checkbox">
篮球<input type="checkbox">
游戏<input type="checkbox" checked>
xml
<form action="" method="">
<input type="search" autocomplete="on" name="search">
<!-- autocomplete 自动补全 必须放在form表单内并需要name属性-->
<span>密码：</span>
<input type="password" name="userPassword" autofocus>
<!-- autofocus 自动获得焦点 -->
<input type="file" multiple>
<!-- multiple 文件多选 -->
</form>12.5 表单域
xml
<form action="" method="">
<!-- action 数据提交的地址 -->
<!-- method 提交方式 -->
<!-- 值：get(默认，但网址上会出现上传的信息) -->
<!-- post(网址上不会出现上传的信息,一般用于文件) -->12.6 label标签
xml
<!-- label标签 点击文字输入框焦点即可进入
label内包含时一定要去掉for 否则需要在for内输入输入框的id-->
写法一：
<label>
<span>姓名：</span>
<input type="text">
</label>
写法二：
<label for="username">姓名：</label>
<input type="text" id="username">12.7 文本域
xml
<!-- textarea 文本域、留言板、写评论 -->
<textarea name="" id="" cols="30" rows="10"></textarea>12.8 下拉列表
xml
<!-- select 下拉列表 -->
<!-- option 下拉列表的选项 -->
<!-- 一个select内最少要含有一个option -->
湖北省
<select name="" id="">
<option>武汉市</option>
<option value="" selected>鄂州市</option>
<!-- selected 默认选中 -->
<option value="">黄石市</option>
<option value="">黄冈市</option>
<option value="">十堰市</option>
<option value="">襄阳市</option>
</select>13、扩展
13.1 上标标签
xml
<ruby>
蔡徐坤
<rt>你干嘛啊</rt>
</ruby>13.2 iframe标签
- sre
- width
- height
- border
- www.runoob.com/tags/tag-if...
二、CSS
整体布局思想
- 布局：合适的标签放在合适的位置
- 步骤：
- 1、先画最外层的布局图
- 2、写html、外层的css文件并链接，实现最外层的布局
- 3、再给每个模块绘制布局图，然后依次实现
1、是什么
css是一个层叠样式表
2、css的引入方式
xml
<!-- 行内样式，结构样式没有分离 -->
<p style="color: blue; font-size: 50px;">又是美好的一天</p>
<!-- 内嵌样式，结构样式没有彻底分离 -->
<style>
div {
color: red;
font-size: 12px;
}
</style>
<!-- 外链样式，将结构和样式分离 -->
<!-- rel根据不同类型，可以实现不同的更改效果 -->
<link rel="stylesheet" href="./5 css/index.css">
例如：<link rel="icon" href="./images/index.ico"> 改变网页名的图标
第四种css引入方式，在css文件内引入css文件
@import './base.css';3、css选择器
3.1 选择器干什么的？
- 找标签
更多选择器见：www.runoob.com/cssref/css-...
3.2 基础选择器：标签选择器、类选择器、id选择器、通配符选择器
bash
标签选择器 一般和别的选择器搭配使用，如：类>标签
类选择器 注意多个类选到同一标签时，样式的覆盖问题，后覆盖前，选择器优先级
id选择器 写样式不要id，js里用id，id有唯一性（一个页面中同一个id只能用一次）
通配符选择器 *写公用样式3.3 复合选择器：后代选择器、子代选择器、交集选择器、并集选择器、链接伪类选择器
ruby
后代选择器：用于选择子孙后代！！！
.box1 a{}
子代选择器：用于选择子代
.box2>a{}
交集选择器（无标记） p.Hai{}
并集选择器 .box3,.box2
链接伪类选择器：
:link 未访问的链接
:visited 已访问的链接
:hover 鼠标悬停的效果
:active 选定的链接
:focus 获取焦点时的样式
:first-child 父级的第一个子级的样式
:only-child 选择每个元素是其父级的唯一子元素
:last-child 其父级的最后一个子级
:nth-child(x) 选择元素是其父级的第x个子元素,"odd(个数为奇数)，even（个数为偶数），个数从1开始"属性选择器：
css
input[type="text"] {}4、font字体属性
4.1 font-size 字体大小
单位一般用px，12-20之间，页面默认是16px
4.2 font-style 字体风格
| 属性值 | 说明 |
|---|---|
| normal | 默认值 |
| italic | 斜体 |
4.3 font-weight 字体粗细
| 属性值 | 说明 |
|---|---|
| normal | 默认值（不加粗） |
| bold | 粗体 |
| 100-900 | 不需要带单位，400=narmal,700=bold |
4.4 font-family 字体样式
默认为宋体
css
可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体， 如果都没有，则以我们电脑默认的字体为准。
p{font-family: Arial,"Microsoft Yahei", "微软雅黑";}
1. 各种字体之间必须使用英文状态下的逗号隔开。
2. 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
3. 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: "Times New Roman";。
4. 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。4.5 font综合用法
css
font: font-style font-weight font-size font-family;
在复合使用中font-style font-weight可以省略，但是font-size font-family是不可以改变！！！5、css外观属性
5.1 color颜色
scss
颜色组成16进制分别为：0 1 2 3 4 5 6 7 8 9 a b c d e f
1、英文字母
2、进制
3、rgb(0,0,0) 0~255
4、rgba(0,0,0,1~0.1) 0~255
5、hsl(0,饱和度,亮度)5.2
（1）text-align文本对齐方式
让块级元素里面的内容居中
| 属性值 | 说明 |
|---|---|
| left | 左对齐（默认） |
| center | 居中对齐 |
| right | 右对齐 |
| justify | 两端对齐文本 |
| inherit | 规定应该从父元素继承 text-align 属性的值。 |
（2）vertical-align垂直对齐方式
| 属性值 | 说明 |
|---|---|
| middle | 居中 |
| top | 上 |
| bottom | 下 |
使用场景：
- 文字和图的中间对齐，样式加给img
- 表格里的内容，样式加给td
5.3 line-height行间距（行高）
取值：具体的px值
使用场景：
- 单行是，要垂直居中，将行高和高设一样的值
- 多行时，调整每行之间的间距
diff
单行文本垂直居中
行高 = 上距离 + 内容高度 + 下距离
行高和高度的三种关系
- 如果行高等于高度：文字会垂直居中
- 如果行高 大于高度：文字会偏下
- 如果行高小于高度： 文字会偏上5.4 text-indent首行缩进
取值：具体的px值 1em=1个汉字 2em=首行缩进两格
5.5 text-decoration文本装饰
主要用于清除a标签的下划线
| 属性值 | 说明 |
|---|---|
| none | 无（默认） |
| underline | 下划线 |
| overline | 上划线 |
| line-through | 删除线 |
5.6 letter-spacing字母、汉字之间的间距
取值：具体的px值
5.7 word-spacing单词之间的间距
取值：具体的px值
6、标签的显示模式
6.1 块级元素：block
less
1、独占一行
2、可以设置宽高和内外编剧
3、块级元素没有宽度时，宽度默认是父级元素的100%
4、内可放行内元素和块级元素
##p里面不能放块级元素，特别是p里不能放dvi、hn,dt里面也不能放块级元素6.2 行内元素：inline
css
1、在一行显示
2、不可以设置宽高
3、文字多宽多高，行内元素多宽多高
4、行内元素内一般只放文字，a标签除外6.3 行内块元素：inline-block
-
input、img、vedio、audio、语义化标签
1、和相邻的行内元素、行内块元素在一行，但之间会有空白间隙
2、可以设置宽高和内外边距
3、默认宽度就是内容的宽度
6.4 标签显示模式的转换
css
转行内元素：display:inline;
转块元素：display:block;
转行内块元素：display：inline-block;
标签显示/隐藏：none 隐藏后原位置消失（下面的元素往上移动，右边的元素往左移动来占该标签的原位置）
把标签设为弹性盒子的容器：flex6.5 多种方法实现元素的显示和隐藏
-
display：none; （常用）
- 原位置会消失，一般用于二级菜单、轮播图等效果
-
visibility: hidden; （很少使用）
- 要设父级元素，溢出的子级才会隐藏，该子级的原位置保留
-
overflow 溢出隐藏（重点）
-
原位置消失
属性值 说明 visible 默认值。内容不会被修剪，会呈现在元素框之外 hidden 内容会被修剪，并且其余内容是不可见的 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容 -
-
opacity 不透明度（常用）
- 原位置保留，一般和过渡搭配使用实现淡入淡出的效果
- 0（完全透明、标签隐藏原位置保留）
- 1（完全不透明，默认值）
- 0-1之间是半透明
- 注意点：会影响背景和里面的内容，background-color: rgba() a的透明度的值，只影响背景
-
transform: scale(0);
- 将标签的宽高缩小为0倍，即该标签的宽高为0px，原位置消失
- 将标签的宽高缩小为0倍，即该标签的宽高为0px，原位置消失
7、CSS背景（background）
- 给背景之前要保证该标签有宽高（可以是设置的width、height，也可以是默认内容撑开的）
7.1 background-color背景颜色
透明色 transparent
7.2 background-image背景图片（图片的相对路径）
- 图小标签大会平铺，图大标签小只会显示图片的一部分
css
background-image: url(./3 img/2.gif);7.3 background-repeat背景平铺（不平铺，只有一个）
lua
background-repeat: repeat； 平铺（默认）
background-repeat: no-repeat; 不平铺
background-repeat: repeat-x; 延X轴平铺
background-repeat: repeat-y; 延Y轴平铺7.4 background-position背景位置
xml
<!-- 属性： -->
<!-- 1、百分比或者具体数值，正负皆可，先放水平方向的值，再放垂直方向的值 -->
<!-- 2、方位名词 top、center、bottom、left、right -->
background-position: 50px 100px; 左50px 上100px
background-position: center center; 图片居中
background-position: 50% 50%; 左50% 上50%
当 background-position 只写一个值时，默认第二个值为居中
background-position: 50px;
background-position: 50%;
background-position: right;
如果是百分比：相对于背景 - 图片的的百分比
background-position: 10% 20%;
background-position: 700px 54px;7.5 background-attachment 背景附着
sql
属性：
fixed--固定
scroll--滚动（默认）7.6 background-size背景大小
- 注意：一个标签内引入多个背景图时，背景尺寸影响所有的背景图
scss
属性：
1、数值px
2、cover(铺满)
3、contain（一个方向到边框位置为止）
4、百分比
/*background-size: 600px 600px;*/
/*background-size: cover;*/
background-size: contain;
/*background-size: 100% 100%;*/7.7 background背景简写
arduino
background: color url() no-repeat position fixed/scroll;
中间用空格隔开，没有顺序要求- 一个标签中引入多个图片放在不同位置
- 需求：在一个div标签内引入不同的两张图片，分别放在右下角和坐上角
- 写法1：分样式，注意用"，"隔开，定位要分别写
- background-color: red;
- background-image: url(./3-img/2.jpg),url(./3-img/3.gif);
- background-repeat: no-repeat;
- background-position: right bottom,left top;
- 写法2：简写，注意用"，"隔开，背景颜色值放在最后一张背景图的样式里
- background: url(./3-img/2.jpg) no-repeat right bottom,url(./3-img/3.gif) no-repeat red;
7.8 背景透明
diff
background: rgba(0,0,0,0.3)
- 最后一个参数是alpha 透明度取值范围 0~1之间
- 我们习惯把0.3 的 0 省略，这样写 background: rgba(0, 0, 0, .3)
- 注意：背景半透明是指盒子背景半透明， 盒子里面的内容不受影响
- 因为是CSS3 ，所以低于 ie9 的版本是不支持的7.9 引精灵/雪碧图（一张图片上有多个小图）
- 优点：节省资源/所占控件，减少发送次数，优化体验
- 步骤：
- ①测量要引入的小图的位置，以整张图的最左边和最上面开始，测量到该小图的左上角，值给背景定位，用负值
- ②注意放小图的标签应该和该小图的大小一样大
css
.son {
width: 84px;
height: 84px;
margin: 30px auto;
background-image: url(./3-img/1.png);
background-repeat: no-repeat;
background-position: -70px -230px;
}
<div class="son"></div>8、CSS三大特性
- 不同选择器选到同一标签。并且选择器中都有相同的样式，使用优先级高的选择器内的样式
8.1 层叠性
样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。
8.2 继承性
scss
恰当地使用继承可以简化代码，降低CSS样式的复杂性。比如有很多子级孩子都需要某个样式，可以给父级指定一个，这些孩子继承过来就好了。
子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）8.3 权重/优先级
1、权重计算公式
| 选择器 | 计算权重公式 |
|---|---|
| 继承或者 * | 0,0,0,0 |
| 每个元素（标签选择器） | 0,0,0,1 |
| 每个类，伪类 | 0,0,1,0 |
| 每个ID | 0,1,0,0 |
| 每个行内样式 style="" | 1,0,0,0 |
| 每个!important 重要的 | ∞ 无穷大 |
2、权重叠加
css
我们经常用交集选择器，后代选择器等，是有多个基础选择器组合而成，那么此时，就会出现权重叠加。
就是一个简单的加法计算
- div ul li ------> 0,0,0,3
- .nav ul li ------> 0,0,1,2
- a:hover --------> 0,0,1,1
- .nav a ------> 0,0,1,1
#### 注意：数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况。3、继承的权重为0！！！
1） 如果选中了，那么以上面的公式来计算权重，谁大听谁的。 2） 如果没有选中，那么权重是0，因为继承的权重为：0。
9、盒模型
- width
- 取值：长度值 px、%、em、rem、vm等各种单位的值
- 块级标签继承父级的宽度100%，行块标签宽度由内容撑开，行块也可以单独设置
- height
- 取值：长度值 px、em、rem、vm等各种单位的值
- 块级标签、行块标签、行内标签高度默认由内容撑开，块级和行块也可以单独设置
- border
- 分样式：上下左右边框
- border-top: 粗细 风格 颜色;
- border-bottom: 粗细 风格 颜色;
- border-left: 粗细 风格 颜色;
- border-right: 粗细 风格 颜色;
- 分样式：上下左右边框
css
border-width 粗细--默认1px
border-style 风格--一定要写，可选值：soild-实线 dotted-点线 dashed-虚线 double-双线
border-color 颜色--默认黑色
取值规律：1个值都一样，多个值按照上右下左的顺序依次取值，没有的和对边一样
.box2 {
width: 0;
height: 0;
border: 30px solid transparent;
border-color: red green black yellow;
}
<!-- 边框做三角形 -->
<div class="box2"></div>- padding
- 内边距：内容到边框的距离
- 取值：长度值、px、em、rem、vw等各种单位的值，不可以为负值
- 取值规律：1个值都一样，多个值按照上右下左 的顺序依次取值，没有的和对边一样
css
出现的问题：设置padding会撑大盒子
解决办法：
计算合适的width-少用
设置box-sizing: border-box;
分样式：上下左右
- padding-top
- padding-bottom
- padding-left
- padding-right- margin
- 外边距：盒子和盒子之间的距离
- 取值：长度值、px、em、rem、vw等各种单位的值
- 取值规律：1个值都一样，多个值按照上右下左的顺序依次取值，没有的和对边一样
css
分样式：上下左右
- margin-top
- margin-bottom
- margin-left
- margin-right
垂直方向margin值会塌陷
俩个盒子时兄弟关系/同级关系 垂直方向的margin值 大值覆盖小值 即他俩之间的间距为大值
俩关系时父子/嵌套关系 垂直方向的margin值会塌陷 解决方案有三种
（1）给父级盒子设置上边框
（2）给父级盒子设上内边距和盒子尺寸
（3）给父级盒子设置overflow:hidden一处隐藏盒子尺寸计算
css
box-sizing: content-box; 默认
盒子实际宽度 = width + 左右的padding + 左右的border-width
盒子实际高度 = height + 上下的padding + 上下的border-width
box-sizing: border-box;
盒子实际宽度 = width
盒子实际高度 = height10、浮动
scss
页面布局的三种机制：
1. 标准文档流--掌握
按照所写代码，标签的显示方式来排列，块级标签从上往下排列，行块和行内标签从左往右排列
2. 浮动--了解
多个块级标签在同一行展示，一般用flex（弹性盒子）来实现
3. 定位
按照项目的需求，将标签固定在某个位置，掌握不同类型的定位的使用场景
4. 使用flex来替代float实现多个块级标签在同一行展示的功能
给父级标签里面设置样式：
display: flex; 将父级标签设为弹性盒子的容器 必须写
justify-content: ; 让子级在水平方向如何排列 根据项目需要来设置
取值：
space-between（两端对齐）
center（居中）
space-around（等距离对齐）
flex-start（左对齐）
flex-end（右对齐）
align-items 让子级在垂直方向如何排列 根据项目需要设置
取值：
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。设置浮动--float: ;
| 属性值 | 说明 |
|---|---|
| left | 左浮动 |
| none | 不浮动 |
| right | 右浮动 |
清楚浮动的方法
css
1.给父级标签里加定高
2.给父级标签里加overflow: hidden;
3.在结束浮动的位置，用样式clear: both; 来清清除浮动
4.设置一个专门清除浮动的类名.clearfix
.clearfix::after {
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;
}11、定位
11.1 定位组成
定位 = 定位模式(position) + 边偏移（left,right,top,bottom）
11.2 定位模式
position
| 属性值 | 说明 |
|---|---|
| static | 静态定位（默认） |
| ralative | 相对定位，参考自身原来的位置 |
| absolute | 绝对定位，会脱离标准文档流原位置消失，①子绝父相；②参考浏览器 |
| fixed | 固定定位，会脱离标准文档流原位置消失，参考浏览器 |
11.3 各种定位模式的使用场景
css
相对定位，用于调整图和文字的位置
绝对定位，用于二级菜单、轮播图
固定定位，用于侧边栏导航，广告，顶部搜索框，底部的页脚/导航
全屏蒙版
.mask {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0,0,0,.5);
}
<div class="mask"></div>11.4 z-index 修改定位元素的堆叠顺序
- 样式名：z-index
- 取值：整数 默认值为0 数值越大越在上面一层
- 只针对定位的元素有效
12、CSS界面样式
12.1 设置鼠标的样式
- 样式名：cursor
- 常用取值：pointer（鼠标移入变小手）
12.2 outline轮廓线
- 针对input标签
- 常用取值：none（没有轮廓线）
- outline: 粗细 颜色 风格（和boder的方式一样，获取光标时显示该设置）
12.3 禁止拖拽
- 针对textarea标签
- 样式名：resize
- 常用取值：none（不允许拖拽）
13、 溢出部分的处理
-
样式名：overflow
-
样式值：常用
- hidden 溢出的内容隐藏
- auto 溢出部分滚动条查看
-
使用场景：
-
①清除浮动，扩展父级盒子的高度，在父级盒子里加overflow: hidden;
-
②margin垂直方向会出现塌陷问题，在父级盒子里加overflow: hidden;
-
③单行溢出为省略号
css/*必须在一行展示*/ white-space: nowrap; /*溢出部分隐藏*/ overflow: hidden; /*溢出内容省略号展示*/ text-overflow: ellipsis; -
④多行溢出为省略号
cssoverflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; /*3表示第4行末尾为省略号，行数是根据项目需求来设置，不是某个固定行*/ -webkit-line-clamp: 3;
-
14、CSS高级技巧
14.1 溢出文本省略号显示
css
单行溢出省略号
/*必须在一行展示*/
white-space: nowrap;
/*溢出部分隐藏*/
overflow: hidden;
/*溢出内容省略号展示*/
text-overflow: ellipsis;
多行溢出省略号
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
/*3表示第4行末尾为省略号，行数是根据项目需求来设置，不是某个固定行*/
-webkit-line-clamp: 3;三、CSS3
1、样式的前缀
- CSS3是css的最新版本，样式最新的浏览器都能支持，为了保证老板的浏览器也能很好的支持，可以给样式加前缀
- 苹果、谷歌 -webkit-
- 火狐 -moz-
- IE -ms-
- 欧朋 -o-
2、边框圆角
erlang
样式名：border-radius 简写
取值：长度值 px %
1个值4个角都一样，多个值按照上右下左的顺序依次取值，没有的和对角一样
注意：
①边框、背景、图片都可以加圆角效果
②长方形 圆角设50%时是椭圆，正方形圆角设50%时是圆
③取值不能为负3、阴影
3.1 盒子阴影
- box-shadow：水平 垂直 模糊 大小 颜色 内外；
- 记住顺序，其中水平垂直必写，其余选写
- 模糊不能为负，多个阴影用逗号隔开
3.2 文本阴影
- text-shadow：水平 垂直 模糊 颜色；
- 记住顺序，其中水平垂直必写，其余选写
- 模糊不能为负，多个阴影用逗号隔开
4、自定义字体@font-face
css
/*自定义字体，写好书法字体的路径，取好名字*/
@font-face {
font-family: nice;
src: url(./font/叶根友疾风草书.ttf);
}
p {
/*在需要该字体的标签内引入*/
font: 700 30px nice;
}5、渐变
- 定义：多种颜色平稳变化，时浏览器生成的背景图片
5.1 线性渐变
- background-image: linear-gradient(to 方向名词(不写默认从上到下)，颜色1，颜色2....)
css
/*默认从上往下*/
background-image: linear-gradient(red,orange);
/*重复的线性渐变*/
/*多个颜色时，从第2个颜色开始要加百分比，后一个的百分比要比前一个多*/
background-image: repeating-linear-gradient(red,blue 20%,orange 21%);5.2 径向渐变
- background-image: radial-gradient(to 方向名词(不写默认从上到下)，颜色1，颜色2....)
css
/*默认：均匀分布*/
background-image: radial-gradient(red, yellow, green);
/*重复的径向渐变*/
background-image: repeating-radial-gradient(red,blue 20%,orange 21%);
/*在长方形标签内默认时椭圆，要变成圆，第一个参数设为circle*/
background-image: radial-gradient(circle,red, yellow, green);6、2D转换
样式名：transform
样式取值：
6.1 位移
-
translate(x,y); x轴移动x，y轴移动y
-
translateX(); x轴移动x
-
translateY(); y轴移动y
css
应用场景：让盒子上下左右/水平且垂直居中
.box {
width: 200px;
height: 200px;
background-color: #abcdef;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-100px,-100px);
}6.2 旋转
- rotate(n deg) n时数字，正顺，逆负，deg是角度单位，默认是沿着中心点旋转
- 改变位置
css
使用场景：做对话框
.son {
width: 30px;
height: 30px;
border: 3px solid red;
border-left: 0px;
border-top: 0px;
background-color: #fff;
position: absolute;
left: 85px;
bottom: -18px;
transform: translateX(-15px);
transform: rotate(45deg);
}6.3 缩放
- scale(x,y) x为宽的倍数，y为高的倍数，正负皆可
- 默认沿着中心点缩放
- scale(x)
- scale(y)
注意：
| 值 | 效果 |
|---|---|
| 倍数>1 | 放大 |
| 倍数=1 | 原来大小 |
| 0<倍数<1 | 缩小 |
| -1<倍数<0 | 翻转缩小 |
| 倍数=-1 | 原来大小并翻转 |
| 倍数<-1 | 翻转放大 |
6.4 倾斜/拉伸
- skew(xdeg,ydeg) x,y为倾斜的角度,deg角度单位，正负皆可,默认沿着中心点倾斜
- 改变形状
- skewX(xdeg)
- skewY(ydeg)
6.5 综合样式（如果用到其中两个及以上的效果）
transform: 效果1 效果2 效果3 效果4;
css
transform: translate(10px, 15px) rotate(34deg) scale(0.5) skew(73deg, 119deg);7、 基点--不动的点（中心点）
- transform-origin
- 取值：长度值或关键字（left,right,top,bottom,center）
- 一般和旋转、缩放、倾斜搭配使用
8、3D转换
首先要给实现3D元素的父级搭建舞台和透视距离
css
/*给子级搭建了3D的展示舞台*/
transform-style: preserve-3d;
/*透视的距离*/
perspective: 1000px;
9、过渡
-
定义：同一个样式名从一种样式值向另一种样式值平稳的变化
-
过渡需要触发时机，一般用：hover来实现，它是简单的动画
scss
分样式：
1、transition-property 进行过渡的样式名
取值：all（默认） none 具体的样式名
2、transition-duration 过渡花费/持续时间
取值：具体时间单位为ms、s 必写
3、transition-delay 过渡等待时间
取值：具体时间单位为ms、s
4、transition-timing-function 过渡的运动/时间曲线
取值：ease(默认)、linear(匀速)
简写样式：
transition: 样式名 花费时间 过渡等待时间 运动曲线;
没有顺序要求，但是等待时间要放在花费时间的后面，花费时间可以必须写10、动画
- 定义：动画是复杂的过渡，不需要触发机制
scss
分样式，见菜鸟教程 https://www.runoob.com/css3/css3-animations.html
1、创建
@keyframes 动画名字 {
0% {
样式声明
}
...
50% {
样式声明
}
...
100% {
样式声明
}
}
2、调用
分样式，见上方菜鸟教程网址
简写样式
animation: 动画名字 花费时间 等待时间 运动曲线 动画播放次数 动画播放方向 是否停在最后一帧;
动画名字 花费时间必写，其余的选写
linear 匀速运动
infinite 无限次播放
alternate 轮流反方向播放
forwards 停在最后一帧（100%时）
注意：
animation-play-state 播放状态
默认是running(正在播放),在伪类中将值改为paused(暂停)