Display和浮动
display 属性
display 属性是用于控制布局的最重要的 CSS 属性。
display 属性规定是否/如何显示元素。
每个 HTML 元素都有一个默认的 display 值,具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline。
浮动和清除浮动
CSS 布局 - 浮动和清除
CSS float 属性规定元素如何浮动。
CSS clear 属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。
示例
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display和浮动</title>
<style>
#块元素{
float: left;
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
#行内元素{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
</style>
<link rel="stylesheet" href="css/浮动.css">
</head>
<body>
<div id="块元素">
div块元素
</div>
<span id="行内元素">
span行内元素
</span>
<hr>
<div id="father">
<div class="text01"><img src="images/动漫高冷女tx.jpeg" alt=""></div>
<div class="text02"><img src="images/桐老爷tx.jpeg" alt=""></div>
<div class="text03"><img src="images/动漫呆萌tx.jpeg" alt=""></div>
<div class="text04"><p>浮动的盒子模型可以向左浮动,也可以向右浮动,直到它的外边缘到包含框或者另一个浮动的盒子</p></div>
</div>
</body>
浮动css
#father{
margin: 10px;
padding: 5px;
border: 2px solid red;
overflow: hidden;
}
.text01{
margin: 10px;
padding: 5px;
border: 2px solid red;
display: inline-block;
float: left;
}
.text02{
margin: 10px;
padding: 5px;
border: 2px solid red;
display: inline-block;
float: left;
}
.text03{
margin: 10px;
padding: 5px;
border: 2px solid red;
display: inline-block;
float: right;
}
.text04{
margin: 10px;
padding: 5px;
border: 2px solid red;
font: 14px bold;
line-height: 20px;
display: inline-block;
}
效果
块元素和行内元素
浮动
作者有话说
博客创作不易,希望看到这里的读者动动你的小手点个赞,如果喜欢的小伙伴可以一键三连,作者大大在这里给大家谢谢了。