display
description
- To set the display elements in the page specified by the CSS properties or hide
display properties
-
You can also set the specified element to show and hide
- Property value none - represents a hidden target element
-
Attribute value is not none - can be hidden element is displayed in
-
such as
- display: block
- display: inline
- display: inline-block
-
- When the property is set to hide the effect will be even specify elements occupied area with hidden
<head>
<meta charset="UTF-8">
<title>display属性</title>
<style>
div {
width: 200px;
height: 200px;
}
/*
display属性 - 也可以设置指定元素的显示和隐藏
* 属性值为 none - 表示隐藏目标元素
* 属性值不为 none - 可以将隐藏的元素在显示出来
比如：* display: block
display: inline
display: inline-block
* 该属性设置隐藏效果时，会连指定元素的所占区域一同隐藏
*/
#d1 {
background-color: red;
}
#d2 {
background-color: green;
/* 隐藏指定元素 */
display: none;
/* 将隐藏的元素显示出来 */
display: block;
}
#d3 {
background-color: blue;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
visibility property
-
It represents the set to display or hide
- hidden property value - indicates hide specific elements
- visible attribute value - denotes a display element specified
- When the property is set to hide the effect, not even specified elements occupied area with hidden
<head>
<meta charset="UTF-8">
<title>visibility属性</title>
<style>
/*
visibility属性 - 表示设置显示或隐藏
* hidden属性值 - 表示隐藏指定元素
* visible属性值 - 表示显示指定元素
* 该属性设置隐藏效果时，不会连指定元素的所占区域一同隐藏
*/
div {
width: 200px;
height: 200px;
}
#d1 {
background-color: red;
}
#d2 {
background-color: green;
/* 隐藏指定元素 */
visibility: hidden;
/* 将隐藏的元素显示出来 */
visibility: visible;
}
#d3 {
background-color: blue;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
overflow
description
- Area represents the specified element content (text, images, etc ...) beyond its parent element
overflow property
- Said that resolution of the content overflow
- visible property value - said they did not hide the overflow content (default)
- hidden property value - indicates overflow hidden content
- scroll property value - indicates the need to add scroll bars hidden part
- auto property value - indicates handed over to the browser automatically adjusts
<head>
<meta charset="UTF-8">
<title>内容溢出</title>
<style>
/*
overflow属性 - 表示解决内容溢出
* visible属性值 - 表示不隐藏溢出内容（默认值）
* hidden属性值 - 表示隐藏溢出的内容
* scroll属性值 - 表示为需要隐藏的部分添加滚动条
* auto属性值 - 表示交由浏览器自动调节
*/
p {
width: 200px;
height: 150px;
background-color: yellowgreen;
/* 解决内容溢出 */
overflow: hidden;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus animi, corporis dolor enim facilis hic ipsam iste laborum, modi molestiae nisi officiis ratione recusandae rem repudiandae sint, sunt tenetur vel?</p>
</body>
text-overflow property
-
Representing the contents of the text overflow
- ellipsis property value - shows a content display overflow ellipsis (...) method
- This property must be used together with the white-space overflow property and property
<head>
<meta charset="UTF-8">
<title>text-overflow属性</title>
<style>
/*
text-overflow属性 - 表示设置文本的内容溢出
* ellipsis属性值 - 表示将溢出的内容以省略号（...）方式显示
* 该属性必须配合 overflow属性 和 white-space属性 一起使用
*/
p {
width: 200px;
height: 100px;
background-color: #00c3f5;
/* 设置文本在一行显示 */
white-space: nowrap;
/* 解决文本溢出 */
text-overflow: ellipsis;
/* 解决元素内容溢出 */
overflow: hidden;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</body>