CSS3

CSS3 模块包括：
选择器 框模型 背景和边框 文本效果 2D/3D 转换 动画 多列布局 用户界面

内边距:padding
为带有 title 属性的所有元素设置样式：[title]{color:red;}
为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：[title~=hello] {color:red; }

background-repeat: 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。
background-position 属性:改变图像在背景中的位置 (top、bottom、left、right 和 center等)

{text-indent: 5em} 文本缩进
{text-align: center }水平对齐
text-transform: none|uppercase|lowercase|capitalize(首字母大写)
text-decoration: none(去除下划线)|underline|overline|line-through|blink(文字闪烁) 
white-space: normal 丢掉多余的空白符。
font-family: Serif 字体、Sans-serif 字体、Monospace 字体、Cursive 字体、Fantasy 字体 (5种通用字体)
	p {font-family: Times, TimesNR, 'New Century Schoolbook',Georgia, 'New York', serif;} 
	-根据这个列表，用户代理会按所列的顺序查找这些字体。如果列出的所有字体都不可用，就会简单地选择一种可用的 serif 字体。
font-style:normal (文本正常显示), italic(文本斜体显示), oblique (文本倾斜显示)
font-weight :设置文本的粗细。
font-size :设置文本的大小。 
1em = 16px
<a>链接的四种状态：
	a:link - 普通的、未被访问的链接
	a:visited - 用户已访问的链接
	a:hover - 鼠标指针位于链接的上方
	a:active - 链接被点击的时刻
	顺序- a:link - a:visited - a:hover - a:active
outline	在一个声明中设置所有的轮廓属性。	
	outline-color	设置轮廓的颜色。	
	outline-style	设置轮廓的样式。	
	outline-width	设置轮廓的宽度。
	
list-style-type: 修改用于列表项的标志类型(square 把无序列表中的列表项标志设置为方块)
list-style-image \ list-style-position:确定标志出现在列表项内容之外还是内容内部
	- 将以上 3 个列表样式属性合并为一个方便的属性：**list-style**
	- li {list-style : url(example.gif) square inside}























**背景关联**
如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响 （background-attachment：fixed   / 默认为scroll，在默认的情况下，背景会随文档滚动）




border-image	设置所有 border-image-* 属性的简写属性。    
border-radius	设置所有四个 border-*-radius 属性的简写属性。   
box-shadow	向方框添加一个或多个阴影。	

边框内的空白是内边距，边框外的空白是外边距 （padding不能为负值，margin可为负值）


#box {
width: 70px;
margin: 10px;
padding: 5px;
}

	border-style： 边框样式 （采用 top-right-bottom-left 的顺序-顺时针）/ none：消除边框
	border-width： 边框宽度
	外边距合并： 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。 （兄弟元素、父子元素...）
	块级元素：div、h1 或 p 元素。 
	内联元素：display: inline (不换行 - 把多个元素放在一行)
	行内元素：span 和 strong 等（显示在行内）,把行内元素 -> 块级元素： display: block

	**定位机制：普通流、浮动和绝对定位**
		除非专门指定，否则所有框都在普通流中定位。
		行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为**行框（Line Box）**，行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。
		
	position 属性值的含义：
		static	元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
		relative	(相对偏移 - 仍占用原来位置)元素框偏移某个距离。元素仍保持其未定位前的形状，*它原本所占的空间仍保留*
		absolute	(绝对定位 - 原来位置被其他元素占用)元素框从文档流完全删除，并相对于其包含块定位。
		fixed	元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
		
	Z-index: 元素优先级，元素允许覆盖在其他元素之上/下
	
	float: https://www.w3school.com.cn/css/css_positioning_floating.asp

	类选择器与ID选择器的区别：
		区别 1：只能在文档中使用一次。与类不同，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。
		区别 2：不能使用 ID 词列表。 不同于类选择器，ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。
		区别 3：ID 能包含更多含义。	类似于类，可以独立于元素来选择 ID。有些情况下，您知道文档中会出现某个特定 ID 值，但是并不知道它会出现在哪个元素上，所以您想声明独立的 ID 选择器。
	
	有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。
		（例如，如果写作 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深。）
		子选择器： 只选择某个元素的子元素。 （只选择一层 ** h1 > strong {color:red;} **）
		相邻兄弟选择器： h1 + p {margin-top:50px;} 这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。 注意：用一个结合符只能选择两个相邻兄弟中的第二个元素
		
		html > body table + ul {margin-top:20px;}
			这个选择器解释为：选择紧接在 table 元素后出现的所有兄弟 ul 元素，该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素。

	CSS伪类：向某些选择器添加特殊的效果。 例如 a:visited  / 🔺p:first-child （作为某个元素的第一个p元素）...
	伪元素：  :first-line / :first-letter / :before(在前面添加元素) / :after 
	
	（水平）对齐块元素：1. margin-left:auto ; margin-right: auto
					   2. position: absolute (绝对定位)
					   3. float

	图片透明度： opacity :0.4