Table of contents
1. Negative margin application
2. Text surrounds floating elements
3. Clever application of inline blocks
2. Clever application of CSS triangle
1. CSS Common Layout Skills
Clever use of a technique for faster and better layouts:
- The use of negative margin values
- Text around floated elements
- Clever Use of Inline Blocks
- CSS triangle enhancement
1. Negative margin application
The border is too thick, and the border is 1px, which is equivalent to 1px+1px = 2px, so the border in the middle is thicker. Use margin-left: -1px; to make the right box move 1px to the left and cover the left border.
Code
<!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>margin负值的巧妙运用</title>
<style>
ul li {
float: left;
width: 150px;
height: 200px;
border: 1px solid red;
list-style: none;
margin-left: -1px;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>When the mouse is over, let it display different borders
ul li:hover {
border: 1px solid blue;
}
But the right border is missing.
- Move the margin of each box to the right by -1px to just press the border of the adjacent box
- When the mouse passes over a certain box, just increase the level of the current box (if there is no fixed positioning, add relative positioning (reserve position), if there is positioning, add z-index)
2. Text surrounds floating elements
Clever use of floating elements will not suppress the characteristics of text.
Code:
<!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>文字围绕浮动元素的巧妙运用</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 70px;
background-color: pink;
margin: 0 auto;
padding: 5px;
}
.pic {
float: left;
width: 120px;
height: 60px;
margin-right: 5px;
}
.pic img {
width: 100%;
}
</style>
</head>
<body>
<div class="box">
<div class="pic">
<img src="images/img.png" alt="">
</div>
<p>克里斯蒂亚诺罗纳尔多</p>
</div>
</body>
</html>3. Clever application of inline blocks
Code:
<!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>行内块的巧妙使用</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
text-align: center;
}
.box a {
display: inline-block;
width: 36px;
height: 36px;
background-color: #f7f7f7;
border: 1px solid #ccc;
text-align: center;
line-height: 36px;
text-decoration: none;
color: #333;
}
.box .prev,
.box .next {
width: 85px;
font-size: 14px;
}
.box .current,
.box .elp {
border: none;
background-color: #fff;
}
.box input {
height: 36px;
width: 45px;
border: 1px solid #ccc;
outline: none;
}
.box button {
width: 60px;
height: 36px;
background-color: #f7f7f7;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="box">
<a href="#" class="prev"><<上一页</a>
<a href="#" class="current">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#" class="elp">...</a>
<a href="#" class="next">>>下一页</a> 到第
<input type="text"> 页
<button>确定</button>
</div>
</body>
</html>2. Clever application of CSS triangle
Code:
<!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>CSS三角强换的巧妙运用</title>
<style>
.class {
/* width: 0;
height: 0;
把上边框的宽度调大
border-top: 100px solid transparent;
border-right: 50px solid skyblue;
左边和下边的边框宽度设置为0
border-bottom: 0 solid blue;
border-left: 0 solid green; */
/* 代码简写 */
/* 1.只保留右边的边框有颜色 */
border-color: transparent red transparent transparent;
/* 2.样式都是solid */
border-style: solid;
/* 3.上边框宽度要大，有边框宽度稍小，其余的边框为0； */
border-width: 100px 50px 0 0;
}
.price {
width: 160px;
height: 24px;
border: 1px solid red;
margin: 0 auto;
line-height: 24px;
}
.miaosha {
position: relative;
float: left;
width: 90px;
height: 100%;
text-align: center;
background-color: red;
color: #fff;
font-weight: 700;
margin-right: 8px;
}
.miaosha i {
position: absolute;
right: 0;
top: 0;
height: 0;
width: 0;
border-color: transparent #fff transparent transparent;
border-style: solid;
border-width: 24px 10px 0 0;
}
.origin {
font-size: 12px;
color: gray;
text-decoration: line-through;
}
</style>
</head>
<body>
<div class="class"></div>
<div class="price">
<span class="miaosha">
￥1650
<i></i>
</span>
<span class="origin">￥5650</span>
</div>
</body>
</html>3. CSS initialization
Different browsers have different default values for some tags. In order to eliminate the differences in HTML text rendering by different browsers and take care of browser compatibility, we need CSS initialization
Simple understanding: CSS initialization refers to resetting the browser's style. (also known as CSS reset)
Every web page must first do CSS initialization.
Here we take Jingdong CSS initialization code as an example.
Unicode encoded fonts:
Replace the name of the Chinese font with the corresponding Unicode code, which can effectively avoid the problem of garbled characters when the browser interprets the CSS code.
For example:
bold \9ED1\4F53
Arial \5B8B\4F53
Microsoft Yahei\5FAE\8F6F\96C5\9ED1