盒子布局、标签特性display、浮动、定位position

盒子模型布局：

盒子模型：每个标签都是一个盒子

盒子在页面显示在大小是：自身宽度+边框+边距（内边框+外边距）

如果一个盒子设置了边框，则边框需要被加两遍。若果设置了边距则内外边距根据设置情况要被加两遍。

计算 宽高box-sizing: border-box;（意义是将盒子大小定死，不会再因边距边框大小改变。）

设置上一行属性后，盒子宽度就是width，里面内容自适应。（计算的时候不再需要加边框和边距。）

从里到外：

padding(内边距)： 属性值的前后顺序代表了上右下左的属性值。

上右下左   上（左右）下  （上下）（左右）   全部

border（边框:每一个边都可以设置）：

width大小

style样式

color颜色

radius（角）： 左上（顺时针，百分比形式50%  0%  0%  0%）

margin（外边距）：  上右下左   上（左右）下  （上下）（左右）   全部

（margin:auto;居中属性正对于块标签。）

box-shadow(盒子阴影外，向外加inset)：水平偏移量 上下偏移量 清晰度 阴影的面积  颜色  （inset属性加在最后）

h-shadow:水平阴影位置。允许负值。

v-shadow:垂直阴影位置。允许负值。

text-shadow(字体阴影)： 水平偏移量  上下偏移量  清晰度  阴影面积  颜色

布局：

浮动:float

overflow:hidden 超出部分处理方式

overflow-y:scroll 滚动条

标签特性：display :

inline       行

不能设置宽高，默认不占一行

block        块  （margin:auto;居中属性正对于块标签。）

能设置宽高，默认占一行

inline-block 行内块

能设置宽高，默认不占一行

none

display：none         隐藏

标签位置没了。宽高都没了，但是还在。网页可检查到。

visibility:hidden；

标签位置还在，只是遮挡。宽高都在，页面无法看到。

opacity：数值（0~1）；

透明度，但标签和子标签都透明

如果只需要背景半透，字体不变

                                     则需要直接设置背景色，background：rgba();

                                     rgba(0~255,0~255,0~255,透明度（0~1）);

布局：

浮动:float

overflow:hidden 超出部分处理方式（将超出的部分隐藏掉）

overflow-y（x）:scroll 隐藏并处滚动条，y是垂直方向，x是水平方向。

定位position:

fixed       绝对定位，相对于屏幕定位，保持在屏幕的位置不变。

设置fixed,标签位置没了（最高层）

top:0px;left:10px;right:20px;bottom:30px;此处为在页面的定位位置。（一般只设两个，上下各一个，左右各一个，避免冲突。）

z-index:层数：层数越高，显示在最前面。（前面的图片会挡住下一层的图片）

补充：background-attachment:scroll;是设置背景图片位置不动，滑动滚动条无变化。

relative    相对定位，相当于自己定位

形式的移动，原位置不变！！！

会移动,微调 +-不要超过20px。

<div style="width: 100px;height: 100px;background-color: #ccc;position: relative;left:10px;top:10px;"></div>，设置top，bottom，left，right属性来调节位置。

最主要的！！！限制absolute

absolute    绝对定位，相对于body（页面定位）

标签位置也没了

相对于最近的有position属性的父标签,最顶级是body.

<div style="width: 200px;height: 200px;background-color: #ccc;position: relative;">

<div style="width: 100px;height: 100px;background-color: red;position: absolute;top: 0px;">

top,left,right,bottom

z-index:层数