Display and hide of elements
display (hide)
Show and hide
- display:none (hidden)
- display:block (display)
Features
先隐藏元素 不占位置
<!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;
}
div {
width: 200px;
height: 200px;
margin: 20px 20px;
background-color: blue;
}
.box1 {
display: none;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
visibility (show and hide)
- visibility: hidden (hidden)
- visibility:visible (display)
Features
先隐藏元素 占位置
<!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;
}
div {
width: 200px;
height: 200px;
margin: 20px 20px;
background-color: blue;
}
.box1 {
background-color: yellow;
/* 设置元素的显示与隐藏 */
visibility: hidden;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
overflow (display and hide of elements)
- overflow:visible neither crops the content nor displays the scroll bar
- overflow: hidden content will be clipped if it exceeds
- overflow:scroll always show the scroll bar
- overflow:auto does not display the scroll bar if it exceeds the display scroll bar
<!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: 400PX;
height: 200PX;
border: 1px solid red;
/* 超出部分则自动剪裁 其它属性值请看说明 */
overflow: hidden;
}
</style>
</head>
<body>
<div class="box">
缓慢地升起后小心地将树苗移向事先挖好的树坑里，随后两个工人把树苗扶正，另外一名工人挥锹填土。移栽、扶苗、填土、围堰、浇水，一个上午的时间，工人们共栽下国槐、西府海棠等树苗50余株。 据门头沟区城市管 理委员会相关负责人介绍，本次景观提升工程主要对S1线门头沟段沿线，设计总绿化面积约11万平方米，主要选择国槐、法桐、油松、西府海棠、紫薇、山桃、金叶女贞等植物，打造三季有花、四季有景的景观效果。 缓慢地升起后小心地将树苗移向事先挖好的树坑里，随后两个工人把树苗扶正，另外一名工人挥锹填土。移栽、扶苗、填土、围堰、浇水，一个上午的时间，工人们共栽下国槐、西府海棠等树苗50余株。
据门头沟区城市管 理委员会相关负责人介绍，本次景观提升工程主要对S1线门头沟段沿线，设计总绿化面积约11万平方米，主要选择国槐、法桐、油松、西府海棠、紫薇、山桃、金叶女贞等植物，打造三季有花、四季有景的景观效果。
</div>
</body>
</html>
Show and hide content summary
Show and hide cases
分析：盒子里面原本有一个半透明的遮罩，设置隐藏，当鼠标经过a时显示。在特殊情况下，a链接可以放div标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box {
position: relative;
width: 222px;
height: 220px;
margin: auto;
border: 1px solid red;
}
.box a {
display: block;
}
.box img {
width: 100%;
}
.box .mask {
display: none;
position: absolute;
width: 222px;
height: 220px;
background: rgba(0, 0, 0, 0.3) url(img/arr.png) no-repeat center center;
}
.box a:hover .mask {
display: block;
}
</style>
</head>
<body>
<div class="box">
<a href="">
<!-- 遮罩层 -->
<div class="mask"></div>
<img src="./img/3.jpg" alt="">
</a>
</div>
</body>
</html>
CSS user interface style
Mouse style
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
li {
width: 200px;
height: 200px;
margin: 20px auto;
list-style: none;
line-height: 200px;
text-align: center;
font-weight: bold;
color: white;
background-color: #0000FF;
}
li:nth-child(1) {
cursor: default;
}
li:nth-child(2) {
cursor: pointer;
}
li:nth-child(3) {
cursor: move;
}
li:nth-child(4) {
cursor: text;
}
li:nth-child(5) {
cursor: not-allowed;
}
</style>
</head>
<body>
<ul>
<li>默认的鼠标状态</li>
<li>小手状态</li>
<li>移动状态</li>
<li>文本状态</li>
<li>禁止状态</li>
</ul>
</body>
</html>
contour line
In the real actual development, the contour line is directly removed
outline:none
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
input {
outline: none;
}
</style>
</head>
<body>
账号：<input type="text">
</body>
</html>
Prevent text field from dragging
resize:none
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
paddding: 0;
}
textarea {
width: 200px;
height: 200px;
outline: 0;
resize: none;
}
</style>
</head>
<body>
<h2>留言板</h2>
<textarea rows="" cols="">
</textarea>
</body>
</html>
User interface style summary
Vertically centered
Note that it only takes effect for inline elements and inline block elements
vertical-align:top(顶线) middle(中线) baseline(基线) bottom(底线)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
img {
vertical-align: middle;
}
</style>
</head>
<body>
<img src="../CSS（4）/6.导航栏案例/image/button2.jpg" alt="" > hello word
</body>
</html>
Two ways to remove picture gaps
- Use the attribute of vertivcal-align as long as it is not baseline
- Using display: block can also solve this problem
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
border: 1px solid red;
}
img {
height: 600px;
/* 去除图片底部缝隙的第一种方法 */
/* vertical-align: bottom; */
/* 去除图片底部缝隙的第二种方法 */
display: block;
}
</style>
</head>
<body>
<div class="box">
<img src="./img/timg.jpg" alt="">
</div>
</body>
</html>
Text omission
white-space: nowrap forces a line to display the default attribute value as normal
overflow:hidden hidden element
text-overflow: The default attribute value of ellipsis text overflow is ellipsis
Note: One of the three steps cannot be less
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box {
width: 200px;
height: 20px;
border: 1px solid #ccc;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="box">hello 我的名字叫做尧子陌 很高兴认识各位哦</div>
</body>
</html>
Genie Technology
Advantages of sprite graphs
Reduce the number of server requests and acceptances, and improve page loading speed
How to make your own sprite map
Accurately measure the size and position of each background image
When setting the width and height of the box, the position is usually a negative value
Sprite pattern example
Spell out your name
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
div {
float: left;
background: url(img/name.jpg) no-repeat;
}
.box1 {
width: 116px;
height: 106px;
background-position: -365px -557px;
}
.box2 {
width: 110px;
height: 110px;
background-position: 0px -9px;
}
.box3 {
width: 108px;
height: 108px;
background-position: -370px -280px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
Make your own sprite map
Each sprite should be placed neatly and the resolution should be 72pt, the background should be transparent and the format should be png format
Sliding door technology
In order to adapt the background of various special shapes to the amount of text content, the sliding door technology appeared.
Core technology: use css wizard and padding padding
Points to note
- a is responsible for the left side-the scene span is responsible for the right background with padding to expand the appropriate width
- a contains span because the entire navigation bar is a link
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
a {
display: inline-block;
height: 33px;
line-height: 33px;
padding-left: 15px;
color: white;
text-decoration: none;
background: url(img/ao.png) no-repeat left center;
}
a span {
display: inline-block;
height: 33px;
background: url(img/ao.png) no-repeat right center;
padding-right: 15px;
}
</style>
</head>
<body>
<a href="#">
<span>首页 </span>
</a>
</body>
</html>
WeChat Navigation Bar Case
Note: Sliding door technology is used
<!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;
}
body {
background: url(./img/wx.jpg) repeat-x;
}
.nav {
margin-top: 20px;
}
.nav li {
list-style: none;
float: left;
margin: 0px 20px;
}
.nav a {
display: inline-block;
height: 33px;
color: white;
line-height: 33px;
padding-left: 15px;
background: url(./img/to.png) no-repeat left;
}
.nav a span {
display: inline-block;
height: 33px;
padding-right: 15px;
background: url(./img/to.png) no-repeat right;
}
.nav a:hover {
background-image: url(./img/ao.png);
}
.nav a:hover span {
background-image: url(./img/ao.png);
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li>
<a href="#">
<span>首页</span>
</a>
</li>
<li>
<a href="#">
<span>帮助与反馈</span>
</a>
</li>
<li>
<a href="#">
<span>公众平台</span>
</a>
</li>
<li>
<a href="#">
<span>首页</span>
</a>
</li>
</ul>
</div>
</body>
</html>
The beauty of negative margin
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
div {
float: left;
height: 400px;
width: 400px;
border: 1px solid red;
/* 利用margin负值可以合并边框 */
margin-left: -1px;
margin-top: -1px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
Negative margin can highlight the beauty of a box
- Positioning can lift the box to the highest point
- You can display boxes with negative margins through z-index
The beauty of the CSS triangle
Case study
Proceed as follows
If the width and height are all 0, you need to keep the color of the triangle, and you can set the color of the unnecessary triangle to be transparent.
Take care of compatibility, line-height:0 font-size:0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 0;
height: 0;
border: 10px solid transparent;
border-left: 10px solid #000000;
/* 照顾兼容性 */
line-height: 0;
font-size: 0;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Triangle case
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
position: relative;
width: 600px;
height: 600px;
background-color: #0000FF;
margin: 200px auto;
}
p {
position: absolute;
left: 50%;
/* 两个三角的距离的一半 所以-50px */
margin-left: -50px;
/* 两个三角的距离 所以-100px */
margin-top: -100px;
width: 0px;
height: 0px;
border: 50px solid transparent;
border-bottom: 50px solid black;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
