css水平垂直居中对齐                      

1.元素居中对齐：要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;设置到元素的宽度将防止它溢出到容器的边缘，元素通过指定宽度，并将两边的空外边距平均分配（必须设置width属性，才能起到居中对齐的作用）

2.文本居中对齐：text-align: center使文本居中对齐     

3.左右对齐-使用定位方式：position: absolute; 属性来对齐元素:         

4.左右对齐-使用float方式：     

5.垂直：使用 padding:     

6.垂直居中:line-height:     

css组合选择器；

后代选择器：(div p)后代选择器用于选取某元素的后代元素       

子元素选择器：（div>p）与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素，   

相邻兄弟选择器：(div+p)相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素，如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器

后续兄弟选择器:（div~p）后续兄弟选择器选取所有指定元素之后的相邻兄弟元素

css导航栏；

建立链接表：<ul><li>元素<li><a href="#home">主页</a></li>用 href="#"作为测试连接。但在一个真正的 web 站点上需要真实的 url

一个导航栏并不需要列表标记：list-style-type:none - 移除列表前小标志，  

垂直导航栏：创建一个简单的垂直导航条实例，在鼠标移动到选项时，修改背景颜色：

先写基本样式：    再写鼠标移动到选项上修改背景颜色 

创建链接并添加边框：在 <li> or <a> 上添加text-align:center 样式来让链接居中，在 border <ul> 上添加 border 属性来让导航栏有边框。如果要在每个选项上添加边框，可以在每个 <li> 元素上添加border-bottom :

全屏高度固定导航栏：创建一个左边是全屏高度的固定导航条，右边是可滚动的内容                             

水平导航栏：内联样式表，建立一个横向导航栏的方法之一是指定元素 display:inline;

浮动列表项：浮动 <li>元素，并指定为 <a>元素的宽度

float:left - 使用浮动块元素的幻灯片彼此相邻

创建一个水平导航条，在鼠标移动到选项后修改背景颜色  

链接右对齐：将导航条最右边的选项设置右对齐 (float:right;)：<li style="float:right"><a class="active" href="#about">关于</a></li>

添加分割线：通过 border-right 样式来添加分割线border-right: 1px solid #bbb;

css下拉菜单：使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果；

可以借用容器元素来创建下拉菜单的内容，放在在任何你想放的位置上，使用 <div> 元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式

先设置下拉按钮样式：  定位下拉内容： 在当鼠标未放置下拉按钮时处于隐藏状态： .dropdown-content 类中是实际的下拉菜单。默认是隐藏的，在鼠标移动到指定元素后会显示  min-width 的值设置为 160px可以修改  想设置下拉内容与下拉按钮的宽度一致，可设置 width 为 100%  定义下拉菜单的链接  改变鼠标移上去后下拉菜单链接的颜色.dropdown-content a:hover {background-color: red}        hover：选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单    当在鼠标移上去后显示下拉菜单.dropdown:hover .dropdown-content { display: block;   当下拉内容显示后修改下拉按钮的背景颜色.dropdown:hover .dropbtn { background-color: yellow;  最后还需要写一个button按钮做下拉菜单

css提示工具：提示工具在鼠标移动到指定元素后触发    

tooltip 类使用 position:relative, 提示文本需要设置定位值 position:absolute

tooltiptext 类用于实际的提示文本。模式是隐藏的，在鼠标移动到元素显示 。设置了一些宽度、背景色、字体色    设置Tooltip 容器  设置文本，

定位提示工具：提示工具显示在指定元素的右侧(left:105%) 显示在右侧：.tooltip .tooltiptext { top: -5px; left: 105%; }  显示在左边：.tooltip .tooltiptext { top: -5px; right: 105%; }

显示在头部：提示工具显示在头部和底部。设置width和bottom，使用 margin-left 属性，并设置为 -60px。这个数字计算来源是使用宽度的一半来居中对齐  

显示在底部：

为提示框添加小箭头：after 及 content 属性为提示工具创建一个小箭头标志；

顶部提示框/底部箭头：             提示工具内定位箭头: top: 100% , 箭头将显示在提示工具的底部。left: 50% 用于居中对齐箭头border-width 属性指定了箭头的大小。如果你修改它，也要修改 margin-left 值。这样箭头在能居中显示,border-color 用于将内容转换为箭头。设置顶部边框为黑色，其他是透明的。如果设置了其他的也是黑色则会显示为一个黑色的四边形,border-color 中的值顺序是以提示框为准；

底部提示框/顶部箭头：   

右侧提示框/左侧箭头：   

左侧提示框/右侧箭头：   

淡入效果：使用 CSS3 transition 属性及 opacity 属性来实现提示工具的淡入效果:

.tooltip .tooltiptext { opacity: 0;transition: opacity 1s;}

css选择器：*选择所有元素，设置样式  

[attribute] 选择器      a[target]选择所有带有target属性的 <a>元素： 

[attribute=value] 选择器     a[target=_blank]选择所有使用target="_blank"的a元素

:first-of-type 选择器匹配元素其父级是特定类型的第一个子元素。  p:first-of-type

:last-of-type选择器匹配元素其父级是特定类型的最后一个子元素      p:last-of-type

:only-of-type 代表了任意一个元素，这个元素没有其他相同类型的兄弟元素   p:only-of-type

:only-child 选择器匹配属于父元素中唯一子元素的元素    p:only-child  

:root选择器用匹配文档的根元素   :root      

:empty选择器选择每个没有任何子级的元素（包括文本节点）p:empty  指定空的p元素的背景色

:target选择器可用于当前活动的target元素的样式    

属性多值的选择器：指定值的title属性的元素样式的例子，使用（~）分隔属性和值:  

包含指定值的lang属性的元素样式的例子，使用（|）分隔属性和值: