Summary of basic knowledge of HTML and CSS

Posted by uNF on Tue, 04 Jan 2022 09:54:15 +0100

1. Prioritization of selectors

!import Writing this style after the attribute will overwrite the element style defined anywhere on the page
 Inline style
id selector
class selector
 tag chooser 
Wildcard selector *
Browser custom properties and inheritance

2. Floating element related questions

If a non floating element and a floating element exist at the same time, and the non floating element is in front, the floating element will not be higher than the non floating element
 Inline elements and floating elements are aligned to the top as much as possible, to the left or right
 If there are multiple floating elements, the floating elements will be arranged in order without overlapping

If the inline element overlaps with the floating element, its border, background and content will be displayed under the floating element

1,The in line element overlaps with the floating element, and the border, background and content will be displayed on the floating element
 for example
<style>
        div {
            float: left;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        span {
            background-color: red;
            border: 2px solid green;
        }
</style>
<div>
    Floating element
</div>
<span>Inline element</span>

2,The block level element overlaps with the floating element, the border and background will be displayed below the floating element, and the content will be displayed above the floating element
<style>
        div:nth-child(1) {
            float: left;
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        div:nth-child(2) {
            width: 200px;
            height: 200px;
            background-color: red;
            border: 2px solid green;
        }
</style>
<div>
   Floating element
</div>
<div>
   Block level element
</div>

3. What kind of events will occur when you move the mouse over the button and click it?

hover -> focus -> active

Hover - > focus - > response

4. Block level label and row class label classification summary

Block level labels: div, ul, ol, li, dl, dt, dd, h1~h6, p, form, hr
Inline Tags: b, em, img, input, a, sup, sub, textarea, span, i

5. CSS box model

Box model correlation CSS Properties include: width and height, inner margin, border, and outer margin
 If<p>Longitudinal margin It's 12 px,So two<P>The longitudinal distance between is 12 px
 stay CSS In, increasing the inner margin, border, and outer margin will not affect the size of the content area, but will increase the overall size of the element box

Standard box model = content + border + padding + margin;
Quirky box model = content width (content + border + padding) + margin;

6. img is related. You can directly see the text hello in the following two types

<img src="imgUrl" title="hello" />
<img src="" alt="hello" /> ((when there is no net)

7. Compare and summarize with opacity, visibility and display in CSS

7.1 display: none

1. The browser will not generate a display: none attribute; Element.
2,display: none; It does not occupy space (after all, it is not affected), so changing this attribute dynamically will cause rearrangement.
3,display: none; It will not be inherited by subclasses, but... Subclasses will not be displayed. After all, they are all kill ed together.
4. display is an embarrassing attribute, and transition is invalid for her. (undisputed)

7.2 visibility: hidden;

1. Elements will be hidden, but will not disappear and still occupy space.
2. visibility: hidden will be inherited by subclasses. Subclasses can also set visibility: visible through the displayed settings; To hide.
3,visibility: hidden; The event that the element is already bound will not be triggered.
4,visibility: hidden; Modifying this property dynamically causes redrawing.
5. visibility,transition is not valid for her. (personal test)

7.3 opacity=0

1. opacity=0, but the transparency is 100%. The element is hidden and still occupies space.
2. opacity=0 will be inherited by child elements, and child elements cannot be hidden through opacity=1. No.
3. Elements with opacity=0 can still trigger bound events.
4. opacity,transition works for her (no dispute)

Style elements opacity:0 And bind click Event, triggered by clicking the element event

8. Comments in HTML

There is only one comment in html

9. Which elements will be bold text in the browser default style (360 interview questions)

h1 th

10. html strict mode and standard mode, how to trigger these two modes

Generally speaking, the browser selects which mode to use according to whether the doctype exists and which dtd to use. The specific rules are as follows:

(1). about xhtml Generally speaking, it contains complete doctype，Is presented in standard mode

(2). about html4.0.1,Include strict dtd of doctype Often results in pages rendered in a standard mode, including transitions dtd and uri of doctype It will also be presented in standard mode, but there is a transition dtd No, uri The page is rendered in a mixed mode

(3). doctype If it does not exist or is incorrect, the page will be rendered in mixed mode

(4). For traditional xml Definition, for example:<?xml version="1.0" encoding="utf-8"?>，If you put this sentence at the top of the page i6 Presented in mixed mode

11. For Position positioning, the following statement is wrong: B (possibly A)

fixed Element, which can be positioned at specified coordinates relative to the browser window, and it is always in body Based on

relative The element is offset based on its original position. After it is moved, the original position no longer occupies space

absolute If its parent container is set position Property, and position The attribute value of is absolute perhaps relative，Then it will be offset according to the parent container

fixed The element of the attribute does not occupy a position in the standard stream

fixed is not based on the body, but only based on the browser window.

12. In the color code, the color looks green

rgb(0,170,0)
hsl(0,100%,50%)
hsl(120,50%,50%)

13, clear : none | left | right | both.

Clear floating method,

1. Add class = "clearflex" to the parent element

2. Add an attribute to the parent in css: overflow: hidden; (I prefer this one)

3. Pseudo element elimination method,

4. Create an empty div named clear, and add clear: both in css;

For CSS clear float, you must keep in mind that this rule can only affect the element itself, not other elements.

Topics: Front-end

Programmer Think