float 浮动 position 定位 阴影
程序员文章站
2022-03-02 15:32:55
...
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);红色
调配颜色 根据数字调配
上一篇： 绝对定位和浮动的区别
下一篇： Jpa联合主键
推荐阅读
-
浮动和渐变色，定位position，元素的层叠顺序
-
web前端css定位position和起浮float
-
CSS布局之浮动(float)和定位(position)属性的区别
-
html中的定位position以及浮动float如何使用？
-
CSS学习笔记--CSS中定位的浮动float_html/css_WEB-ITnose
-
web前端css定位position和浮动float_html/css_WEB-ITnose
-
浮动和渐变色，定位position，元素的层叠顺序
-
CSS的position定位和float浮动
-
理解浮动和position定位 - 侠奕
-
CSS学习笔记--CSS中定位的浮动float_html/css_WEB-ITnose