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：数值;”比正常位置向左改变多少距离了

相对定位一般用于微调布局、绝对定位一般用于比较复杂的布局、固定定位一般用于导航栏或侧边栏等。