CSS Basics (Part 7)

review

In the last lecture, we basically learned several ways of positioning CSS, including positioning in practical work commonly used tips, etc. In addition, we also learned margin: 0 auto horizontal centralization effect, the future commonly used z-index and other layers. We have also explained in detail whether or not the order in which styles are written can affect rendering performance. If you haven’t seen this, please refer to the previous article. In this tutorial we will begin the last of the CSS Basics series. Then it’s time to learn ABOUT CSS3 and HTML5!

Show and hide elements

dispaly

  • Display: none — Hide the object, and the position cannot be occupied
  • Display: block — Displays elements in addition to converting them

visibility

  • Visibility: hidden — Elements can be hidden, but the location is still occupied
  • Visibility: visible — The element is displayed

Overflow spill

  • Overflow: hidden — Do not display content that exceeds the size of the object, and hide the overflow (the hidden part does not occupy the space) as shown below
  • Overflow: Visible — Do not cut content or add scroll bars
  • Overflow: Scroll — Always display the scroll bar regardless of the content
  • Overflow: auto — Scroll bars are displayed automatically if the overflow is exceeded, and scroll bars are not displayed if the overflow is not exceeded

In the future, overflow: Hidden will be used a lot, and other default styles will not be used because the styles are too ugly, so the average team will write default styles in the future. Just keep the hidden in mind here

Display, visibility, overflow summary

  • Display — Hides objects, but does not preserve position
  • Visibility — Hide objects, but reserve location
  • Overflow – Focus on remembering hidden, to hide parts that are out of size

CSS User interface styles

In the page you can definitely see that sometimes when you click on the search box or button the arrow in the mouse will turn into a small hand. This style effect is quite widely used in the front end. This is the mouse-style operation. Mouse style operation cursor:

  • Cursor: default — Default style
  • Cursor: pointer — small hand style
  • Cursor: Move — Move styles
  • Cursor: test — Text style
  • Cursor: not-allowed — Disables styles

Contour line

Especially in the later work, because the input box or uI-related things will have a separate package, and then customize according to the design style, so in the later stage, if the team creates its own UI framework, it will remove the default contour line and then customize the contour line. So the default outline is usually removed from UI components

  • Outline: None — Remove the default outline

Prevents dragging and dropping text

Another thing that may be used in the future is preventing users from dragging and dropping text, which is commonly used on library sites, such as preventing copying.

  • Resize: None — Prevents dragging text

Vertical alignment

Vertical-align — indicates vertical alignment (only for inside and fast lines)

  • Vertical-align: baseline — align baseline
  • Vertical-align: top — align the top line
  • Vertical-align: middle — align vertically
  • Vertical-align: bottom

This will be used in future scenarios where images and text are displayed after login. Here I write a middle, and the rest can be tried in vs Code

The spilled text is replaced with an ellipsis

  • White-space: nowrap — Forces text to be displayed on a line
  • Overflow: hidden — Beyond partial hiding
  • Text-overflow: ellipsis — Words with ellipses in place of excess

The third one is going to be used a lot in the future, so I’m not going to demonstrate it here, but if you’re interested, you can go down and try it out in code

The elves figure

Now learn front-end students may not know the elves figure/Sprite figure this concept, in the previous years, the elves figure and Sprite figure is very commonly used in the front, because they will have the effect of an optimized, can be less HTTP requests, the so-called elves figure is to multiple small ICONS according to the proportion integration as shown in a picture. Instead of making multiple HTTP requests, a single request can take a bunch of small ICONS and render them to where they are used on the page.

While this was a great optimization a few years ago, it has little impact in modern HTTP2.0. Using Sprite diagrams requires reducing HTTP requests, which were sent back and forth after establishing three handshakes and four waves, as shown in the figure below

However, with the 2.0 update, there are effects such as multiplexing and request parallelism, and the overall effect is shown below

So for modern HTTP, multiple requests made in Sprite diagrams are negligible in modern front-end and browser mechanisms. And there are webpack packed effects and base 64 image conversion function, more can effectively replace the Sprite map. So sprites are almost not used in modern times, but can be understood to help you better or more interested in learning browser knowledge

CSS triangle

Triangle can also use CSS written, you may encounter a triangle in the after work, are generally designed to cut out pictures of a triangle, and then you can use the pseudo class element to locate it to a certain point, but a simple triangle also can write down the CSS directly, don’t look down upon this feature, this may also be the interview questions in the future, You may come across this question in future interviews, so try to understand it and write it in code.

Well, today’s CSS is finished, CSS length set a total of seven, the next time will enter the KNOWLEDGE of CSS3 and HTML5, CSS in the early work of the future is a lot of will be used, so the foundation must be played well. Welcome to comment ~

Today we are going to review a poem. After the National Day holiday, THE author wants to include poetry reading into his daily life. Recently, for a long time, I always want to say something, but I can’t. Recently, I first read some love poems recorded before, and prepare to read Li Yu’s poems after the National Day holiday. Recently read a book “Barbarians at the Gate” feel very good, can recommend everyone to read.

Pruning plum blossoms – Rain makes pear flowers close behind the door

  • The rain hit pear deep closed door, forget the youth, the wrong youth.
  • Who’s to say? Under the flower, under the moon.
  • Sorrow gathering brow peak every morning, a thousand hoof marks, ten thousand hoof marks.
  • Dawn to see the sky at dusk to see the clouds, line is also jun, sit is also Jun.

The translation

  • Deep close the door to listen to the rain outside the window hit the voice of pear, so failed to live up to youth, wasted youth
  • Even if there is a good happy mood to share with whom? Flower is also dejected, the month is dejected
  • All day long the brow furrows as the peaks rise, leaving a thousand tears and a thousand tears on his face
  • I miss you when I walk, and I miss you when I sit down