User:Wyn/Special Issue 26: Difference between revisions
No edit summary |
No edit summary |
||
| Line 8: | Line 8: | ||
I learned that display determines how elements relate to each other in the document flow. The key values we covered were: | I learned that display determines how elements relate to each other in the document flow. The key values we covered were: | ||
<table bgcolor= | <table bgcolor=#D3D3D3> | ||
<tr> | <tr> | ||
<th>display: block</th> | <th>display: block</th> | ||
| Line 14: | Line 14: | ||
</table> | </table> | ||
- Elements take up the full width available and start on a new line； | - Elements take up the full width available and start on a new line； | ||
<table bgcolor= | <table bgcolor=#D3D3D3> | ||
<tr> | <tr> | ||
<th>display: inline</th> | <th>display: inline</th> | ||
| Line 21: | Line 21: | ||
- Elements only take up necessary space and flow within the text | - Elements only take up necessary space and flow within the text | ||
<br> | <br> | ||
<table bgcolor= | <table bgcolor=#D3D3D3> | ||
<tr> | <tr> | ||
<th>display: inline-block</th> | <th>display: inline-block</th> | ||
| Line 28: | Line 28: | ||
- A hybrid that allows width/height settings while flowing inline | - A hybrid that allows width/height settings while flowing inline | ||
<table bgcolor= | <table bgcolor=#D3D3D3> | ||
<tr> | <tr> | ||
<th>display: none</th> | <th>display: none</th> | ||
| Line 47: | Line 47: | ||
display: flex helps arrange facial features in an organized way | display: flex helps arrange facial features in an organized way | ||
The combination of different display and position values creates complex layouts | The combination of different display and position values creates complex layouts | ||
<div> | <div> | ||
<div style="border style: solid; border width: ipx; display: inline block;"> | <div style="border style: solid; border width: ipx; display: inline block;"> | ||
<img src-"https://pzwiki.wdka.nl/mediadesign/ | <img src-"https://pzwiki.wdka.nl/mw-mediadesign/images/a/a6/Face.gif" width="465px"> | ||
</div> | </div> | ||
The face metaphor helped me remember that: | The face metaphor helped me remember that: | ||
The face itself (container) is like position: relative, providing a reference point | The face itself (container) is like position: relative, providing a reference point | ||
Features like ears (position: absolute) need the face as their positioning context | Features like ears (position: absolute) need the face as their positioning context | ||
Eyes and eyebrows (display: flex) need to maintain their relationship with neighboring elements. | Eyes and eyebrows (display: flex) need to maintain their relationship with neighboring elements. | ||
Revision as of 16:59, 15 February 2025
Study CSS like a linguist
Introduction to the core function of the CSS
In the CSS workshop, We learned the CSS properties like linguists, we explored two fundamental concepts: display and position properties. The display determines how elements interact with each other on a page; The position defines how elements are placed within their container.
We could choose the display and position group, focusing on the fundamental properties that how they work in the webpage.
I learned that display determines how elements relate to each other in the document flow. The key values we covered were:
| display: block |
|---|
- Elements take up the full width available and start on a new line；
| display: inline |
|---|
- Elements only take up necessary space and flow within the text
| display: inline-block |
|---|
- A hybrid that allows width/height settings while flowing inline
| display: none |
|---|
- blank; Completely removes the element from view
The Position Property:
Position controls where elements are placed relative to other elements or the viewport. We explored:
position: relative - Elements can be offset from their normal position position: absolute - Elements are positioned relative to their nearest positioned ancestor position: fixed - Elements are positioned relative to the viewport
CSS drawing
The face metaphor fits the functions of display and position. To understand concepts, I created an interactive face using HTML and CSS. This project helped me visualize how display and position work together. The face became my canvas (like absolute positioning), with features like ears, eyes, and mouth representing different positioning scenarios. position: relative on the face container creates a positioning context for absolute-positioned elements (like the ears) display: flex helps arrange facial features in an organized way The combination of different display and position values creates complex layouts
The face metaphor helped me remember that: The face itself (container) is like position: relative, providing a reference point Features like ears (position: absolute) need the face as their positioning context Eyes and eyebrows (display: flex) need to maintain their relationship with neighboring elements.