catalogue
Prevent dragging text field resize
Vertical alignment of inline and inline block elements
Blank gap at the bottom of the picture
Overflow text ellipsis display
Single line overflow text ellipsis display
Ingenious use of in-line blocks
CSS triangle
Set the border for the box with width and height of 0, and set the unnecessary three sides to transparent color
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
height: 0;
width: 0;
/* In order to take care of the compatibility of the browser, write the following two lines or not */
line-height: 0;
font-size: 0;
/* Set the other three edges to transparent */
border: 10px solid transparent;
border-top: 10px solid pink;
/* border-bottom: 10px solid red;
border-left: 10px solid yellow;
border-right: 10px solid blue; */
}
</style>
</head>
<body>
<div></div>
</body>
</html>Interface style
Mouse cursor
cursor: pointer;
Default: Xiaobai default
pointer: small hand
Move: move
text: text
Not allowed: prohibited
outline
Outline: none remove the outline
Prevent dragging text field resize
resize: none
Try to put the label of the text field on one line, otherwise there will be many spaces in the display
Vertical alignment of inline and inline block elements
vertical-align
It is often used to set the vertical alignment between pictures or forms (inline block elements) and text
Baseline default, baseline alignment
middle is aligned with the center line and centered vertically
Top and top line alignment
bottom line alignment
Blank gap at the bottom of the picture
This is because the default baseline alignment gives text the height from the baseline to the baseline
1. Set vertical align: bottom or middle or top for the picture, which is recommended
2. Turn the picture into a block level element display: block;
Overflow text ellipsis display
Single line overflow text ellipsis display
Three conditions must be met
1. First force the text to be displayed in one line (if it cannot be displayed, all the text will be displayed in one line)
white-space: nowrap；
(the default is normal, and auto wrap is not displayed)
2. Overflow part hidden
overflow:hidden；
3.text-overflow: ellipsis； (ellipsis)
Multiline overflow text ellipsis display
Poor compatibility, suitable for webkit browser or mobile terminal (most mobile terminals are webkit kernel)
This effect is usually written by the back-end development. Directly limit the number of words displayed
overflow: hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 45px;
background-color: pink;
overflow: hidden;
text-overflow: ellipsis;
/* Elastic box model display */
display: -webkit-box;
/* Limit the number of lines of text displayed in a block element */
-webkit-line-clamp: 2;
/* Sets or retrieves the arrangement of the child elements of the expansion box object */
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div>Ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah</div>
</body>
</html>Layout skills
Clever use of negative margin
1. When each floating box has a border, the border overlap will become wider and covered with a negative value of margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul li {
float: left;
width: 150px;
height: 200px;
margin-left: -2px;
border: 2px solid red;
list-style: none;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>2. When the mouse passes by and the border changes color, it will be pressed
If the box is not positioned, it becomes relatively positioned when the mouse passes by
If the box is positioned, increase the z-index when the mouse passes
<style>
ul li {
position: relative;
float: left;
width: 150px;
height: 200px;
margin-left: -2px;
border: 2px solid red;
list-style: none;
}
li:hover {
z-index: 1;
border: 2px solid blue;
}
</style>Text around floating elements
Floating elements do not hold text down
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
padding: 5px;
width: 300px;
height: 70px;
background-color: pink;
margin: 100px auto;
}
.pic {
float: left;
margin-right: 5px;
width: 100px;
height: 70px;
background-color: blue;
vertical-align: middle;
}
img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="box">
<div class="pic"><img src="img.png" alt=""></div>
<p>Ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha</p>
</div>
</body>
</html>Ingenious use of in-line blocks
Page number blocks are made of in line blocks, which have their own spacing and display width and height in one line
As long as you add text align: Center to the parent element, you can center all inline blocks and inline elements horizontally
shift+alt + left mouse button drop-down can input multiple lines at the same time
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
text-align: center;
}
a {
display: inline-block;
height: 30px;
width: 30px;
background-color: #f7f7f7;
border: 1px solid #ccc;
text-decoration: none;
color: black;
text-align: center;
line-height: 30px;
font-size: 14px;
}
.prev,
.next {
width: 85px;
}
</style>
</head>
<body>
<div class="box">
<a href="#"Class =" prev "> & lt; & lt; previous</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#"Class =" next "> & gt; & gt; next page</a>
</div>
</body>
</html>CSS triangle enhancement
Increase the width of the upper border, make the color transparent, and set the width of the left and lower border to 0
- Only the right border has color
- The styles are solid
- The width of the upper border should be larger, the width of the right border should be smaller, and the other borders should be 0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.one,
.four {
float: left;
width: 200px;
height: 40px;
background-color: red;
}
.two {
float: left;
width: 0;
height: 0;
border-left: 20px solid red;
border-top: none;
border-bottom: 40px solid transparent;
border-right: none;
}
.three {
float: left;
width: 0;
height: 0;
border-left: none;
border-top: 40px solid transparent;
border-bottom: none;
border-right: 20px solid blue;
margin-left: -20px;
}
.four {
float: left;
background-color: blue;
}
</style>
</head>
<body>
<div class="box">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</div>
</body>
</html>Use triangle as price tag
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.price {
width: 180px;
height: 24px;
border: 1px solid red;
margin: 0 auto;
line-height: 24px;
}
.now {
position: relative;
float: left;
width: 90px;
height: 100%;
background-color: red;
color: #Fff;
text-align: center;
}
.before {
float: left;
width: 90px;
height: 100%;
background-color: #fff;
color: gray;
text-align: center;
font-size: 12px;
text-decoration: line-through;
}
.now i {
position: absolute;
right: -12px;
top: 0;
height: 0;
width: 0;
border-color: red transparent transparent transparent;
border-width: 24px 12px 0 0;
border-style: solid;
/* border-top: 24px solid red;
border-right: 12px solid #fff;
border-left: 0;
border-bottom: 0; */
}
</style>
</head>
<body>
<div class="box">
<div class="price">
<span class="now">$199
<i></i>
</span>
<span class="before">$299</span>
</div>
</div>
</body>
</html>CSS initialization
Reset browser style CSS reset
Each web page must first be initialized with CSS to ensure the compatibility of different browsers
Set style for body