Scribd
Upload
17 views3 pages

Mod 7 PDF

Uploaded by

remon.youssef317
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
17 views3 pages

Mod 7 PDF

Uploaded by

remon.youssef317
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

Flashcards: CSS Document Flow and Positioning

Question: What is the normal flow in CSS?


Answer: It refers to the default arrangement of elements on a web page as
dictated by HTML, without CSS styles applied.
Question: Name two types of element levels in a document flow.
Answer: Block level and Inline level.
Question: What are the two main types of layouts in web design?
Answer: Fixed-width layouts and Liquid layouts.
Question: What CSS property removes an element entirely from a page?
Answer: display: none;
Question: What does the position: sticky; property do?
Answer: It makes an element stick to a defined position (e.g., top: 0) as you scroll
the page.

Explain "Document Flow" in Simple Terms with Examples


Document Flow is the natural arrangement of elements on a webpage without any
additional styling. By default:
 Block-level elements stack vertically (like paragraphs).
 Inline elements stack horizontally (like text inside a paragraph).
Example: Imagine a Word document:
 Headings are block elements; they appear one below another.
 Words in a sentence are inline elements; they flow left to right.
CSS allows us to control this flow using properties like display, float, and position to
create layouts like grids or flexible designs for modern websites.

What Are the Most Important Points to Remember About "Positioning in


CSS"?
Types of Positioning:
1. static: Default, elements follow normal flow.
2. relative: Positioned relative to its original position.
3. fixed: Positioned relative to the viewport.
4. absolute: Positioned relative to its nearest positioned ancestor.
5. sticky: Sticks within its scroll container.
Layouts:
 Fixed-width layouts provide consistent dimensions.
 Liquid layouts adapt to screen sizes.
Key Properties:
 top, bottom, left, right: Control element placement.
 z-index: Adjusts stacking order.
Flex and Grid Layouts:
 Flexbox for one-dimensional layout control.
 Grid for two-dimensional layout control.

Key Terms and Their Definitions in "Document Flow and Positioning"


 Normal Flow: Default element arrangement based on HTML structure.
 Block Elements: Stack vertically; e.g., <div>.
 Inline Elements: Stack horizontally; e.g., <span>.
 Display Property: Defines how elements are displayed (block, inline, none,
flex, grid).
o Example: display: flex; makes items flexible.

 Position Property: Specifies how elements are positioned (static, relative,


fixed, sticky).
o Example: position: fixed; places an element relative to the viewport.

Quiz Questions About "CSS Positioning" (Multiple-Choice)


1. Which value of the position property positions an element relative to
the viewport?
o a) Static

o b) Relative

o c) Fixed

o d) Absolute
Answer: c) Fixed
2. What is the default display value for a <div> element?
o a) Inline

o b) Block

o c) None

o d) Grid

Answer: b) Block
3. Which display value creates a container for flexible items?
o a) Inline

o b) Flex

o c) Block

o d) Grid

Answer: b) Flex
4. What is the purpose of a liquid layout?
o a) To maintain fixed dimensions across devices.

o b) To adapt the layout to various screen sizes.

o c) To remove elements from the document flow.

o d) To stack elements vertically.

Answer: b) To adapt the layout to various screen sizes.


5. Which property removes an element from a page?
o a) Position

o b) Display: none

o c) Z-index

o d) Float

Answer: b) Display: none

You might also like