float浮动分为 left right
清除浮动 clear:left/right
浮动设置后可能会出现浮动塌陷问题
例如 一个div 其中有文本 和图片 设置浮动后出现溢出,图片不在div内,这就是浮动塌陷
<!DOCTYPE html><html><head><meta charset="utf-8"><title>浮动塌陷</title><style type="text/css">#div1{border: 1px solid #FF0000;width: 1000px;height: 1000px;/* overflow: hidden; */}img{float: left;}/* #div2{clear: left;} */</style></head><body><div id="div1"><p>宋 秦观携扙来追柳外凉，画桥南畔倚胡床。月明船笛参差起，风定池莲自在香。夏夜追凉宋 杨万里夜热依然午热同，开门小立月明中。竹深树宻虫鸣处，时有微凉只是风。夏日南亭怀辛大唐 孟浩然山光忽西落，池月渐东上。散发乘夕凉，开轩卧闲敞。荷风送香气，竹露滴清响。欲取鸣琴弹，恨无知音赏。感此怀故人，中宵劳梦想。</p><h1>sdd</h1><img src="img/08.webp" ><div id="div2"></div></div></body></html>
解决浮动塌陷:三个方法
1.给父级设置固定宽高属性
2.给父级设置overflow:hidden;
3.在浮动的下方清除浮动
定位
position: relative/absolute/fixed
relative 相对定位 absolute 绝对定位 fixed 固定定位
相对定位与绝对定位的区别
相对定位保留原来的位置,绝对定位不保留原来位置
阴影
box-shadow 盒子阴影 (px,px,px,px,px,px)
参数一 X轴偏移量(左右阴影)
参数二 Y轴偏移量(上下阴影)
参数三 阴影模糊程度
参数四 阴影扩展半径
参数五 阴影颜色
参数六 固定 insert 内阴影
层叠样式 z-index
透明 opacity 透明度0~1;
background-color:rgla( 255,0,0,0.5);红色
调配颜色 根据数字调配
