CSS learning methods

  1. Open dry. Come across a problem and solve it.
  2. Encounter not the effect, search to do a demo down.
  3. When you see a better way to write it, do a demo and write it down.
  4. The demo link is in this article.

Experience writing pages

  1. Write the HTML structure first, and then add CSS to the structure (you can use the style addler of the web page to determine the effect and copy the code to the CSS file)
  2. Lay out the layout and style specific elements from the inside out.

CSS reset file

Resetting default styles

/ * http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role resetfor older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: ' ';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
Copy the code

Remove the floating

As soon as the float property is set, you must clear the float (plus class clearfix) on the parent element of the element that sets the float property.

.clearfix::after{
    content:"";
    display:block;
    clear:both;
}
Copy the code

The element height

  1. The height of a div (block-level element) is determined by the sum of its internal document flow heights.
  2. The span height is determined by both the font height and the border given by the browser.
  3. The document flow:
    • Block-level elements: From top to bottom, a block-level element occupies a row.
    • Inline elements: from left to right, wrap if not wide enough. (English words are treated as a whole, not wrapped, word-break:break-all; Manual line wrap)

The box model

Box model: A model that compares an element to a box.

There are two types of box models:

  1. The content – box (default)
    • In the content-box, width and height only include the width and height of the content, excluding the width and height of the padding and border.
    • Width = width of content, height = height of content. The width and height do not include the border and padding of the content
  2. border-box
    • The width and height attributes include content, inner margins, and borders, but not margins.
    • Width = border + padding + content width, height = border + padding + content height.

You can change the type of box model using the box-sizing property.

Clears space text nodes after elements such as li

  • Arrange with FlexliThe element
  • Font-size :0; If the child element has text, you need to manually add font size to the child element
  • HTML comments: in</li>After that, add an empty comment character<! -- -->
  • Using negative margins, the worst method, is not recommended.
  • Newline is written</li>ctrip< / li > a new line