css 样式 记录
CSS
CSS语法规范：
写css样式前建议加上样式 * {margin:0；padding:0；} 将网页所有边距清零，方便后面写样式
建议直接css初始化，代码可以从京东，淘宝等大网站偷
CSS规则由两个主要的部分构成:选择器以及一条或多条声明。
选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式属性和属性值以“键值对”的形式出现
属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
属性和属性值之间用英文“”分开
标签选择器方法（不建议使用）：
<style type="text/css">
p{
color: blueviolet;
}
div{
color: darkorange;
}
</style>
加上上面选择器后，指定的标签都会改变样式，如<p>和<div>标签
标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
作用
l 标签选择器可以把某一类标签全部选择出来，比如所有的<div>标签和所有的<span>标签。
优点
l 能快速为页面中同类型的标签统一设置样式
缺点
l 不能设计差异化样式，只能选择全部的当前标签。
类选择器:(常用）
如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器.
语法:
.类名{
属性1:属性值1;
...
}
举例：例如，将所有拥有red类的HTML元素均为红色。
.red {
color: red;
}
写好css样式后，标签需要引用class
语法如下：
<div class= 'red'>变红色</div>
red则是刚刚写好的css类名
注意:
l 类选择器使用“”（英文点号)进行标识，后面紧跟类名(自定义，我们自己命名的)
l 长名称或词组可以使用中横线来为选择器命名。
l 可以理解为给这个标签起了一个名字，来表示。
l 不要使用纯数字、中文等命名，尽量使用英文字母来表示。
l 命名要有意义，尽量使别人一眼就知道这个类名的目的。
l 命名规范:见附件( Web前端开发规范手册.doc )
Id选择器
样式表：
<style type="text/css">
#idxuanze {
font-size: 30px;
}
</style>
调用：
<div id="idxuanze"> id选择器</div>
样式名前面加#号，元素加入id属性，则所有使用该id的元素都调用加#号的样式
注意：
如果前面有标签已经调用过该#样式，则后面的元素不在调用【只调用一次】
通配符选择器
<style type="text/css">
*{
font-size: 30px;
}
</style>
会修改所有标签修改。
选择器总结
|
基础选择器 |
作用 |
特点 |
使用情况 |
用法 |
|
标签选择器 |
可以选出所有相同的标签，比如p |
不能差异化选择 |
较多 |
p { color: red;} |
|
类选择器 |
可以选出1个或者多个标签 |
可以根据需求选择 |
非常多 |
.nav { color:red;} |
|
id选择器 |
—次只能选择1个标签 |
ID属性只能在每个HTML文档出现一次 |
一般和js搭配 |
#nav {color:red;} |
|
通配符选择器 |
选择所有的标签 |
选择的太多，有部分不需要 |
特殊情况使用 |
* {color: red;} |
l 每个基础选择器都有使用场景，都需要掌握
l 如果是修改样式，类选择器是使用最多的
l
Css基本样式
|
font-family: "微软雅黑"; |
文字字体 |
|
|
font-size: 50px; |
文字大小，需要带px单位 |
如h1等标题有特殊性要另外修改 |
|
font-weight: 80; |
文字粗细，不需要加单位 |
|
|
font-style: italic; |
文字倾斜 |
很少用，一般用<em>和<i>设置 |
|
text-align: center; |
对齐属性，left左对齐,right右对齐，center居中 |
|
|
text-decoration: underline; |
文本添加下划线，删除线等 |
|
|
text-indent: 20px/2em;; |
文本首行缩进 |
写文章空两格格式，建议用em单位 1个字=1em |
|
line-height: 10px; |
文字行高/当前文本的高（长）度 |
控制行与行之间的距离 |
|
|
|
|
|
list-style: none; |
清除列表序号/图标样式 |
|
CSS引入方式
内部样式表：
当前文本写，直接调用class
行内样式表：
语法：标签+属性style直接写
<div style="color: red; font-size: 12px; ">青春不常在，抓紧谈恋爱</div>
外部样式表：
单独的 style.css 样式文件
然后引入：
<link rel="stylesheet" type="text/css" href="style.css"/>
href可以是外部链接也可以是本地
复合选择器
后代选择器：
ol li{
font-family: 宋体;
}
效果:<ol>内的<li>标签样式改变，只修改元素2
多个相同标签，用class区分
如 <ol class=”nav”>
则 样式表： nav li{ 样式内容}
子元素选择器：
用 > 符号 表示 样式>儿子>孙子
这样就能只改儿子元素，不修改孙子元素
并集选择器：
写多个元素的样式
div,p{
font-size:15;
}
伪类选择器：
链接伪类选择器样式
l a:link /*所有未被访问的链接效果*/
l a : visited /*所有已被访问的链接效果*/
l a : hover/* 鼠标指针位于其上的链接 效果*/
l a : active/* 活动链接（鼠标按下未弹起的链接）效果 */
注意事项：必须按照 link,visited,hover,active的顺序写，乱序不会生效
focus伪类选择器（获取焦点效果）
焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。
input : focus {
background-color: yellow ;
}
选择器总结
|
选择器 |
作用 |
特征 |
使用情况 |
隔开符号及用法 |
|
后代选择器 |
用来选择后代元素 |
可以是子孙后代 |
较多 |
符号是空格.nav a |
|
子代选择器 |
选择最近一级元素 |
只选亲儿子 |
较少 |
符号是大于.nav>p |
|
并集选择器 |
选择某些相同样式的元素 |
可以用于集体声明 |
较多 |
符号是逗号 .nav,.header |
|
链接伪类选择器 |
选择不同状态的链接 |
跟链接相关 |
较多 |
重点记住a{}和a:hover鼠标滑过效果 |
|
:focus选择器 |
选择获得光标的表单 |
跟表单相关 |
较少 |
input:focus焦点效果 |
显示模式
块元素
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。
块元素单独占一行
文字标签如<p>是存放文字的，不能放块元素，否则会隔开生成两个<p>
行内元素
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
l 一行可显示多个行内元素
l 高，宽设置无效，默认宽度就是本身内容的大小
l 行内元素只能容纳纯文本和其它行内元素
注意事项：
l <a>链接里面不能再放链接
l 特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全,如<a>里面放<img>
l
特殊：行内块元素
没有行内块元素，但是实际上又存在
在行内元素中有几个特殊的标签——<img />、<input /> 、<td>，它们同时具有块元素和行内元素的特点。
有些资料称它们为行内块元素。
行内块元素的特点︰
l 和相邻行内元素(行内块)在一行上，但是他们之间会有空白缝隙。一行可以显示多个(行内元素特点)。
l 默认宽度就是它本身内容的宽度（行内元素特点)。
l 高度，行高、外边距以及内边距都可以控制(块级元素特点)。
元素显示模式总结
|
元素模式 |
元素排列 |
设置样式 |
默认宽度 |
包含 |
|
块级元素 |
—行只能放一个块级元素 |
可以设置宽度高度 |
容器的100% |
容器级可以包含任何标签 |
|
行内元素 |
—行可以放多个行内元素 |
不可以直接设置宽度，高度 |
它本身内容的宽度 |
容纳文本或刘其他行内 元素 |
|
行内块元素 |
—行放多个行内块元素 |
可以设置宽度和高度 |
它本身内容的宽度 |
|
元素显示模式转换
因为<a>是行内元素，所以无法设置宽度和高度，但是实际使用中，我们想让<a>标签设置高度和宽度以及颜色效果，增加大小，
那么就需要把<a>转换为块元素
l 只需要在样式中加入：display: block;
如下：
a{
display: block;
}
l 相反，块元素→行内元素，只需要样式加入： display: inline;
l 转换为 行内块元素，只需要样式加入：display: inline-block;
CSS设置背景
|
设置 背景颜色 |
|
|
|
background-image: url(图片路径); |
设置 背景图片 |
|
|
background-repeat: no-repeat; |
设置 背景平铺 |
repeat :平铺 no-repeat :背景图像不平铺 repeat-x :从左向右平铺 repeat-y :从上到下平铺 |
|
background-position: center right; background-position: 20px 50px; background-position: 20px center;
|
l 图片位置，上中下左右居中都可 l 也可以填边距坐标（x,y） l 也可以混合单位 |
坐标（x，y）,如果只填写一个数字，则只是x数值，另一个默认垂直居中 |
|
background-attachment: fixed; |
固定背景图片位置 默认值为：scroll （滚动） |
|
|
background: rgba(0,0,0,0.3); |
背景颜色透明度 绿色区域为颜色rgb色号，蓝色为透明度 |
IE9+版本浏览器支持 透明度为 0 - 1 |
网页盒子边框模型
边框border可以给<div>等标签增加边框
|
border-style: solid; |
设置边框样式 |
|
||||||||||||||||||||||
|
border-width: 10px; |
设置边框粗细 |
默认0（无边框） 使用前必须加上上面的样式否则无效 |
||||||||||||||||||||||
|
border-color: green; |
边框颜色 |
如果不填默认是跟随文字颜色 |
||||||||||||||||||||||
|
padding-left: 20px; |
边框与里面内容的边距 |
有left,fight,top,bottom 使用前必须加上style样式否则无效 如果外部标签没有设置高度则不会撑开 |
||||||||||||||||||||||
|
border-top: 1px solid #8A2BE2; |
复合写法，（边框大小,边框样式,颜色） |
|
||||||||||||||||||||||
|
border-radius: 10px/50%; |
四周边框 圆角模式，数值越大，圆角度越大 |
可以是准确数值，也可以是百分比% |
外边距
|
margin: 50px; |
与周围标签的边距 |
|
|
margin-top: 50px; |
与上边标签的边距 |
|
|
margin-left: 50px; |
与左边标签的边距 |
|
|
margin-bottom: 50px; |
与右边标签的边距 |
|
外边距自动居中
|
margin-left: auto; |
左边自动居中 |
必须先有width宽度 |
|
margin-right: auto; |
右边自动居中 |
必须先有width宽度 |
|
margin: auto; |
上下左右居中 |
必须先有width宽度 |
|
margin: 0 auto; |
上下不设置，左右居中 |
必须先有width宽度 |
注意事项：
如果两个嵌套标签如<div> <div></div> </div>
子标签不能在父标签下直接加外边距，
解决方法：
l 可以为父元素定义上边框。【border: 1px solid transparent;】[transparent设置边框透明]
l 可以为父元素定义上内边距。【padding:1px;】
l 可以为父元素添加【overflow:hidden】
盒子阴影效果
语法︰
不占用网页大小
|
box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.3); |
rgba为颜色和透明度 |
|
值 |
描述 |
|
h-shadow |
必需。水平阴影的位置x。允许负值。 |
|
v-shadow |
必需。垂直阴影的位置y。允许负值。 |
|
blur |
可选。模糊距离。数值越大阴影越模糊 |
|
spread |
可选。阴影的尺寸 / 大小。 |
|
color |
可选。阴影的颜色。 |
|
inset |
可选。将外部阴影(outset)改为内部阴影。默认不写的。 |
文字阴影效果
|
text-shadow: 5px 5px 5px rgba(0,0,0,0.3); |
不常用，了解即可 |
|
值 |
描述 |
|
h-shadow |
必需。水平阴影的位置。允许负值。 |
|
v-shadow |
必需。垂直阴影的位置。允许负值。 |
|
blur |
可选。模糊的距离。 |
|
color |
可选。阴影的颜色。 |
浮动效果/位置
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
块级元素会紧贴
|
float: left; |
向左浮动 |
|
float: right; |
向右浮动 |
浮动特性-脱标
- 脱离标准流的位置到指定位置
- 不在保留原先的位置，原先的位置被其它元素占有
- 当行内元素浮动时，会具有行内块元素的特性（可以被添加高度和宽度等）
注意∶
浮动的元素是互相贴靠在一起的(不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
清除浮动（自动检测浮动高度，就不会影响下面的标准流）*重要！
清除浮动方法4种：
1．额外标签法也称为隔墙法，是W3C推荐的做法（常用）。
额外标签法是在浮动元素末尾添加一个空的标签。（必须是块级元素，单独占那一行）
例如<div style="clear:both”></div>，或者其他标签(如<br />等)。这样就会占用那一行位置，不会被下面的上来
2．父级添加overflow属性
可以给父级添加overflow属性，将其样式属性值设置为hidden、auto或scroll 。如：overflow: hidden;
注意是给父元素添加代码
3．父级添加after伪元素（了解，照顾低版本浏览器，大厂常用）
4．父级添加双伪元素（闭合浮动）
清除浮动总结：
定位
1．浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。
2．定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。
定位=定位模式+偏移
定位模式决定元素的定位方式，它通过CSS的position属性来设置，其值可以分为四个:
|
值 |
语义 |
|
static |
静态定位 |
|
relative |
相对定位 |
|
absolute |
绝对定位 |
|
fixed |
固定定位 |
|
left:10px |
left,right,top,bottom定位后需要指定位置 |
|
sticky |
粘性定位sticky (了解)，IE不支持，兼容性差 |
注意【子绝父相----子元素用绝对定位，父元素用相对定义】
使用定位前，都需要将指定的标签加上 position：定位模式，明确是哪种方式定位
静态定位static（了解）
语法∶
选择器{ position: static;
left:10px;
}
l 静态定位按照标准流特性摆放位置，它没有边偏移
l 静态定位在布局时很少用到
相对定位relative（重要）
语法：
选择器{ position: relative;
left:10px;
}
特点：
l 相对于自身位置改变，以自身为参照物
l 改变位置后，原来的位置保留，其它标签不会占用
绝对定位absolute（重要）
语法：
选择器{ position : absolute;
left:10px;
}
绝对定位是元素在移动位置的时候，是相对于它父元素来说的
特点：
l 如果没有父元素或者父元素没有定位，则以浏览器为准定位(Document文档)。
l 如果父元素有定位（相对、绝对、固定定位），则以最近一级的有定位父元素为参考点移动位置,
l 绝对定位原先的位置不保留（脱标）
固定定位fixed（重要）
固定定位是元素固定于浏览器可视区的位置。主要使用场景∶可以在浏览器页面滚动时元素的位置不会改变。
语法︰
选择器{ position: fixed;
left:10px;
}
特点：
l 以浏览器的可视窗口为参照点移动元素。
l 跟父元素没有任何关系
l 不随滚动条滚动。
l 固定定位不在占有原先的位置。
粘性定位sticky (了解)
语法∶
选择器{ position : sticky; top: 10px; }
粘性定位的特点∶
l 以浏览器的可视窗口为参照点移动元素(固定定位特点)
l 2.粘性定位占有原先的位置（相对定位特点)
l 3．必须添加 top、 left、right、bottom其中一个才有效跟页面滚动搭配使用。兼容性较差，IE不支持。
定位顺序（标签上下位层）
定位叠放次序z-index
在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序(z轴)
语法︰
选择器{ z-index: 1; }
l 数值可以是正整数、负整数或0,默认是auto，数值越大，盒子越靠上
l 如果属性值相同，则按照书写顺序，后来居上
l 数字后面不能加单位
l 只有定位的盒子才有z-index属性，普通标准流和浮动没有该属性
定位拓展
- 绝对定位的盒子居中：
加了绝对定位的盒子不能通过margin:0auto水平居中，但是可以通过以下计算方法实现水平和垂直居中。
如需要水平垂直居中，则
1. Left走50%父容器宽度的一半
left: 50%;
2. margin负值往左边走自身宽度的（负一半数值）
margin-left: -100px;
2.特殊性（我称其为逆天改命）
行内元素添加定位后，可以直接设置宽，高
块元素添加定位后，不能直接设置宽，高。[宽，高变成与自身内容相关]
3.脱标的定位会压住后面升上来的内容
元素显示与隐藏
类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现!
本质:让一个元素在页面中隐藏或者显示出来。
display 属性
display属性用于设置一个元素应如何显示。
l display: none ;隐藏对象
l display : block ;除了转换为块级元素之外，同时还有显示元素的意思
display隐藏元素后，不再占有原来的位置。
visibility可见性
visibility属性用于指定一个元素应可见还是隐藏。
l visibility : visible;元素可视
l visibility : hidden;元素隐藏
visibility隐藏元素后，继续占有原来的位置。
overflow溢出
overflow属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。
举例语法:
Overflow:hidden
|
属性值 |
描述 |
|
visible |
默认值，不剪切内容也不添加滚动条 |
|
hidden |
不显示超过对象尺寸的内容，超出的部分隐藏掉 |
|
scroll |
不管是否溢出，总是显示滚动条 |
|
auto |
超出自动显示滚动条，不超出不显示滚动条（自动） |
精灵图
精灵图的使用
l 精灵图主要针对于小的背景图片使用。
l 主要借助于背景位置来实现---background-position。
l 一般情况下精灵图都是负值。(千万注意网页中的坐标︰x轴右边走是正值，左边走是负值，y轴同理。)
用法：
1.获取整张大图中，某个想要显示小图标的大小和坐标位置
2.设置放置图标的盒子大小
3.background-position：x y 设置坐标
了解一下即可，因为需要许多小图片整合并成一张大图，不好更改图片，而且图片大占内存，图放大后会失真
字体图标
国内：https://www.iconfont.cn 阿里
界面样式/鼠标样式
鼠标指针样式
语法：
style {cursor: pointer; }
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
|
属性值 |
描述 |
|
default |
小白默认 |
|
pointer |
小手/手型 |
|
move |
移动 |
|
text |
文本 |
|
not-allowed |
禁止 |
轮廓线outline
当界面上有input编辑框时，鼠标点击后，编辑框边框会显示蓝色，可以用代码取消
语法：
l 给表单添加outline:0;或者 outline: none;样式之后，就可以去掉默认的蓝色边框。
举例：
input { outline: none; }
文本域防拖拽
当网页设置文本域后，右下角会有可以拖拽大小按钮，可以取消掉
语法：
textarea {
resize: none;
}
图片或表单（行内块元素和文字垂直对齐）
CSS的vertical-align属性使用场景∶经常用于设置图片或者表单(行内块元素)和字垂直对齐。
官方解释∶用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。
语法︰
vertical-align : baseline（默认） | top | middle | bottom
|
值 |
描述 |
|
baseline |
默认。元素放置在父元素的基线上。 |
|
top |
把元素的顶端与行中最高元素的顶端/顶线对齐 |
|
middle |
把此元素放置在父元素的中部/中线。居中对齐 |
|
bottom |
把元素的顶端与行中最低的元素的底端/底线对齐。 |
此方法可以用来处理图片和文字不能对齐的问题，也可以解决图片底部默认空白缝隙问题，如下
bug:图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。主要解决方法有两种:
l 给图片添加vertical-align:middle | top| bottom等。（提倡使用的)
l 把图片转换为块级元素display: block; 【解释；因为块元素独占一行，没有上下中线等，转为块元素后就能直接对齐】
溢出文字省略号显示
1.单行文本溢出
必须满足三个条件
- 先强制一行内显示文本
white-space: nowrap;(默认normal自动换行)
- 超出的部分隐藏
overflow: hidden;
3．文字用省略号替代超出的部分
text-overflow : ellipsis;
2.多行文本溢出
多行文本溢出显示省略号，有较大兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webkit内核)
- 隐藏溢出部分，并把隐藏部分用省略号代替
overflow : hidden;
text-overflow: ellipsis;
- 弹性伸缩盒子模型显示大
display: -webkit-box;
- 设置在第几行的溢出显示省略号
webkit-line-clamp : 2;
- 设置或检索伸缩盒对象的子元素的排列方式
webkit-box-orient : vertical;
增强型Css3
CSS3的现状
l 新增的CSS3特性有兼容性问题，ie9+才支持移动端支持优于PC端
l 不断改进中
l 应用相对广泛
l 现阶段主要学习∶新增选择器和盒子模型以及其他特性
新增css选择器
属性选择器（权重10）
属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者id选择器。
|
选择符 |
简介 |
|
E[att] |
选择具有att属性的E元素 |
|
E[att="val"] |
选择具有att属性且属性值等于val的E元素 |
|
E[att^="val"] |
匹配具有att属性且值以val开头的E元素 |
|
E[att$="val"] |
匹配具有att属性且值以val结尾的E元素 |
|
E[att*="val"] |
匹配具有att属性且值中含有val的E元素 |
使用方法：
- <input type="text" value="带有value属性的文本框" />
- <input type="text"/>
两个文本框，第一个带有value属性，就可以用 标签名[属性名]{ }的方法来匹配到该标签
input[value]{
color: aqua;
样式...
}
也可以使用E[att="val"] 也就是 标签名[属性名="值"] { }来匹配到该标签然后修改样式，引号加不加都可以
代码如下：
input[value="这里填属性的值"]{
color: aqua;
样式...
}
E[att^="val"]的用法：
当有多个标签使用了不同的class，但是前面有相同的字符，也就是相同字符开头的class名
例如
- class="xxx1"
- class="xxx2"
- class="xxx3"
这里的xxx都是相同字符
那么就可以使用该方法匹配出class前面内容相同的标签
input[class^="xxx"]{
样式...
}
和这个方法相反的是E[att$="val"]，从尾部寻找相同的字符来匹配
E[att*="val"]使用方法：
匹配所有带有 属性名中带有 该字符的标签
不常用，了解
结构伪类选择器
结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素
|
选择符 |
简介 |
|
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个,如指定div就只找div标签 |
如果创建了<ul>标签中有多个<li>，前面的方法好，但是起名字麻烦，这里可以使用结构伪类方法，
语法：
ul :first-child {
background-color:pink;
}
这样即是选择了 <ul>标签下的 第一个标签【注意蓝色区域是空格，一定要加】
如果是指定要选择<ul>标签下的 <li>标签，则增加一个li
ul li:first-child {
background-color:pink;
}
E:nth-child(n)用法（重要）
nth-child ( n )选择某个父元素的一个或多个特定的子元素
l n可以是数字，关键字和公式
l n如果是数字，就是选择第n个子元素，里面数字从1开始...
l n可以是关键字: even偶数，odd奇数【如果n填了这个就是把偶数或奇数的位置的标签选出来】
l n可以是公式︰常见的公式如下(如果n是公式，则从O开始计算，但是第0个元素或者超出了元素的个数会被忽略)
|
公式 |
取值 |
|
2n |
偶数 ，等价于even |
|
2n+1 |
奇数，等价于odd |
|
5n |
5 10 15....5的倍速 |
|
n+5 |
从第5个开始(包含第五个)到最后 |
|
-n+5 |
前5个（包含第5个)... |
新增：伪元素选择器/标签中前后插入内容
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。
|
选择符 |
简介 |
|
标签名+::before（如div::before） |
在元素内部的前面插入内容,div标签是举例 |
|
标签名+::after |
在元素内部的后面插入内容 |
语法：
div::before{
content: "这是放在前面的内容";
}
l before和after必须有content属性
l before和after 创建一个元素，但是属于行内元素（不能设置高宽，如想设置要进行转换）
l 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素语法: element::before { }
l before在父元素内容的前面创建元素，after在父元素内容的后面插入元素伪元素选择器和标签选择器一样，权重为1
解释下content必写属性：
如果想在div标签中插入一个放在div内前面的标签，可以写
div::before{
content: "这是放在前面的内容";
}
这样写，指定的div标签内就会出现content定义的内容
盒子模型
CSS3中可以通过box-sizing来指定盒模型，有2个值:即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况︰
1. box-sizing:content-box盒子大小为width + padding + border (以前默认的)
2. box-sizing: border-box盒子大小为width（CSS3新增，锁定标签大小，不会被撑大！）
如果锁定大小，那padding和border就不会撑大盒子了(前提padding和border不会超过width宽度)
图片模糊/变虚化效果
cSS3滤镜filter:
语法：
filter: blur(5px);
blur是一个javascript函数，模糊处理数值越大越模糊，改为0px这是不模糊效果
Calc计算函数
如子元素想跟随父元素大小而改变某些数值，可以使用该函数计算
语法：
width: calc(100% - 80px);
括号里面可以使用+ -*/来进行计算。
这里用宽度举例。100%是父盒子的大小，当父盒子的宽度改变，子盒子宽度就相当于父盒子宽度-80px
过渡动画效果
语法：
transition:要过渡的属性 花费时间 运动曲线 何时开始;
1.属性︰想要变化的css 属性，宽度高度 背景颜色 内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以。
2.花费时间:单位是秒(必须写单位）比如0.5s
3.运动曲线:默认是ease(可以省略)
4.何时开始︰单位是秒(必须写单位)可以设置延迟触发后多久开始，时间默认是Os（可以省略)
5.标签另写div:hover{} 样式效果
必须带要改变的是什么效果写在hover内
如：
div:hover {
Iwidth: 400px;
height: 200px;
background-color:skyblue;
}
因为后面两个值一般都忽略，所以下面举个简单的修改宽度的例子（想要哪个东西变化就写什么）
如果想要哪个标签进行过渡效果，就在哪个标签样式写上transition:xxx；
代码：
transition: width .5s;
补充：
如果想要同时多个效果，例如高度和宽度一起改变，只需要这样
代码：
transition: width .5s,height .5s;
在两个效果中间加 , 逗号隔开写即可
