✨课程链接
【狂神说Java】CSS3最新教程快速入门通俗易懂_哔哩哔哩_bilibili
✨学习笔记
display
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- display:
block 块元素
inline 行内元素
inline-block 是块元素 但是可以内联 在一行！
none 消失！
-->
<!-- 可以实现行内元素排列方式 大部分情况下是使用float-->
<style>
div{
100px;
height: 100px;
border: 1px solid red;
}
span{
100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
</style>
</head>
<body>
<div>
<p>块级元素：独占一行</p>
<p>h1～h6 p div 列表...</p>
</div>
<div>
<p>行内元素：不独占一行</p>
<p>span a img strong...</p>
<p>行内元素可以被包含在块级元素中 反之不行</p>
</div>
<div>div块元素</div>
<span>span行内元素</span>
</body>
</html>
float
div{
margin: 10px;
padding: 5px;
}
#father{
border: 1px black solid;
/*overflow: hidden;*/
}
#father:after{
content: '';
display: block;
clear: both;
}
.layer01{
background: rebeccapurple;
display: inline-block;
float: left;
}
.layer02{
background: red;
display: inline-block;
float: left;
}
.layer03{
background: blue;
display: inline-block;
float: left;
/*浮动情况下保持块元素*/
clear: both;
}
/*
clear right 右侧不允许有浮动元素
clear left 左侧不允许有浮动元素
clear both 两侧不允许有浮动元素
clear none
*/
.layer04{
background: yellow;
display: inline-block;
float: left;
clear: both;
}
.clear{
clear: both;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="father">
<div class="layer01"><img src="images/1.jpg" alt="">左浮</div>
<div class="layer02"><img src="images/2.png" alt="">左浮</div>
<div class="layer03"><img src="images/3.png" alt="">左浮</div>
<div class="layer04">
浮动的盒子可以向左浮动 也可以向右浮动 直到它的外边缘碰到包含框或另一个浮动盒子为止
</div>
<!-- <div class="clear"></div>-->
<div>
<h2>父级边框塌陷问题</h2>
<ul>
<li>增加父级元素高度<br>（简单 元素假设有了固定的高度 就会被限制）</li>
<li>增加一个空的div标签 清除浮动<br>（简单 代码中尽量避免空div）</li>
<li>在父级元素中增加一个overflow: hidden;<br>（简单 下拉的一些场景避免使用）</li>
<li>在父类添加一个伪类 after（写法稍复杂 没有副作用 推荐使用）</li>
</ul>
</div>
</div>
</body>
</html>
overflow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#content{
200px;
height: 150px;
overflow: scroll;
}
</style>
</head>
<body>
<div id="content">
<img src="images/1.jpg">
<p>滚动条：overflow: scroll;</p>
</div>
</body>
</html>
对比
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div><h2>对比</h2>
<ul>
<li>display<br> 方向不可以控制</li>
<li>float<br> 浮动起来的话会脱离标准文档流</li>
</ul>
</div>
</body>
</html>
⭐转载请注明出处
本文作者：双份浓缩馥芮白
原文链接：https://www.cnblogs.com/Flat-White/p/14981128.html
版权所有，如需转载请注明出处。