css essential 2 Flashcards
True or false. inline-block can use to setup navigation links.
TRUE
The inline-block is always a problem–Dealing ____ of inline-block elements
WHITESPACES
How could you solve whitespace-problem of an inline-block? Solution 1 https://i.imgur.com/Y2z3Gue.png
No Space between elements. it may be a problem for readability of HTML codes.
What trick font-size property does?
https://i.imgur.com/TwqlYDR.png
font-size:0 on the parent element of inline-element and then reset on inline element removes spaces between inline-element.
Why there is an unnecessary HTML comment on every inline-block? https://i.imgur.com/D6JvrqG.png
HTML comments on every inline-block element and Droping the closing bracket to the newline removes
extra spaces between inline-block elements
Negative margin? why https://i.imgur.com/q7K745y.png
Negative margin removes extra spaces between inlin-block elements
Dropping the closing angle? what the fuck is that?
https://i.imgur.com/OBiukoS.png
Yeah this is another trick to remove extra spaces between inline-block elements . Simply use nav tag
______ allows you to specify the position of an element. e.g. left, right.
Float property
What clear property does https://i.imgur.com/ipqiUYw.png
If the element can be fit horizontally in the space next to the floated element, It will fit itself. <b>Unless you apply the clear property in the same direction of the float property</b>
Floated element problem:
https://i.imgur.com/T3XcSyt.png
contained element when floated overlaps to the container element
What would be happened when you apply float property to the anchor tag
No space between the floated anchor tags and the height of a floated elements are zero, so if there is a background color on a parent element, background color does not show. it also makes a block element
What are the alternative solutions for creating navigation instead of an anchor tag
nav element and flexbox
____ property is used to arrange elements relative to the default flow or browser viewport
Position
The element is positioned according to normal position
position:Relative
positioned relative to the browser window
positon:fixed
Positioned to its first positioned ancestor element(not static). remove to the natural flow of the page
positon:absolute
positioned to the user’s scroll position
position:sticky
Pre-written stylesheet containing rules that override all default browser style to an un-styled baseline. normalize another fix
Reset stylesheet
Prewritten stylesheet containing rules that aim to create consistent default styles, rather than removing them. https://medium.com/@elad/normalize-css-or-css-reset-9d75175c5d1e
Normalize
Applies different CSS properties according to different screen sizes
Media Query
a CSS background property that fixes a background to the viewport
background-attachment:fixed|scroll;
allows you to move background image around within its container( select which part to show)
background-positon:
the size of an image background
background-size: length(width and height)| cover| contain|
a background-size property value that covers the entire container
cover
a background-size property value that resizes the background image to make sure the image is fully visible (not so stretch)
contain
mnemonic for background property
<b>I. P.</b> man <b>Re</b>sends An<b> Origin</b>al <b>CL</b>ear <b>C</b>opy
What are media types
print
speech
screen
all
this is a media type that matches the printer
this is a media type that matches screen reader
speech
this is a media type that matches all devices that are not print or speech
screen
this is a media type that matches to all devices
all
what are CSS property that is used with media query types
min-width and max-width, and width
is a CSS rule that selects all input element that has type=search
[type=’search’]{
}
what are the sibling combinators
adjacent(+) which selects the next element
general(~) which select all next elements
https://i.imgur.com/vJ4I9C5.png
How could you select the element next to h2 element
h2+p{
/*selects paragraph 2 */
}https://i.imgur.com/vJ4I9C5.png
HOw could you select paragraph 2~4 next to h2 element
h2~p{
/*selects paragraph 2~4*/
}is a keyword added to a selector with : for a specific state. For example, hover and visited of an anchor tag
Pseudo-class selector
select every first child of a parent elements
https://i.imgur.com/57uwQDL.png
p:first-child{
color:red;
}
select every last child of a parent elements
https://i.imgur.com/57uwQDL.png
p:last-child{
color:red;
}
