目录
一:初识CSS
- 选择器是用于指定 CSS 样式的 HTML 标签,花括号内是对该对象设置的具体样式
- 属性和属性值以“键值对”的形式出现
- 属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等
- 属性和属性值之间用英文“:”分开
- 多个“键值对”之间用英文“;”进行区分
所有的样式,都包含在 <style> 标签内,表示是样式表,<style> 一般写到 </head> 上方。
如下图所示:
<head>
<style>
h3 {
color: blue;
font-size: 20px;
}
</style>
</head>
二:CSS 选择器
选择器就是根据不同需求把不同的标签选出来
2.1.css基础选择器
- 基础选择器是由单个选择器组成的
- 基础选择器又包括:标签选择器、类选择器、id 选择器和通配符选择器
2.1.1.标签选择器
p {
color: blanchedalmond;
font-size: 50px;
}
2.1.2.类选择器
如果想要差异化选择不同的标签,单独选一个或者某几个标签,可以使用类选择器
.red {
color: red;
}
<div class='red'> 变红色 </div>
类选择器在 HTML 中以 class 属性表示,在 CSS 中,类选择器以一个点“.”号显示
类选择器可以使用多个类名,多个类名中间必须用空格分开
<div class="font12 blue">山东省</div>
2.1.3.id选择器
#nav {
color:red;
}
2.1.4.通配符选择器
* {
margin: 0;
padding: 0;
}
2.2.css复合选择器
- 复合选择器可以更准确、更高效的选择目标元素(标签)
- 复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的
- 常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等
2.2.1.后代选择器
ul li {
color: pink;
}
注意:后代可以是儿子,也可以是孙子等,只要是后代即可
2.2.2.子选择器
子元素选择器(子选择器)只能选择作为某元素的最近一级子元素,简单理解就是选亲儿子元素.
.son>a {
color: green;
}
2.2.3.并集选择器
并集选择器可以选择多组标签, 同时为他们定义相同的样式,各选择器通过英文逗号","连接而成
h1,
ul {
color: blueviolet;
}
2.2.4.伪类选择器
a {
color: gray;
}
/* 1.选中未被访问过的链接 */
a:link {
color: black;
text-decoration: none;
}
/* 2.选择已访问的链接 */
a:visited {
color: red;
}
/* 3.选择鼠标经过的链接(实际开发重点) */
a:hover {
color: blue;
}
/* 4.选择鼠标按下但未弹起的链接 */
a:active {
color: forestgreen;
}
input:focus {
background-color:yellow;
}
2.3.CSS3 新增选择器
2.3.1.属性选择器
属性选择器可以根据元素特定属性的来选择元素,这样就可以不用借助于类或者id选择器。
/* 1.必须是input 但是同时具有 value这个属性 选择这个元素 */
input[value] {
color:pink;
}
/* 2.只把 type =text 的input选取出来 */
input[type=text] {
color: pink;
}
/* 3.选择具有class属性,并且属性值必须是 icon开头 的这些元素 */
div[class^=icon] {
color: red;
}
/* 4.选择以data结尾的某些元素 */
section[class$=data] {
color: blue;
}
/* 5.选择属性里含有 xd 的某些元素 */
div[class*=xd] {
color: red;
}
注意:属性选择器中标签名与属性之间没有空格!
2.3.2.结构伪类选择器
/* 1. 选择ul里面的第一个孩子 小li */
ul li:first-child {
background-color: pink;
}
/* 2. 选择ul里面的最后一个孩子 小li */
ul li:last-child {
background-color: pink;
}
/* 3. 选择ul里面的第2个孩子 小li */
ul li:nth-child(2) {
background-color: skyblue;
}
/* 1.把所有的偶数 even的孩子选出来 */
ul li:nth-child(even) {
background-color: #ccc;
}
/* 2.把所有的奇数 odd的孩子选出来 */
ul li:nth-child(odd) {
background-color: gray;
}
注意:nth-child(n)选择某个父元素的一个或多个特定的子元素,n 是从 0 开始计算的,可以是数字,关键字(even odd)和公式
上面三个同理,区别在于:
2.3.3.伪元素选择器
伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构
.fake::before {
content: '我';
}
.fake::after {
content: '小猪佩奇';
}
注意:
- before 和 after 创建一个元素,但是属于行内元素
- 新创建的这个元素在文档树中是找不到的,所以我们称为伪元素
- before 和 after 必须有 content 属性
- before 在父元素内容的前面创建元素,after 在父元素内容的后面插入元素
三 .字体属性
3.1.字体系列
CSS 使用 font-family 属性定义文本的字体系列
div {font-family: Arial,"Microsoft Yahei", "微软雅黑";}
- 各种字体之间必须使用英文状态下的逗号隔开
- 一般情况下,如果有空格隔开的多个单词组成的字体,加引号.
3.2.字体大小
CSS 使用 font-size 属性定义字体大小
p {
font-size: 20px;
}
- px(像素)大小是我们网页的最常用的单位
- 谷歌浏览器默认的文字大小为16px
3.3.字体粗细
CSS 使用 font-weight 属性设置文本字体的粗细
p {
font-weight: bold;
}
3.4.文字样式
p {
font-style: normal;
}
3.5 字体复合属性
字体属性可以把以上文字样式综合来写, 这样可以更节约代码:
body {
font: font-style font-weight font-size/line-height font-family;
}
- 必须按上面语法格式中的顺序书写,不能更换顺序,并且各个属性间以空格隔开
- 必须保留 font-size 和 font-family 属性,其他属性可以省略,否则 font 属性将不起作用
四:文本属性
4.1.文本颜色
color 属性用于定义文本的颜色。
div {
color: red;
}
有三种颜色的表示方式,开发中最常用的是十六进制
4.2.对齐文本
4.2.1.水平对齐文本
div {
text-align: center;
}
4.2.2.垂直对齐文本
vertical-align : baseline | top | middle | bottom
- 给图片添加 vertical-align:middle | top| bottom 等。 (提倡使用的)
- 把图片转换为块级元素 display: block;
4.3.装饰文本
text-decoration 属性规定添加到文本的修饰,可以给文本添加下划线、删除线、上划线等
div {
text-decoration:underline;
}
4.4.文本缩进
text-indent 属性用来指定文本的第一行的缩进,通常是将段落的首行缩进
p {
text-indent: 2em;
}
注意:em 是一个相对单位,就是当前元素(font-size) 1 个文字的大小, 如果当前元素没有设置大小,则会按照父元素的 1 个文字大小。
4.5.行间距
line-height 属性用于设置行间的距离(行高),可以控制文字行与行之间的距离.
p {
line-height: 26px;
}
注意:line-height让文字的行高等于盒子的高度,可以实现文字在盒子内垂直居中
4.6.文字阴影
text-shadow: h-shadow v-shadow blur color;
4.7.溢出的文字省略号显示
4.7.1. 单行文本溢出显示省略号
单行文本溢出显示省略号--必须满足三个条件:
/*1. 先强制一行内显示文本*/
white-space: nowrap; ( 默认 normal 自动换行)
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;
4.7.2.多行文本溢出显示省略号
多行文本溢出显示省略号,有较大兼容性问题, 适合于webKit浏览器或移动端(移动端大部分是webkit内核)
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
4.8.CSS的注释
/* 需要注释的内容 */
五:CSS引入方式
- 内部样式表(嵌入式)
- 行内样式表(行内式)
- 外部样式表(链接式)
5.1.内部样式表
<style>
div {
color: red;
font-size: 12px;
}
</style>
- <style> 标签一般会放在文档的<head>标签中
- 代码结构清晰,但是并没有实现结构与样式完全分离
5.2.行内样式表
行内样式表是在元素标签内部的 style 属性中设定 CSS 样式,适合于修改简单样式.
<div style="color: red; font-size: 12px;">青春不常在,抓紧谈恋爱</div>
5.3.外部样式表
<link rel="stylesheet" href="css文件路径">
六:元素显示模式
6.1.块元素
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中 <div> 标签是最典型的块元素。
- 自己独占一行。
- 高度,宽度、外边距以及内边距都可以控制。
- 宽度默认是容器(父级宽度)的100%。
- 是一个容器及盒子,里面可以放行内或者块级元素。
- 文字类的元素内不能使用块级元素
- <p> 标签主要用于存放文字,因此 <p> 里面不能放块级元素,特别是不能放<div>
- 同理,<h1>~<h6>等都是文字类块级标签,里面也不能放其他块级元素
6.2.行内元素
- 相邻行内元素在一行上,一行可以显示多个。
- 高、宽直接设置是无效的。
- 默认宽度就是它本身内容的宽度。
- 行内元素只能容纳文本或其他行内元素。
6.3.行内块元素
- 和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙。
- 默认宽度就是它本身内容的宽度(行内元素特点)。
- 高度,行高、外边距以及内边距都可以控制(块级元素特点)。
6.4.元素显示模式总结
6.5.元素显示模式转换
有时候一个模式的元素需要另外一种模式的特性时,我们就需要元素模式的转换
/* 转换为块元素 */
display: block;
/* 转换为行内元素 */
display: inline;
/* 转换为行内块元素 */
display: inline-block;
七:背景属性
7.1.背景颜色
background-color 属性定义了元素的背景颜色
background-color: blue;
background-color:transparent;
7.2.背景图片
background-image : none | url (url)
注意:背景图片后面的地址,千万不要忘记加 URL, 同时里面的路径不要加引号
7.3.背景平铺
background-repeat 属性可以实现对背景图像进行平铺
background-repeat: repeat | no-repeat | repeat-x | repeat-y
7.4.背景图片位置
background-position: x y;
- 如果指定的两个值都是方位名词,则两个值前后顺序无关,比如 left top 和 top left 效果一致
- 如果只指定了一个方位名词,另一个值省略,则第二个值默认居中对齐
- 如果参数值是精确坐标,那么第一个肯定是 x 坐标,第二个一定是 y 坐标
- 如果只指定一个数值,那该数值一定是 x 坐标,另一个默认垂直居中
- 如果指定的两个值是精确单位和方位名词混合使用,则第一个值是 x 坐标,第二个值是 y 坐标
7.5.背景图像固定(背景附着)
background-attachment : scroll | fixed
7.6.背景复合写法
background: transparent url(image.jpg) repeat-y fixed top ;
7.7.背景色半透明
background: rgba(0, 0, 0, 0.3);
- 最后一个参数是 alpha 透明度,取值范围在 0~1之间
- 我们习惯把 0.3 的 0 省略掉,写为 background: rgba(0, 0, 0, .3);
- 背景半透明是指盒子背景半透明,盒子里面的内容不受影响
八:CSS的三大特性
CSS 有三个非常重要的三个特性:层叠性、继承性、优先级
8.1.层叠性
相同选择器给设置相同的样式,此时一个样式就会覆盖另一个冲突的样式
- 样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式
- 样式不冲突,不会层叠;权重不一致时,也不会层叠
8.2.继承性
CSS中的继承: 子标签会继承父标签的某些样式
- 子元素可以继承父元素的样式(text-,font-,line-这些元素开头的,以及color属性)
行高的继承性:
body {
font:12px/1.5 Microsoft YaHei;
}
8.3.优先级
- 选择器相同,则执行层叠性
- 选择器不同,则根据选择器权重执行
选择器权重如下表所示:
注意:
- 权重是有4组数字组成,但是不会有进位。
- 可以理解为类选择器永远大于元素选择器, id选择器永远大于类选择器,以此类推
权重叠加:如果是复合选择器,则会有权重叠加,需要计算权重,例如以下几种:
- 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
九:盒子模型
9.1.边框
9.1.1.直角边框
border : border-width || border-style || border-color
border: 1px solid red; /* 没有顺序 */
border-top: 1px solid red; /* 只设定上边框, 其余同理 */
- none:没有边框即忽略所有边框的宽度(默认值)
- solid:边框为单实线(最为常用的)
- dashed:边框为虚线
- dotted:边框为点线
border-collapse 属性控制浏览器绘制表格边框的方式,它控制相邻单元格的边框。
/* 表示相邻边框合并在一起 ,即边框像素值1+1=1 */
border-collapse:collapse;
此外,边框会额外增加盒子的实际大小,因此我们有两种方案解决:
- 测量盒子大小的时候,不量边框.
- 如果测量的时候包含了边框,则需要 width/height 减去边框宽度
9.1.2.圆角边框
border-radius:length;
- 参数值可以为数值或百分比的形式
- 如果是正方形,想要设置为一个圆,把数值修改为高度或者宽度的一半即可,或者直接写为 50%
- 该属性是一个简写属性,可以跟四个值,分别代表左上角、右上角、右下角、左下角
9.2.内边距
padding 属性用于设置内边距,即边框与内容之间的距离。
注意:
- padding也会影响盒子实际大小,此时需要让 width/height 减去多出来的内边距大小
- 如果遇到盒子里面字数不一样多的时候,给盒子设置padding,而不设置宽度
9.3.外边距
margin 属性用于设置外边距,即控制盒子和盒子之间的距离
外边距可以让块级盒子水平居中,但是必须满足两个条件:
- 盒子必须指定了宽度(width)。
- 盒子左右的外边距都设置为 auto 。
.header{
width:960px;
margin:0 auto;
}
- 让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框
- 鼠标经过某个盒子的时候,提高当前盒子的层级即可(如果没有有定位,则加相对定位(保留位置),如果有定位,则加z-index)
9.4.外边距合并问题
- 相邻块元素垂直外边距的合并
- 嵌套块元素垂直外边距的塌陷
9.4.1相邻块元素垂直外边距的合并
9.4.2.嵌套块元素垂直外边距的塌陷
对于两个嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值
- 为父元素定义上边框。
- 为父元素定义上内边距。
- 为父元素添加 overflow:hidden。
- 浮动、固定,绝对定位的盒子(脱标)不会有塌陷问题
9.4.3.清除内外边距
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
9.5.CSS3盒子模型
- box-sizing: content-box 盒子大小为 width + padding + border (以前默认的)
- box-sizing: border-box 盒子大小为 width
9.6.盒子阴影
CSS3 中新增了盒子阴影,我们可以使用 box-shadow 属性为盒子添加阴影
box-shadow: h-shadow v-shadow blur spread color inset;
注意:
- 默认的是外阴影(outset), 但是不可以写这个单词,否则造成阴影无效
- 盒子阴影不占用空间,不会影响其他盒子排列。
十:浮动
CSS 提供了三种传统布局方式:普通流(标准流)、 浮动 、定位
所谓标准流: 就是标签按照规定好默认方式排列.
有很多的布局效果,标准流没有办法完成,此时就可以利用浮动完成布局。比如行内块元素可以实现一行显示,但是他们之间会有大的空白缝隙,很难控制
多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动
10.1.浮动定义
float 属性创建浮动框,将其移动到左边缘或右边缘或触及包含块或另一个浮动框的边缘
选择器 { float: 属性值; }
10.2.浮动特性
- 浮动元素会脱离标准流(脱标)
- 浮动的盒子不再保留原先的位置
- 浮动的元素会一行内显示并且元素顶部对齐
- 浮动的元素会具有行内块元素的特性
- 浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流,所以一个元素浮动了,理论上其余的兄弟元素也要浮动
- 浮动元素只会压住它下面标准流的盒子,但是不会压住下面标准流盒子里面的文字(图片)
10.3.清除浮动
由于父级盒子很多情况下,不方便给高度,但是子盒子浮动又不占有位置,最后父级盒子高度为 0 时,就会影响下面的标准流盒子
- 清除浮动的本质是清除浮动元素造成的影响,策略是闭合浮动
- 如果父盒子本身有高度,则不需要清除浮动
清除浮动核心语句:clear: both
清除浮动方法主要有以下几种:
- 额外标签法也称为隔墙法
- 父级添加 overflow 属性
- 父级添加after伪元素
- 父级添加双伪元素
10.3.1. 额外标签法
- 优点: 通俗易懂,书写方便
- 缺点: 添加许多无意义的标签,结构化较差
10.3.2.父级添加 overflow
- 优点:代码简洁
- 缺点:无法显示溢出的部分
10.3.3.:after 伪元素法
:after 方式是额外标签法的升级版,是给父元素添加
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /* IE6、7 专有 */ ,适配低版本浏览器
*zoom: 1;
}
- 优点:没有增加标签,结构更简单
- 缺点:照顾低版本浏览器
10.3.4.双伪元素清除浮动(推荐)
也是给父元素添加(添加完在父盒子中引用类名即可) :
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
- 优点:没有增加标签,结构更简单
- 缺点:照顾低版本浏览器
十一:定位
定位可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子。
11.1.定位模式
定位模式通过 CSS 的 position 属性来设置,其值可以分为四个:
11.1.1.静态定位 static
静态定位是元素的默认定位方式,无定位的意思
选择器 { position: static; }
- 静态定位按照标准流特性摆放位置,它没有边偏移
- 静态定位在布局时很少用到
11.1.2.相对定位 relative
相对定位是元素在移动位置的时候,是相对于它原来的位置来说的
选择器 { position: relative; }
- 原来在标准流的位置 继续占有(不脱标)
11.1.3.绝对定位 absolute
绝对定位是元素在移动位置的时候,是相对于它祖先元素来说的
选择器 { position: absolute; }
- 如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位。
- 如果祖先元素有定位(相对、绝对、固定定位),则以最近一级的有定位祖先元素为参考点移动位置。
- 绝对定位不再占有原先的位置(脱标)
-
绝对定位盒子居中 (不能通过 margin:0 auto) 可通过 1.left:50% 2.margin-left:自身宽度的一半实现
子绝父相:子级是绝对定位,父级要用相对定位
- 子级绝对定位,不会占有位置,可以放到父盒子里任何一个地方,不会影响其他的盒子。
- 父盒子需要加定位限制子盒子在父盒子内显示。
- 父盒子布局时,需要占有位置,因此父亲只能是相对定位。
11.1.4.固定定位 fixed
选择器 { position: fixed; }
- 以浏览器的可视窗口为参照点移动元素。
- 跟父元素没有任何关系,不随滚动条滚动。
- 固定定位不在占有原先的位置(脱标)。
11.1.5.粘性定位 sticky
粘性定位被认为是相对定位和固定定位的混合 指相对定位的元素滑动到某个位置后变为固定定位
选择器 { position: sticky; top: 10px; }
- 以浏览器的可视窗口为参照点移动元素(固定定位特点)
- 粘性定位占有原先的位置 不脱标(相对定位特点)
- 必须添加 top 、left、right、bottom 其中一个才有效
11.2.边偏移
边偏移就是定位的盒子移动到最终位置,有 top、bottom、left 和 right 4 个属性
11.3.定位叠放次序 z-index
在定位布局时,可能会出现盒子重叠的情况,此时可以使用 z-index 来控制盒子的前后次序 (z轴)
选择器 { z-index: 1; }
- 数值可以是正整数、负整数或 0, 默认是 auto,数值越大,盒子越靠上
- 如果属性值相同,则按照书写顺序,后来居上
- 数字后面不能加单位
- 只有定位的盒子才有 z-index 属性
11.4.定位特殊特性
- 行内元素添加绝对或者固定定位,可以直接设置高度和宽度。
- 块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容的大小
- 绝对定位、固定定位会压住下面标准流所有的内容(包括图片、文字),跟浮动不同
十二:元素的显示与隐藏
- display 显示隐藏
- visibility 显示隐藏
- overflow 溢出显示隐藏
12.1.display属性
display 属性用于设置一个元素应如何显示。
- display: none ;隐藏对象
- display:block ;除了转换为块级元素之外,同时还有显示元素的意思
12.2.visibility 可见性
visibility 属性用于指定一个元素应可见还是隐藏。
- visibility:visible ; 元素可视
- visibility:hidden; 元素隐藏
12.3.overflow 溢出
十三:精灵图
13.1.为什么需要精灵图
13.2.精灵图(sprites)的使用
- 精灵图主要针对于小的背景图片使用。
- 主要借助于背景位置来实现---background-position
- 一般情况下精灵图都是负值。(注意网页中的坐标:x向右为正方向,y轴向下为正方向)
- 精灵图:盒子不动 图片移动
十四:字体图标
字体图标使用场景: 主要用于显示网页中通用、常用的一些小图标。
- 图片文件还是比较大的。
- 图片本身放大和缩小会失真。
- 一旦图片制作完毕想要更换非常复杂。
- 如果遇到一些结构和样式比较简单的小图标,就用字体图标。
- 如果遇到一些结构和样式复杂一点的小图片,就用精灵图。
字体图标推荐下载网站:
2.在网站的右上角有购物车按钮,选好图标好点击下载代码
3.解压代码后,打开里面的demo_index.html文件,显示有三种引入字体图标的方法,在这里我选用的是第三种Symbol 引用
Symbol 引用
这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:
- 支持多色图标了,不再受单色限制。
- 通过一些技巧,支持像字体那样,通过
font-size
,color
来调整样式。 - 兼容性较差,支持 IE9+,及现代浏览器。
- 浏览器渲染 SVG 的性能一般,还不如 png。
使用步骤如下:
第一步:引入项目下面生成的 symbol 代码:
<script src="./iconfont.js"></script>
第二步:加入通用 CSS 代码(引入一次就行):
<style>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
第三步:挑选相应图标并获取类名,应用于页面:
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>
十五:CSS三角
15.1.等腰直角三角形
.div {
width: 0;
height: 0;
border: 50px solid transparent;
border-left-color: blue;
margin: 100px auto;
}
效果图:
15.2.直角三角形
.box1 {
width: 0;
height: 0;
/* 1.只保留右边的边框有颜色 */
border-color: transparent red transparent transparent;
/* 2. 样式都是solid */
border-style: solid;
/* 3. 上边框宽度要大, 右边框 宽度稍小, 其余的边框该为 0 */
border-width: 100px 50px 0 0;
}
效果图:
十六:CSS 用户界面样式
界面样式,就是更改一些用户操作样式,以便提高更好的用户体验
16.1.鼠标样式 cursor
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状
li {cursor: pointer; }
16.2.轮廓线 outline
给表单添加 outline: 0; 或者 outline: none; 样式之后,就可以去掉默认的蓝色边框
input {outline: none; }
16.3.防止拖拽文本域 resize
实际开发中,我们文本域右下角是不可以拖拽的
textarea{ resize: none;}
17.Emmet 语法
17.1.快速生成HTML结构语法
- 生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键,就可以生成 <div></div>
- 如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div
- 如果有父子级关系的标签,可以用 > 比如 ul > li就可以了
- 如果有兄弟关系的标签,用 + 就可以了 比如 div+p
- 如果生成带有类名或者id名字的, 直接写 .demo 或者 #two tab 键就可以了
- 如果生成的div 类名是有顺序的,可以用自增符号 $
- 如果想要在生成的标签内部写内容可以用 { } 表示
17.2.快速生成CSS样式语法
- 比如 w200 按tab 可以 生成 width: 200px;
- 比如 lh26px 按tab 可以生成 line-height: 26px;
18.CSS3 的新特性
18.1.图片变模糊
filter: 函数(); 属性将模糊或颜色偏移等图形效果应用于元素
例如: filter: blur(5px); blur模糊处理 数值越大越模糊 里面必须加单位
18.2.calc 函数
width: calc(100% - 80px);
上面代码的意思即 让孩子的宽度永远比父亲少80px
18.3.过渡
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
transition: width .5s, height .5s;