When we write multiple web pages, we will find that we will always encounter many of the same css styles. If we have to write in the web page code every time, it will waste time and consume the performance of browser and computer. Therefore, I personally summarized the css styles that are often used in the process of typing code. When you use it again, you can refer to it through the link tag.
Commonly used common css
1. PC terminal
1. Page margin (outer margin) and padding (inner margin) are cleared.
*{
margin：0；
padding：0；
}
reason:
1. Some default block elements will have their own margin or padding.
2. The body will have a margin of 8 pixels by default, so the margin of the body can be cleared after setting.
3. After clearing the default margin and padding of these elements, our custom css style will not deviate.
4. At the same time, setting the margin to 0 is also for the purpose of centering it.
2. The list removes the previous dots and numbers.
ul,ol,li{
list-style: none;
}
demo：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul,ol,li{
list-style: none;
}
</style>
</head>
<body>
<ul>
<li>西施</li>
<li>王昭君</li>
<li>貂蝉</li>
<li>杨玉环</li>
</ul>
</body>
</html>
3. The underline of the hyperlink a label is removed.
a {
text-decoration: none;
}
In many websites such as: https://www.taobao.com/ https://www.jd.com/, etc., you can see that the small words on the navigation bar are not underlined, thanks to this style .
4. Page layout settings.
container {
width: 1024px;
margin:0 auto;
}
The application effect is like the JD website https://www.jd.com/ leaving blank spaces on both sides of the page.
5. Clear the floating effect.
Method 1: Add a new element, apply clear: both;
Put another label under the floating box, and use clear:both in this label to clear the impact of floating on the page.
Note: In general, this method will not be used to clear floating. Because this way of clearing floats will increase the number of labels on the page and cause structure confusion.
clear{clear: both;}
<div class="box">
<div class="red">1</div>
<div class="sienna">2</div>
<div class="blue">3</div>
<div class="clear"></div>
</div>
Method 2: The parent div defines overflow: auto (note: it is the parent div, which is div.outer here)
Principle: One thing to note when using the overflow property to clear floats is that the overflow property has three property values: hidden, auto, and visible. We can use hidden and auto values to clear floats, but remember not to use visible values.
.over-flow{ overflow: auto; zoom: 1;}/*zoom1; 是在处理兼容性问题*/
<body>
<div class="box over-flow">
<div class="red">1</div>
<div class="sienna">2</div>
<div class="blue">3</div>
</div>
</body>
Method 3: Use a pseudo-element to clear the float (:after, note: it acts on the parent of the float element)
It is mainly recommended to use this method to clear the floating
.clearfix:after{
content:"";/*设置内容为空*/
height:0;/*高度为0*/
line-height:0;/*行高为0*/
display:block;/*将文本转为块级元素*/
visibility:hidden;/*将元素隐藏*/
clear:both;/*清除浮动*/
}
.clearfix{
zoom:1;/*为了兼容IE*/
}
<body>
<div class="box clearfix">
<div class="red">1</div>
<div class="sienna">2</div>
<div class="blue">3</div>
</div>
</body>
方法四:使用双伪元素清除浮动
.clearfix:before,.clearfix:after {
content: "";
display: block;
clear: both;
}
.clearfix {
zoom: 1;
}
Reasons for removing floats:
1. The background cannot be displayed
Due to the floating generation, if the CSS background color or CSS background image is set to the parent (CSS background background), the parent cannot be stretched, so the CSS background cannot be displayed.
2. The frame cannot be opened
If the CSS border property (css border) is set on the parent level, because the float property is used in the child level, floating occurs, the parent level cannot be stretched, and the border cannot be stretched with the content.
3. The setting value of margin padding cannot be displayed correctly
Due to floating, the value of css padding and css margin attributes set between parent and child cannot be expressed correctly. Especially the padding and margin on the top and bottom cannot be displayed correctly.
2. Mobile terminal
1. The list removes the previous dots and numbers.
ul,ol,li{
list-style: none;
}
demo：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul,ol,li{
list-style: none;
}
</style>
</head>
<body>
<ul>
<li>西施</li>
<li>王昭君</li>
<li>貂蝉</li>
<li>杨玉环</li>
</ul>
</body>
</html>
2. The underline of the hyperlink a label is removed.
a {
text-decoration: none;
}
In many mobile websites such as: https://www.taobao.com/ https://www.jd.com/, etc., you can see that the small words on the navigation bar are not underlined, thanks to this style.
3. Breakpoint
We use the form of media query to layout the webpage. The principle is to set several interval ranges. When the width of the browser meets the condition interval, the corresponding css code will be executed.
The setting of the breakpoint can be based on the actual situation, or refer to the setting of some frameworks.
html,body {height:100%;}
@media all and (max-width:320px) {
html {
font-size:12px;
}
}
@media all and (min-width:321px) and (max-width:375px) {
html {
font-size:14px;
}
}
@media all and (min-width:376px) {
html {
font-size:16px;
}
}
Bootstrap mobile-first inner body query breakpoint setting
/* ultra-small screen (mobile phone, less than 768px) */
/* No code related to media queries, as this is the default in Bootstrap (remember Bootstrap is mobile-first?) */
/* small screen (tablet, greater than or equal to 768px) //
@media (min-width: @screen-sm-min) { … }
medium screen (desktop monitor, greater than or equal to 992px) // large screen (large desktop
@media (min-width: @screen-md-min) { … }
monitor , greater than or equal to 1200px) */
@media (min-width: @screen-lg-min) { … }
CSS overview
CSS refers to Cascading Style Sheets (Cascading Style Sheets)
style definition how to display HTML elements.
Styles are usually stored in style sheets.
Styles are added to HTML 4.0 to solve the problem of separation of content and presentation. External
style sheets can greatly improve work efficiencyExternal
Style sheets are usually stored in CSS files
Multiple style definitions can cascade into one
Styles solve a common problem
HTML tags were originally designed to define document content. By using tags <h1>、<p>、<table>like this , the original intent of HTML is to express information like "this is a heading", "this is a paragraph", "this is a table". At the same time document layout is done by the browser without using any formatting tags.
As the two major browsers (Netscape and Internet Explorer) continue to add new HTML tags and attributes (such as font tags and color attributes) to the HTML specification, creating sites whose document content is clearly independent of the presentation layer of the document becomes It is getting more and more difficult.
In order to solve this problem, the World Wide Web Consortium (W3C), a non-profit standardization alliance, shouldered the mission of HTML standardization and created styles (Style) outside of HTML 4.0.
All major browsers support Cascading Style Sheets.
Style sheets dramatically improve productivity
Style sheets define how HTML elements are displayed, just as HTML 3.2's font tags and color attributes do. Styles are usually kept in external .css files. External style sheets give you the ability to change the layout and appearance of all pages in your site simultaneously by editing only a simple CSS document.
CSS can be called a breakthrough in the field of WEB design because it allows the control of the style and layout of multiple pages at the same time. As a web developer, you can define styles for each HTML element and apply them to as many pages as you want. For a global update, simply change the style and all elements in the site will be updated automatically.
————————————————
Copyright statement: This article is an original article by CSDN blogger "Dong Haoqiang", which follows the CC 4.0 by-sa copyright agreement. For reprinting, please attach the original source link and this statement.
Original link: https://blog.csdn.net/u012730137/article/details/78567391
20 tips for using CSS: https://www.cnblogs.com/zhengzhigang/p/8178132.html