Article directory
written in front
In fact, after writing the front-end for so long, there are still many things that have not been practical. It has been in a state of being able to achieve it before, and with the accumulation of knowledge, it has slowly used some front-ends developed by the big cows. Components, of course, what I want to recommend to you today are the 5 CSS properties that were very popular at the time but were forgotten by most people. After using them, you will really be addicted, because it really makes our code more tidy and more efficient.
Knowledge points involved
Application skills of five advanced CSS attributes, 5 sensational CSS attributes, CSS pseudo-element: application of empty, layout application of gap attribute, CSS pseudo-class: invalid application, how to implement input box format validation with CSS, text background image The settings, the application of background-clip: text, how to realize the scrolling of other places when the header is fixed, and the application of position: sticky to realize the scrolling of the fixed content of the header.
版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。
1. :empty selector
1.1 Application scenarios and effects
When we get data from the interface, if there is no data, normally we will display the tags without data alone or assign the text value to the existing tags as 'no data'. In fact, this can also achieve the effect. But I said that CSS can also be implemented, does it make the program easier.
On the page, I used two divs to set the content in the label and set the content with css, the effect is as follows:
1.2 Code implementation
The specific code implementation is as follows:
Html code
<div class="datalist">
<div class="showdata">查无有数据</div>
<div class="showdata1"></div>
</div>
CSS code
.showdata,
.showdata1 {
width: 500px;
height: 100px;
background-color: #fff;
padding: 50px;
text-align: center;
margin: 50px auto;
font-size: 40px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
border: 1px solid #aaa;
color: #777;
}
.showdata1:empty::after {
content: "暂无数据";
}
From here, it is not difficult to find that we can add content to the container through pseudo-elements, which is relatively convenient, and there is no need to judge js assignment.
2. Gap attribute
2.1 Application scenarios and effects
Usually control the inner and outer margins so that multiple divs are juxtaposed and the gaps are equal. We should use margin or padding the most, but this setting style is sometimes not easy to achieve complete equalization. For example, put 3 divs in a container with a width of 100px I used to set margin-left:calc(33.3% - 10px) for boxes with the same width; but because 3 equal divisions are countless 33.3333...%, so there is a gap in this setting method, so today I will come and Tell me about the gap attribute, which is mainly applicable to grid and flex layouts. For example, for comparison, first use calc (33% - 10px), and then use the gap attribute setting to see the effect:
It is not difficult to find that the first margin and the last div are not filled all the time, but the gap can be completely pasted back and forth.
2.2 Code implementation
The specific code implementation is as follows:
Html code
<div class="grepDom">
<div class="boddom">
<div class="bbcalc">1</div>
<div class="bbcalc">2</div>
<div class="bbcalc">3</div>
</div>
<div class="boddom1">
<div class="bbgap">1</div>
<div class="bbgap">2</div>
<div class="bbgap">3</div>
</div>
</div>
CSS code
.boddom,
.boddom1 {
width: 600px;
height: 80px;
margin: 10px auto;
background-color: #fff;
}
.bbcalc {
width: calc(33% - 10px);
height: 40px;
background-color: #777;
float: left;
color: #fff;
margin-left: 10px;
}
.boddom1 {
display: grid;
grid-template-columns: auto auto auto;
gap: 20px;
}
.bbgap {
width: auto;
height: 40px;
background-color: #777;
}
.boddom1>div {
border: 1px solid black;
background-color: green;
text-align: center;
padding: 5px;
color: #fff;
}
版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。
3. Pseudo class: invalid application
3.1 Application scenarios and effects
We often encounter a verification problem. For example, the content in the input box does not meet the specifications. We can change the color of the box or the background. This previous implementation was based on js to set the style attributes, but today I want to share with you It is about the practical application of the invalid pseudo-class, let's take a look at the following example first.
From the above, we can easily find that as long as the input is correct, the background color is green. When both are correct, the outermost frame is also green, otherwise it is in red state.
3.2 Code implementation
The specific implementation code is as follows:
Html code
<div class="invlidDom">
<form>
<label for="url_input">URL地址:</label>
<input type="url" id="url_input" />
<br />
<br />
<label for="email_input">邮箱地址:</label>
<input type="email" id="email_input" required />
</form>
</div>
CSS code
.invlidDom {
width: 600px;
padding: 30px;
margin: 10px auto;
}
.invlidDom form {
padding: 30px;
}
input {
padding: 3px 5px;
height: 30px;
box-sizing: border-box;
}
input:invalid {
background-color: #ffdddd;
}
form:invalid {
border: 5px solid #ffdddd;
}
input:valid {
background-color: #ddffdd;
}
form:valid {
border: 5px solid #ddffdd;
}
input:required {
border-color: #800000;
border-width: 3px;
}
input:required:invalid {
border-color: #C00000;
}
4. background-clip: text attribute
4.1 Application scenarios and effects
In fact, the main function of this attribute setting is to set the background image effect of the text. Normally, we can make the text gradient color or other colors to achieve a good-looking effect, but if we want to achieve more complex text font colors, we can use the background image, that is, the text. The background is a picture, and the specific implementation effect is as follows:
4.2 Code implementation
Html code
<div class="txtbg">
<div class="txtdom">CSDN - 拄杖盲学轻声码</div>
<div class="txtdom1">CSDN - 拄杖盲学轻声码</div>
</div>
CSS code
.txtbg {
width: 600px;
margin: 10px auto;
}
.txtdom,
.txtdom1 {
width: 100%;
text-align: center;
height: 40px;
padding: 20px 0;
margin: 10px auto;
font-size: 30px;
color: #555;
font-weight: bold;
border: 1px solid #883fb9;
}
.txtdom1 {
background: url("images/gb.png") center center no-repeat;
background-size: 100% 100%;
-webkit-background-clip: text;
color: transparent;
}
Remember to prepare a photo of what you want!
5. position: sticky application
5.1 Application scenarios and effects
In fact, I was troubled by the scrolling of the fixed tbody at the head of the table. I used to set it for thead and tbody, mainly setting the fixed height of the tbody, so it can be scrolled, but this setting seems very low. After touching the sticky attribute, we can It can be applied in many fixed head scenes. The effect is as shown below:
5.2 Code implementation
Among them, the maroon part of the Header is always fixed, and there will be a scroll bar when the other parts exceed it. The specific implementation code is as follows:
Html code
<div class="posiDom">
<div class="container">
<div class="header">Header（头部固定）</div>
<div>拄杖盲学轻声码</div>
<div>CSDN最帅黄大大</div>
<div>解疑答惑助开发</div>
<div>一机一码一生涯</div>
<div>谁怕？</div>
<div>一蓑烟雨任平生</div>
</div>
</div>
CSS code
.posiDom {
width: 600px;
margin: 10px auto;
}
.container {
background-color: oldlace;
height: 200px;
width: 595px;
line-height: 60px;
text-align: center;
overflow: auto;
}
.container div {
height: 60px;
background-color: rgba(114, 119, 119, 0.589);
border: 1px solid;
color: #fff;
}
.container .header {
position: sticky;
top: 0;
background-color: rgb(187, 153, 153);
}
I mainly list and show you some CSS properties that I see that are rarely used. I hope that you can learn more about CSS style properties. Of course, if you have better style properties and suggestions You can leave a message, let's learn from each other and make progress together!
[Source code to email] Leave your email account in the comment area where the complete demo source code is needed, and the blogger will send it to you as soon as he sees it. I wish you a happy life!
Summarize
The above is what I want to talk about today. This article mainly introduces the application skills of 5 advanced CSS attributes, 5 sensational CSS attributes, CSS pseudo-element: empty application, gap attribute layout application, CSS pseudo-class: invalid application, How to use CSS to verify the format of the input box, set the text background image, apply background-clip: text, how to fix the table header and scroll elsewhere, and use position: sticky to realize the scrolling of the fixed content in the header. We also look forward to making progress together. Let's work together in 2023! ! !
版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。