User:Wyn/Special Issue 26

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: iinline-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 deeply understand these 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. Key code implementation highlights: cssCopy.face-container {

   position: relative;    /* Creates positioning context for children */
   width: 400px;
   height: 500px;
   display: flex;        /* Uses flexbox for internal layout */
   flex-direction: column;
   align-items: center;

}

.ear {

   position: absolute;   /* Positions ears relative to face container */
   width: 30px;
   height: 40px;

}

.eyebrow-group, .eye-group {

   display: flex;        /* Creates horizontal alignment for facial features */
   justify-content: space-between;
   width: 100%;

} Learning Insights: Through this project, I better understood how:

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