溢出属性
p {
height: 100px;
width: 100px;
border: 2px solid black;
overflow: visible;/*默认就是可见的，溢出后仍展示*/
overflow: hidden;/*溢出部分进行隐藏*/
overflow: scroll;/*溢出部分通过滚动条滚动来显示*/
overflow: auto;/*效果与scroll相类似*/
}
定位
静态（static）
- 所有标签默认都是静态定位的（static），无法改变位置
相对定位（relative）
/*相对于标签原来的位置移动(relative)*/
#d1 {
height: 100px;
width: 100px;
background-color: red;
left: 50px; /*从左往右 如果是负数 方向则相反*/
top: 50px; /*从上往下 如果是负数 方向则相反*/
/*
right: 50px; 从右往左 如果是负数 方向则相反
bottom: 50px; 从下往上 如果是负数 方向则相反
*/
/*position: static; !*默认是static无法修改位置*!*/
position: relative;
/*相对定位
标签由static变为relative它的性质就已经发生了变化即从没有定位变成了定位后
即便没有变动标签位置，其性质也已经发生了变化
*/
}
绝对定位（absolute）
/*相对于已经定位过的父标签做移动（如果没有父标签就以body为参照）*/
#d1 {
height: 80px;
width: 80px;
background-color:darkred;
position:relative;
}
#d2 { /*若宽高大于父标签，则会将父标签覆盖*/
height: 50px;
width: 50px;
background-color:skyblue;
position:absolute;
left: 100px; /*父标签的左上角为原点，向右逐渐增大，若为负数则方向相反*/
top:80px; /*父标签的左上角为原点，向下逐渐增大，若为负数则方向相反*/
}
/*ps：浏览器是优先展示文本内容的*/
固定定位（fixed）
#d3 {
position: fixed; /*定位依据浏览器窗口，不会随页面的移动而移动*/
bottom: 10px;
right: 20px;
height: 50px;
width: 50px;
background-color: skyblue;
color: #fff;
}
验证浮动和定位是否脱离文档流(原来位置是否被保留)
<!--
结论:
不脱离文档流的：相对定位
脱离文档流的：浮动、绝对定位、固定定位
-->
<!--相对定位-->
<div style="height: 100px;
width: 200px;
background-color: red;
position: relative;
left: 500px">
</div>
<div style="height: 100px;
width: 200px;
background-color: greenyellow">
</div>
<!--绝对定位-->
<div style="height: 100px;
width: 200px;
background-color: red;">
</div>
<!--当没有父标签做到位 就参照与body-->
<div style="height: 100px;
width: 200px;
background-color: greenyellow;
position: absolute;
left: 500px">
</div>
<div style="height: 100px;
width: 200px;
background-color: blue;">
</div>
<!--固定定位-->
<div style="height: 100px;
width: 200px;
background-color: red;">
</div>
<div style="height: 100px;
width: 200px;
background-color: greenyellow;
position: fixed;
bottom: 10px;
right: 20px">
</div>
<div style="height: 100px;
width: 200px;
background-color: blue;">
</div>
z-index模态框
<!--
浏览器页面是一个三维坐标系，页面的宽为x轴，高为y轴，z轴指向我们用户
1.最底部是正常内容(z=0) 最底层
2.遮罩层(z=99) 中间层
3.显示层(z=100) 最顶层
-->
<style>
body {margin:0;}
.cover {
position:fixed;
left:0;
top:0;
right:0;
bottom:0;
background-color: rgba(0,0,0,0.5);
z-index:99;
}
.modal {
background-color: #fff;
height: 200px;
width: 400px;
position: fixed;
left: 50%;
top: 50%;
margin-top: -100px;
margin-left: -200px;
z-index:100;
}
</style>
<div>这是最底层的页面内容</div>
<div class="cover"></div>
<div class="modal">
<h1>登陆页面</h1>
<p>username:<input type="text"></p>
<p>password:<input type="text"></p>
<button>点我点我~</button>
</div>
透明度opacity
/*
opacity可以同时修改颜色跟字体的透明度，范围同样也是0~1之间
rgba只能够改变颜色的透明度
*/
制作html的建议
'''
1、提前构思好大致布局用div划分区域再填入基本内容最后再细调(先动粗，后调戏(细))
2、写html时的id跟clss等属性最好见名知意
'''
