CSS

选择器

	1.ID选择器
	2类选择器
		- 无需唯一
		- 选择性使用
		- 组合使用
    3.标签选择器
	4.*{ ·· }

#name{···} 				<div id="name"></div>
.name{··}				<div class="name"></div>
li{··}					<li>...</li>

HTML页面引入css的三种方式

1.行内样式
2.内部样式
3.外部独立样式表文件（内容和表现分离）

文字样式：font

font-style:normal/italic;
font-weight:normal/bold;
font-size:Npx;   N-单位 正文12~14px
font-family:arial,"Microsoft Yahei";
复合样式：font：style weight size family;

文本样式

color:word/#6位16进制/rgb(0~255,0~255,0~255)/rgba(0~255,0~255,0~255,0~1);
text-align:left/center/justify;
line-height:Npx;     
text-indent:Npx/em;		段落  1.2em

列表样式

list-style-type:none;
list-style-position:outside/inside;
list-style-image:url(path);

盒子模型

> box-sizing:content-box/border-size;
> 	/*宽高*/
	wide:Npx;
	height:Npx;
	/*外边距 兄弟关系 盒子相对于父盒子水平居中：margin:Npx auto Npx;*/margin
	margin:topPx rightPx bottomPx leftPx;
	margin:topPx lrPx bottomPx;
	margin:tbbox lrPx;
	margin-top:
	margin-right:
	margin-bottom:
	margin-left:
	/*内边距 父子关系*/padding
	padding: 语法同margin
	/*边框*/border
	border:color width style;
	border-top:color width style;*4
	border-color:topcolor rightColor bottom Color leftColor;*3
	border-top-color:color;*12
	#圆角边框
	border-radius:左上角半径 右上角半径 右下角半径 左下角半径;
	border-radius:Npx
   /*左边框*/
	#boder:gray solid;
	boder-width: 0 0 1px 1px; 
	/*背景样式*/
	#背景颜色   background-color:4中方式；
	#背景图片   background-image:url(PATH)；
    #背景位置   background-position：相对位置、绝对位置；
					相对位置：
						横向：left center right；
						垂直：top center bottom；
					绝对位置：Xpx Ypx；
	#平铺       background-repeat:no-repeat;
	background:color image position repeat;
	background-size:cover;

弹性盒子（只能顺改，无法逆向操作）

父盒子

display:inline/inline-block/block;none(隐藏);
flex-direction:row/column;#弹性方向
flex-wrap:no-wrap/wrap;
justify-content:space-betwen/space-around;水平对齐
align-content:space-betwen/space-around;垂直对齐（多行）
align-items:space-betwen/space-around;垂直对齐（单行）

子盒子

flex-grow:1;