WEB前端-浮动-阴影

蒲竺

已于 2022-10-25 15:54:23 修改

阅读量741

点赞数 10

分类专栏： web前端文章标签：前端 html

于 2022-10-25 15:49:24 首次发布

本文链接：https://blog.csdn.net/syh_syh0321/article/details/127514007

版权

本文详细讲解了前端开发中的浮动与阴影效果。包括图文绕排、行元素和块元素的浮动、浮动问题及清除方法。同时，介绍了文本阴影、边框阴影的实现方式。此外，还探讨了细线表格、网站图标与字体图标的应用。

摘要由CSDN通过智能技术生成

WEB前端-浮动-阴影

浮动

图文绕排图示

浮动最早期做的是图文绕排

<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.news{width:500px;border:1px solid #000;overflow:hidden;}
		img{float:left;}  /* 浮动，还可以是right */
	</style>
</head>
<body>
<div class="news">
	环球网综合报道】据日本NHK电视台8月29日报道，117岁的玻利维亚女性朱丽叶•弗洛雷斯•科尔克(Julia Flores Colque)被认为是目前世界上最长寿的老人。这位老人近日边弹奏弦乐边唱歌的视频画面引起热议。
	<img src="myweb/1.png" alt="" />
科尔克居住在玻利维亚中部的高地上。玻利维亚政府颁发的出生证明显示，老人生于1900年10月26日，今年10月她将迎来118岁的生日。除了有些耳背外科尔克身体健康，经常弹奏一种叫恰兰戈的小吉他，用安第斯山特有的奇楚亚语演唱民歌，她终身未婚未育。
</div>
</body>

浮动的语法：

float:left/right /none

取值：left向左浮动，right向右浮动，none取消浮动

现在的浮动，用的最多是让块元素在同一行显示：就是给一行的所有块元素都加上浮动

浮动的最大价值：让元素排列成一行，或者一左一右

浮动的使用口诀：

1.要浮动，兄弟元素也一起浮动

2.浮动方向保持一致（尽量都是用左浮动）

总结：

1.可以做图文绕排

2.主要让块元素排一行，多个元素一起浮动

3.注意加了浮动以后元素的顺序，标签顺序，浮动方向

4.浮动的元素脱离标准流