浮动、快捷键
一、
1.counter-reset:F44;计数器重置,默认值为0
2.counter-increment:F44;计数器自增,每次+1
3.content:counter(F44);输出当前计数器的值
二、
1.background:linear-gradient(角度或方向,起始颜色,结束颜色);——background:linear-gradient(to top,red,yellow); 渐变色
2.transform:scale(宽,高);——transform:scale(1,2); 渐变动作,变形
3.transition:指定属性 渐变是否线性 持续时间;——transition:all linear 3s; 渐变动作过渡时间
4.transition-delay:5s; 设置延迟过渡时间
三、何时使用margin和padding
1.Margin:border需要空白(距离)时,空白(距离)不需要背景色(纵向重叠,取最大值横向叠加)
2.Padding:border内侧需要空白(距离)时,空白(距离)需要背景色(纵向、横向都叠加)
(1)margin用来隔开元素与元素之间的距离,padding是用来隔开元素与内容之间的距离
(2)margin用于布局,元素与元素之间互不相干,padding元素与内容之间的间距,让内容与元素之间有一段“所谓的呼吸距离”
四、float(浮动)
浮动的基本行为:
1.子级浮动,导致父级元素塌陷
例:li浮动,在ul边框之下显示,并且ul高度为0
2.包裹性:若浮动元素没有设置宽度,会叠加到最小宽度
3.元素浮动后,横向的margin叠加
4.浮动元素影响其他元素(位置 布局)
五、
margin:auto;居中
clear:both;清除浮动
border 边框,占像素
outline 边框,不占像素,不能设置单独边框,只能四边显示
overflow:hidden;溢出隐藏,超出隐藏。 如果未设置宽高,子级浮动,自动找回父级高度
font-size:0;可以清除文本的大小(图片和文字之间的间隙)
outline:none;去除焦点框
六、emmet快捷键
1.兄弟级关系用“ + ”
2.创建父级元素使用“ ^ ”
3.分组,通常用于子级
4.类名快捷 格式:元素名称+“ . ”+类名
5.ID快捷 格式:元素名称+“ # ”+类名
6.类名自增1 格式:元素名+“ . ”+“ 类名 ”+“ $ ”+“ * ”+“ 个数 ”
7.类名自增2 格式:元素名+“ . ”+“ 类名 ”+“ $ ”+“ $ ”+“ * ”+“ 个数 ”
8.类名自增3 格式:元素名+“ . ”+“ 类名 ”+“ $ ”+“ @ ”+“ - ”+“ * ”+“ 个数 ”
9.类名自增4 格式:元素名+“ . ”+“ 类名 ”+“ $ ”+“ @ ”+“ n ”+“ * ”+“ 个数 ” n: 从n开始排序自增
10.组合缩写 格式:元素名+“ . ”+“ 类名 ”+“ # ”+“ ID名 ”
11.属性快捷键 格式:元素名称[属性名称=“属性值”]
12.添加元素内容 格式:元素名称{元素内容}