HTML浮动

最新推荐文章于 2022-10-19 20:02:00 发布

Leona__

最新推荐文章于 2022-10-19 20:02:00 发布

阅读量81

点赞数 1

文章标签： html5 html

本文链接：https://blog.csdn.net/Leona__/article/details/119514976

版权

浮动

display属性
实现内联元素和块级元素之间的转换

值	特点
inline	该元素属于内联元素
block	该元素属于块级元素
inline-block	该元素可不换行，但有着块级元素的特性（可设置该元素的宽高等）
none	该元素不显示

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
</head>
<body>
    aa <span style="display: block;">bb</span> cc
    <br/>
    ww <span style="display:inline-block; width: 50px;  height: 50px; background-color:  pink;">vv</span>nn
    <br/>
    11 <span style="display: none;">22</span>33

</body>
</html>

效果如下（个浏览器显示会有细微差别）：
在这里插入图片描述
float属性

值	特点
left	该元素靠左浮动
right	该元素属于块级元素
none	该元素无浮动

clear属性

值	特点
left	在该元素左侧不允许浮动元素
right	在该元素右侧不允许浮动元素
both	在该元素左、右两侧均不允许浮动元素
none	默认值，允许浮动元素出现在两侧

解决父级边框塌陷的方法（父元素自动根据内容增高的方法）
1.设置父元素的高度。
2.在父元素所有浮动的div后面再加一个“clear：both;”的样式。
3.在父元素的样式中增加“overflow:hidden;”。
overflow属性
用来设置块元素中内容的分布样式

值	特点
visible	默认值，超出内容不会被修剪，会呈现在盒子外面
hidden	超出内容会被修，且超出内容不可见
scroll	超出内容不会超出盒子，无论内容长短，会在块元素中一直显示拉动条，便于查看超出部分
auto	自动值，会根据内容长短，显示拉动条或不显示

今天的分享就是这些啦，欢迎正在学习web的伙伴们“挑毛病”“提意见”，当然了也欢迎各种表扬奥～（比心，比心）