干货1——溢出属性
介绍如下(图源网络):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width:200px;
height: 200px;
background: yellow;
overflow: visible;
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Fugiat, dolore enim. Quaerat, eaque asperiores.
Dolore eveniet odio veritatis odit placeat. Ipsa dolores iure
iusto modi perspiciatis sapiente dignissimos ducimus harum.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Dicta molestiae officia voluptatum,
</div>
</body>
</html>
当div中是overflow: visible;
时,是默认不隐藏的效果:
当div中是overflow:hidden;
时,是溢出隐藏,文本裁切效果:
当div中是overflow:scroll;
时,文字超出盒子时,效果如下:
当div中是overflow:scroll;
时,文字未超出盒子时,效果如下:
当div中是overflow:auto;
时,效果如下,更机动,文字超过盒子时会有滚动条(横竖滚动条都会机动地有),未超过时不会有滚动条:
当div中是overflow: inherit;
时,是继承父元素的效果。
下面用一个图片来举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
height: 200px;
width: 200px;
}
.box{
overflow: auto;
}
</style>
</head>
<body>
<div class="box">
<img src="008/32.jpg" alt="">
</div>
</body>
</html>
若想只有横向滚动条,.box中应写
overflow-x: auto;
overflow-y: hidden;
效果如下:
若想只有纵向滚动条,方法类似,不再举例。
- 溢出省略号
接上(图源网络):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
background: yellow;
width: 200px;
height: 200px;
white-space: normal;
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Numquam obcaecati fugiat ad reiciendis.
Laudantium ut vitae, in illo, inventore dolores, magni fugiat
iure itaque provident sint. Et excepturi totam quos.
</div>
</body>
</html>
当div中是white-space: normal;
时,效果是默认溢出的。
当div中是white-space: nowrap;
时,效果如下(右边还有一部分没截到):
write-space:还可以如下
nowrap:不换行
pre:显示空格,回车,不换行
pre-wrap:显示空格,回车,换行
pre-line:显示回车,不显示空格,换行
注:pre也可以做个单独的标签。
当div中这样写时
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
可以得到省略号隐藏的效果,再用之前学过的内容可以做出把鼠标移上才显示完全的效果。
干货2——元素显示类型
介绍如下(图源网络):
- 块元素
注:在网页中鼠标点击右键再点击“检查”即可看网页的HTML代码效果喔~
当我们如下创造一个盒子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background: yellow
}
</style>
</head>
<body>
<div></div>
</body>
</html>
查看网页代码可以看到:
可以看见body中有一个display:block;
,这个就是块元素自带的类型,块元素是独占一行的。
注:若是列表等自带display:list-item;
类型的也归于块元素,也是独占一行的。
p标签放文本可以,不可以放块级元素。
- 行内元素
举例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
b{
width: 100px;
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<b>111111</b>
<em>222222</em>
<span>333333</span>
<strong>444444</strong>
<a href="http://www.baidu.com">555555</a>
</body>
</html>
效果如下:
注:这些元素都排在了同一行,没有独占一行,且虽然给b标签加了宽高属性,但实际上宽高并没有像设置的那样,只有颜色显示了设置的颜色。
这些元素自带的属性是display:inline;
- 行内块元素
若在body中加上:
<img src="008/32.jpg" alt="">
<input type="text">
且在style中对图片的宽高做一下限制,让图片变小一点。效果如下:
这个图片和输入框就输入行内块元素,既可以独占一行,也可以和别的元素共用一行。
行内块元素自带的属性是display:inline-block;
- 盒子模型
举例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
padding: 10px;
margin: 10px;
border: 1px solid red;
}
span{
background: yellow;
padding:10px;
}
</style>
</head>
<body>
<div></div>
<span>span标签</span>
<div>1111111111111111</div>
</body>
</html>
效果如下:
不过这只是因为我们给div加上了内外边距导致的一个障眼法,真正的行内元素的效果是什么样的呢?我们把style中的div部分注释掉它们就原形毕露了:
我们可以发现:span行内元素只能设置边距的左右边距,不能设置上下边距。
注:行内块元素是可以设置边距的左右与上下边距的。
- 元素类型相互转换
举例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img{
}
</style>
</head>
<body>
<img src="008/32.jpg" alt="">
<p>1111111111111111</p>
</body>
</html>
当你的img默认是行内块元素时,效果如下:
检查之后会发现文案与图片中间是有一小段距离的,没有挨在一起。
这时只要在style的img中设置:
display: block;
即把行内块元素转换成块元素,就可以去掉图片与文字之间的距离:
注:我们进行类型的转换是为了让页面更美观实用,而不要不负责任地随意转换喔。
下面我们来用类型转换做一个隐藏与显示的效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.hide{
display: none;
}
.box:hover ul{
display: block;
}
</style>
</head>
<body>
<div class="box">英语
<ul class="hide">
<li>111111</li>
<li>222222</li>
<li>333333</li>
</ul>
</div>
</body>
</html>
这时,我们可以做出鼠标移到“英语”上就显示123,鼠标不移到“英语”上就不显示123的效果。
移上前:
移上后:
最后,我们以一个二级菜单案例结束今天的内容吧:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
margin:0 auto;
}
ul{
list-style: none;
/* 把列表前边的图标去掉 */
}
.box .item{
float: left;
width: 150px;
text-align: center;
}
.item ul{
display: none;
color: aqua;
}
.item:hover ul{
display: block;
}
</style>
</head>
<body>
<ul class="box">
<li class="item">文科
<ul>
<li>历史</li>
<li>地理</li>
<li>政治</li>
</ul>
</li>
<li class="item">理科
<ul>
<li>物理</li>
<li>化学</li>
<li>生物</li>
</ul>
</li>
</ul>
</body>
</html>
移上前:
移上后:
你是更喜欢理科还是文科呢?
以上内容是筱筱根据b站视频总结而成,学习前端的第七天,冲鸭٩(๑òωó๑)۶