前端基础知识部分总结

1.盒子模型

1.1margin外边距

1.2padding内边距

1.3border边框

1.4content文本框

1.5盒子模型基本构造

2选择器

2.1 派生选择器

	div span{
	            color: #317EF3;
	        }

2.2 id选择器

#box{
            color: #317EF3;
        }

2.3类选择器

#box{
            color: #317EF3;
        }

2.4属性选择器

[title="theme"]{
            color: #317EF3;
        }

3.基本的css标签

3.1 z-index制定一个元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。（几者数字最大者位于最上层）

例如：

	<div class="box1"></div>
	<div class="box2"></div>

当

		.box1{
            position: absolute;
            top: 0;
            left: 0;
            width: 300px;
            height: 300px;
            background-color: #317EF3;
            z-index:1;
        }
        .box2{
            position: absolute;
            top:20px;
            left: 50px;
            width: 150px;
            height: 150px;
            background:red;
            z-index: 2;
        }

结果为：

改动box2：

.box1{
       position: absolute;
       top: 0;
       left: 0;
       width: 300px;
       height: 300px;
       background-color: #317EF3;
       z-index:1;
      }
.box2{
	   position: absolute;
	   top:20px;
	   left: 50px;
	   width: 150px;
	   height: 150px;
	   background:red;
	   z-index: 0;
 }

结果为：

3.2cursor指针属性

值	概述
url	需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default	默认光标（通常是一个箭头）
auto 默认	浏览器设置的光标。
crosshair	光标呈现为十字线。
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动。
e-resize	此光标指示矩形框的边缘可被向右（东）移动。
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize	此光标指示矩形框的边缘可被向上（北）移动。
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize	此光标指示矩形框的边缘可被向下移动（北/西）。
w-resize	此光标指示矩形框的边缘可被向左移动（西）。
text	此光标指示文本。
wait	此光标指示程序正忙（通常是一只表或沙漏）。
help	此光标指示可用的帮助（通常是一个问号或一个气球）。

3.3box-shadow阴影

语法：

box-shadow: h-shadow v-shadow blur spread color inset;

值	说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影