html & css まとめメモ

I'm revicing the home page of my company, now.
It helps me study again HTML & CSS deapely.

The next are re-findments of HTML & CSS.

The modern style for smart phones is lectured in w3scholls.com.
And the Japanese explanations of HTML & CSS is とほほのＷＷＷ入門
More, PHP is here, ... etc, etc,...

I always use Chrome web browser on iPhone, Mac and Windows-PC because it has a developper tools for PC.
It is usefull for debugging and comprehension.

I have finished top page and contact page with W3.CSS (modern cool style) & jQuery (easy to parse tags to change attribute and easy to do Ajax). It's cool!.

But there are many other pages to waiting my modification.

I study the size & position of CSS.

The margin, border and padding is outside of the width and height of object like DIV tag.

What is the width and height of object? it is controled by box-sizing, (border-box, padding-box, content-box(default));

We must know unis, px, %, em, ...;

Every tag has original properties, but I can't know them clearly. So To start from all zero (margin:0px, border:0px; and padding:0px) is faster than to try and error with worry.

The position of object is the biger mystery of HTML.

The style of "position: fixed" is usefull for a menubar. And I strongly recommend you to use "position: fixed" unit "px" for the width and height of objects when you use DIV tag with "position: fixed".

In a menubar, the menu button may be layouted many ways.

If you want to align an object to left or right, top or bottom, please use "position: absolute; left: 0px", left/right/top/bottom.

If you want to align an object to center before knowing its width, please use "text-align: center".

If you want to align 5 objects with the same width, please use "width:20%", but use of  "width:20%" and "position: absolute;" at the same time will cause chaos.

If you want precisely to control the width or height of an object, "calc(expression)" is good way.

If you want precisely to control the position of an object, "position: relative: top/bottom/left/rigt" is good way.

The font is the biggest mystery of HTML.
I can't know the real size of each absolute-size of font-size.

length := 24px | ...

absolute-size := xx-small | x-small | small | medium (default) | large | x-large | xx-large

relative-size := larger | smaller 

percentage := 80% 

Oh my goodness. The struggles will be continued.