css初学者第三天
<1>emmet语法
emmet语法的前身是Zen coding，它使用缩写来提高html/css的编写速度，vscode内部已经集成该语法。
1.1 生成html标签
1.生成标签直接输入标签名按tab键即可，比如写div然后tab键，就可以生成<div></div>
2.如果想要生成多个相同标签，加上 * 就可以了，比如 div*3 再按tab键就可以快速生成3个<div></div>
3.如果有父子级关系的标签，可以用 > 比如 ul>li 再按tab键就可以了，会生成<ul><li></li></ul>
4.如果有兄弟关系的标签，用 + 就可以了，比如 div+p 再按tab键，会生成<div><p></p></div>
5.如果生成带有类名或者id名字的，直接写.demo 再按tab键会生成<div class="demo"></div>，如果想设置不想要默认的div标签，可以写p.demo,会生成<p class="demo"></p>，或者把 . 改成 # 则会生成id。
6.如果生成的div类名想要有顺序，可以用自增符号 $，写.demo$*2,会生成<div class="demo1"></div> <div class="demo2"></div>
7.如果想要生成的标签内部写内容可以用{}表示，如div{lalala}，按tab键后会生成<div>lalala</div>
1.2 生成css样式
css基本采取简写模式即可
-如w200，按tab可以生成width：2000px；
-如lh26，按tab可以生成line-height：26px；
<2>css的复合选择器
css中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。
-复合选择器可以更准确、更高效的选择目标元素（标签）
-复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
-常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等
2.1 后代选择器（重要）
后代选择器又称为包含选择器，可以选择父元素里面的子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分开。当标签发生嵌套时，内层标签就成为外层标签的后代。
语法：
元素1 元素2 {样式声明
}上述语法表示选择元素1里面的所有元素2（后代元素）。
-元素1和元素2一定用空格分开
-元素1是父级，元素2是子级，最终选择的是元素2
-元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可
2.2 子选择器（重要）
子元素选择器（子选择器）只能选择作为某元素的最近一级子元素，简单理解就是选亲儿子元素。
元素1>元素2{样式声明
}2.3 并集选择器（重要）
并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明。
并集选择器是各选择器通过英文逗号（,）连接而成的，任何形式的选择器都可以作为并集选择器的一部分。
元素1,元素2{样式声明
}上述语法表示选择元素1和元素2。并集选择器竖着写
2.4 伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，比如给链接链接特殊效果，或选择第1j个，第n个元素。
伪类选择器书写最大的特点是用冒号（:）表示，比如:hover、:first-child
伪类选择器有很多，比如链接伪类，结构伪类等，这里介绍最常用的链接伪类选择器。
2.4.1链接伪类选择器
a:link 选择所有未被访问的链接 a:visited 选择所有已被访问的链接 a:hover 选择鼠标指针位于其上的链接 a:active 选择活动链接（鼠标按下未弹起的链接） |
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>体验css语法规范</title><style>/* 选择器 {样式属性: 属性值;} */a:link {color: black;text-decoration: none;}a:visited {color: red;}a:hover {color: green;}a:active {color: blue;}</style>
</head>
<body>
<a href="#">啦啦啦</a>
</body>
</html>注意：
-为了确保生效，请按照LVHA的顺序声明：:link -> :visited -> :hover -> :active
-因为a链接在浏览器中具有默认样式，所以实际工作中都需要给链接单独指定样式。
2.4.1 focus伪类选择器
:focus伪类选择器用于选择获取焦点的表单元素
焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对表单元素来说。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>体验css语法规范</title><style>input:focus {background-color: yellow;}</style>
</head><body><input type="text" /><input type="text" /><input type="text" />
</body>
</html>
<3>css的元素显示模式
作用：网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好布局我们的网页。
元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>.
html元素一般分为块元素和行内元素。
3.1 块元素
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。
块级元素的特点：
1、比较霸道，自己独占一行。
2、高度、宽度、外边距以及内边距都可以控制。
3、宽度默认是容器（父级宽度）的100%。
4、是一个容器及盒子，里面可以放行内或者块级元素。
注意：
-文字类的元素内不能使用块级元素
-<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别不能放<div>
-同理，<h1>~<h6>等都是文字类的快句标签，里面也不能放其他块级元素
3.2 行内元素
常见的行内元素有<a> <strong> <b> <em> <i> <del> <s> <ins> <u> <span>等，其中<span>标签是最典型的行内元素，有的地方也将行内元素称为内联元素。
行内元素的特点：
1、相邻行内元素在一行上，一行可以显示多个。
2、高、宽直接设置是无效的。
3、默认宽度就是它本身内容的宽度。
4、行内元素只能容纳文本或其他行内元素。
注意：
-链接里面不能再放链接
-特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全。
3.3 行内块元素
在行内元素中有几个特殊的标签——<img />、<input />、<td>，他们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。
行内块元素的特点：
1、和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。
2、默认宽度就是它本身内容的宽度（行内元素特点）。
3、高度，行高，外边距以及内边距都可以控制（块级元素特点）。
3.4 元素显示模式转换
特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另外一种模式的特性，比如想要增加链接<a>的触发范围。
转换为块元素：display:block;
转换为行内元素：display:inline;
转换为行内块：display:inline-block;
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>体验css语法规范</title><style>a {/* 方法一 */background-color: yellow;text-decoration: none;display: block;width: 100px;height: 50px;text-align: center;line-height: 50px;/* 方法二 *//* background-color: yellow;text-decoration: none;display: flex;width: 100px;height: 50px; *//* 水平居中 *//* justify-content: center; *//* 垂直居中 *//* align-items: center; */ }div {color: red;width: 100px;height: 100px;background-color: pink;/* 宽高设置无效 */display: inline;}span {color: greenyellow;width: 100px;height: 100px;background-color: lightblue; text-align: center;line-height: 100px;display: inline-block;}</style>
</head><body><a href="#">链接</a><div>方块</div><span>行转换成块</span>
</body>
</html>