display
display
block 块元素
inline 行内元素
inline-block 行内块元素
行内--不换行
块---设置宽高
none 不显示
inline-block 存在的问题
font-size:0; 加在父组件上,同时在子标签上再次设置font-size
子元素实际高度不一致时,需要vertical-align:top; 设置顶部对齐
无法做到右对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display</title>
<style>
.parent{
font-size: 20px;
}
div{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
span{
width: 100px;
height: 100px;
border: 2px solid red;
display: inline-block;
font-size: 18px;
vertical-align: top;
}
</style>
</head>
<body>
<section class="parent">
<div>
div
</div>
<span>
span
</span>
</section>
</body>
</html>
其运行结果为:
通过display:inline-block;(可以得到行内块元素)
缺点:他们两个之间有一道缝隙,(是由于换行符的占位引起的)。
可以通过设置
.parent{
font-size:0px;
}
来缩小之间的间距。
display案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display案例</title>
<style>
*{
margin:0;
padding:0;
}
ul{
text-align: center;
border: 1px solid gray;
width: 650px;
}
ul li{
list-style: none;
display: inline-block;
margin: 20px;
padding: 10px;
border: 1px solid wheat;
box-shadow: rgba(0,0,0,0.5) 0 0 10px;
}
ul li:hover{
border: 1px solid gray;
border-radius: 5px;
}
ul li img{
width: 150px;
}
</style>
</head>
<body>
<ul>
<li>
<img src="img/10d395648d6b456abe9751de721fb3c2.jpg" />
<h3>这是风景图</h3>
<p>夕阳很美</p>
</li>
<li>
<img src="img/10d395648d6b456abe9751de721fb3c2.jpg" />
<h3>这是风景图</h3>
<p>夕阳很美</p>
</li>
<li>
<img src="img/10d395648d6b456abe9751de721fb3c2.jpg" />
<h3>这是风景图</h3>
<p>夕阳很美</p>
</li>
<li>
<img src="img/10d395648d6b456abe9751de721fb3c2.jpg" />
<h3>这是风景图</h3>
<p>夕阳很美</p>
</li>
<li>
<img src="img/10d395648d6b456abe9751de721fb3c2.jpg" />
<h3>这是风景图</h3>
<p>夕阳很美</p>
</li>
<li>
<img src="img/10d395648d6b456abe9751de721fb3c2.jpg" />
<h3>这是风景图</h3>
<p>夕阳很美</p>
</li>
</ul>
</body>
</html>
其运行结果为:
float
浮动float
none 默认
left 左浮动
right 右浮动
浮动的本质:
a、脱离标准文档流
b、层级提高
c、根据浮动的方向,定位于父元素的左上或右上
d、多个浮动的元素按照流式布局依次排序
浮动的影响:
后面的兄弟元素 顶上来
浮动元素层级提升,不会盖住不浮动元素的内容--不是层压层的效果
所有的元素都浮动了,父控件都包不住子元素,边框塌陷--影响父控件后面的元素
解决
清除浮动 clear:both;
认为浮动的元素是标准文档流的效果
在行内元素无效
1、在父控件的末尾添加块元素-----容易理解
<div class="clear"><div>-------------很多div元素,标签冗余
.clear{
clear:both;
}
2、给父控件添加height
- 在固定高度的情况下 很实用
- 内容不确定的情况下,就不适合了
3、overflow 溢出的时候--更简单
hidden 父控件重新计算高度(就直接被包含起来了)
-----不适用的地方 下拉菜单
4、after伪类--推荐
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
section{
border: 1px solid red;
}
.clear:after{
content: "";
clear: both;
display: block;
}
#div1{
width: 50px;
height: 50px;
background: red;
float: left;
}
#div2{
width: 100px;
height: 100px;
background: orange;
float: left;
}
#div3{
width: 150px;
height: 150px;
background: gray;
float: left;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<section class="clear">
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
</section>
<p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
</body>
</html>
其运行结果为:
这样就可以把section里的所有内容框起来了,会随着整体的宽度来进行浮动。
float案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float案例</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
border: 1px solid gray;
}
.clear:after{
content: "";
clear: both;
display: block;
}
ul li{
float: left;
list-style: none;
margin:10px;
}
ul li img{
width: 125px;
}
</style>
</head>
<body>
<ul class="clear">
<li>
<img src="img/10d395648d6b456abe9751de721fb3c2.jpg" />
<h3>这是一张风景图</h3>
<p>夕阳很美</p>
</li>
<li>
<img src="img/10d395648d6b456abe9751de721fb3c2.jpg" />
<h3>这是一张风景图</h3>
<p>夕阳很美</p>
</li>
<li>
<img src="img/10d395648d6b456abe9751de721fb3c2.jpg" />
<h3>这是一张风景图</h3>
<p>夕阳很美</p>
</li>
<li>
<img src="img/10d395648d6b456abe9751de721fb3c2.jpg" />
<h3>这是一张风景图</h3>
<p>夕阳很美</p>
</li>
<li>
<img src="img/10d395648d6b456abe9751de721fb3c2.jpg" />
<h3>这是一张风景图</h3>
<p>夕阳很美</p>
</li>
<li>
<img src="img/10d395648d6b456abe9751de721fb3c2.jpg" />
<h3>这是一张风景图</h3>
<p>夕阳很美</p>
</li>
</ul>
</body>
</html>
其运行结果为:
这样就可以随着页面的宽度而发生浮动
float案例2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float案例2</title>
<style>
*{
padding: 0;
margin: 0;
}
ul{
width: 630px;
border: 1px solid gray;
overflow: hidden;
}
ul li{
width: 200px;
list-style: none;
float: left;
border: 1px solid gray;
margin: 5px;
padding: 5px;
box-sizing: border-box;
border-radius: 5px;
overflow: hidden;
}
ul li div{
width: 80px;
float: left;
border: 1px solid orange;
border-radius: 5px;
margin-right: 5px;
padding: 2px;
box-sizing: border-box;
}
ul li img{
width: 100%;
vertical-align: middle;
border-radius: 5px;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<ul class="clear">
<li>
<div>
<img src="img/10d395648d6b456abe9751de721fb3c2.jpg" />
</div>
<h3>这是一张风景图</h3>
<p>夕阳很美</p>
</li>
<li>
<div>
<img src="img/10d395648d6b456abe9751de721fb3c2.jpg" />
</div>
<h3>这是一张风景图</h3>
<p>夕阳很美</p>
</li>
<li>
<div>
<img src="img/10d395648d6b456abe9751de721fb3c2.jpg" />
</div>
<h3>这是一张风景图</h3>
<p>夕阳很美</p>
</li>
<li>
<div>
<img src="img/10d395648d6b456abe9751de721fb3c2.jpg" />
</div>
<h3>这是一张风景图</h3>
<p>夕阳很美</p>
</li>
<li>
<div>
<img src="img/10d395648d6b456abe9751de721fb3c2.jpg" />
</div>
<h3>这是一张风景图</h3>
<p>夕阳很美</p>
</li>
<li>
<div>
<img src="img/10d395648d6b456abe9751de721fb3c2.jpg" />
</div>
<h3>这是一张风景图</h3>
<p>夕阳很美</p>
</li>
</ul>
</body>
</html>
其运行结果为:
overflow溢出处理
overflow 溢出 来设置
visible 显示
hidden 隐藏
scroll 添加滚动条
auto 自动(看水平和竖直方向是否需要滚动条,需要就会显示,不需要就不显示了)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>overflow溢出处理</title>
<style>
p{
width: 200px;
height: 38px;
font-size: 30px;
border: 1px solid gray;
overflow: auto;
}
</style>
</head>
<body>
<p>今天是星期一,新的一周开始了</p>
</body>
</html>
其中overflow:visible;的运行结果为:
所有内容全部显示出来,多余的部分显示在边框外
其中overflow:hidden;的运行结果为:
边框以内的内容会全部显示出来,边框以外的内容会全部进行隐藏。
其中overflow:scroll;的运行结果为:
他会显示固定的高度,所有内容都在这里,可以点击右侧的下拉框进行查看。
其中overflow:auto;的运行结果为:
当内容比较多时,他会以下拉框的形式出现;
内容比较少时就用边框包围即可。
display和float的区别
display
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display和float的区别</title>
<style>
.parent{
width:400px;
border:1px solid gray;
text-align:center;
font-size: 0;
}
.parent div{
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid red;
font-size: 20px;
vertical-align: top;
}
.parent div:first-child{
width: 150px;
height: 150px;
}
.parent div:nth-child(2){
width: 50px;
height: 50px;
}
.parent div:nth-child(3){
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div class="parent">
<div>div1</div>
<div>div2</div>
<div>div3</div>
</div>
</body>
</html>
其运行结果为:
display和float的区别2
float
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display和float的区别</title>
<style>
.parent{
/*width: 400px;*/
border: 1px solid blueviolet;
text-align: center;
font-size: 0px;
}
.parent div{
width: 100px;
height: 100px;
border: 1px solid red;
font-size: 20px;
vertical-align: top;
float: left;
}
.parent div:first-child{
width: 150px;
height: 150px;
}
.parent div:nth-child(2){
width: 50px;
height: 50px;
}
.parent div:nth-child(3){
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div class="parent">
<div>div1</div>
<div>div2</div>
<div>div3</div>
</div>
</body>
</html>
其运行结果为:
会随着界面的宽度进行左浮动,但是边框不会把内容包裹起来,会出现边框塌陷