【CSS】浮动 ② ( 浮动语法简介 | 文字环绕效果 | 左浮动 | 右浮动 )
CSS 简介 效果 语法 文字 浮动
2023-09-14 09:07:26 时间
一、浮动语法简介
1、语法说明
为 元素 设置了 浮动 CSS 属性 , 可以实现 :
- 元素标签 不再受 标准流 控制 ; ( 块级元素 , 行内元素 , 行内块元素 的布局方式 )
- 元素标签 可以 放置在指定的位置 , 靠左 或 靠右 ;
CSS 浮动语法 :
选择器 {
float: 浮动属性值;
}
浮动属性值 取值 :
- none : 默认设置 , 元素没有浮动效果 ;
- left : 元素 左浮动 ;
- right : 元素 右浮动 ;
2、没有浮动的效果
浮动效果需要结合文字来进行对比 , 浮动可以实现 使用文字环绕图片 的效果 ;
设置没有浮动效果 :
/* 默认无浮动效果 */
float: none;
展示效果 : 图片是 行内块元素 , 与文字地位相同 , 无法实现文字环绕图片效果 ;
3、左浮动的效果
左浮动效果 , 可以让图片浮动在左上角 , 文字环绕在图片周围 ;
设置左浮动效果 :
/* 左浮动效果 */
float: left;
展示效果 :
4、右浮动的效果
右浮动效果 , 可以让图片浮动在右上角 , 文字环绕在图片周围 ;
设置右浮动效果 :
/* 右浮动效果 */
float: right;
展示效果 :
5、右浮动 + 外边距效果
如果想要图片不想靠 盒子模型 边界太近 , 可以为图片设置一个外边距 ;
/* 右浮动 */
float: right;
/* 设置图片外边距 */
margin: 10px;
展示效果 :
二、完整代码示例
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>浮动效果</title>
<style>
/* 清除标签默认的内外边距 */
* {
padding: 0;
margin: 0;
}
/* 盒子大小 */
div {
width: 800px;
height: 600px;
background-color: pink;
}
/* 图片浮动设置 */
img {
/* 默认无浮动效果 */
/*float: none;*/
/* 左浮动 */
/*float: left;*/
/* 右浮动 */
float: right;
/* 设置图片外边距 */
margin: 10px;
}
</style>
</head>
<body>
<div><img src="images/image3.png" alt="">孙子曰:兵者,国之大事,死生之地,存亡之道,不可不察也。
故经之以五事,校之以计,而索其情:一曰道,二曰天,三曰地,四曰将,五曰法。
道者,令民与上同意,可与之死,可与之生,而不危也;天者,阴阳、寒暑、时制也;地者,远近、险易、广狭、死生也;将者,智、信、仁、勇、严也;法者,曲制、官道、主用也。
凡此五者,将莫不闻,知之者胜,不知之者不胜。
故校之以计,而索其情,曰:主孰有道?
将孰有能?
天地孰得?
法令孰行?
兵众孰强?
士卒孰练?
赏罚孰明?
吾以此知胜负矣。
将听吾计,用之必胜,留之;将不听吾计,用之必败,去之。
计利以听,乃为之势,以佐其外。
势者,因利而制权也。
兵者,诡道也。
故能而示之不能,用而示之不用,近而示之远,远而示之近。
利而诱之,乱而取之,实而备之,强而避之,怒而挠之,卑而骄之,佚而劳之,亲而离之,攻其无备,出其不意。
此兵家之胜,不可先传也。
夫未战而庙算胜者,得算多也;未战而庙算不胜者,得算少也。
多算胜少算,而况于无算乎!
吾以此观之,胜负见矣。</div>
</body>
</html>
展示效果 :
相关文章
- CSS-精灵图片的使用(从一张图片中截图指定位置图标)
- css 更改所有text,CSS之cssText「建议收藏」
- css页面自适应屏幕大小_html图片自适应屏幕
- CSS媒体查询_css网页
- CSS解决高度坍塌
- 【CSS】清除浮动 ① ( 清除浮动简介 | 清除浮动语法 | 清除浮动 - 额外标签法 )
- 【CSS】CSS 层叠样式表 ① ( 简介 | CSS 引入方式 - 内联样式 | 内联样式语法 | 内联样式缺点 )
- 【CSS】定位 ① ( CSS 三大盒子布局方式 | CSS 定位简介 | 边偏移 | 定位模式 )
- 【CSS】使用 z-index 属性值控制定位盒子的堆叠顺序 ( 多个盒子堆叠次序问题 | z-index 属性值简介 | 控制盒子堆叠次序 )
- 【CSS】CSS 精灵技术 Sprite ( 精灵技术需求 | CSS 精灵技术简介 | 代码示例 )
- HTML/CSS/JavaScript学习笔记持续更新详解编程语言
- css动画 文字闪烁效果详解编程语言
- CSS 简介
- CSS连接MySQL构建可视化Web应用(css连接mysql)
- CSS如何影响MySQL的使用(css影响MySQL)
- CSS操作MySQL探索无可比拟的新空间(css操作mysql)
- 首届世界CSS设计大赛结果揭晓
- 用css滤镜实现的文字描边效果的代码
- IE对CSS样式表的限制分析与解决方案
- juqery学习之六CSS--css、位置、宽高
- 兼容ie、firefox的图片自动缩放的css跟js代码分享