目录
Emmet语法
生成html标签
10个div：div*10
包含关系：ul>li
并列关系： div+p
生成带有类名或id名：
-
类名：div.nav
-
id名：div#nav
自增符号$，用法：
.demo$*5
直接生成带有文字的标签：div{666}
生成css标签
缩写就可以如：
text-indent: ;只需输入ti
css复合选择器
-
后代选择器（包含关系时 可选所有后代）又称包含选择器
元素1 元素2 ... { 样式声明 }
-
子元素选择器（只能选亲儿子）
元素1>元素2{ 样式声明 }
-
并集选择器，可选择多组标签定义相同样式
元素1,元素2,...,...{ 样式声明 }
一般竖着写，如：
元素1,
元素2 { 样式声明 }
-
链接伪类选择器
-
a:link 把还未选择过的链接选出来
-
a:visited 把已经访问过的链接选出来
-
a:hover（重要） 把鼠标经过的链接选出来
-
a:active 把正在点击的链接选出来（鼠标按下还未弹起）
LVHA 顺序不能变
-
-
:focus伪类选择器
用于选取获得焦点的表单元素
input:focus { 样式声明 }
HTML元素显示模式
HTML元素一般分为块元素和行内元素两种
块元素
-
常见的有h1~h6、p、div、ul、ol、li，其中div是最经典的块元素
-
独占一行
-
高度、宽度、外边距以及内边距都可以控制
-
宽度默认是 容器（父级宽度）的%100
-
是一个容器及盒子，里面可以放行内或者块级元素（文字类的元素如p和h内不能放块级元素）
-
行内元素
-
常见的有a、strong、b、em、i、del、s、ins、u、span，其中span标签是最经典的行内元素。有的地方也将行内元素称为内联元素。
-
相邻行内元素在一行上，一行可以显示多个
-
高、宽直接设置是无效的
-
默认宽度就是它本身内容的宽度
-
行内元素只能容纳文本或其它行内元素（a里面不能再放a但a里面可以放块级元素）
-
特殊：行内块元素
-
img、input、td具有块元素和行内元素的特点。
-
相邻元素在一行上，一行可以显示多个
-
默认宽度是内容本身宽度（行内元素特点）
-
可设置高度宽度内外边距（块元素特点）
-
HTML标签显示模式转换
-
行内元素转换为块级元素
-
a {display:block;}
-
-
块元素转换为行内元素
-
div{display:inline;}
-
-
转换为行内块元素
-
span {display:inline-block;}
-
单行文字垂直居中的原理
利用line-height，当行高等于容器高度时，文字垂直居中
行高>容器高度 文字偏下
行高<容器高度 文字偏上
CSS的背景
背景颜色和背景图片可以同时设置，颜色在最底层
background-color背景颜色
默认值为transparent（透明）。
background-image背景图片
background-image: none (默认)|| url();
background-repeat背景平铺
background-repeat: repeat（默认） | no-repeat | repeat-x | repeat-y（沿着y轴平铺）
background-position背景图片的位置
background-position: x y;
x坐标和y坐标，可以使用方位名字 | 精确单位
length：百分数|px等
position：top|center|bottom|left|right
-
若参数为方位名词，则顺序与位置无关 center top == top center
-
如果只写一个，则第二个参数默认为center
-
若参数为精确单位，则先写x再写y
-
如果只写一个，则x确定，y默认center
-
可以使用混合单位
background-attachment背景图像固定
background-attachment: scroll（滚动） | fixed（固定）
background复合写法
background: color url() repeat attachment position;
背景色半透明
background: rgba(0,0,0,0.3);
-
css3新增特性，ie9+版本才支持
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
