css知识储备

 1 <!--css的知识储备-->
 2 <!--
 3 英语单词：solid：实线 dashed：虚线 inset：立体 transparent:透明 clip:剪切 underline：下划线 overline：上划线
 4 line-through：行内穿过 wavy：波浪线 decoration：装饰 italic：斜体 attachment：附着 collapse：重叠 colspan: 跨列数
 5 rowspan:跨行数
 6 margin：是外边距也就是盒子与盒子之间的距离
 7 在margin中的只有auto在横坐标有作用，在纵坐标没有作用，因为任何一个网页的横坐标的长度都是已知的，而纵坐标的长度可以是任意的
 8 border边框三要素：宽度，形状，颜色，一个div加一个边框之后这个div的长和宽都要加上一个边框的宽度
 9 padding:盒子的边框到文字的距离，一个div加一个padding之后这个div的长和宽都要加上一个padding的宽度，其中盒子的背景色会一直铺直到铺到盒子border
10 指定背景只铺到指定区域:background-origin
11 box-size：盒模型默认是content-box内容盒
12 border-box:边框盒 到边框处总共是div的总的长和宽 content-box：内容盒
13 <span></span>行内（内敛）元素不会独占一行，行内元素不会突破行高，也就是加不了padding和margin的上下的宽度但可以加左右的宽度<div></div>块状元素独占一行
14 a：hover{background:gray}//鼠标经过时变颜色
15 行内元素只会包裹文字
16 将行内元素变成块状元素a{display：block}
17 display的属性值可以为inline block none（隐藏元素）
18 字体：分为无衬线字体，衬线字体 等宽，和不等宽
19 字体顺序：不安全字体=》安全字体=》字体大类
20 选择器：id选择器 class选择器 标签选择器（div{}）类似这样一个东西 div p{div下的p标签的样式}后台选择器 .a,.b{a和b有相同的属性}兄弟选择器
21 css的选择器的优先级问题：选择器命中越多优先级越低，选择器命中越少优先级越高 div #id>#id{}>.a{}>div{}
22 无序列表<ul><li></li></ul>有序列表<ol><li></li></ol>
23 表格：<table><tr>一行<td></td>行里面一格</tr></table>
24 单元格属性设置：table{border-collapse:collapse}
25 <nav>我这放导航</nav>
26 <footer>kuangjunxian &copy;kjx我这放版权信息</footer>kuangjunxian ©kjx
27 <aside>这放侧边小块信息</aside>
28 <time>这放时间</time>
29 img是行内元素还是块状元素，img其实一种行内元素，是一种特殊行内元素
30 锚点：可以id当锚点
31 伪类：表示元素的某个状态
32 a：hover{background:gray}//鼠标经过a标签的状态
33 a：visited{}//鼠标访问后的标签状态
34 a：active{}鼠标点击时的状态
35 a:line{}//标签颜色
36 顺序不能打乱：l v h a
37 &gt:大于号 &lt：小于号 &nbsp：空格
38 -->
39 <div>
40   没眠不觉晓，<br>
41   处处<span class="red">闻啼鸟</span>
42   a
43   &gt;
44   <footer>kuangjunxian &copy;kjx</footer>
45 </div>