CSS Layout

This tutorial teaches the css fundamentals that were collected by these sites as follows and maybe keep on updating in the future.

And I may not told you what is a box model such questions. You should know the reason.

learnlayout
ruanyifeng

Position

• let us get started with the static.

  The static value which belongs to the position attribute is the default value.

  And we will told you that what is the positioned mean, now you just need remember it.

  ---

• The next position attribute we will study is the relative value.

  And relative behaves the same as static unless you add some extra properties.

  Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position.
  Other content will not be adjusted to fit into any gap left by the element.

  ---

• Let us have a break, and give you a new conception: normal flow , which confused me that was translated document flow(文档流) in Chinese.

  Do not consider it as a complex conception, just as it`s denotation which means that the section was displayed from left to right，up to down.

  It`s a traditional HTML layout.

  There are three properties will escape from normal flow, we will talk about it next, float, fixed, ans absolute.

  There is another conception text flow, but we will not talk about it today.

  If you want to know more about it, just have a google.

  ---

• Well, let us press on.

  We will go ahead with the fixed property, and you just need to remember three points.

  • Firstly, a fixed element does not leave a gap in the page where it would normally have been located.

  • Secondly, a fixed element does not leave a gap in the page where it would normally have been located.

  • Thirdly (Ok … three points), a fixed element is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.

  ---

• “Hold on, you guys will get the endpoint soon !”

  • The last station is absolute property. And you just remember one thing. Year, really one.

  • Absolute behaves like fixed except relative to the nearest positioned ancestor instead of relative to the viewport.

---

Float

• We mention it on the above content just now.

• Simple introduction:

  Float is intended for wrapping text around images.

• Year, the above is true, but we should get to know more about it.

• And you should know this attribute clear which was related to float attribute closely.

• I can not describe it very well, so I suggested you have a look on this link: The clear attribute

• And I am very glad to receive your answer about this attribute if you guys wanna to provide this post.

• You may got a boring question when you use the float: when the img is larger than the div block, the img will get overflow, here a method seems weird but useful.

   .clearfix {
    overflow: auto;
  }

• Then the basic tasks were done. I will show you a float layout example to make you understand it. float example

---

Self-Basic-Attribute

• The interesting thing is the width and height.

• To avoid repetition, I just come up with the width to make tutorial.

• percent width I think it is a very useful attribute.

• Because you did not need to fix the attributes of children when you change the parent width as you used percent width not specific data.

• media queries. It is a good method to resolve the Responsive Design layout.

• Responsive Design is the strategy of making a site that responds to the browser and device that it is being shown on… by looking awesome no matter what.

• Max-width, as it means. It can control the max-width, so you will not get the boring when the browser make the change behavior.

• box-sizing, we know that box border will have a change size on eyes when it has the attribute as border, margin, padding. But the box-sizing will fix it.

---

Display

• Every element has a default display value depending on what type of element it is.

• The default for most elements is usually block or inline.

• A block element is often called a block-level element.

• An inline element is always just called an inline element.

block element

◎ address
◎ blockquote
◎ center
◎ dir
◎ div
◎ dl
◎ fieldset。。。
◎ form
◎ h1 and h[2-6]
◎ hr 
◎ isindex
◎ menu 
◎ noframes 
◎ noscript 
◎ ol 
◎ p 
◎ pre 
◎ table 
◎ ul

inline element

◎ a 
◎ acronym 
◎ b 
◎ bdo  
◎ big  
◎ br  
◎ cite  
◎ code 
◎ dfn  
◎ em  
◎ font 
◎ i  
◎ img  
◎ input  
◎ kbd 
◎ label 
◎ q  
◎ s  
◎ samp 
◎ select  
◎ small  
◎ span  
◎ strike  
◎ strong  
◎ sub  
◎ sup  
◎ textarea 
◎ tt  
◎ u  
◎ var  

variable element
The variable element is depend on 
the context display block on inline.

◎ applet - java applet
◎ button - button
◎ del - delete text
◎ iframe - inline frame
◎ ins - insert text
◎ map - graphic area
◎ object - object
◎ script - client script

• There are plenty of more exotic display values, such as list-item and table. Here is an exhaustive list.

Flex(mvp)

As you can see, the css was so difficult to control use, so I recommend you guys these frameworks link to make your work easier.

But there is a particular character we will take it as today mvp, here are two tutorials were post by ruanyifeng.

flex samples

flex introduction

• Show you an old but useful info image.
  

• Two points here need to be remembered firstly.

  • Every container could has flex, but if inline, try inline-flex.

  • If you set the flex on the element, the children will lose the float、clear and vertical-align properties.

---

• Tips: Flex container has main axis and cross axis. Both of them have the start and end point.

---

• Six container properties.

flex-direction
decide the main axis.(The item orientation)
flex-direction: row | row-reverse | column | column-reverse;

flex-wrap
decide how to get a newline
flex-wrap: nowrap | wrap | wrap-reverse;

flex-flow
just flex-direction and flex-wrap shortening
flex-flow: <flex-direction> || <flex-wrap>;

justify-content
decide the items alignment on the main axis

align-items
decide the items alignment on the cross axis
align-items: flex-start | flex-end | center | baseline | stretch;

align-content
decide the axis alignment 
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

• Six items property

order
decide the items orientation order.
The smaller the value, the more forward the arrangement.
order: <integer>; /* default 0 */


flex-grow
decide scale of growth, zero means will not enlarge even there are space.
flex-grow: <number>; /* default 0 */

flex-shrink
decide scale of shrink, one means will shrink while not get enough space.
flex-shrink: <number>; /* default 1 */

flex-basis
define the main size before the extra space was distributed.
flex-basis: <length> | auto; /* default auto */

flex
shortening for the follow properties
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

align-self
It allows the item has an special property not like brothers. 
Auto means inherit from parents, but mean like stretch if no parents.
align-self: (default)auto | flex-start | flex-end | center | baseline | stretch;

• As you can see, I do not explain these properties clearly, so you really should have a look on the two links:

flex samples

flex introduction

---

Those are all tonight learning, good luck everyone.