HTML学习笔记记录---速预CSS（2） 复合属性、盒子模型、边框线、浮动、定位
复合属性写法：
{font: font-style font-weitght font-size/line-height font-family}
{font: 样式 粗细 字号 字体}
(书写瞬间为固定的不可更改)
block 块级元素 div
inline 行内元素 span
inline-block 行内块元素 img（图片）
块级元素占的是一整行，对其文字添加底纹颜色时会对整行添加。
行内元素不占据一整行，所以添加底纹颜色仅对有内容部分添加。
宽高部分：
width（宽）和 height（高）
{ width/height: 数值px; }
该命令可以对 块和行内块 的大小进行自定义，若行内块是一张图片，只指定 宽或高 则会进行比例修改，若即指定了宽又指定了高则不会按照比例修改。
其中修改的块仅是对显示效果的修改，实际仍会占用一整行。
display 块、行内和行内块三种属性均可互相转换
盒子模型：
| 属性 | 说明 |
| 内容content | 盒子的实际内容 |
| 内边距padding | 内容与边框之间的空间 |
| 边框border | 盒子的边界 |
| 外边距margin | 边框的外部，盒子与其他元素之间的空间 |
border-style边框线类型：
| solid | 实线边框，经典边框。 |
| double | 双线边框，含有两条线。 |
| groove | 槽线边框，看起来就像页面中的一个槽。 |
| outset | 外凸边框，看起来就像从页面凸出来一样。 |
| dotted | 虚线（点线）边框。 |
| dashed | 破折线边框。 |
| inset | 内凹边框，看起来像页面凹进去一样。 |
| ridge | 脊线边框，看起来像页面上一个凸起来的山脊。 |
边框宽度：
border-width: 10px 5px 15px 20px;
按照上右下左的顺序来设置大小
border-width: 10px 5px 15px;
若不满四个值则缺少的值对本身的对位相同（上下）
border-width: 10px 0 15px 20px;
“ 0 ”值时可以不写单位
border-left指定左边框的属性
padding文本与边框上下左右的距离
margin与浏览器界面边框的距离
border-radius圆角边框线
使用数字指定角的弧度
border-radius: 15px;
浮动：
浮动属性用于创建副都给框，将其移动到一边，直到有一条边缘接触另一浮动框的边缘，这样就可以使元素浮动了。
选择器{ float: left/right/none ; }
none：不浮动
浮动相对于父元素浮动，仅在父元素的内部移动。
清除浮动：在父选择器内使用“overflow：hidden;”
定位：
相对定位：相对于元素在文档流中的正常位置进行定位。
绝对定位：相对于其最近的已定位祖先元素进行定位，不占据文档流。
固定定位：相对于浏览器窗口进行定位。不占据文档流，固定在屏幕上的位置，不随滚动而滚动。
使用方法：
relative 相对定位
absolute 绝对定位
fixed 固定定位
left 向左
top 向下
在选择器内输入“position：relative;”再输入“left：数值;”比正常位置向左改变多少距离了
相对定位一般用于微调布局、绝对定位一般用于比较复杂的布局、固定定位一般用于导航栏或侧边栏等。