Proficient in CSS and HTML design patterns chapter 2 (separated content)

I, Split

Leftter-spacing: Add spaces between letters

Word-spacing adds spaces for word parts (Chinese words are not recognized because Chinese words do not have the word concept)

Text-indent the first line of the block element of the Terminal

Text-align: justify achieves the effect of alignment on both ends

Note: margin-top, margini-bottom, text-indent, text-align only applies to block elements.

Ii. Block-based

In short, blockout refers to the display of inline elements as block elements, so that inline elements can also use the styles of margin, padding, text-align, width, height, border, and many other block elements.

Example:

This is an inline element displayed as a block. Its first line is indented, and it has an offset vertical margin. Offset vertical margin. Offset vertical margin. Offset vertical margin. Offset vertical margin. Offset vertical margin. Offset vertical margin. Offset vertical margin.

 

 

3. Non-Package

Wite-space: nowrap rules prevent text from being wrapped. You can apply wite-space: nowarp to any inline element that you do not like to be wrapped.

Value	Description
Normal	Default value. The blank space is ignored by the browser.
Pre	The blank space is retained by the browser. The behavior is similar to the <pre> label in HTML.
Nowrap	The text will not wrap, and the text will continue on the same line until the <br> label is encountered.
Pre-wrap	The blank character sequence is retained, but the line feed is normal.
Pre-line	Merges the blank character sequence, but retains the line break.
Inherit	Specifies that the value of the white-space attribute should be inherited from the parent element.

Iv. filling content

Inline elements: padding-left and padding-right fill the left and right sides of the blank, line-height to change the height of each row. It cannot be filled with padding-top or padding-bottom.

Block Element: display: The block uses padding-left, padding-right, padding-top, and padding-bottom to fill the upper, lower, and left spaces.

5. inline Blank

Use an empty <span> </span> to set its margin-left: 2em to a controllable blank space.

6. Disconnected rows

The distance between the row and the row. <br/> move the content to a new row. The height after the line break is determined by the content in the row,

Double line feed: <br/> <br style = "line-height: 15px"/> the first line feed is controlled, and the second line feed is assigned a value to control the number of extra spaces.

Broken Line: An empty <span> can be inserted and displayed as a dilay: block element. The line feed height can be controlled through margin-top: value.

7. inline horizontal lines

Use border and backgound to set the horizontal line

Note: background-position controls the background image from the starting position of X and Y of the element. In this way, an image can be moved in conjunction with JS.