css所有内容

选择器：
 ???.class{} ???类选择器
 ???#id{} ??????id选择器
 ???p{} ????????标签选择器
 ???* {} ???????通用选择器

 ???li a{} ???????后代选择器
 ???div>p{} ??????儿子选择器
 ???div+p{} ??????毗邻选择器
 ???#i1~p{} ??????弟弟选择器

 ???p[title]{} ???属性选择器
 ???p[title="article"]{} ???属性值选择器
 ???[title^="article"]{} ???有title属性并且title属性以article开头
 ???[title$="article"]{} ???以article结尾
 ???[title*="article"]{} ???包含article
 ???[title~="article"]{} ???title可以有很多值，其中一个是article

 ???div,p{} ???????应用于每个
 ???.c1 p{} ???????后代选择器

 ???伪类选择器：
 ???a:link{} ???????未访问过的链接
 ???a:visited{} ????访问过的链接
 ???a:hover{} ??????鼠标移动到链接上
 ???a:active{} ?????选定的链接
 ???input:focus{} ??input输入框获取焦点时的样式

 ???伪元素选择器：
 ???p：first-letter{font-size:48px;color:red;} 首字母特殊格式
 ???p:before{content:"*";color:red;} ?段落前加* ?多用于清除浮动
 ???p:after{content:"？";color:red;} ?段落后加？ 多用于清除浮动


声明（属性：值）：
 ???字体:
 ???font-family:... ????字体家族
 ???font-size:14px ?????字体大小
 ???font-weight:normal(默认) bold(粗) bolder(更粗) lighter(更细) 100~900（400等同于normal 700等同于bold）
 ???color:#ff0000 ?rgb(255,0,0) red

 ???文字：
 ???text-aligh:left(左对齐) right(右对齐) center(居中) justify(两端对齐)
 ???text-decoration:none underline overline line-through inherit 常用none去掉a标签的下划线
 ???text-indent:32px; ?首行缩进32像素


 ???背景：
 ????背景颜色
 ???background-image:url(‘1.jpg‘); ?背景图片
 ???background-repeat:repeat默认平铺排满整个网页 no-repeat(不重复) repeat-x repeat-y;
 ???background-position:right top (20px 20px);背景位置
 ???background-attachment: fixed; ?固定图片位置


 ???边框：
 ???border:2px solid red; ?边框宽2 实线 红色
 ???border-top-style:solid;
 ???border-right-color:red;
 ???border-bottom-style:none; 下部无边框

 ???border-radius:50%; ??圆形（可以将头像变为圆形）

 ???display属性：
 ???display:"none"; ??????????隐藏标签，一般配合js使用
 ???display:"block"; ?????????变为块级标签
 ???display:"inline"; ????????变为内联标签
 ???display:"inline-block"; ??变为内联块标签
 ???visibility:hidden; 隐藏标签，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。



 ???css盒子模型：
 ???margin ???????外边距
 ???padding ??????内边距
 ???border ???????边框
 ???content ??????内容
 ???顺序：top right bottom left
 ???常见居中：margin:0 auto;
 ???（未完待续）


 ???float属性：
 ???float:left; ??????向左浮动
 ???float:right; ?????向右浮动
 ???float:none; ??????不浮动


 ???clear（解决浮动之后的问题）
 ???clear:left; ??在左侧不允许浮动元素存在
 ???clear:right; ?在右侧不允许浮动元素存在
 ???clear:both; ??在两侧不允许浮动元素存在
 ???clear:none; ??默认值，允许浮动元素出现在两边。
 ???一般用以下方式清除浮动：
 ???.c1:after{
 ???????????clear: both;
 ???????????content: "";
 ???????????height: 0;
 ???????????visibility: hidden;
 ???????????display: block;
 ???????}


 ???overflow溢出属性：
 ???overflow:visible; ?默认值，内容不会被修剪
 ???overflow:hidden; ??内容会被修剪，修剪掉的隐藏
 ???overflow:scroll; ??内容会被修剪，修剪掉的滚动条显示
 ???overflow:auto; ????如果内容被修剪，则出现滚动条
 ???overflow-x:...;
 ???overflow-y:...;


 ???position定位属性
 ???position:static; ???????默认值，无定位
 ???position:relative; ?????相对（原始位置）定位
 ???position:absolute; ?????绝对定位
 ???position:fixed; ????????固定 可以用来做返回顶部


 ???z-index自定义模态框属性：
 ???z-index:999; ??数值大的覆盖在数值小的标签上