超出部分隐藏
比如，当我们要建立一个400×400的div，是里面如果插入的是一个600×600px的图片，那么页面实际展示效果就是600×600的图片，此时我们只想展示div的大小，那么就可以在style中设置overflow属性
overflow:hidden(超出部分隐藏)
overflow:scroll(超出部分滚动)
超出隐藏的使用场景:
①使用overflow:hidden;清除浮动，在浮动元素的父元素上加上该属性值
②当两个板块重叠，上框重合时改变一个高度属性，两个都会发生变化，在外元素加上超出部分隐藏时，会触发一个bfc机制格式化该元素，使其外边距不与其他合并。
例:
<style>
.big{
width: 300px;
height: 300px;
background-color: skyblue;
}
.samll{
width: 200px;
height: 200px;
background-color:red;
margin-top: 40px;
}
</style>
</head>
<body>
<div class="big">
<div class="samll">
</div>
</div>
</body>
两个会一起向下移动
使用overflow后:
<style>
.big{
width: 300px;
height: 300px;
background-color: skyblue;
overflow: hidden;
}
.samll{
width: 200px;
height: 200px;
background-color:red;
margin-top: 40px;
}
</style>
</head>
<body>
<div class="big">
<div class="samll">
</div>
</div>
</body>
效果:
定 位:
pisition属性: relative(相对定位)
absolute(绝对定位)
fixed(固定定位)
1.固定定位
用于广告导航栏等在网页中位置不变的部分
在选择器下使用position:fixed ;参照物是屏幕
特点:
①固定在浏览器屏幕上，不会随着页面滚动而滚动。
②不占实际位置，位置会被下面的元素占去，说明脱离了标准文档流。
如果在position:fixed下写top:200px; left:200px;
相当于坐标，如:
.samll{
width: 200px;
height: 200px;
background-color:red;
margin-top: 40px;
position: fixed;
top: 120px;
left: 200px;
}
top的意思是离顶部120像素的位置，
left的意思是离左边200像素的位置。
也可以使用bottom right，同理。
2.相对定位
position:relative 参照物是自身左上角原点
也可以在下方使用top left right bottom 用法略有不同
特点:
①没有固定的屏幕上，会随着页面滚动而不显示。
②占实际位置，位置不会被下方元素占去，说明没有脱离标准文档流。
③调整定位位置取值
top:10px;指的是相对于原点向下10像素的位置
left:10px;指的是相对于原点向右10像素的位置
bottom:10px;指的是相对于原点向上10像素的位置
right:10px;指的是相对于原点向左10像素的位置
3.绝对定位
position:absolute; 参照物是浏览器左上角(参照物最外面元素的左上角)
特点:
①绝对定位脱离标准流。
②如果绝对定位元素的父元素有任意定位，参照物就是父元素的左上角。
子元素设置绝对定位，父元素就要设置相对定位
Z-index属性
调整元素定位时重叠层的上下位置
在style选择器下使用，就是从0到123数值越高的在上面，没什么好说的。
那么基础网页到这里就算是结束了，感兴趣的可以自己来尝试写一些简单的网页，注意多积累多尝试，从零到一是一个比较困难的过程，到后面会开一期新的动画网页制作，谢谢各位的陪伴，祝大家生活愉快！
