这是我参与「第四届青训营 」笔记创作活动的的第3天
一、Emmet语法
Emmet语法使用缩写，来提高html/css的编写速度。
1.快速生成html结构语法
2.快速生成css样式语法
二、CSS的复合选择器
复合选择器是由两个或者多个基础选择器通过不同的方式组合而成的，可以更精准和高效的选择目标元素(标签)。
常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等。
1.后代选择器
后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
语法：
元素1 元素2 {
样式声明
}
注意：(1)元素1和元素2中间用空格隔开;
(2)元素1是父级，元素2是子级，最终选择的是元素2;
(3)元素2可以是儿子，也可以是孙子等，只要是元素1 的后代即可;
(4)元素1和元素2可以是任意基础选择器;
2.子代选择器
子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。必须是最近一级。
语法：
元素1 > 元素2 {
样式声明
}
注意：(1)元素1和元素2中间用大于号隔开；
(2)元素2必须是亲儿子，其孙子、重孙之类都不行。
3.并集选择器
并集选择器可以选择多组标签, 同时为他们定义相同的样式。通常用于集体声明。
语法：
元素1，元素2....{
样式声明
}
注意：(1)元素1和元素2用‘，’隔开；
(2)并集选择器多用与集体声明。
4.伪类选择器
伪类选择器用于向某些选择器添加特殊的效果。伪类选择器很多，比如链接伪类、结构伪类等等。
伪类选择器书写最大的特点是用冒号（:）表示
(1)链接伪类选择器：
a:link设置a对象在未被访问前的样式表属性；
a:visited设置a对象其链接地址已被访问过的样式表属性；
a:hover设置a对象其鼠标悬停时的样式表属性；
a:active设置a对象被用户激活（在鼠标点击与释放之间发生的事件）时的样式表属性
(2):focus 伪类选择器用于选取获得焦点的表单元素。焦点就是光标，一般情况类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。
示例：
input:focus {
background-color: red;
}
三、块元素、行内元素、行内块元素
特殊情况下，我们需要元素模式的转换，简单理解: 一个模式的元素需要另外一种模式的特性：
(1)转化为块元素display: block
(2)转化为行内元素display: inline
(3)转化为行内块元素display: inline-block
四、CSS的背景
五、盒子模型
盒子模型：把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。封装的HTML元素包括：边框(boeder)、外边距(margin)、内边距(padding)、内容(content)。
1.边框
(1)border-style可以设置以下值：
none ：没有边框即忽略所有边框的宽度（默认值）； solid： 边框实线 ；
dashed ： 边框点虚线 ； dotted ： 边框点线
(2)边框的复合写法示例：
border: 1px solid red;
(3)border-collapse控制浏览器绘制表格边框的样式。控制相邻单元格的边框。
语法示例：
border-collapse: collapse;
collapse单词是合并的意思，border-collapse表示相邻边框合并在一起。
注意：边框会影响盒子的实际大小。
2.内边距padding
用于设置内边距，边框与内容之间的距离
四种复合写法：
注意：padding也会影响盒子的实际大小。 如何盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小.
3.外边距margin
用于设置盒子的外边距，即盒子和盒子之间的距离。
注意：margin的简写(复合写法)代表的意义与padding完全一致。
(1)让块级元素水平居中：
条件：必须指点宽度和左右边距设置为auto
常用的写法：margin: 0 auto;
注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align: center即可。
(2)外边距合并：
使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。
4.清除内外边距
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。
* {
margin: 0;
padding: 0;
}
小技巧
1.设置文字垂直居中：CSS没有提供文字垂直居中的代码，我们可以让 文字的行高等于盒子的高度 就可以让文字在当前盒子内垂直居中。
原理：
结束语
这是CSS入门学习的第二天，我学习跟的黑马的入门教程视频，视频链接：www.bilibili.com/video/BV14J… 笔记到这就结束了。欢迎观看的各路大佬批评、讨论和指正。我的QQ号：2531549812，有问题欢迎联系哦。
