Associate background
If the document is long, so when the document scroll down, the background image will also scroll. When a document to scroll to a position beyond the image, the image will disappear.
You can background-attachment property to prevent such rolling. By this attribute, the image can be declared with respect to the visible region is fixed (Fixed), are not affected by the rolling of:
body
{
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixe; }
The following link can view the results
http://www.w3school.com.cn/tiy/t.asp?f=csse_background-attachment
background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;
Character conversion
text-transform property case of text processing. This property has four values:
- none
- uppercase
- lowercase
- capitalize
The default value is none of the text without any changes, the use of the original source document case. As the name suggests, uppercase and lowercase convert text to all uppercase and lowercase characters. Finally, capitalize only uppercase for the first letter of each word.
As a property, text-transform might not matter, but if you suddenly decide to capitalize all h1 elements, this attribute is useful. Do not have to individually modify the contents of all h1 elements, simply use text-transform make this change for you
Processing whitespace
white-space property will affect the user agent, the treatment of the source document space with newline and tab characters.
By using this property can affect the white space between words and between a text browser processing line mode. To some extent, the default XHTML processing has been completed whitespace handling: All it will comply with and as a blank space. So given the following markup, which is displayed in the Web browser displays only one space between each word, while ignoring newline elements
Value pre
However, if the white-space pre set, the elements affected by this attribute, the whitespace handling is somewhat different, it behaves like XHTML pre elements of the same; whitespace is not ignored.
If the white-space property is pre, the browser will note that extra space, or even enter. In this respect, and only in this respect, any element can be the equivalent of a pre element.
Nowrap value
Nowrap contrast value, it prevents wrap text elements, unless an element br. Nowrap in CSS is very similar to using HTML 4 with <td nowrap> a table cell will not be provided to wrap, but the white-space values may be applied to any element.
Value pre-wrap and pre-line
CSS2.1 introduced the values pre-wrap and pre-line, which in previous versions of the CSS is not. Role of these values is to allow more control over the creation process whitespace.
If the white-space element is set to pre-wrap, then the text element may remain empty character sequence, but the text line will normally wrap. If set to this value, the source text line separators and row separators are retained generated. pre-line with pre-wrap Instead, like a normal text will merge whitespace sequence, but retains the newline.
Vertical center - the use position and transform
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}