the css tips

1.CSS achieve single-line text centered multi-line left home

Renderings:

<style type="text/css">
.fu{
  width:380px;
  background:red;
  text-align: center;
}

.fu> P { 
   / * text-align = left: left; * / 
　text-align = left : The justify ; 
  the display : inline-Block ; 
} 
</ style > 
<-! parent element, align = left-provided text: Center; -> 
< div class = "FU" > 
   <-! child element, set-align = left text: left; Run the display: inline-Block; -> 
   < the p- > writing a single line centered multi-line left home; </ the p- > 
   < the p- > single-line text center, a plurality of rows in the left; child element, set text-align: left; center single-line text, a plurality of rows in the left; child element, set text-align: left; </ P > 
</div>

2.CSS realized justification of text alignment

Renderings:

<style type="text/css">
    .box{width:50px;background: greenyellow;}
    .box>p{text-align-last: justify;}
</style>
<div class="box">
    <p>姓名</p>
    <p>手机号码</p>
</div>

3. To achieve vertical text layout

Renderings:

<style type="text/css">
    .fu{
        width: 25px;
        line-height: 18px;
        height: 200px;
        font-size: 12px;
        padding: 8px 5px;
        box-sizing: border-box;
        word-wrap: break-word;
        }
            
    .fu> P { 
        width : 210px ; 
        Line-height : 30px ; 
        text-align = left : The justify ; 
        / * Writing-MODE: Vertical-LR; // layout from left to right
        writing-mode: bt-lr; // IE from left to right layout * / 
        Writing-MODE : Vertical-rl is an ; // from right to left layout
        MODE-Writing : BT-rl is an ; // IEs from right to left layout
         }
            
</style>
        
< Div class = "FU" > 
      < P > text single-line center, a plurality of rows in the left; child element, set the text single-line center, a plurality of rows in the left; child element, set the text single-line center, a plurality of rows in the left; sub-element, is provided writing a single line centered multi-line left home; child element, set the text single-line center, multi-line left home; child element, set the text single-line center, multi-line left home; child element, set the text single-line center, multi-line left; sub-element , centrally disposed single-line text, a plurality of rows in the left; child element, set </ P > 
</ div >

4.letter-spacing (character pitch, add the gap between each letter or characters), and word-spacing (spacing word, add a blank between each word)

Renderings:

<style type="text/css">
    .text-box{
        width: 300px;
        background: aqua;
        margin-top: 20px;
    }
    .text-box>p{
        line-height:30px;
        text-align: center;
    }
            
    Box-.text> P: Child-Nth (. 1) { 
        Letter-spacing : -2em ; // flashback
     }
            
    .text-box>p:nth-child(2){
        letter-spacing:2em;
    }
            
    .text-box>p:nth-child(3){
        letter-spacing:1em;
    }
            
    Box-.text> P: Child-Nth (. 4) { 
        Word-spacing : 1em ; 
    } 
</ style > 
< div class = "text-Box" > 
    < P > from near Hainan </ P > 
    < P > from near Hainan </ P > 
    < P > Hello! </ P > 
    < P > Wow, the this IS A Wonderful World! </ P > 
</ div >

Note: 1. The word spacing will split a word into letters; word spacing characters will not take effect.

　　　  2 . Word spacing, and word spacing can be assigned a negative value, when the value is negative, the current character flashback arrangement;

　　　　Word spacing will reduce the overlap distance.

The mouse event that the failure element: pointer-Events: none;

6.cursor property:

< Style type = "text / CSS" > 
    .curbox { 
        width : 100px ; 
        height : 100px ; 
        background : # 008000 ; 
        Cursor : pointer ; // arrow small hand
         / * Cursor: Help; + // arrow question mark * / 
        / * cursor: wait; // round in circles * / 
        / * cursor: move; // move the cursor * / 
        / * cursor: Crosshair; crosshairs // * / 
    } 
</ style > 
< div class = "curbox"></div>

7.Text-transform和Font Variant

Renderings:

<style type="text/css">
    .curbox{
        width:300px;
        height:200px;
        background: #008000;
    }
            
    .curbox>p{
        line-height:30px;
        color: #FFFFFF;
        text-align: center;
    }
            
    .curbox> P: Child-Nth (. 1) { 
        text-Transform : UPPERCASE ; // the whole into an uppercase letter
     }
            
    .curbox> P: Child-Nth (2) { 
        text-Transform : lowercase ; // all become lowercase letters
     }
            
    .curbox> P: Child-Nth (. 3) { 
        text-Transform : capitalize ; // the initials
     }
            
    .curbox>p:nth-child(4){
        font-variant: small-caps;//将字母全变成小字号的大写字母
    }
</style>
<div class="curbox">
    <p>Hello!this is a wonderful world!</p>
    <p>HELLO!</p>
    <p>Hello!this is a wonderful world!</p>
    <p>Hello!this is a wonderful world!</p>
</div>

 8. achieve a triangle

Renderings:

 

 

<style type="text/css">
    .san{
        border-color: transparent transparent royalblue transparent;
        border-style: solid;
        border-width:0px 100px 100px 100px;
        height:0;
        width: 0;
        display: inline-block;
    }
            
    .san1{
        border-color:transparent green royalblue mediumvioletred;
        border-style: solid;
        border-width:50px 50px 100px 0px;
        height:0;
        width: 0;
        display: inline-block;
    }
    .san2{
        width:100px;
        height:150px;
        background:red;
        display: inline-block;
        margin:0 -5px;
    }
</style>
<div class="san"></div>
<div class="san1"></div>
<div class="san2"></div>