前端开发（CSS）

本篇对CSS的基础知识做一个简单的描述
选择器：
1、ID选择器
2、类选择器
（1）无须唯一
（2）选择性使用
（3）组合使用
3、标签选择器
4、*{ }

	#name{...}    <div id="name"></div>        (div即为标签） name即(名称）
	.name{...}    <div class="name"></div>
	li{...}        <li>...</li>

HTML页面中引入CSS的三种方式
1、行内样式
2、内部样式
3、外部独立样式表文件（内容和表现分离）

文字样式： font
font-style:normal/italic;
font-weight:bold;
font-size:Npx; 正文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);
align:left/center/justify;
line-height:Npx; 段落1.2em；
text-indent:Npx/em;

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

盒子模型
box-sizing:content-box/border-box;

宽高
width:Npx;
height:Npx;

外边距 兄弟关系 盒子相对于父盒子水平居中：margin:Npx auto Mpx
margin:topPx rightPx bottomPx leftPx;
margin:topPx lrPx bottomPx;
margin:tbPx lrPx;
margin-top:Npx;
margin-right:Npx;
margin-bottom:Npx;
margin-left:Npx;

内边距 父子关系
padding:语法同margin

边框
border:color width style;
border-top:color width style; *4
border-color:topColor rightColor bottomColor leftColor; *3
border-top-color:color; *12

#下左边框
border:gary solid;
border-width: 0 0 1px 1px;

#圆角
border-radius:左上角半径 右上角半径 右下角半径 左下角半径；
border-radius:Npx;

背景样式
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;

弹性盒子
inline => inline-block => block

父盒子样式
display:inline/inline-block/block/flex/none;
flex-direction:row/column;
flex-wrap:no-wrap/wrap;
justify-content:space-between/space-around;水平对齐
justify-content:space-between/space-around;垂直对齐（多行）
align-content:space-between/space-around;垂直对齐（单行）
子盒子样式
flex-grow:1;