Experiment four of HTML5 and CSS Foundation design

Project One summary:

1, anchor links for first set <a href= "#one" ></a> then set the jump target

2, you can set the Display:none first set: Target{display:block;} Achieve jump display;

3, about Text-indent can set the first line of text indentation

4. About Nth-child (odd) represents the singular line belonging to the parent class child: Nth-child (even) represents a even-numbered row belonging to the parent class child

5, about Display:block. The block element will have a single row, and multiple block elements will have a new row, by default, the block element width automatically fills its parent element with its parent element width, and the block element can be set to a length of width, but even if the set width is still exclusive one row The block element can set the margin and padding properties

6, about Display:inline. Inline elements do not have a single row, and multiple adjacent inline elements are arranged in the same row, their widths vary with the content, the length-width properties of the inline elements are not valid, the margin and padding of the inline elements are horizontal, and the vertical direction does not produce a margin effect.

7, Display:inline-block. Inline-block can have multiple elements (such as a div) on the same line, and can set the long and wide margins.

7, you can set the font and Text-align properties, Text-align is a very useful property, you can set the content center display, tablet, text and so on.

8, delete the default browser style *{list-style:none;outline:none}.

9, you can set up the appropriate HR to split the content.

10. The audio element needs to set the Contros property.

11, in the div related box text if you want to set the top and bottom left and right center need to set Line-height to div height, text-align set to center.

This article is from the "10935469" blog, please be sure to keep this source http://10945469.blog.51cto.com/10935469/1957996

Experiment four of HTML5 and CSS Foundation design