CSS3 Common attributes (iii)--user interface, text, two box models

User Interface--column

About the user interface, we first understand the block elements in the text, the browser rendering, this is actually very obvious, all the text content in the block elements from left to right a word arrangement, full, from top to bottom row of rendering ... Sometimes, however, page requirements are presented in a way that resembles a newspaper, where a piece of text is displayed in a multi-column layout.

The user interface uses the following examples:

. Font{width:300px;Height:300px;Border:1px solid #000;margin:0px Auto;Column-count:3;/*Define Quantity*/Column-width:1em;/*define the minimum width for each column*/Column-rule:1px dotted Red;/*defines the style of the spacing fill, without occupying a position*/Column-gap:0em;/*define spacing for each column*/Column-fill:Auto;/*defines whether the display height of each column is balanced*/Overflow:Hidden;}

　　

Text Model--text

In CSS3, using its new features, to add shadow to the text, specify the line-wrapping mode, the outline of the text and other effects, greatly compensate for the shortcomings of the CSS2.

Next, I'll be a detail of each CSS3 Text property

Text-overflow: Specifies what happens when the text overflows the containing element, a more important value of this property is ellipsis, which uses ellipses to represent the overflow text.

Text-fill-color: Specifies the fill color for the text.

Text-stroke: Text strokes, abbreviations, expanded as follows two.

Text-stroke-width: The width of the text stroke.

Text-stroke-color: The color of the text stroke.

Text-shadow: Add a shadow to the text, followed by four values, offset up and down, left and right offset, feathering, color.

Word-break: Rules for non-Chinese-Japanese-Korean text line-wrapping.

Word-wrap: Allows splitting of long, indivisible words and wrapping to the next line.

Box Model--box-sizing

There are two types of box models, one is that the padding and border of the box are scaled outward, and the other is expanded inward, that is, the second box model, padding, and border do not make the element occupy a larger position in the page.

At present, the main mainstream browser, the default box model is the first, want to let the element implementation of the second box model, only need to add "Box-sizing:border-box" in the style sheet of the element; Can.

CSS3 Common attributes (iii)--user interface, text, two box models