本文详细介绍了前端开发的基础概念，包括HTML和CSS的使用。HTML用于构建网页结构，如标题、段落和链接，而CSS则用于设置元素样式，如颜色、字体和布局。通过浮动、定位和盒模型，可以实现网页布局，还有精灵图、字体图标等技术提高页面性能。此外，文章还探讨了CSS3的新特性，如过渡、动画和伪类选择器。
前段开发的基础认知
前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML、CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。
前端开发从网页制作演变而来，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。
前段的基础划分
1.html（结构）
2.css(样式)
目录
html
1.html的介绍
html的骨架结构：
<html>
<head><title></title></head>
<body></body>
</html>网页的基本组成部分：
文字·图片·超链接·视频·音频
五大浏览器：
| ie | 火狐 | 谷歌 | 欧朋 | Safari苹果 |
| （trident） | （gecko） | （blink） | （blink） | （webkit） |
html构成：
单双标签两种
双标签
<p></p>
<div></div>
单标签
<hr>
<br>
1属性写在开始标签内部
2可以存在多个属性
3属性与属性，标签与属性之间用空格隔开
4没有顺序之分
关系：父子关系-嵌套关系
兄弟关系-并列
2.html的标签
h1-6 不可以乱用，只适用于新闻标题和网页logo
p独占一行{因为他是块级元素，默认占满一行}
strong b 加粗 em i 倾斜 ins u 下划线 del s 删除线
strong这类型的标签语义更加强一些
img 图片中设置宽width和高height一项 图片会等比缩放
如果分别给img设置了宽和高，图片就可能会变形
a标签中的herf 写1外部网址：http://
2本地直接写路径
空链接 a herf "# " 或者是a herf "JavaScript：；"
锚点：1跳转地添加id值
2 a标签中的herf属性=#id值
无序列表：ul
每一项默认前面有小圆点，排列无顺序，里面只可以放li标签 li标签里面可以放任何标签
有序列表：ol
每一项前面有默认序号，排列有顺序，里面只可以放li标签 li标签里面可以放任何标签
自定义列表：dl
dt是他的小标题 可以让dt在一群dd中靠左显示
dd是他的每一项
选择器{list-style：none}可以让默认的小圆点和数字消除
表格table
tr每一行 td每一个单元格
合并原则：左上原则 步骤：1确认是跨行还是列2保留那个删除那个
跨行合并用rowspan 跨列合并用cowspan
表单标签：input
文本框 text 密码框 password ------配合placeholder占位符使用
单选 radio 多选 checkbox --------配合checked设置选定的默认值
实现多选的话要设置相同的name属性
文件选则 file ——multiple 可以选择中多个文件
提交 submit
重置 reset 使用form标签包裹住方可以使用or button的type属性值内设置
普通 button
下拉菜单 select
每一项option-------默认选中 select+ed
文本域 textarea cols宽度设置 rows高度设置
让文本和按钮合并在一起 lable 使用方法
1 lable将文本包裹起来 -表单上添加id属性-lable上for属性+同id属性
2lable把文本和表单标签包裹起开- 讲lable开始标签中的for属性删除掉
<lable> <input type:text>文本 </lable>字符实体：空格 :;
大于号>：；小于号<：；
3.html的总结
-
定义: HTML(Hyper Text Markup Language)的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
-
HTML标签=<+ 标签名 + >
-
HTML实例
<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
</head>
<body>
<h1>我是第一个标题</h1>
<p>我是第一个段落。</p>
</body>
</html>
注意：
DOCTYPE声明了文档的类型
<html>标签是 HTML 页面的根元素，该标签的结束标志为</html>
<head>标签包含了文档的元数据（meta），如<meta charset="utf-8">定义网页编码格式为utf-8。
<title>标签定义文档的标题
<body>标签定义文档的主体，即网页可见的页面内容，该标签的结束标志为</body>
<h1>标签作为一个标题使用，该标签的结束标志为</h1>，-- HTML标题
<p>标签作为一个段落显示，该标签的结束标志为</p>-- p标签用法
-
编译器：Visual Studio Code、Adobe Dreamweaver等个人推荐第一个。
第二章 HTML基础
HTML元素语法：开始标签+元素内容+结束标签à<标签名>元素内容</标签名>
-
标题：<h1>-<h6>字体大小依次递减；eg: <h1>一级标题</h1>
-
段落：<p>段落一</P>
-
链接：<a href=”链接地址” target=”属性值”> 链接内容</a>
-
图像：<img src=”图片地址” width=”数字” height=”数字” alt=”替换图像文字”>
-
强调：<em> 强调内容</em> <strong>强调内容</strong>
-
加粗：<b>加粗文本</b>
-
斜体：<i>斜体文本</i>
-
水平线：<hr>
-
换行：<br>
-
表格：
1) 定义表格：<table>…</table>
2) 行：<tr>…</tr>
3) 单元格：<td>…</td>
4) 表格表头：<th>…</th>
5) 表格标题：<caption>…</caption>
6) 背景颜色属性：bgcolor(单元格)、background(表背景)、bordercolor(边框)
7) 单元格之间的空间: cellspacing
8) 边框与内容的距离：cellpadding
9) 合并单元格：colspan(列)、rowspan(行)
10) 页眉：<thead>
11) 主体：<tbody>
12) 页脚：<tfoot>
-
列表：
1) 无序列表：
<ul>
<li>…</li>
<li>…</li>
</ul>
2）有序列表
<ol>
<li>…</li>
<li>…</li>
</ol>
3）自定义列表
<dl>
<dt>…</dt>
<dd>…</dd>
<dd>…</dd>
<dt>…</dt>
<dd>…</dd>
<dd>…</dd>
</dl>
12.区块
1) <div>:定义了文档的区域，块级
2) <span>:用来组合文档中的行为元素，内联元素
13.表单:<form>…</form>
1) 定义输入域：<input/>
2) 文本域：<input type=”text” name=”xx”>
3) 密码字段：password
4) 单选按钮：radio
5) 复选框：checkbox
6) 提交按钮：submit
14.框架：
(一) <iframe>标签规定一个内联框架
1) 语法: <iframe src=”显示页面地址”>..</iframe>
2) 高宽：width 、height
3) 移除边框：frameborder=”0”
4) 目标链接页面：href=”地址”
(二) <frameset>在一个页面中设置一个或多个框架àh5不支持，不能出现在body中
1) 语法：
<frameset>
<framesrc=”index1.html”>
<framesrc=”index2.html”>
</frameset>
2）行列比例：rows=“10%,*” 、cols=”10%,*” à * 表示剩余百分比
3）设置边框：frameborder=”0” à 0 表示没有边框
4）修改边框粗细：border（由Netscape浏览器使用）、framespacing(由Internet Explorer浏览器使用)
5）设置名字：<frame name=”名称”src=”显示页面”>
6）<frame>中设置滚动：
7）noresize:用户拖拉框架大小；à没有属性值
8）scrolling:是否显示滚动条； à属性值yes 为显示
15.注释：<!—这个是注释-->
HTML元素属性
1) class ：为HTML元素定义一个或多个类名；
2) id ：定义元素的唯一id
3) style :规定元素的行内样式
4) title ：描述了元素的额外信息
css
1.css的介绍
css层叠样式表——给页面中的html标签设置样式。
标点符号必须是英文状态下的，要写在style标签中，style标签写在head标签中
常见的属性：
color颜色 font-size大小 background color 背景颜色 width 宽 height 高
引入方式
内嵌式 css写在style中 style写在head里面
<head>
<style>
</style>
<head>外联式 css写在单独的css文件中 通过link标签引入
<link herf:.......>行内式 css写在标签style属性中
<div style:font-size:16px > </div选择器：
标签选择器 找到一种类型的标签 无论多深都可以找到
类选择器 设置点.class属性- 类名（不可以用数字开头）
一个标签可以拥有多个类名，用空格隔开
<div class: 类名：1 2 3 4 5 >
.类名{}id选择器 设置#id属性
唯一的，不可重复的，只能有一个值，并且只能选一个
<div id="id名">
#id名{}通配符选择器 *找到所有的标签
*{margin：0
padding；0}复合选择器
1后代选择器 1空格2 用空格隔开
选择器1 选择器2 {}通过选择器1找到所有满足选择2的标签
2子代选择器 选择1>选择2
选择器1>选择器2 {}通过1找到下一层中满足2的标签 只是找1的下一层中的2标签如果2中还包含着和2相同的标签 则不选中
并集选择器
选择1，选择2（用逗号隔开）
选择器,选择器2 {}找到12对应的标签设置样式 可以写多种选择器
交集选择器
选择1选择2
选择器1选择器2 {}既又原则 同时满足12 选择器之间是紧挨着的
hover伪类选择器
选择器：（冒号）hover 表示鼠标悬停的状态
div:hover{}2.css的标签
字体font
size 大小 取值：数字+px px=像素
weight 粗细 取值 nomal 400 正常 bold 700 加粗
style 倾斜 取值 normal 正常 italic倾斜
family 样式 取值 直接写文字的样式 ： 宋体，楷体 之间用逗号隔开 后面要加一个
sans-serif
连写问题 swsf
font{size weight style family}文本text
indent 缩进 取值 数字+px
+em当前标签的字体大小
不是独占一行的元素 设置text-indent无效
align 对其方式 左lift 中 center 右 right
水平居中 给文本父元素设置
text-align{}decoration 文本的修饰
下划线：underline
删除线：line-through
效果无： none 一般来清除a标签的下划线
text-decoration{}line-height 数字+px （盒子的高为100px 数字+100px则可以让设置line-height的值居中显示）
+倍数（当前文字大小的倍数 填1就是取消间距 2 就是一行于一行之间隔着一个字符大小的距离）
background背景
color 背景颜色
image 背景图片 img与背景图片的区别：img不设置宽高则默认显示，div+背景图片需要给div设置宽高
repeat 背景图片的平铺属性
| top上postion | ||
| left左 | center 中 | right右 |
| button底部 |
块级元素
display block
独占一行 宽度默认占满一行 高度由内容撑开 可以设置宽高 独占一行
用margin 0 auto 设置居中属性
行内元素
display inline
一行内显示多个 不可以设置宽高 宽度高度内容由内容撑开 一行显示多个就用
text-align：center来设置他的居中
行内块元素
display inline-block
一行内可以显示多个 可以设置宽高
行内元素就是一行里可以由多个 就可以用text 来设置他的居中 块级元素就是默认占一行高度由内容撑开 可以设置他的宽高 然后用margin来设置他的水平居中
行内块就是一行内可以显示多个而且还可以设置他的宽高
优先级：
继承<通配符选择器<标签选择器<类选择器<id选择器<行内选择器<！important·(写在属性值的后面，引号的前面)
!important不能提升继承的优先级
| 权重叠加计算 | 第一级 | 第二级 | 第三级 | 第四级 |
| 复合选择器 | 行内样式的个数 | id个数 | 类个数 | 标签个数 |
拓展：权重计算题解题步骤
1. 先判断选择器是否能直接选中标签，如果不能直接选中——是继承——优先级最低——直接pass
2.通过权重叠加计算公式，判断谁的权重最高，如果全是继承，则看父元素。
结构伪类选择器
E:frist-child{}父元素中的第一个子元素，且是e元素
E:last-child{}父元素中的最后一个子元素，且是e元素
E:nth-child(n){}父元素中的第几个n元素，且是e元素
E:nth-last-child(n)父元素中的倒数第几个元素，且是en的注意点：
n为01234时，
偶数：2n,even
奇数：2n+1 2n-1,odd
前五个：-n+5
后五个：n+5（第五个往后）
nth-child(n)先匹配子元素个数，在匹配标签
nth-of-type(n)先匹配标签，在数对应标签的个数
伪元素（默认是行内元素的效果）
：：before 在内容前
content 必加的属性
：：after 在内容后
某个选择器：：before（after）{content}浮动的作用
1 早期的作用，图文环绕
2 现在的作用：网页的布局
（让垂直布局的盒子变成水平布局 如一左一右 ）
float：left 左
float： right 右
特点：1脱标——脱离了标准流
2 覆盖（浮动的元素覆盖标准流元素）
3 浮动找浮动
4 浮动的元素有特殊的显示效果：一行显示多个 可以设置宽高
盒子元素下可以让盒子本身居中，里面的文字可以居中显示
6 不会覆盖文本内容以及行内块元素
清除浮动带来的影响
子元素浮动而撑不开父元素
目的：父元素有高度，不影响网页的布局
解决的问题：父元素的塌陷
方法
1 直接给父元素设置高度
优点：简单粗暴
缺点：某些布局中不能固定父元素的高度
2在父元素的内容的最后添加一个块级元素，给添加的块级元素设置 clear:both
缺点：会给页面中添加额外的标签，让页面变的复杂
3 单伪元素清除法
某选择器::after{content:
display:block
clear:both}4 双伪元素清除法
某选择器::after，
某选择器：：before{content:
display:table }
某选择器：：after{clear：both}清楚浮动与margin的塌陷现象
5 给父元素设置 overflow：hidden
创建bfc盒子
1html标签
2浮动
3行内块
4overflow：hidden/auto
定位
常见的布局方式：1标准流
2 浮动（让原本垂直的块级元素变成水平布局）
3 定位（可以让元素自由的摆放在网页的任意位置 一般用于盒子之间的层叠情况）
应用：让元素去网页任意位置 让元素固定在某一个位置
position
静态：static——标准流
相对：relative——相对于自己之前的位置移动，在页面中占位置，没有脱标
绝对：absolute——脱标，相对于祖先元素来做定位，如果祖先元素没有定位就基于浏览器的位置来做定位
固定：fixed——固定在一个位置上面去 脱标不占位置
设置偏移值：left right top bottom
子绝父相让子盒子在父盒子中居中
1子绝父相：先让子盒子往右移动父盒子的一半（50%）=left
再让子盒子往左移动自己的一半
margin-left 的取值百分比取决于大盒子的一半
left=50%
transform：translatex（-50%）x是横向
top=50%
transform：translatey（-50%）y是竖向
连写transform:translate(-50% -50%)
元素的层级问题
不同布局方式元素的层级关系
标准流>浮动>定位
不同定位之间的层级关系
相对绝对固定默认的层级相同
更改元素层级情况——定位
属性名z-index 属性值数字，数字越大层级越高
z-index{number}此时html中写在下面的元素层级更高，会覆盖上面的元素
3.css装饰
垂直对齐的方式
基线：文字类型元素，在排版中存在对齐的基线
解决行内/行内块元素垂直对齐的问题
图片于文字不是一行对齐，而是以基线对齐
vertical-aligmn
baseline 默认基线对齐方式
top 顶部对齐
middle 中部对齐
bottom 底部对齐
可以解决的问题
1.输入框于按钮不齐 vertical-align 或者使用float浮动
2.input和img无法对齐 vertical-bottom
行内\行内块元素默认基线对齐
3.div中的文本框 文字无法贴顶 vertical-align
4.div标签盒子不设高度 vertical-bottom 将图片转换为块元素
img撑大盒子下方会有小缝隙
5.使用line-height让img标签垂直居中的问题
vertical-middle 给父元素添加line-height
学习浮动之后，不推荐使用行内块元素让div行中显示，推荐用浮动
光标类型
dafault 默认显示效果
cursor poiner 小手提示点击
text I字形，提示选择文字
move+字光标，提示可以移动
边框圆角
让四个角边的圆润
属性名 border-radius
取值 数字+px
两个值 左上 右下，右上左下
三个值 左上， 右上左下， 右下
四个值 左上，右上，右下，左下。
从左上角顺时针赋值，没有赋值就看对角
应用圆：取值为长宽的一半50% 胶囊是为长或者高的一半
overflow溢出部分显示属性
盒子内容部分超出盒子
属性名：overflow-visbie 默认溢出部分可见
hidden-溢出部分隐藏
scroll-无论是否溢出都显示滚动条
auto-根据是否溢出，自动显示或隐藏滚动条
元素本身隐藏
1visibility：hidden 隐藏后占位置
2display：none隐藏后不占位置
元素透明度
opacity（整体透明）
取值（0-1）0完全透明 1（完全不透明）
边框合并
border-collapse：collapse
让相邻表格边框进行合并，得到细线边框效果
链接伪类选择器
a：link 选中a标签未访问过的状态
visited 访问过后的状态
hover 悬停的状态
active 选中鼠标按下时的状态
lvha 书写顺序
css画三角形
设置一个盒子，设置四周不同色的边框，将盒子的宽高设置为0 ，仅保留边框。——得到四个三角形，选择其中一个后其他三角形设置颜色为透明
transparent 透明——不可以将其他框线删除
调整不同的宽度来设置不同的状态
焦点伪类选择器
用于选中元素获取焦点的状态
：focus
属性选择器
input【type=“ ”】{}
精灵图——scprit雪碧图
多个小图合并为一张大图——被称为精灵图
减少服务发送速度，减轻服务器压力提高页面加载速度
使用步骤：
1创建一个盒子
2通过pxcook量取图片的大小，将图片的宽高设置给盒子
3 将精灵图设置为盒子的背景图片
4 通过pxcook测量小图片左上角的坐标分别取负值设置给盒子的background
背景图片的大小
background-size 宽度空格高度
数字+px 百分比+%
cover 覆盖，将背景图片等比放大
contian将背景图片等比缩放 直到不会超出盒子的最大
background的连写
color image repeat position/size
过渡
让元素样式慢慢变化，配合hover
transition 过渡的属性 all+ns width
默认转态与hove状态不同才能有过渡的效果，谁过渡给谁添加
网页与网站的关系
网站 提供特定服务的一组网页的集合
网页 网站的每一页
seo三个标签
serch engine optimization 搜索引擎优化
作用：让搜素引擎的排名靠前
提升方法：1竞价排名 2 将网页制成html 3 标签语义化（在合适的地方用合适的标签 ）
title 网页标题标签
description 网页描述标签
keywords 网页关键词标签
header头部 nav导航 aside侧边栏 article文章 section区块 footer 底部
ico图标设置
在标签左侧的小图标
<link rel="icon" href="路径">版心的介绍
.container
.container{width:版型的宽 margin:0 auto}css的书写顺序
不同的书写顺序会影响性能
1布局属性
2盒子模型+背景
3文本内容属性
4点缀属性
文字阴影
text-shadow h-shadow必须 水平偏移量 可已设置负值
text-shadow v-shadow必须 垂直偏移量 可已设置负值
blur 可选模糊度
color 可选 阴影的颜色
阴影可以叠加设置但是要用逗号隔开
盒子阴影
box-shadow
box-shadow h-shadow必须 水平偏移量 可已设置负值
box-shadow v-shadow必须 垂直偏移量 可已设置负值
blur 可选模糊度
color 可选 阴影的颜色
spred 阴影扩大
inset 阴影改为内部
骨架结构标签
<doctype html> 文档类型声名 告诉浏览器该网页的html版本
<html lang-"en">浏览器使用的语言
作用：搜索引擎归类+浏览器翻译
常见语言 zh-cn 简体中文 en 英文
<meta charset=utf-8>标识网页使用的字
4 css的总结
字体设置
- 各种字体之间必须使用英文状态下的逗号隔开。
- 现在网页中普遍使用
14px+ - 中文字体需要加英文状态下的引号,英文字体一般不需要加引号。当需要设置英文字体时,英文字体名必须位于中文字体名之前。
- 如果字体名中包含
空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-fanily:'Times new Roman'; - 尽量使用系统默认字体,保证在任何用户的浏览器中都能正确显示
- 尽量不用中文,有兼容问题,最好用对应的英文或者
unicode编码。
* {
font-family: "Microsoft YaHei",tahoma,arial,"Hiragino Sans GB"
}字体粗细
span {
font-weight:400;
}tips：数字400 => normal(不加粗),而700 => bold(加粗),推荐使用数字
font 综合设置
span {
font: font-style font-weight font-size/line-height font-family
}tips: 要写全要按以上顺序书写,可省略，但必须保留font-size和font-family,否则font属性不起作用
选择器
idclass- 行内
- 标签
- 通配符选择器
* - 链接伪类选择器
:link未访问的链接:visited已访问的链接我们已经点击过一次的状态:hover鼠标移动到链接上:active选定的链接 当我们点击别松开鼠标显示的状态
- 结构伪类选择器(
css3新特性):first-child选取属于父元素的首个子元素的指定选择器。:last-child选择属于其父元素的最后一个子元素的指定选择器:nth-child(n)匹配属于其父元素的第N个子元素，不论元素的类型even偶数odd奇数,如果用公式n从0开始 (从上往下数):nth-last-child(n)选择器匹配属于其元素的第N个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数，n 可以是数字、关键词或公式(从下往上数)
<ul>
<li>第一个孩子</li>
<li>第二个孩子</li>
<li>第三个孩子</li>
<li>第四个孩子</li>
<li>第五个孩子</li>
<li>第六个孩子</li>
<li>第七个孩子</li>
<ul>
/*li是ul的孩子，后面对应选择第几个孩子*/
// even => 2n 偶数 2、4、 6
li:nth-child(even) {
color:red
}
// odd => 2n+1/2n-1 奇数 1、3、5、7
li:nth-child(odd) {
color:red
}:target
目标伪类选择器：选择器可用于选取当前活动的目标元素
:target {
color: red;
font-size:3
}tips：link visited hover active顺序不要改变，按照lvha的顺序。可简单写,只写一个hover。
css复合选择器
- 交集选择器
既属于p又属于red
p.red{
font-size: 20px;
}
<p class='red'>111</p>
<p >222</p>- 并集选择器
只要选择器都会执行后面样式
div,
p,
span {
color:blue;
font-size:18px
}- 后台选择器
子孙后代都可以选择，用空格隔开
div p {
color:pink;
}
<p>211</p>
<div>
<p>
111
</p>
</div>- 子元素选择器
只选择亲儿子
div > p {
color:pink;
}- 属性选择器(css3)
/*包含title这个属性*/
a[title] {
color:red;
}
/*包含的属性等于*/
input[type='text'] {
color:red;
}
<a href='#'
title='测试1'>测试1</a>
<input
type="text"
></input>首行缩进
p {
text-indent:2em
}tips:1em就是一个字的宽度 如果是汉字的段落，1em就是一个汉字的宽度。
字间距和单词间距
div {
letter-spacing:2px; /* 字间距*/
}
p {
word-spacing:10px; /*单词间距*/
}颜色半透明(css3)
/*参数: r、g、b、a*/
color:rgba(0,0,0,0.3)文字阴影(css3)
/*水平位置 垂直位置
模糊距离
阴影颜色
*/
h1 {
text-shadow:1px 2px 3px rgba(0,0,0,0.3);
}块级元素
- 每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性、常用于网页布局和网页结构的搭建
- 块级元素的特点:
- 总是从新行开始
- 高度、行高、外边距以及内边距都可以控制。
- 宽度默认是容器的100%
- 可以容纳内联元素和其他块元素
- 常见的块元素有:
<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
行内元素
- 行内元素(内联元素)不占有独立的区域,仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度，高度，对齐等属性，常用于控制页面中文本的样式。
- 常见的行内元素有:
<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<span>、<u>、<ins>
- 行内元素的特点
- 和相邻行元素在一行上。
- 高、宽无效，但水平方向的
padding和margin可以设 置，垂直方向的无效。 - 默认宽度就是它本身内容的宽度。
- 行内元素只能容纳文本或者其他行内元素。(a特殊)
行内块元素(特殊的行内元素)
- 在行内元素中有几个特殊的标签
<img>、<input>、<td>,可以对他们设置宽高和对齐属性，有些资料可能会称它们为行内块元素 - 行内块元素的特点：
- 和相邻行内元素(行内块)在一行上，但是之间会有空白缝。
- 默认宽度就是它本身内部的宽度。
- 高度、行高、外边距以及内边距都可以控制。
显示模式转换
- 块级标签转为行内标签模式
div {
display:inline;
}- 行内标签模式转为块级模式
span {
display:block;
}- 行内标签模式转为行内块模式
a {
display:inline-block;
}单行文字垂直居中
原理: 行高的上空隙和下空隙把文字挤到中间了,是如果行高小于盒子高度，文字会偏上，如果行高小于盒子高度，则文字偏下，上下空隙和和平均分布
//盒子高度40px
p {
line-height:40px
}背景图片
- 背景各个属性的应用
img {
//引入
background-image:url(images/icon.png);
//不平铺
background-repeat:no-repeat;
/*方位 x、y x是left/right，自动转换，top/bottom 不论顺序,自动转换，可省略一个，那么另一个就是center */
//background-position:left center
/*还可以是精确位置 如果写了精确位置,那么第一个一定是x，第二个一定是y*/
//background-position:20px 20px
/*还可以是混合，如果写了混合位置,那么第一个一定是x，第二个一定是 y*/
background-position:20px center
/*参数 scroll(滚动，默认)和fixed(固定)*/
background-attachment:fixed //背景图像固定
}- 背景的简写
background:背景颜色,背景图片地址,背景平铺 背景图像滚动,背景图片位置。
body {
background:black url(images/bg.jpg) no-repeat fixed center top;
}tips:以上没有特定的顺序，只是按这习惯写
- 背景的半透明
img {
background:rgba(0,0,0,0.3) 后面必须4个值
}css的三大特性
- 层叠性
p {
color:red;
}
p {
color:blue;
}
//最后p是blue颜色 后面的颜色覆盖前面的颜色- 继承性
子元素可以继承父元素的样式(text-,font-,line-这些元素开头的可以继承，以及color属性)和文字相关的才会继承
/* /1.5 那么行高就是12*1.5*/
body {
font:12px/1.5
}
div {
/*子元素继承了父元素body的行高1.5*/
/*这个1.5就是当前元素文字大小font-size的1.5倍 所以当前的div的行高就是21元素*/
font-size:14px;
}
<body>
<div></div>
</body>- 优先级
tips:
- 权重是由4组数字组成，但是不会有进位。
- 可以理解为类选择器永远大于元素选择器,id选择器永远大于类选择器，依次类推。
- 等级判断从左到右，如果某一位数值相同，则判断下一位数值。
- 可以简单记忆法：通配符合继承权重为0，标签选择器为1，类(伪类)选择器为10，id选择器100，行内样式表为1000，
!important无穷大 - 继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0
- 权重叠加
复合选择器会有权重叠加的问题，但注意不会有进位
- 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
盒子模型
- 边框
边框会影响盒子的实际大小我们有两种方案解决:
- 测量盒子大小的时候，不量边框。
- 如果测量的时候包含了边框，则需要
width/height减去边框宽度
- padding
/*三个 第一个是上 中间是左右 最后一个是右*/
div {
padding:10px 20px 30px
}padding 会影响盒子的实际大小
，因此我们有以下方案解决:
如果测量的时候包含了边框，则需要width/height 减去边框宽度
- margin
margin的典型应用，应用于块级盒子水平居中对齐
div{
//必须有个宽度
width:900px;
height:200px;
background-color:red;
//上下没有边距 左右设置auto
margin:0 auto;
}嵌套块元素坍塌
当盒子里嵌套着盒子的时候，在里外盒子都设置margin，会使得边距合并，使得父盒子一起移动了,里面的间距看不到了;
解决方案：
1.可以为父元素定义边框(会增大盒子)；
2.可以为父元素定义内边距(会增大盒子);
3.可以为父元素添加overflow:hidden。(推荐，不增大盒子)
4.浮动、固定、绝对定位的盒子不会有塌陷问题- 清除内外边距
不同浏览器的不同元素、标签的内外间距都不同，可以使用以下方法来清空，解决问题。
* {
padding:0;
margin:0;
}tips:
padding有个特殊情况 如果没指定宽度或高度padding不会撑大盒子的宽或高,孩子如果没有指定宽度或高度，父亲有宽度或高度，孩子设置了padding也不会撑开盒子,注意以上水平居中方法只属于块级使用方法，- 要让行内元素和行内块元素水平居中可以使用在行内元素和行内块元素的父级添加
text-align:center - 行内元素为了照顾兼容性，尽量只设置左右内外边距，上下设置了也不起作用，但是转换为块级和行内块元素就可以了。
圆角边框(css3)
- 原理:
radius半径(圆的半径)原理:(椭)圆与边框的交集形成圆角效果
div {
border-radius:20px;
}- 正方形变圆
div {
width:200px;
height:200px;
border-radius:50%;
/*或者把数值改成高度或宽度的一半*/
//border-radius:100px;
}- 矩形变圆
div {
width:200px;
height:100px;
/*如果是个矩形，设置为高度的一半*/
border-radius:50px;
}
tips:
border-radius后面参数值简写，分别代表左上，右上，右下，左下。
盒子阴影(css3)
div {
width:200px;
height:200px;
box-shadow:10px 10px
}- 6个参数值(从左到右)
tips:
- 默认的是
外阴影(outset),但是不可以写这个单词，否则导致阴影无效。 - 盒子阴影不占用空间，不会影响其他盒子排列。
文字阴影(css3)
span {
font-size:50px;
color:red;
font-weight:700;
text-shadow:10px 10px;
}- 4个参数值(从左到右)
浮动
- 浮动语法
div {
float:left //或者right
}- 设置了浮动的元素的最重要特性:
- 脱离标准普通流的控制(浮) 移动到指定位置(动),(俗称脱标/脱离文档流)
- 浮动的盒子不再保留原先的位置
- 无论任何属性的标签都会变成具有行内块元素的特性
- 设置浮动后就不继承了父类的宽度，根据内容来决定的
- 浮动的盒子中间是没有缝隙的，是紧挨在一起的
- 浮动的盒子只会影响浮动盒子后面的标准流不会影响前面的标准流
- 一个盒子里面有多个盒子，如果其中一个盒子浮动了，那么其他的兄弟也应该浮动起来，以防止引起问题。
- 浮动的元素不会压住下面标准流盒子内的文字，但会压住下面的盒子，浮动产生的目的最初是为了做文字环绕效果的
- 清除浮动
由于父级盒子很多情况下，不方便给高度，但是子盒子浮动，脱离文档流又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子，所以需要清除浮动。
/*1.额外标签法,也称为隔墙法，找到浮动的最后一个元素后再加个标签,必须是块级元素标签*/
.clear {
clear:both;
}
/*2.可以给父级添加overflow,缺点,无法显示溢出的部分*/
.box{
overflow:hidden;
}
/*3.可以给父级添加:after*/
.clearfix:after {
//伪元素必须写的属性
content:'';
//插入的元素必须是块级，伪元素是行内
display:block;
//不要看见这个元素
height:0;
//核心代码清除浮动
clear:both;
//不要看见这个元素
visibility:hidden;
}
/*4.双伪元素清除浮动*/
.clearfix:before,
.clearfix:after
{
content:'';
display:table;//转换为块级，并在同一行上显示
}
.clearfix:after {
clear:both;
}
<div class='box clearfix'>
<div class='item1'>item1</div>
<div class='item2'>item2</div>
<div class='clear'>item2</div>
<div>tips:
- 浮动元素经常和标准流进行搭配使用，用标准流排列上下位置，之后内部元素采取浮动排列左右位置，符合网页布局第一准则。
- 需要清除浮动的原因:父级没高度；子盒子浮动了；影响下面布局，我们就应该清除浮动了。
ps切图
- 图层切图
右击图层->快速导出png
tips:遇到要导出多个图层的情况下，要合并图层再转为png。
- 切片工具
文件菜单->导出->存储为web所用格式->选择我们要的图片格式->存储。 - ps插件切图
cutterman是一款运行在photoshop中的插件，安装并使用它能更好的切图
tips:
- cutterman插件要求你的ps必须是完整版，不能是绿色版，所以大家需要安装完整版本,如何判断:看 窗口菜单的扩展功能，如果不是灰色的，可以使用，就是完整版的。
- 点击进入cutterman官网
定位
相对定位是元素在移动位置的时候，是相对于它原来的位置来说的，它的特点:- 它是相对于自已原来的位置来移动的(移动位置的时候参照点是自己原来的位置)
- 原来在标准流的位置继续占用,后面的盒子仍然以标准流的方式对待它。(不脱标，继续保留原来位置)因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。
div {
position:relative;
}绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的,它的特点:- 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位
- 如果祖先元素有定位(相对、绝对、固定定位)，则以最近一级的有定位祖先元素为参考点移动位置。
- 绝对定位不再占有原先的位置(脱标)
div {
position:absolute;
}子绝父相:子级是绝对定位的话，父级要用相对定位。- 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
- 父盒子需要加定位限制子盒子在父盒子内显示。
- 父盒子布局时，需要占有位置，因此父亲只能是相对定位。
tips:因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位。
.father{
positon:relative;
}
.child {
position:absolute;
}固定定位:fixed(重要)
固定定位是元素固定于浏览器可视区的位置，主要使用场景:可以在浏览器页面滚动时元素的位置不会改变。
div {
positon:fixed;
}固定定位的特点:
- 以浏览器的可视窗口为参照点移动元素。
- 跟父元素没有任何关系。
- 不随滚动条滚动。
- 固定定位不在占有原先的位置(脱离文档流)。
粘性定位:可以被认为是相对定位和固定定位的混合。sticky粘性的语法:
div {
position:sticky;
/*当前元素的可视区和滚动条齐平的时候,使用粘性定位*/
top:0;
}tips: 粘性定位的特点:
- 以浏览器的可视窗口为参照点移动元素(固定定位特点)
- 粘性定位占有原先的位置(相对定位特点)
- 必须添加
top、left、right、bottom其中一个才有效。 - 跟页面滚动搭配使用，但兼容性差，IE不支持。
- 绝对定位的垂直水平居中
div {
position:absolute;
/*让盒子的左侧移动到父级元素的水平中心位置*/
left:50%;
top:50%;
margin-left:-100px;/*让盒子向左移动自身宽度的一半*/
margin-top:-100px;/*让盒子向上移动自身高度的一半*/
width:200px;
height:200px;
background-color:black;
}定位的特殊特性
- 行内元素添加绝对或者固定定位,可以直接设置高度或宽度。
- 块级元素添加绝对或者固定定位，如果不给宽度和高度，默认大小是内容的大小
- 浮动元素、绝对定位(固定定位)元素的都不会触发外边距合并的问题。
- 绝对定位(固定定位)会压住下面标准流所有的内容。
- 脱离文档流后，margin就无效了。
定位叠放次序
在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序(z轴)
div {
z-index:1;
}- 数值可以是正整数、负整数或0，默认是auto,数值越大，盒子越靠上
- 如果属性值相同，则按照书写顺序，后来居上
- 数字后面不能加单位
- 只有定位的盒子才有
z-index属性
显示隐藏元素
display显示隐藏
div {
display:none;//隐藏对象
//display:block;//显示对象
}
tips:
display隐藏元素后，不再占有原来的位置。
visibility属性用于指定一个元素应可见还是隐藏
div {
visibility:visible; //元素可视
//visibility:hidden; //元素隐藏
}
tips:
visibility隐藏元素后，继续占有原来的位置
- overflow
div {
overflow:hidden; //元素隐藏
}overflow
tips: 一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。
但是如果有定位的盒子，请慎用overflow:hidden因为它会隐藏多余的部分。
高级应用
精灵图(雪碧图)
- 精灵图主要是为了有效减少服务器接收和发送请求的次数，提高页面的加载速度，而出现了
css精灵技术(也称css Sprites、css雪碧) - 精灵图特点:
- 精灵图主要针对于小的背景图片使用。
- 主要借助于背景位置来实现
background-position。 - 一般情况下精灵图都是负值。(千万注意网页中的坐标：x轴右边走是正值，左边是负值，y轴同理。)
.box1 {
width: 60px;
height: 60px;
margin: 100px auto;
background: url(images/sprites.png) no-repeat -100px 0;
}
.box2 {
width: 20px;
height: 20px;
margin: 200px;
background: url(images/sprites.png) no-repeat -150px -106px;
}- 精灵图缺点:
- 图片文件还是比较大。
- 图片本身放大和缩小会失真。
- 一旦图片制作完毕想要更换非常复杂
tips:背景图片默认是左上角对齐
字体图标
字体图标的出现，主要解决了精灵图的以上问题。可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体
- 精灵图的优点:
1. 轻量级:一个图标字体要比一系列的图像要小，一旦字体加载了，图标就会马上渲染出来，减少了服务器请求。 2. 灵活性：本质其实是文字,可以很随意的改变颜色、产生隐影、透明效果、旋转等 3. 兼容性：几乎支持所有的浏览器
- 字体图标的使用
//字体声明
@font-face {
//1. 把下载得到的fonts放到我们项目中。
//2. 打开下载得到的style.css,复制@font-face这一段。
}
//使用
span {
font-family:'icomoon';
color:black;
font-size:12px;
}- 追加字体图标
把下载的压缩包里的selection.json从新上传
tips: 字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。
- 如果遇到一些结构和样式比较简单的小图标，就用字体图标。
- 如果遇到一些结构和样式复杂一点的小图片，就用精灵图。
css 三角
- 网页中常见一些三角型，使用
css直接画出来就可以，不必做成图片或者字体图标。
div {
width:0;
height:0;
line-height:0;
font-size:0;
border:50px solid transparent;
border-left-color:red;
}- css 三角巧妙运用
做出直接三角形
div {
width:0;
height:0;
/*1.只保留右边的边框有颜色*/
border-color:transparent red transparent transparent;
/*2.样式都是solid*/
border-style:solid;
/*3.上边框宽度要大,右边框宽度稍小，其余的边框为0*/
border-width:100px 50px 0 0;
/*border-width=>border-top、border-right、border-bottom、border-left*/
}用户界面
- 鼠标样式
<ul>
<li style='cursor:default'>我是默认的小白鼠标样式</li>
<li style='cursor:pointer'>我是鼠标小手样式</li>
<li style='cursor:move'>我是鼠标移动样式</li>
<li style='cursor:text'>我是鼠标文本样式</li>
<li style='cursor:not-allowed'>我是鼠标禁止样式</li>
</ul>- 取消表单轮廓和防止拖拽
input,textarea {
//取消表单轮廓
outline:none;
}
textarea {
//防止拖拽文本域
resize:none;
}tips:文本域的开闭合标签最好在一行，防止文本域里面的光标错位。
vertical-align
实现行内块(图片和表单都属于行内块3)和文字垂直居中，如果是其他类型元素可先转换为行内块
div {
display:inline-block;
vertical-align:middle;
}- 图片底侧空白缝隙解决
- 给图片的父亲加边框，会发现图片的底部会有个空白缝隙，是因为图片默认是和我们文字的基线对齐。
- 把图片转换为块级元素
display:block;
文字溢出省略号显示
- 单行文字溢出省略号显示
div {
width:150px;
height:80px;
background-color:red;
margin:100px auto;
//要满足以下条件才可以
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}- 多行文本溢出省略号显示
/*适合于webkit浏览器或移动端,不考虑ie的情况，pc也可用*/
div {
width:150px;
height:80px;
background-color:red;
margin:100px auto;
//要满足以下条件才可以
overflow:hidden;
text-overflow:ellipsis;
/*弹性伸缩盒子模型显示*/
display:-webkit-box;
/*限制在一个块元素显示的文本的行数*/
-webkit-line-clamp:2;
/*设置或检索伸缩对象的子元素的排列方式*/
-webkit-box-orient:vertical;
}布局小技巧
- margin负值巧妙运用
- 让每个盒子margin 往左移动-1px 正好压住相邻盒子边框，可以去掉相邻盒子的边框。
- 如果在某些条件下需要显示被压住的边框 鼠标经过某个盒子的时候，提高当前盒子的层级即可(如果没有定位，则加相对定位(保留位置))，如果有定位，则加
z-index)
- 文字围绕浮动元素巧妙利用利用浮动不会压住文字，实现左图右文
- 行内块的巧妙运用利用行内块元素的特性一行显示按钮，并在父类中用
text-align:center来横向居中显示子类; - css 初始化代码常用的公共兼容代码
* {
//把我们的内外边距全部清0
margin:0;
padding:0;
/*css3的盒子模型，可以让border和padding不会撑大盒子。*/
box-sizing:border-box;
}
//em和i协调的文字不倾斜
em,i {
font-style:normal
}
//去掉li的小圆点
li {
list-style:none
}
img {
/*border:0 照顾低版本浏览器， 如果图片外面包含了链接会有边框的问题*/
border:0;
//取消图片底侧有空白缝隙的问题
vertical-align:middle
}
button {
/*当我们鼠标经过button 按钮的时候，鼠标会变成小手*/
cursor:pointer
}
a {
color:#666;
//隐藏蓝色的线
text-decoration:none
}
a:hover {
color:#c81623
}
button,input {
font-family:Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
/*默认有灰色边框我们需要手动去掉*/
border: 0;
outline: none;
}
body {
//css3 抗锯齿性，让文字显示的更加清晰
-webkit-font-smoothing:antialiased;
background-color:#fff;
font: 12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans
/*"\5B8B\4F53" 是宋体的意思,用Unicode编码浏览器的兼容性小*/
GB,"\5B8B\4F53",sans-serif;
color:#666
}
.hide,.none{
display:none
}
/*清除浮动的*/
.clearfix:after {
visibility:hidden;
clear:both;
display:block;
content:".";
height:0
}
.clearfix {
*zoom:1
}
//把语义化标签转换为块级,兼容ie9
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary
{
display:block
}css3新特性
属性选择器
<input type="text" value="请输入用户名">
<input type="password" value="请输入用户名" name="">
/*属性选择器*/
/*必须是input,但是同时具有value这个属性 选择这个元素*/
input[value] {
color:red
}
/*属性选择器还可以选择属性=值的某些元素*/
input[type='text'] {
color:red
}
tips:类选择器、属性选择器、伪类选择器、权重为10。
结构伪类选择器
结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素
|选择器|简介|
|--|--|
|E:first-child|匹配父元素中的第一个子元素E|
|E:last-child|匹配父元素中最后一个E元素|
|E:nth-child(n)|匹配父元素中的第n个子元素E|
|E:first-of-type|指定类型E的第一个|
|E:last-of-type|指定类型E的最后一个|
|E:nth-of-type(n)|指定类型E的第n个|
<ul>
<li>我是第1个孩子</li>
<li>我是第2个孩子</li>
<li>我是第3个孩子</li>
<li>我是第4个孩子</li>
<li>我是第5个孩子</li>
<li>我是第6个孩子</li>
<li>我是第7个孩子</li>
<li>我是第8个孩子</li>
<li>我是第9个孩子 </li>
<li>我是第10个孩子</li>
<ul>
<section>
<p>第一个</p>
<div>第二个</div>
<div>第三个</div>
</section>
/*选择ul的第一个孩子,且这孩子必须是li,所以在后代中指定li*/
ul li:first-child {
background:pink;
}
//选择ul里面的最后一个孩子
ul li:last-child {
background:pink;
}
/*
1. n可以是数字,关键字和公式；
2. 如果是数字，就是选择第n个子元素，里面数字从1开始...
3. n可以是关键字：even偶数，odd奇数。
4. n可以是公式：常见的公式如下(如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略)。
*/
/* 执行的时候首先看 :nth-child(n) 之后再看前面的li */
ul li:nth-child(n) {
background:blue;
}
/* 执行的时候首先看 :div ，之后回去看 nth-of-type(n)*/
section div:nth-of-type(n) {
background:blue;
tips:
nth-child(n)公式值n从0开始计算- 结构伪类选择器一般用于选择父级里面的第几个孩子
nth-child对父元素里面所有孩子排序选择(序号是固定的)先找到第n个孩子，然后看看是否和E匹配nth-of-type对父元素里面指定子元素进行排序选择。先去匹配 E，然后再根据E找第n个孩子- 如果是无序列表，
nth-child，用的多。 - 类选择器、属性选择器、伪类选择器、权重为10。
伪元素选择器
伪元素选择器可以帮助我们利用css创建新标签元素，而不需要HTML标签，从而简化HTML结构。规范写法前面两个::,单冒号仅用来支持ie8的。
tips:
before和after创建一个元素，都是属于行内元素- 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素。
- 语法:
element::before {} before和after必须有content属性before和after都是盒子，before和after都在父元素里面创建，before在父元素内容的前面创建元素，after在父元素内容的后面插入元素，。- 伪元素选择器和标签选择器一样，权重为1
css3盒子模型
css3中可以通过box-sizing来指定盒模型，有2个值：即可指定为content-box、border-box,这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况：
1. box-sizing:content-box 盒子大小为width+padding+border(以前默认的)
2. box-sizing:border-box 盒子大小为width
如果盒子模型我们改为了box-sizing:border-box,那padding和border就不会撑大盒子了(前提padding和border不会超过width宽度)- 滤镜filter
filter,css属性将模糊或颜色偏移等图形效果应用于元素。
/* filter:函数(); 例如：filter:blur(5px); blur模糊处理,数值越大越模糊*/
img {
filter:blur(5px)
}- calc函数
calc() 此函数让你在声明css属性值时执行一些计算
//需求我们的子盒子宽度永远比父盒子小30像素
.father
{
width:300px;
height:200px;
background-color:red
}
.son {
//子继承父的宽度然后再减去30px
width:calc(100%-30px);
height:30px;
background-color:yellow;
}
<div class="father">
<div class="son">
</div>过渡
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
div
{
width: 200px;
height: 100px;
background-color: red;
//可以用逗号隔开，写多个属性
transition: width .5s ease 1s,height .5s ease 1s;
//可以用all代表多个属性
//transition: all .5s
}
div:hover{
width: 400px;
}tips:动画写到本身上，谁做动画给谁加
2d转换translate
2D移动是2D转换里的一种功能，可以改变元素在页面中的位置，类似定位。
div {
width:200px;
height:200px;
//x,y
transform:translate(30px,40px);
//横向
transform:translateX(30px);
//纵向
transform:translateY(40px);
/*
这里的50%就是100px 因为translate中的百分比单位是相对于自身元素的，盒子的宽度是200px
*/
transform:translateX(50%);
}- 实际应用：垂直居中
.father {
position:relative;
width:400px;
height:400px
}
.son {
position:absolute;
width:200px;
height:200px;
left:50%;
top:50%;
transform:translate(-50%,-50%)
/*以下等价于以上transform
margin-left:-100px;
margin-top:-100px;
*/
}tips:
- 定义
2D转换中的移动，沿着X和Y轴移动元素。 translate最大的优点：不会影响到其他元素的位置。translate中的百分比单位是相对于自身元素的translate(50%,50%)- 对行内标签没有效果
2d转换rotate
div {
width:150px;
//顺时针旋转45度
transform:rotate(45deg)
}- 实际应用--小三角
div {
width:249px;
height:35px;
border：1px solid #000;
}
div::after {
content:"";
position:absolute;
top:8px;
right:15px;
width:10px
height:10px;
border-right:1px solid #000;
border-bottom:1px solid #000;
transform:rotate(45deg);
transition:all 0.4s
}
div:hover::after {
transform:rotate(225deg);
}- 设置转换中心点
div {
transform-origin:x y;
}- 实际应用--中心点的设置左下角旋转
.div {
width:200px;
height:20px;
border:1px solid pink;
margin:100px auto;
overflow:hidden;
}
div::before {
content:"牛逼";
display:block;
width:100%;
height:100%;
background-color:red;
transform:rotate(180deg);
//左下角
transform-origin:left bottom;
transition:all 0.4s;
}
div:hover::before {
//鼠标移动上去，还原
transform:rotate(0deg);
}
<div></div>tips：
- 注意后面的参数x和y用空格隔开
- x y 默认转换的中心点是元素的中心点
(50% 50%) - 可以给x y 设置像素 或者方位名词
(top bottom left right center )
2d转换scale
缩放，顾名思义，可以放大和缩小。
div {
width:200px;
height:200px;
background-color:red;
margin:100px auto;
transform-origin:left bottom;
}
div:hover {
/*
1.里面写的数字不跟单位，就是倍数的意思,
1就是1倍 2就是2倍
*/
//transform:scale(x,y);
//修改了宽度为原来的2倍，高度不变。
transform:scale(2,1)
/*
宽高同时放大
transform:scale(2)
*/
/*
宽高同时缩小
transform:scale(0.5)
*/
}tips:
- 我们可以进行缩小 小于1 就是缩放
- 不影响其他的盒子，以前的控制宽、高会影响其他盒子。
- 可以设置缩放的中心点。
- 实际运用--图片放大
div {
//不让放大时超出范围
overflow:hidden
float:left;
margin:10px;
}
div img {
transition: all .4s
}
div img:hover {
transform:scale(1,1);
}- 2D旋转 综合写法
div {
width: 200px;
height: 200px;
background-color: pink;
transition: all .5s;
}
div:hover {
/*我们同时又位移和其他属性，我们需要把位移放到最前面。
*/
transform: translate(150px,50px) rotate(180deg);
}tips:
- 同时使用多个转换，其格式为:
transform:translate() rotate() scale()...等 - 其顺序会影响转换的效果。(先旋转会改变坐标轴方向)
- 当我们同时又位移和其他属性的时候，记得要将位移放到最前。
动画(animation)
动画是css3中最具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
相比较过滤,动画可以实现更多变化，更多控制，连续自动播放等效果。
- 动画的基本使用
- 先定义动画
- 再使用(调用)动画
/*需求：想页面一打开，一个盒子就从左走到右边
1.定义动画
*/
@keyframes move {
/*开始状态 可省略*/
0% {
transform:translate(0,0 );
}
/*第一状态*/
25% {
transform:translate(1000px,0);
}
/*第二状态*/
50% {
transform:translate(1000px,500px);
}
/*第三状态*/
75% {
transform:translate(0,500px);
}
/*结束状态 第四*/
100% {
transform:translate(0,0);
}
}
div {
width: 200px;
height: 200px;
background-color:pink;
/*2.调用动画*/
/* 动画名称 */
animation-name:move;
/* 动画持续时间 */
animation-duration:10s
}tips:
- 0% 是动画的开始，100%是动画的完成。这样的规则就是动画序列。
- 在
@keyframes中规定某项css样式，就能创建由当前样式逐渐改为新样式的动画效果。 - 动画是使元素从一种样式逐渐变化为另一种样式的效果您可以改变任意多的样式任意多的次数。
- 请用百分比来规定变化生的时间，或用关键词
"from"和"to"，等同于0%和100% - 百分比就是总的时间(我们这个案例10s)的划分
25%*10=2.5s
- 动画常用属性
div {
width: 100px;
height: 100px;
background-color:pink;
/*动画名称*/
animation-name:move;
/*持续时间*/
animation-duration:2s;
/*运动曲线*/
animation-timing-function:ease;
/*何时开始*/
animation-delay:1s;
/*重复次数 iteration 重复的 count 次数 infinite 无限 */
animation-iteration-count:infinite;
/*是否反方向播放 默认的是 normal 如果反方向 就写alternate*/
animation-direction:alternate;
/*动画结束后的转态 默认是backward 回到起始转态 我们可以让他停留在结束状态 forwards*/
animation-fill-mode:forwards;
}
div:hover {
/*鼠标经过div 让这个div 停止动画，鼠标离开就继续动画*/
animation-play-state:paused;
}
- 动画简写
animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的转态;
div {
animation:move 2s linear 0s 1 alternate forwards
}
/*省略写法--顺序除了持续时间一定在何时开始之前,其他随意*/
div {
animation: move 2s linear alternate forwards
}tips:
- 以上简写，要用空格隔开，持续时间一定在何时开始之前。
- 前面2个属性一定要写，其他可以省略，顺序不定
- 实际应用--波纹(大数据地图地点)
map {
position: relative;
width: 747px;
height: 616px;
//中国地图
background:url(media/map.png) no-repeat
margin 0 auto;
}
.city {
position: absolute;
top:100px;
right:100px;
color:#fff;
}
.dotted {
width: 8px;
height: 8px;
background-color: #09f;
border-radius: 50%;
}
.city div[class^='pulse'] {
/*保证我们小波纹在父盒子里面水平垂直居中，放大之后就会中心向四周发散*/
position:absolute;
top:50%
left:50%
transform:translate(-50%,-50%);
width: 8px;
height: 8px;
//有阴影波纹会更好看
box-shadow: 0 0 12px #009dfd;
border-radius:50%;
}
.city div.pulse2 {
animation-delay:0.4s;
}
.city div.pulse3 {
animation-delay:0.8s;
}
@keyframes pulse {
0% { }
70% {
/*
transform:scale(5);我们不要用scale,因为他会让阴影变大;
*/
width:40px;
height:40px;
opacity:1;
}
100% {
width:70px;
width:70px;
opacity:0;
}
}
<div class='map'>
<div class='city'>
<div class='dotted'></div>
<div class='pulse1'></div>
<div class='pulse2'></div>
<div class='pulse3'></div>
</div>
</div>- 速度曲线细节
animation-timing-function:规定动画的速度曲线，默认是"ease"
/*需求：打字机效果*/
div {
overflow:hidden;
width:0;
height:30px;
background-color:pink;
white-space:nowrap;
/*steps 就是分几步来完成我们的动画 有了steps 就不要再写 ease 或者linear了*/
animation:w 4s steps(10) forwards;
}
@keyframes w {
0% {
width: 0;
}
100%{
width: 200px;
}
}
/*需求：奔跑的小熊
1.准备小熊的跑的各种动作背景图，放在一张里面(类型精灵图)
2.用背景图的position,改变位置,让它呈现有跑在一个盒子中的感觉。 */
body {
background-color: #ccc;
}
div {
position:absolute;
width: 200px;
height: 100px;
background: url(media/bear.png) no-repeat;
/*我们元素可以添加多个动画，用逗号分隔*/
animation: bear 1s steps(8) infinite, move 3s forwards;
}
@keyframes bear {
0% {
background-position:0,0;
}
100%{
background-position:-1600px 0
}
}
@keyframes move {
0% {
left:0;
}
100%{
/*left 50% 会多跑宽度的一半的距*/
left:50%;
//margin-left:-100px;
transform:translateX(-50%)
}
}tips:我们元素可以添加多个动画，用逗号分隔
3D转换
- 三维坐标系
三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。
x轴：水平向右 注意：x右边是正值，左边是负值
y轴：垂直向下 注意:y下面是正值，上面是负值
z轴：垂直屏幕 注意：往外面是正值，往里面是负值- 3D移动
translate3d
3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向。
/*语法:transform:translate3d(x,y,z)*/ ;
div {
width: 200px;
height: 200px;
background-color:pink;
/*translateZ(100px) 向外移动100px (向我们的眼睛来移动的)*/
transform:translate3d(100px,100px,100px)
}tips:
transform:translateZ(100px):仅仅是在Z轴上移动,translateZ一般用px单位xyz是不能省略的，如果没有就写0;
- 3D透视
perspective
透视写在被观察元素的父盒子上面的，是一种观察的距离，Z轴越大(正值) 我们看到的物体就越大，近大远小;
body {
//有了透视, transform:translateZ 才管用，透视越小，看到的物品越立体，盒子越大
perspective: 500px;
}
div {
width: 100px;
height: 200px;
background-color: pink;
margin: 100px auto;
transform:translateZ(0)
}- 3D旋转
rotateX
body {
perspective: 300px;
}
img {
display: block;
margin: 100px auto;
transition: all 1s;
}
img:hover {
//transform:rotateX(180deg);
//transform:rotateY(180deg);
//transform:rotateZ(180deg);
//参数 x,y,z 那个有值就是沿着该轴旋转，最后一个表示旋转的角度。
//transform:rotate3d(1,0,0,45deg);
//沿着x和y的矢量即沿着对角线旋转45deg
transform:rotate3d(1,1,0,45deg);
}
<img src="media/pig.jpg">tips: 对于元素旋转的方向的判断 可根据左手准则
- X轴旋转: 左手的手拇指，指向x轴的正方向(指向右手边的方向)，其余手指的弯曲方向就是该元素沿着x轴旋转的方向。
- Y轴旋转：左手的手拇指指向y轴的正方向(指向自己的方向)，
其余手指的弯曲方向就是该元素沿着y轴旋转的方向(正值)。
- 3D呈现
transfrom-style- 控制子元素是否开启三维立体环境。
transform-style:flat子元素不开启3d立体空间 默认的transform-style:preserve-3d;子元素开启立体空间- 代码写给父级，但是影响的是子盒子
/*
需求:两个盒子交叉(呈十字)立体旋转
*/
body{
//body是div的爷爷级，也算是父级。
perspective:500px;
}
.box {
width: 200px;
height: 200px;
margin: 100px auto;
transition:all 2s;
/*让子元素保持3d立体空间环境*/
transform-style:preserve-3d;
}
.box:hover {
transform:rotateY(60deg);
}
.box div {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:red;
}
.box div:last-child {
background-color:blue;
transform:rotateX(90deg);
}
<div class="box">
<div></div>
<div></div>
<div>- 实际案例--两面翻转的盒子
body {
//透视
perspective:400px;
}
.box {
position: relative;
width: 300px;
height: 300px;
margin: 100px auto;
transition: all .6s;
/*让子元素保持3d立体空间环境*/
transform-style:preserve-3d;
}
.box:hover {
transform:rotateY(180deg);
}
.front,
.back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
font-size: 30px;
color: #fff;
text-align: center;
line-height: 300px;
}
.front {
background-color:red;
z-index:1;
}
.back {
background-color:blue;
transform:rotateY(180deg);
}
<div class="box">
<div class="front">我是正面</div>
<div class="back">我是负面</div>
</div>
//box父盒子里面包含前后两个子盒子，box是翻转的盒子 front是前面盒子，back是后面盒子。杂项
css书写规范
- 建议遵循以下顺序
1.布局定位属性: display/position/float/clear/visibility/overflow(建议display第一个写，毕竟关系到模式)
2.自身属性:width/height/margin/padding/border/background
3.文本属性:color/font/text-decoration/text-align/vertical-align/white-space/break-word
4.其他属性(css3):content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient- 示例
div {
//布局
display:block;
position:relative;
float:left;
//自身属性
width:100px;
height:100px;
margin:0 10px;
padding:20px 0;
//文本属性
font-family:Arial,'Helvetica Neue', Helvetica,sans-sefif;
color:#333;
//css3新增的
background:rgba(0,0,0,.5);
border-radius:10px;
}页面布局整体思路
为了提高网页制作的效率，布局时通常有以下的整体思路
- 必须确定页面的版心(可视区/安全距离)，我们测量可得知。
- 分析页面中的行模块，以及每个行模块中的列模块。其是页面布局第一准则。
- 一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置，页面布局第二准则。
- 制作
HTML结构，我们还是遵循，先有结构，后有样式的原则，结构永远最重要。
网页布局总结
通过盒子模型，清楚知道大部分html标签是一个盒子。
通过css浮动、定位可以让每个盒子排列成为网页。
一个完整的网页,是标准流、浮动、定位一起完成布局的，每个都有自己的专门用法。
- 标准流：
可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。
- 浮动：
可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局。
- 定位：
定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。
html5的新特性
- 语义化标签
<header></header>
<article></article>
<aside></aside>
<details></details>
<figcaption></figcaption>
<footer></footer>
<hgroup></hgroup>
<main></main>
<menu></menu>
<nav></nav>
<section></section>
<summary></summary>- 音视频标签
<audio> </audio>
<video> </video>- 新增的input类型
新增的表单属性
扫一扫
25万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
