Jun 01, 2021 Article blog
This article collected and collated 12 interview questions about CSS, let's take a look at it.
css
selector, the correct priority is ()
A,
id
selector> label selector> class selector
B, label selector> class selector>
id
selector
C, class selector> label selector>
id
selector
D,
id
selector> class selector> label selector
The four levels are defined as follows:
First class: represents an inline style, such as:
style=””
with a weight of
1000
Second class: represents
ID
selector, such
#content
with a weight of
100
Third class: represents classes, pseudoclasses, and property selectors, such as
.content
with a weight of
10
Fourth class: represents type selectors and pseudo-element selectors, such as
div p
with a weight of
1
css
as defined below?
（ ）
A、
#game .name
B、
#game .name span
C、
#game div
D、
#game div.name
The higher the weight, the higher the priority
CSS
selector priority refers to the priority of the
基础选择器
ID` > `CLASS` > `ELEMENT` > `*
HTML
semantics?
（ ）
A. Semantic
HTML
facilitates machine reading, such as
PDA
handheld devices, search engine crawlers;
B,
Table
is an outdated label, when encountering a data list, you need to try to use
div
to simulate the table
C, Semantic is a new concept brought about by
HTML5
previous versions of
HTML
can not be semantic
D,
header
article
address
are all semantically explicit labels
parse:
Pick D
1. What is
HTML
semantics?
Depending on the structure of the content (content semantics), select the right label (code semantics) for developers to read and write more elegant code while allowing browser crawlers and machines to parse well.
In the absence of
CSS
the page can also present a good content structure, code structure
User experience: e.g.
title
alt
for interpreting nouns or interpreting picture information,
label
labels;
Good for
SEO
Good communication with search engines helps reptiles crawl for more effective information:
Reptiles rely on tags to determine the context and weight of individual keywords, and make it easier for other devices to parse (such as screen readers, blind readers, mobile devices) to render web pages in meaningful ways;
Easy team development and maintenance, more readability of semantics, is an important next step in the web page, and teams that follow
W3C
standard follow it to reduce differentiation
CSS
style, which of the following elements can reach the maximum width, and each before and after a line break?
（ ）
A、
Block Element
B、
Square Element
C、
Side Element
D、
Box Element
parse:
Pick A
Block element
block element
The inline element within
inline element
line
inline-block element
the block element within the line
HTML
JavaScripts
execute when the page loads?
（ ）
A, file head position
B, file tail
C,
<head>
the label section
D,
<body>
the label section
parse:
Pick D
JavaScripts
in the
head
section are executed when they are called.
JavaScripts in the
body
section are executed when the page
JavaScripts
A、
visibility:hidden
;
The occupied space position still exists, only visually completely transparent;
B、
display:none
;
Do not reserve its physical space for hidden objects;
C、
visibility:hidden
; W
ith
display:none
There is no essential difference between the two;
D、
visibility:hidden
;
Produces
reflow
and
repaint
(backflow and redraw);
Select
A
B
visiblity
Invisible, touching.
display
Invisible, untouchable.
display
is
dom
and can be rendered and redrawn.
visiblity
is not
dom
level, cannot be redrawn, can only be rendered
A、
_self
B、
_blank
C、
_top
D、
_parent
parse:
Select
B
Open a link in
html
by
<a>
tag, and > the
target
of the tag through
<a>
The property specifies where to open the linked document.
If the
target
property is written in the label
<a>
the browser opens the frame
<frame>
or window that matches its name or name based on the property value of
target
There are four reserved property values in
target
as follows.
_black
Open the linked document in a new window
_self
Default.
Open the linked document in the same framework
_ parent
Opens the linked document in the parent frame
_top
Open the linked document throughout the window
framename
Open the linked document in the specified frame
A, setting the elements after
display:none
will only cause the browser to rear overrone without redrawing
B. Setting the elements after
visibility:hidde
will only cause the browser to redraw without rear rescheduling
C, after setting the element
opacity:0
you can also trigger a click event
D,
visibility:hidden
elements cannot trigger their click events
parse:
Select
A
Setting the elements after
display:none
causes the browser to redraw
hover
style does not appear, the clicked visited hyperlink style no longer has
hover
and
active
the solution is to change the order of
CSS
properties?
（ ）
A、
a:link {}
a:visited {}
a:hover {}
a:active {}
B、
a:visited {}
a:link {}
a:hover {}
a:active {}
C、
a:active {}
a:link {}
a:hover {}
a:visited {}
D、
a:link {}
a:active {}
a:hover {}
a:visited {}
parse:
Select
A
a:link`; `a:visited`; `a:hover`; `a:active;
a:hover
must be placed after
a:link
and
a:visited
a:active
must be placed after
a:hover
position
positioning, the following statement is wrong is ( )
A,
fixed
element, which can be positioned relative to the specified coordinates of the browser window, is always based on
body
B,
relative
element is offset by its original position as the base, and after it moves, the original position no longer occupies space
An element of C,
absolute
if its parent container has a
position
property set and
position
position's property value is
absolute
relative or absolute
relative
is offset based on the parent container
D, the element of the
fixed
property does not occupy a position in the standard stream
parse:
Select
B
absolute
Creates an absolutely positioned element that is positioned relative to the first parent element other than
static
positioning, which
fixed
specified by
left
top
right
and
bottom
properties:
An absolutely positioned element is generated, positioned relative to the browser window, and the position of the element
relative
specified by
left
top
right
and
bottom
properties:
Creates a relatively positioned element that is positioned relative to its normal position, so
left：20
adds 20
static
to the
LEFT
position of the element:
Default, no positioning, element appears in normal flow (ignore
top
bottom
left
right
or
z-index
declaration)
inherit
Specifies that the value of the
position
property should be inherited from the parent element
css
can be inherited ( )
A、
font-size
B、
color
C、
font-family
D、
border
parse:
Select
A
B
C
margin
padding
border
display
cannot be inherited
clear
in
css
（ ）
A, clear all styles of the element
B, clear all styles of the element's parent element
C. Indicates that there is no floating element around the element
D, indicating that a floating element must not appear around the parent element of the element
parse:
Select
C
clear` : `none` | `left` | `right` | `both(Recommended tutorial: CSS tutorial)
For clear floats for
clear
CSS
this rule affects only the elements that use the purge itself, not the other elements
Source: Public Number -- Frontman Author: Ghost Brother
The above is
W3Cschool编程狮
on the 12 questions selected CSS interview questions (including analysis) related to the introduction, I hope to help you.