Flashcards
CSS
Flashcards do conjunto (12)
- 1Explain %, em, rem, pixels, pt?Em concept based on size of an uppercase M in any typeface
1em = 100% of current (inherited) font size (usually, 16px) (.5em - 50%)
rem - root em - font size of the root element in document. - 2What does float do?Float pushes an element to the sides of a page with text wrapped around it. you can create entire page or a smaller area by using float. if size of a floated element changes, text around it will re-flow to accommodate the changes. You can have float left, right, none or inherit.
if you set, 'float: left;' for an image, it will move to the left until the margin, padding or border of another block-level element is reached. The normal flow will wrap around on the right side. - 3What does clear do?The clear property specifies on which sides of an element where floating elements are not allowed to float.
- 4How to work easier with em units?Default browser font size is 16px. Set the font-size on the body to 62.5% and new default is 10px.
Need a 18px font size?
Set size to 1.8em. - 5Em units advantages?1) The ARE resizeable in IE 6
2) The relationship to other sizes (elastic width sites)
3) Em's cascade very well
Makes the site 'zoomable' - bump the font size - everything resizes.
If you have a box that is 10em in height, and a font inside that is 1em in size, it will take up exactly 1/10 the height of that box. - 6Font size of ? Some text ...24 px
Body 10 - 7Explain rem units.In effect, rem is a document-wide CSS variable.
Rem is replacing em to protect inner element font sizes from being changed by outer elements, thus avoiding the classic nested em scaling problem - 8Explain contenteditable attributeAllows the content of the element to become editable
Click to edit - 9How to disable the default border highlight on an html input text element?[contenteditable="true"]:focus {
outline: none;
}
input:focus, select:focus, textarea:focus,
button:focus {
outline: none;
} - 10Explain display: table, table-cell, table-columntable - Element behaves like a element - it defines a block level box
table-cell - behaves like element - 11How to center div inside div vertically and horizontally using display: table?Used to allow #outer 100 % width:
#wrapper{ display:table;
table-layout:fixed; width:100% }
#outer{ display:table-cell;
vertical-align: middle; text-align: center; }
#inner { display:inline-block;
text-align: left;} - 12Explain inline-blockBlock element that behaves like inline - height and margin t/b CAN be set!
Most common use - getting IE6 margins to behave.
Informações
- Descrição
- CSS FlashCards sobre CSS, criado por Andrea Juric em 20-09-2015.
- Criado por
- Andrea Juric
- Visualizações
- 0
- Avaliação