讲课004

边框

（1）复合写法：边框 border:【数值】 【形式】 【颜色 】 ;

列子：border: 0.0625rem dashed red;

（2）三个单拆：border-color: 【颜色】;         border-style: 【形式】;         border-width: 【数值】;

边框样式：border-style: 【什么线】;                             虚线：dashed                实线：solid        双实线 ：double        点状虚线：dotted

border-width: 【数值】;            数值可拆：2（上下，左右） 3（上，左右） 4（上，右，下，左）

背景

背景图片：background-image: url(【路径】);

背景颜色和背景图片放在仪器，不会覆盖 【图片在背景颜色上】

内部样式搞图片，和外部样式搞图片，（图片在img里面），路径不一样。【外部../，内部直接用】

列子：

图片小，格子大，图片重复铺 盒子小，图片大，显示部分出。

背景平铺（重复铺在格子里，把格子填满）

背景不平铺：background-repeat: no-repeat;                        平铺是默认的（repeat）

repeat-x        沿着x轴横向平铺                                  （手账见过）

背景尺寸大小：background-size:【x的值】【 y的值】

用数值，百分比都可，看着好看用等比列框或者一致，                        【百分比：按框的大小比列】

摆放快捷键 ：contain  {可完整显示背景图片，容器跟背景图片不是等比，有一部分留白}
                      cover {可以让背景图片等比缩放并根据容器大小相对居中显示会裁掉一部分}

列入：background-size: cover;                background-size: contain ; 

背景位置（背景定位）

background-position: 【横向值】 【纵向值】;                         【可正负数值，英文上下左右，中】

列子：background-position: center center; 

背景偏移  （背景定位应用）

用大的图片放在小盒子里，通过背景位置定位移动显示的图               {为了省内存，但要计算数值}

用法：background-position-y: 【负的数值】;                        background-position-x: 【负的数值】;

（不会搞，打开页面源代码:找到那行看着改数值，到之前编的再改数值）

背景滚动【默认】                               scroll  滚动

背景不动，页面动（壁纸赏心悦目）                        背景固定：background-attachment: fixed;

实例：鹿，马，斑马那个好好玩【放在电脑里】                相当于3个图片放在3个盒子里，盒子和图片同大小，正好颜色相近，看起来很好玩。                【+的那个框，相当于在页面加个框】

首要清楚所有格式：*{ 【margin: 0;  padding: 0;】}                 页边距，内填充搞成0

margin 100px auto;                        【不知道干啥的？】

margin: 0 auto;                        把边框移到中间

边框怎么插背景？                设完长，高，+图片，+边框

PS设置

放大，缩小：ctcl+，ctrl-

拖拽：空格+鼠标