1, Display and hiding of elements
1.1 display: display
-
explain
- Used to convert elements and how to show and hide elements
- No longer keep position after hiding elements
/* hidden object */ display: none; /* Display objects and convert elements into block level elements. They can also be converted into inline elements and inline block elements */ display: block;
-
application
-
<style> div { width: 160px; height: 90px; background-color: orange; margin: 10px 0; } .c1 { display: none; } </style> <body> <div class="c1">1</div> <div class="c2">2</div> <div class="c3">3</div> </body> -
The effect is as follows
-
1.2 visibility: visibility
-
explain
- Used to specify whether an element is visible
- Keep position after hiding
/* By default, the element is visible */ visibility: visible; /* Element not visible */ visibility: hidden;
-
application
-
<style> div { width: 160px; height: 90px; background-color: orange; margin: 10px 0; } .c2 { /* Element not visible */ visibility: hidden; } </style> <body> <div class="c1">1</div> <div class="c2">2</div> <div class="c3">3</div> </body> -
The effect is as follows
-
1.3 opacity: opaque
-
explain
- Used to set the opacity level of an element
- Property values range from 0.0 (fully transparent) to 1.0 (fully opaque)
- After full transparency, keep the position
-
application
-
<style> div { width: 160px; height: 90px; background-color: orange; margin: 10px 0; } .c2 { /* Set to fully transparent */ opacity: 0; } </style> <body> <div class="c1">1</div> <div class="c2">2</div> <div class="c3">3</div> </body> -
The effect is as follows
-
1.4 overflow: overflow
-
explain
-
Used to set some attribute styles when the content overflows the element box
Attribute value describe visible By default, the content is not trimmed and is rendered outside the element box hidden The excess content will be trimmed and hidden scroll The scroll bar is always displayed regardless of whether the content is exceeded or not auto The content exceeds the display scroll bar and does not exceed the display
-
-
application
- The effect is as follows
- The effect is as follows
2, CSS user interface styles
2.1 cursor: mouse style
-
explain
-
Used to set the shape of the cursor display
Attribute value describe default Default cursor (usually an arrow) pointer The cursor appears as a pointer (small hand) indicating the link move The cursor is rendered as a movable style (move) text The cursor is rendered as a style (text) indicating the text not-allowed The cursor is rendered as a forbidden style (Forbidden) url url Custom cursor
-
-
give an example
-
<style> div { width: 160px; height: 90px; background-color: orange; margin: 10px 0; /* Set to the style of the little hand */ cursor: pointer; } </style> <body> <div class="c1">1</div> </body> -
The effect is as follows
-
2.2 outline: Outline
-
explain
-
It is a line drawn around the element, which is located at the periphery of the border edge to highlight the element
Attribute value describe outline-color Specifies the color of the border outline-style Specifies the style of the border outline-width Specifies the width of the border
-
-
format
-
/* Writing order */ outline: outline-color outline-style outline-width;
-
/* give an example */ <style> input { outline: blue dotted 2px; } </style> <body> <input type="text"> </body> -
The effect is as follows
-
2.3 resize: prevent dragging text fields
-
explain
-
Used to set whether the user can adjust the size of the text field
Attribute value describe none You cannot resize an element both By default, you can adjust the height and width of the element horizontal You can adjust the width of the element vertical You can adjust the height of the element
-
-
application
-
<style> textarea { /* The setting can only adjust the height */ resize: vertical; } </style> <body> <textarea name="" id="" cols="30" rows="10"></textarea> </body>
-
3, Vertical align: vertical alignment
-
explain
-
Vertical align is used to set the vertical alignment of elements. It is only for inline elements and inline block elements
Attribute value describe baseline By default, the element is placed on the baseline of the parent element middle Aligns the element with the middle of the parent element top Align the top of the element with the top of the highest element in the row bottom Align the top of the element with the top of the lowest element in the row
-
-
Supplementary knowledge
- margin: 0 auto; Is the horizontal center alignment of block level elements with width set
- text-align: center; Is to center the text in the element
3.1 how to remove the blank gap at the bottom of the picture
-
Analyze the cause
- img image is an inline block element. Its bottom line will be aligned with the baseline of the parent box, so there will be a blank gap at the bottom of the image
-
resolvent
- Add the vertical align attribute to img, and set the attribute values to middle, top and bottom, so that the image does not align with the baseline
- Add display: block to img and convert it into block level elements
4, Overflow text is displayed with an ellipsis
4.1 white space: line feed processing
-
explain
-
It is mainly used to set the text in the paragraph not to wrap, because the text will be displayed automatically by default
Attribute value describe normal By default, whitespace is ignored by the browser nowrap Set that the text will not wrap until the < br > tag is encountered
-
4.2 text overflow: text overflow
-
explain
-
Used to set the style when text overflows
Attribute value describe clip Trim text ellipsis The trimmed text is represented by an ellipsis string The trimmed text is represented by a custom string
-
4.3 the overflow text is displayed with ellipsis
-
<style> .desc { border: 1px solid black; width: 300px; /* Set to not wrap */ white-space: nowrap; /* Overflow part hidden */ overflow: hidden; /* The overflow section is set to an ellipsis */ text-overflow: ellipsis; } </style> <div class="desc"> Hongmeng OS It is a micro kernel based [23] It took 10 years and more than 4000 R & D personnel to develop [28] Face 5 G Internet of things [23] ,Full scene oriented distributed operating system. The English name of Hongmeng is HarmonyOS，It means harmony </div>
5, CSS sprite
5.1 why do you need sprite technology
- Analyze the cause
- The above figure is the request schematic diagram of a web page. When a user visits a website, he needs to send a request to the server. Each image on the web page can be displayed to the user only after a request.
- When there are too many images in the web page, the server will frequently accept and send requests, which will greatly reduce the loading speed of the page.
- Therefore, in order to effectively reduce the pressure on the server and improve the page loading speed, we need to use sprite Technology (also known as CSS sprite and CSS Sprite).
5.2 explain wizard Technology
-
explain
- As shown in the figure above, it is a sprite diagram
- In fact, it is to integrate some background images in the web page into a large image (wizard image), and then each web page element only needs to be accurately located to a small image in the wizard image.
- In this way, when the user accesses the page, he only needs to send a request to the server, and all the background images in the web page can be displayed.
-
be careful
- CSS sprite technology is mainly aimed at background images. This technology is not required for inserted images img.
-
application
<style> .c1 { width: 80px; height: 80px; border: 1px solid black; /* Insert background picture */ background-image: url(./imgs/Sprite map.png); /* Background image positioning */ background-position: 0 -178px; } </style> <body> <div class="c1"></div> </body>- The effect is as follows
- The effect is as follows
6, The beauty of CSS
6.1 beauty of negative margin
6.1.1 negative margin + positioning: horizontal and vertical center
-
explain
- The box with absolute positioning / fixed positioning cannot be centered by setting margin: auto.
-
analysis
- Step 1: set left: 50%; top:50%; Move the left side of the box to the horizontal and vertical center of the parent element
- Step 2: set margin left: negative value; Margin top: negative value; Let the box move half its width to the left and up
-
application
<style> .box { position: absolute; left: 50%; top: 50%; margin-left: -250px; margin-top: -150px; width: 500px; height: 300px; background-color: red; } </style> <body> <div class="box"></div> </body>- The effect is as follows
6.1.2 press the adjacent frame of the box
- Adjacent boxes, borders add and thicken
-
analysis
- If the boxes are all in one line, make the outer margin of each box 1 pixel to the left, that is, margin left: 1px;
- If there are multiple rows in the box, make the outer margin of each box 1 pixel to the left and upward, that is, margin left: - 1px; margin-top: -1px;
-
application
-
<style> div { float: left; width: 300px; height: 300px; margin-left: -1px; margin-top: -1px; border: 1px solid #ccc; } </style> <body> <div></div> <div></div> <div></div> <div></div> </body> -
The effect is as follows
-
6.2 beauty of CSS triangle
-
explain
- Use CSS border to simulate an upper triangle effect
- Set the width and height to 0
- We need to write all four borders, and only keep the required border color. The rest cannot be omitted. Just change to transparent
- For compatibility, add font size: 0; line-height: 0;
-
application
-
<style> .c1 { width: 0px; height: 0px; background-color: black; border-top: 10px solid green; border-right: 10px solid blue; border-bottom: 10px solid gray; border-left: 10px solid transparent; } </style> <body> <div class="c1"></div> </body> -
The effect is as follows
