Abstract

I am a half-way monk type of front end programmer. One of the common sayings you hear while learning is - don't worry about HTML and CSS, JavaScript is the essence of the front end. There's nothing wrong with that, but the longer I work, the more I feel like my front-end basics -- especially HTML and CSS -- are terrible. In this blog post I will summarize my shortcomings in these two areas and comb through the HTML and CSS interview questions that I think are more valuable. In addition, I will also share a self-testing tool, which will be relatively low level. However, I do not hope to show my level through this tool, but hope to let me see my own shortcomings and progress through periodic self-examination.

keywords

HTML 5 | | | animation layout Flex

A self-testing tool

Items

will
knowledgeList it out. It could be
sports(for example: HTML/CSS), can also be
Fine item(e.g. HTML5 Canvas, CSS Layout). through
timing(Once a month or twice a month) Here you are
Rate yourself on your mastery of each item, and finally calculate
Total scoreAnd do with the theoretical score
contrastTo figure out who you are
True level.

Detail

These are the words that we often use to show our level. Although they seem “funny”, I think there must be a reason for their existence since everyone uses them. Below is my personal humble opinion, if have better idea, welcome to comment.

Toollibrary vs. native

  • After the first contact with the style framework Bootstrap, what impressed me most was its grid system. Simple and easy to use, can meet the needs of most layout scenarios. I went on to use layui and element-ui to implement my own grid system within each of these front-end style frameworks. In addition to the buttons, forms and forms of packaging is also very good.
  • At that time naive I thought that from now on do not need to learn CSS, so many wheels placed here, want to use which open the official website copy and paste is not. But when I go out for interviews, I find that the most common questions from interviewers are not about how to use a certain style component, but the basic layout, center, box model, etc. This made me reflect on the difference between knowing how to use a tool library and mastering native CSS.
  • The tool library is definitely native to the implementation. Being familiar with and understanding native CSS is a great way to get your hands on a library quickly. In addition, if the tool library does not meet the business requirements, we need to implement the entire set of tools in a native way, starting with the layout and working through to a specific style.
  • To quote Jim Harker, the Minister of Civil Affairs in Yes, the Prime Minister: He’s the Prime Minister now, but I’ve been the Minister of State all my life – a library of flowing style components, a cast-iron native CSS.

I lack of

  • I haven’t written a complete web page with native HTML and CSS. Like the Node website, the first is the layout, the typical header-aside main-footer layout. It’s quick to build with a style framework, but how much better to do it native? Some small details, such as how to implement a triangle when the navigation tag is in acitve state?

  • Most of the concepts are still at an understanding level, that is, I’ve only heard the name, I haven’t actually practiced it myself, and I haven’t used it in a project. Do technology never believe in photographic memory, more do not rely on rote memorization thought to master knowledge, no practical knowledge will never be able to remember, never understand the knowledge point.

Some interview questions

HTML5

How much do you know about HTML semantic tags

Cookie, sessionStorage and localStorage difference

How to realize the communication between multiple tabs in the browser

HTML page rendering process

Canvas

SVG

CSS3

In the middle

Remove the floating

The box model

  • box-sizing

Flex Elastic Layout

Grail layout/wing layout

Waterfall flow layout

BFC

Pseudo-classes and pseudo-element selectors

CSS transition

CSS animations

Media queries

Media queriesMedia enquiries are
Responsive Web designThe key part of it allows the user
Create different layouts based on viewport size. In more detail, it can be based on
Different media(printer equipment, etc.) or
Different equipment parameters(screen resolution) to be automatic
Adjust theWe set it up
style.

  • Syntax: Each media query statement consists of an optional media type and any number of media property expressions. Multiple media queries can be combined using multiple logical operators.

    @media screen and (max-width: 300px) { body { background-color: lightblue; }}

  • Media type: The general category used to describe the device. Optional. The default value is of type ALL.

    All print screenspeech /* @media print {body {font-size: 12px; }}

  • Media properties: Each media properties expression must be enclosed in parentheses.

    @media (any-hover: hover) { a:hover { background: yellow; }}

  • Logical operators: Logical operators, which can be used to jointly construct complex media queries.

    And: This operator is used to combine multiple media query rules into a single media query. Not: This operator is used to deny media queries when all is true. Only: This operator is used to apply styles only if the entire query matches. , : comma is used to combine multiple media queries into a single rule. If any of these is true, the whole is true.
    @media screen and (min-width: 400px) and (orientation: landscape) { body { color: blue; }}

  • Locate media queries: Many media functions are scope functions, which means that they can be preceded by a minimum or maximum to indicate a minimum condition or maximum condition constraint.

    /* @media (max-width: 1245px) {/* @media (max-width: 1245px) {... }

  • Orientation: The orientation media feature allows us to use it to detect portrait mode and landscape mode.

    @media (orientation: landscape) { body { color: rebeccapurple; }}

  • Use the touch screen device: hover media feature to detect if the user can hover over an element. To determine whether it is a touch screen.

    @media (hover: hover) { body { color: rebeccapurple; }}
  • thinking: media queriesThe external performance 是Realize Web responsiveness. But this is only one of its most obvious uses, and there are many other ways to be Web responsive.

WEB response type

Responsive Web design is not a separate technique, which is a way of describing Web design
wayOr a set of best practices
A word, it is used to build can
View content in responseThe word.

  • Viewport: Viewport, which is the view area of a user’s web page. Mobile browsers place pages in a virtual window that is usually wider than the screen.

    <meta name="viewport" content="width: device-width, initial-scale=1.0"> width: control viewport size, device-width is the width of the device; Height B. Initial-scale: initial scaling; 20. maximum-scale: The maximum scale to which the user is allowed to zoom; Minimum scale: The minimum scale to which the user is allowed to scale; User-scalable: whether users can scale manually;

  • Media queries: Responsive design is emerging only because of media queries. A common way to use media queries is to create a simple single-column layout for narrow-screen devices, such as mobile devices. Then check for larger screens, and start using a multi-column layout as soon as you know you have enough screen width to fit. This is what we often call mobile first design.

    @media screen and (min-width: 800px) { .container { margin: 1em 2em; }}

  • Grid View: A reactive grid view is typically 12 columns with a width of 100%. Automatically scales when the browser window resizes.

    <div class="row"> <div class="col-3">... </div> <div class="col-9">... </div> </div> /* target/context = result */. Col {width: 6.25%; /* 60/960 = 0.0625 */}

  • Multiple columns:

    .container {
  column-count: 3;
}

.container {
  column-width: 10em;
}

  • Flex: In the elastic box, the initial behavior is that the elastic elements will shrink and distribute the space between the elements according to the size of the space inside the container.

    .container {
  display: flex;
}

.item {
  flex: 1;
}

  • Grid: In a CSS grid layout, the FR unit permits the distribution of available space across the grid tracks.

    .container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

  • Reactive Image: Take an image that has the maximum size you want and scale it. The downside is that it wastes bandwidth.

    img {
  max-width: 100%;
}