Web front end Few small knowledge point notes

1, CSS implementation width is the percentage of the box as a square

<style= "width:50%;p adding-bottom:50%;height:0px;background: #ccc;" ></ Div >

Just make sure that the percent value of width is the same as the percent value of padding-bottom

2, the mobile phone side of the judge is horizontal screen or vertical screen

function checkorient () {?    if (window.orientation = = 0 | | window.orientation = =) {?        Alert (' vertical screen ');?    } else if (window.orientation = = | | window.orientation = = -90) {?        Alert (' horizontal screen ');?}    } Add Event Listener? AddEventListener (' Load ', function () {?    } Checkorient ();?});

3, non-fixed line number of text vertical center

Requirements: A box div has a paragraph of text, the number of lines of text is not determined, how to achieve the text in the box vertically centered
Method 1:
Use two CSS properties on a div box: display:table-cell;vertical-align:middle;
Method 2:
Place another box P element inside the div box, placing the text in the P element,
Then div box set: position:relative;
P element Settings: Position:absolute;top:50%;transform:translate (-50%);

4. Dynamic Regular Calibration

function Dynamicreg (text) {?    
Eval ("var reg =/^" + text + "$/;");?    
Console.log (reg);?    
Console.log (reg.test (' 123456 '));?
}??
Dynamicreg (' over ');   // false?
Dynamicreg (' 123456 ');   // true

5, not fixed width high box horizontal vertical Center

. Parent {    width:60%;    height:500px;    position:relative;    border:1px solid #000;}. box{    width:30%;    height:20%;    Position:absolute;    top:0;    right:0;    bottom:0;    left:0;    Margin:auto;    Background-color:blue;} <  class= "parent">    <class = "box" ></ Div > </ Div >

6, the mobile device to achieve the effect of rolling rebound

-webkit-overflow-scrolling:touch; After the finger leaves the screen, it also scrolls a distance-webkit-overflow-scrolling:auto;    Stop scrolling immediately after your finger leaves the screen

7. Shadow effect around Box

div {    box-shadow:0px 0px 15px #000;}

8. Regular 验证是否是汉字或全角

/[^\x00-\xff]/g.test (' abc ')   //false?
/[^\x00-\xff]/g.test (' expression ')//true
/[^\x00-\xff]/g.test ('. ') False
/[^\x00-\xff]/g.test ('. ')//true

Web front end Few small knowledge point notes