本文详细介绍了CSS中的溢出属性（overflow）、溢出省略号（text-overflow）以及不同元素的显示类型（块元素、行内元素、行内块元素和盒子模型）。通过实例代码展示了如何控制文本溢出、元素布局和创建二级菜单。
目录
0064 溢出属性
1、溢出属性(容器的)
说明:
Overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit
visible:默认值，溢出内容会显示在元素之外;
hidden: 溢出内容隐藏;
scroll: 滚动，溢出内容以滚动方式显示;
auto: 如果有溢出会添加滚动条，没有溢出正常显示;
inherit: 规定应该遵从父元素继承overflow属性的值。
overflow-x:X轴溢出;
overflow-y:Y轴溢出
示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 200px;
height: 200px;
background: yellow;
/* overflow: visible;/* 显示溢出 */ */
/* overflow: hidden;溢出隐藏,文本裁切 */
/* overflow: scroll; */
/* overflow: auto; */
/* overflow: inherit; 继承父元素的效果*/
}
.box{
/* overflow: auto; */
overflow-x: auto;
overflow-y: hidden;
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Eum libero eveniet voluptatem suscipit provident totam
magnam nobis molestias beatae illum unde accusantium nisi
iste, minima consectetur consequuntur quam veniam. Labore.
</div>
<div class="box">
<img src="" alt="" />
</div>
</body>
</html>0065 溢出属性案例
0066 溢出省略号
空余空间
说明:
whitespace: normal/nowrap/pre/pre-wrap /pre-line /inherit 该属性用来设置如何处理元素内的空白；
normal: 默认值，空白会被浏览器忽略，
nowrap:文本不会换行，文本会在同一行上继续，直到遇到<br/>标签为止；
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
div{
background-color: yellow;
width: 200px;
height: 200px;
/*
nowrap:不换行
pre：显示空格、回车，不换行
pre-wrap：显示空格、回车，换行
pre-line：显示空格、不显示回车，换行
*/
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Est laudantium cupiditate quisquam recusandae aut, at
ipsa animi praesentium explicabo magni maxime? Aspernatur
odit provident minus consectetur culpa ipsa, animi
explicabo?
</div>
<!-- <div>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ab quaerat doloremque soluta perferendis. Rerum quia
impedit debitis! Minus sed laudantium numquam autem
repellendus corrupti reiciendis id animi aperiam, modi
illum.
div{
background-color: yellow;
width: 200px;
height: 200px;
white-space: nowrap;
}
</div>
<pre>
预格式化文本-保留空格，tab，回车
div{
background-color: yellow;
width: 200px;
height: 200px;
white-space: nowrap;
}
</pre> -->
</body>
</html>3、省略号显示
说明:
text-overflow.clip/ellipsis ;
clip: 默认值，不显示省略号 (...)；
ellipsis: 显示省略标记
当单行文本溢出显示省略号需要同时设置以下声明:
1、容器宽度: width: 200px;
2、强制文本在一行内显示white-space: nowrap;
3、溢出内容为隐藏: overflow:hidden;
4、溢出文本显示省略号: text-overflow:ellipsis；
0067 元素显示类型-块元素
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background: yellow;
}
/* 块元素:
display: block;
dispaly: list-item;
*/
/* p标签放文本可以,不能放块级元素 */
</style>
</head>
<body>
<div></div>
<div></div>
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ul>
<p>111111111</p>
<p>222222222</p>
<h1>title</h1>
</body>
</html>0068 元素显示类型-行内元素和行内块元素
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
b{
/* display:inline; */
width: 100px;
height: 100px;
background: yellow;
}
/*
display:inline;
*/
img{
width: 100px;
height: 100px;
}
/* 行内块 dispaly:inline-block*/
input{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<b>111111111</b>
<em>22222</em>
<span>333333333</span>
<strong>44444444</strong>
<a href="www.baidu.com">5555</a>
<img src="图片路径" alt="" />
<input type="text" />
</body>
</html>0069 元素显示类型-盒子模型
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
/* div{
width: 100px;
height: 100px;
padding: 10px;
margin: 10px;
border: 1px solid red;
} */
span{
background: yellow;
padding: 10px;
margin: 10px;
}
/* span行内元素,只能设置边距的左右边距,不能设置上下边距 */
img{
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div>
</div>
<span>我是一个span标签</span>
<div>11111111</div>
<img src="图片路径" alt="" />
<div>222222222222222222</div>
</body>
</html>0070 元素类型互相转换
代码示例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
/* inlline
block
line-block */
img{
display: block;
}
div{
width: 200px;
height: 200px;
background: yellow;
display: inline;
}
</style>
</head>
<body>
<img src="图片路径" alt="" />
<p>11111111</p>
<div>
1111
</div>
</body>
</html>代码示例2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
/* a:link{
background-color: black;
color: white;
}
a:visited{
background-color: black;
color: white;
}
a:hover{
background-color: red;
}
a:active{
background-color: red;
} */
a{
background-color: black;
color: white;
padding: 10px;
display: inline-block;
}
a:hover{
background-color: red;
}
.home{
background-color: red;
}
</style>
</head>
<body>
<a href="" class="home">首页</a>
<a href="">国内</a>
<a href="">国际</a>
<a href="">军事</a>
<a href="">财经</a>
<div>11111</div>
</body>
</html>代码示例3：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
.hide{
display: none;
}
.box:hover ul{
/* background: yellow; */
display: block;
}
</style>
</head>
<body>
<div class="hide">11111111</div>
<div class="box">
军事
<ul class="hide">
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ul>
</div>
</body>
</html>0071 二级菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
margin: 0 auto;
}
ul{
list-style: none;
}
.box .item{
float: left;
width: 148px;
text-align: center;
border: 1px solid blue;
background: blue;
color: white;
line-height: 40px;
}
.item:hover{
background: lightblue;
}
.item ul{
display: none;
background: white;
color: black;
}
.item:hover ul{
display: block;
}
.item li:hover{
color: blue;
}
</style>
</head>
<body>
<ul class="box">
<li class="item">视频教程
<ul>
<li>全部</li>
<li>HTML5</li>
<li>Java</li>
<li>python</li>
</ul>
</li>
<li class="item">认证考试
<ul>
<li>pmp</li>
<li>红帽</li>
</ul>
</li>
</ul>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
