浮动快捷键

Posted 2020-10-11 张萤莹

一、

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.添加元素内容     格式：元素名称{元素内容}