Skip to main content

Qurky features of HTML and CSS

1. spaces between inline-block and inline element

a. you can use zero font-size to eliminate the white space. Then reset back the font-size in the inner element to 1 rem.
b. comments out the white space between the inline-block element.


2. methods to clear float.


Method One
.group:after {
     display: block
     content: ""
     clear: both
}

 Method Two
add a empty div element after the floated element, then add a "clear: both" property.

 Method Three
Use "overflow: hidden" within the parent container element. This creates a block formatting context that will cause the parent to expand to contain the width and height of the floated child element.

3. static, relative, absolute, fixed positioning
Static element is the default position. All element are in the document flow.

Relative position element are in the document flow. But accept offset property to move against its parent container.

Absolute position is taken out of normal document flow. It is position against closest relatively position parent. Accept offset property to move against its position.

Fixed position stays is positioned against viewport. Stays in the view

4. box-sizing

border-box : will factor in padding, content and border into actual width.


5. overflow: hidden/ overflow: auto to make sure a block is in its own column.

6. text-align property
It will align the content's inline and inline-block element to center, left , right or justify.

7. block element vs inline element

a. inline element do not have margin top and bottom. Inline element have padding, border top and bottom but no effect on other element on the document flow. Inline do not have width and height. Its width is whatever content it is taking up. Inline element will stack with other element on the page, side by side (stay "inline").

b. Block element has a width and height and margin and padding property. Block element will take up full width of the document unless it is floated. Floated element are always block element. Block will create a newline from previous element and a create a newline for subsequent element.

c. Inline-block will stay "inline" with other element in the document. But have width, height, padding , margin and border property.

 8. CSS Media Queries
The syntax is generally @media (max-width: 700px)

9. em vs rem
em is based on the font-size of parent element. rem is based on outer most font-size.




Comments

Post a Comment

Popular posts from this blog

Problem Solving - Refactored

I am going to outline how I approach problem solving. The relative importance and the amount of effort/time required for each is stated as a percentage beside each topic. I borrowed some idea from George Polya's How to Solve It Thoroughly Understand the Problem (30%) When encountering hard problem , you need to deeply understand the problem at hand. Take a paper and list down all known facts and data and what the question is trying to find. Sketch out the problem if applicable. Visualize the problem in your head. A lot of times, we only have to understand the problem well, then the solution will obvious. Have a Plan (20%) You need to have an outline of how you are going to tackle the problem. You need to have a logical pathway that will ultimate produce outcome (nothing to do with coding syntax yet). Without a plan, you are just randomly poking around and got lucky. No hard problem ever gets solved without a plan. Plan using pseudo-code, pen & paper or flowchart. Use wh
5 comments
Read more

My Burnout Experience

I want to share with you my experience of burning out. After registering with Launch School, I am extremely excited about my programming journey. I studied for 10 to 12 hours a day, memorizing fact, trying out practice problems, understanding programming concepts. It was fun and exciting and I love seeing myself growing from nothing in programming to something more. After about 3 months, thing starts to change. I started noticing myself paying less attention to details. I find myself skimming through the course material. I skip "Further Exploration" in the practice problem. I am more interested to study just to pass the assessment rather than truly mastering the concept. It was a gradual burning out process but I continue to study for 10 to 12 hours a day through sheer grit. It felt like doing house chore or working a day job that you don't like. One particular morning I woke up, and I remember this deep feeling of dread because I can anticipate that the next 10 to 1
Post a Comment
Read more

Sharing my Weakness

It makes sense to know about your weakness and do something about it. Here are my known weaknesses uncovered during my time in Launch School. 1. I don't like to refactor my code   - Your first draft will not be perfect. It works but it may not be efficient/readable/best practices. You final code will almost always be better than your first draft. - It is easier to separate the task between writing code that works and refactor later to make it efficient/readable/best practices. - If you refactor your code often, over time you will discover your bad habits and change it. 2. I don't like to read other people's code - There are more good programming practices in other people than in you (especially for beginners like me). - To be good , you need to know more than one pathways to solve a programming problem (and there are always more than one way). Then you can judge their merit. - Reason for dislikes    1. It is considerably harder to read code than to write one (be
1 comment
Read more