快速生成代码
Emmet语法
HTML
文本标签
建议使用有语义化的双标签
<strong>加粗</strong>
<ins>下划线</ins>
<em>倾斜</em>
<del>删除线</del>
链接标签
<a href=”“></a> 文字默认有下划线。若是空链接，href="#"
target属性：当前窗口跳转_self 新窗口跳转_blank
table标签
table{caption,thead,tbody}
tr{th,td}
列表标签
要去除小圆点，给ul设置list-style:none;
ul无序、ol有序。ul标签只允许包含li标签，li标签可以包含任意内容
dl自定义列表{dt,dd}
CSS
引入方式
选择器
标签选择器：标签 { color:red; }
类选择器：.类名 { color:red; }
id选择器：#id属性值 { color:red; }
通配符选择器：* { color:red; }
后代选择器（空格）：选择器1 选择器2{ css }
亲儿子选择器（>）：选择器1>选择器2{ css }
并集选择器（,）：选择器1,选择器2{ css }
交集选择器（紧挨着）：选择器1选择器2{ css }
伪类选择器：选择器:hover{ css }
伪类和伪元素区别
- 伪类：用于选择处于特定状态的元素，如:hover（表示悬浮在元素上的状态）、:active、:nth-child(n)
- 伪元素：用于创建一些不在文档树的虚拟元素，并为其添加样式。::before ::after
文本样式
水平居中：
text-align:center文本、行内元素、行内块元素
适用于文本、span、a、input、img标签，给它们的父元素设置。
margin:0 auto块级元素
适用于div、p、h（大盒子），直接给它们当前元素本身设置。
单行文本垂直居中
设置line-height:文字父元素高度
元素显示模式
块级元素
属性：display:block
独占一行，宽度默认是父元素的宽度，高度默认由内容撑开。
代表标签：div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……
行内元素
属性：display:inline
一行显示多个，宽度高度都默认由内容撑开。不可以设置宽高。
代表标签：a、span、strong、ins、em、del……
行内块元素
属性：display:inline-block
一行显示多个，可以设置宽高。
内容会把盒子撑大，为了不破坏布局可以不设置width设置padding
代表标签：input、textarea、button、select……
盒子模型
盒子的width和height默认是盒子的content大小，padding和border会撑大盒子。
不会撑大盒子的特殊情况（块级元素）
1.如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度
2.如果给子盒子设置左右的padding或者左右的border，此时不会撑大盒子
CSS3盒模型 自动內减
给盒子设置css属性box-sizing：border-box;，浏览器会自动计算多余大小，自动在内容中减去。
外边距折叠现象：
合并现象：垂直布局的块级元素，上下的margin会合并，最终为两者margin的最大值。
解决方法：只给其中一个盒子设置margin即可。
塌陷现象：互相嵌套的块级元素，子元素的margin-top会作用在父元素上，结果导致父元素一起往下移动。
解决方法：
1. 给父元素设置border-top或者padding-top（分隔父子元素的margin-top）
2. 给父元素设置overflow:hidden
3. 转换成行内块元素
4. 设置浮动
结构伪类选择器
直接在所有孩子中数个数
E:first-child{}
E:last-child{}
E:nth-child(n){}
E:nth-last-child(n){}
是在该同类型元素中数个数
E:nth-of-type(n){}
伪元素::
::before 在父元素内容的最前面添加一个伪元素
::after 在父元素内容的最后添加一个伪元素
注意点：
必须设置content属性才能生效
伪元素默认是行内元素，不能直接设置宽高，需要改变显示方式或者使用子绝父相
浮动
浮动元素一行可以显示多个，可以设置宽高。
清除浮动：
如果子元素浮动了，就不能撑开标准流的块级父元素了，导致父元素高度为0，其下方的元素就蹬上来
方法：
1.直接设置父元素高度
2.额外标签法
在父元素内容的最后添加一个块级元素，并给其设置clear:both;
3.单伪元素清除法
项目中使用，直接给标签加类即可清除浮动
.clearfix::after{
content:'';
display:block;
clear:both;
//下面是为了让用户看不到这个伪元素
height:0;
visibility:hidden;
}
4.双伪元素清除法
项目中使用，直接给标签加类即可清除浮动
.clearfix::before,
.clearfix::after{
content:'';
display:table;
}
.clearfix::after{
clear:both;
}
5.给父元素设置overflow:hidden;
定位
静态定位： 默认值，即标准流
相对定位： 没有脱标。 相对于自己原来的位置
绝对定位： 已经脱标。相对于最近的有定位的祖先元素
固定定位： 已经脱标。相对于浏览器可视区域
子绝父相水平垂直居中案例
除了transform里的%，其他的%都是相对于父元素。
.son{
position:absolute;
<!--移动的是父元素宽度的一半-->
left:50%;
top:50%;
<!--移动的是子元素自身宽度的一半-->
transform:translate(-50%,-50%);
}
