CSS Learning Note 1

CSS Learning Notes

CSS

CSS is very difficult to chew the day to learn a little, or more hands-on, to make the effect is more motivated
OK notes to start, notes just for yourself to tidy up ideas, and write some important points of knowledge, not face mask to.

The history of CSS

1994年开始,哈肯提出css的建议,然后和波特一起设计.1997年W3C接管css,1998年发布css2,之后发布CSS2.1,2011年发布CSS3,将CSS分为多个模块单独升级(搜索css spec),再然后逐渐更新各个模块到level 4.然后,应该还没有然后.LESS,SASS,PostCSS以后再学

Knock on the blackboard, draw the key

1. How to do landscape layout (float+clearfix):  
   Remember a method (back back)  
   adds a float to the child element, adds class=" Clearfix "to the parent element, and below is the CSS code for the Clearfix class  
   . Clearfix::after{ 
   Content: ";  
   Display:block; Clear:both; &NBSP
   }

   1. The size of the color can be used QQ, of course, I highly recommend a software called Snipaste (Windows), there is a desktop version, there is also the UWP version, Gray is often used. Fonts can be previewed in Word, PS or whatever.
   2. Use the developer tools, multi-use, do not write
   3. Four ways to introduce CSS: Style property, style tag, CSS link, @import
   4. Common CSS Properties (learning, occupy a pit, make up later):
      Font-family,font-size,font-weight
      Default margin and padding for UL and body
      Color,background-color,margin,padding
      Line-height
      6. Out of document Flow
      position:fixed;

Other (Learn to remember, thinking)

Cancel the underline of a label: Text-decoration:none;
Adjustable distance can be added padding
Word-break: ... You can use developer tools to see which one you choose
Document flow: The flow direction of elements within a document
Inline elements: flow from left to right, note the space generated by carriage return
Block-level elements: each row
Display:inline-block; try not to use it.
The height of the block-level element is determined by the sum of the height of the internal document flow element
Try not to use height.
The height of the inline element (more counter-intuitive):
Baseline of text, Upper and lower 
suggested row height is a little bit higher than the upper and lower lines the recommended row height for each font is different let banner under Nav: Let NavBar out of the document stream Position:fixed 
after leaving the document flow, This div will shrink (not take up a whole line), the solution: width:100% (So bad, width+padding too wide) on the rightmost side of the other,  
How to fix It???  
OK, add a topnavbar inside the Div.topnavbar-inner, add a padding around this, Not topnavbar riga around padding, or put all padding added to the new div, haha haha fix bug really good have fun  
In order to learn, I have to always imply that I  
Horizontally centered: Margin-left:auto;margin-right:auto; 
Line-height can determine the inline element height  
Span: When the row height and height are the same, the vertical center  
Hello's practice: display:inline-block;padding Line-height

CSS Drawing triangles:
With border

To block the consolidation of margin:
1 Add a div in the middle, with border or padding (not 0)
2 display:table and Display:flex
Position:absolute---will make display:inline, and become display:block;
Display:inline-block;

Continue, what is pseudo-class----
:: Before and:: After can be regarded as a span, so change display:block, perfect
So what can pseudo-classes do?

Stepping on the pit of the day: Change the fill of the icon, change to white, is the display of black, the developer tool is also black----The browser cache is the ghost
There are more uncomfortable, do not open a local http-server, request Ali's icon is file, not HTTPS request. Uncomfortable

@whhjdi  2018-04-04 21:08  字数  阅读 0The local document has been synced to the latest state.

CSS Learning Note 1