盒子模型
盒子模型：
border表示的是盒子的边框问题：
先设置盒子的宽和高：
width:100px;
heigth:100px;
boeder:1px solid blck;表示盒子的边框；
border细化：border-left、border-、border-right、border-top。
例如：border-left：10px dotted blue.
画三角形：用边框
盒子里面的文字一般都是左对齐，但也可以用text-align：center来居中对齐、right来右对齐。
设置垂直居中;使单行文本高度等于容器的高度：
height=100px;
line-height=100px;
首行缩进;text-indent；2em两个空格
1em=1*该元素的font-size
line- height：1.2em，每行都有行间距,行高。
因为行为、样式相分离，而html的<del></del>中掺杂了太多的css的成分，所以不用这个标签，用css中的text-decoration:line-through；来代替。
text-decoration:none;表示没有线。
例如在<del></del>标签的子元素里使用，就会去掉下划线。
像素：每英寸能割下的垂直像素点数。
px就是一个像素。
<a></a>标签可以等效为：
span｛
text-decoration:underline下划线
｝
设置光标移动到网址（文字）上变成小手、小问号：cursor=help（问号）...
伪类选择器：当鼠标移入他的林领域之内，它才会加上css样式。
a:hover{
伪类选择器之一：hover
}
1.行级元素（内联元素）：span、strong、em、a、del
特点：1.内容决定元素所占位置
2.不可以通过css改变宽高
2.块级元素：div、p、ul、li、ol 、form、address、
特点：1.独占一行
2.可以通过css改变宽高
3.行级块元素：
img图片设置时只设置宽或者高，另外一个会自动等比例缩放。
特点：
1.内容决定大小
2. 可以改变高
当这样定义时，会保存前面提到的特点（例如独占一行），但也可以不这样写，例如将第一个写为display:block,此时元素就会占满一行。
又例如：将div的block写为inline，此时设置什么宽高都不好使，特点也会失效，都会变成这样：
凡是带有inline的元素，都有文字特性，有文字特性就会被分割。
好的习惯：先定义功能，再引用：
自定义标签：
因为有些css中自带的样式不是我们想要的，所以我们用css右边来自定义标签，去掉时用none。
*｛
｝
通配符选择器：能初始化所有标签
因为各个标签有各自的功能，而通配适用符就可以完全涵盖所有标签，有就改变，没有就没有，所以也是很常用、很方便的。
盒子模型：
盒子的三大部分：
盒子壁：border
内边距：padding
盒子的内容：content=width+height
盒模型：
还要加一个：外边距：margin 浏览器以左上为障碍
padding； 上 右 下 左 （四个值）
padding：上 左（右） 下 （三个值）
padding：上（下） 左（右） （两个值）
作为盒子来说左右等距的情况更多。
也可以单独：padding-left：100px.
border-width：和padding是一样的你，也是四个值，也可以单独设置。
使里面的盒子在外面的盒子正中心时，方法(子级在父级的正中间)：
1. 使两个的长宽高一致。
2. 加padding，使之环绕
制作远视图：
1.
盒子的定位；
position：absolute;绝对定位
top=100px;
left=100px;
body默认的padding为8px。
给背景加透明度：opacity：0.5 值为0--1。
盒子模型的几个bug：
层模型形成：当一个元素成了绝对定位absolute的元素时，它就脱离了原来的层（位置）跑到了上面一个层面上去了，所以在本例题中，red脱离了原来位置，red本身的位置变成真空，而下面的green就滑到了上面，而red在green上面一层。
此时再给red重新定位（以及加限定条件，例如长宽高），也并不影响green，因为两者根本不在同一层级，red在上一层。
2.
盒子的定位；
position：relative;相对定位
top=100px;
left=100px;
层模型形成：当一个元素成了相对定位relative的元素时，它就脱离了原来的层（位置）跑到了上面一个层面上去了，但是不同的是，它保留原来的位置，所以在本例题中，下面的green就无法顶替red的位置。
此时再给red重新定位（以及加限定条件，例如长宽高），也并不影响green，因为两者根本不在同一层级，red在上一层，而green还是无法滑到red的那个位置，因为red是保留原来位置的。
对比：
1.absolute：a.脱离原来位置进行定位
b.相对于最近的有定位的父级进行定位，如果没有定位，那么相对于文档（页面边框）进行定位。
2.relative：a.保留原来位置进行定位
b.相对于自己原来的位置进行定位
具体使用在何处：
用relative作为参照物，用absolute来定位。
因为relative保存原来位置，
用absolute一改变，后续元素全上去了。
而absolute定位更灵活。
黄色为黑色的参照物：
fixed定位：广告滚动条，你下滑上滑页面广告都不动。
页面中心定位：
开始时，相对于页面定义上左为%50，而并不在中间， 这是因为定位时是以左顶点定位的。
代码：
效果如图：
后来设置-%50的申位，使之以中心点来定位，就做到了始终在屏幕中心，就算缩小页面，也始终是在中心位置。
代码：
效果如图：
缩放页面后仍然居中：