第二周的学习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div1{
width: 100px;
height: 100px;
background-color:red ;
border: 10px solid green;
/*margin:[外边距]
* margin属性值最多有四个
* ①只写一个值，四个方向的margin均为这个值
* ②写两个值，上、右两个方向；下默认=上，左默认=右
* ③写三个值，上、右、下 左默认=右
* ④写四个值，上、右、下、左;
* ⑤写三个值加auto控件居右显示
* margin：50px 30px 20px auto;居右显示，距右侧30px
* margin:0 auto设置控件在父容器中水平居中（块级元素水平居中）
* */
/*[border边框]
boder有三个属性值：宽度（width） 样式（style） 颜色（color）
原则上三个属性都要指定，color默认为黑色
[padding内边距]
同margin的①②③④
注意：使用padding 会将整个空间撑大，使用时需注意可视区域的实际大小*/
/*/* [border-radius 圆角]
* 1、可以接受8个属性值： X轴(左上、右上、右下、左下)/Y轴
* 例如：border-radius: 50px 50px 50px 50px / 50px 50px 50px 50px;
* 2、只写X轴时，Y轴默认等于X轴。只写左上角，默认=右下角。只写右上角，默认=左下角
* 例如：border-radius: 50px 0px ;
* =border-radius: 50px 0px 50px 0px;
* =border-radius: 50px 0px 50px 0px/50px 0px 50px 0px;
*
* 3、只写一个数，默认8个值均相等。
*/
/* [border-image 图片边框]
* 1、十个属性：
* ① 图片路径：url()
* ② 图片切片宽度：4个值，分别代表上、右、下、左，四条切线。通过四条切线切割后，会把图片分成九宫格，四个角分别对应边框的四角(不会进行任何拉伸)，四个边分别对应边框的四边(根据设置进行拉伸/平铺/铺满)。
* 写的时候，不能带px单位
* ③ 图片边框的宽度：4个值，分别代表上、右、下、左四条边框
* 写的时候，必须带px单位
* ④ 边框背景重复方式：stretch(拉伸)、round(铺满)、repeat(平铺)
* 【铺满和平铺区别】
* 平铺：会保持原有四条边的宽度，进行平铺。可能导致角落处无法显示完整一个图标；
* 铺满：会对四条边进行适当的拉伸压缩，确保可以正好显示完全。
*
* 2、属性值写法：border-image: ① ②/③px ④;
* 第②部分可以只写1个、2个、3个，判断方式同margin
*/
<body>
<div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*[绝对定位]
1 使用position:absolute;设置元素为绝对定位元素
2 定位机制：
①相对于第一个非static的祖先元素进行定位（即使用了relative、absolute、fixed的祖先元素）
进行定位，如果所有祖先元素均未定位，则相对于浏览器左上角进行定位
②使用absolute的元素，会从文档流中删除，原有空间释放不再占有
【固定定位 fixed】
1 position:fixed;是一种特殊的绝对定位，父容器无法使用relative锁住
2 定位机制：永远相对于浏览器进行定位
【Z-index】
1 设置定位元素的Z轴重叠顺序
2 使用要求：①必须是定位元素才能使用。relative、absolute、fixed
②使用z-index需要考虑父容器的约束。如果父容器为z-index：auto,
则子容器的z-index可以不受父容器的约束；如果父容器z-index进行了设置，则子容器的
层叠将以父容器的z-index为准（在同一父容器的不同子元素，扔可以通过自己的Z-index调整
层叠关系）
3 z-index:auto& z-index:0 的异同
①z-index:auto为默认值，与z-index：0处于同一平面
②z-index:auto，不会约束子元素的z-index层次，而z-index：0，会
约束子元素必须与父元素处于同一平面
4 z-index相同（处于同一层面的定位元素）的层叠关系：后来者居上
z-index默认为auto*/
.div1{
width: 100px;
height: 100px;
background-color: red;
margin: 0 auto;
position:absolute;
/*绝对定位元素水平居中的方式
1 left:50%
2 设置margin-left为-width/2
*/
}
.div1-1{
width: 50px;
height: 50px;
background-color: blue;
/*margin: 0 auto;*/
position:absolute;
}
.div2{
width: 100px;,
height: 100px;
background-color: yellow;
}
.div2-1{
width: 50px;
height: 50px;
background-color: green;
}
</style>
</head>
<body>
<div class="div1">
<div class="div1-1">
</div>
</div>
<div class="div2">
<div class="div2-1">
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div1{
width:100px ;
height: 100px;
background-color:red ;
/*【相对定位 relative】
1、使用position：relative；设置元素为相对定位的元素
2、定位机制
①相对于自己原来文档流中的位置定位，当不指定top等定位值时，
不会改变元素位置。
②相对定位元素仍会占据原有文档流中的位置，而不会释放
3、使用top、left、bottom、right调整位置。当left和right同时存在，
left生效，当top和bottom同时存在，top生效
*/
position: relative;
top:50px;
left: 50px;
}
.div2{
width:100px ;
height: 100px;
background-color:green;
}
</style>>
</head>
<body>
<div class="div1">
这是第一个div
</div>
<div class="div2">
这是第二个div
</div>
</body>
</html>
