"CSS" small coup, a variety of problems summarized methods to deal with

1. Automatic ellipsis interception for div text overflow

           Overflow:hidden; /* More than part not shown */
Text-overflow:ellipsis; /* More than part of the dot represented by */
white-space:nowrap;/* does not change the line */

2. The interception effect of the specified number of rows

       Text-overflow:ellipsis;　　　/* Some examples need to define this property, actually omit *  /display:-webkit-box;  -webkit-line-clamp:2;/* specifies that more than two lines of partial truncation */-webkit-box-orient:vertical; Overflow:hidden;  word-break:break-all;/* the line at any place * *　　  

3. Modify the default radio button style

The default radio style is very ugly, and it's not easy to layout all of the styles or colors that we sometimes need to modify for customization. The basic is divided into five steps:

The first step: our HTML structure:

      <input id= "word" type= "Radio" Name= "a"/><label for= "word" >word</label>      <input id= "Excel" Type= "Radio" Name= "a"/><label for= "Excel" >excel</label>

The second step: Create a pseudo-element, as a beautiful version of the radio button, first to add some style to the pseudo-elements, where you can customize the style effect

Input[type= "Radio"] + Label::before {    content: "\A0"; */* Do not wrap space */    display:inline-block;    Vertical-align:middle;    font-size:18px;    width:15px; /* Button size when not selected *    /height:15px;/* Button size when not selected *    /margin-right:8px;/* button and text spacing */    border-radius:50%;    border:1px solid #01cd78;    text-indent:10px;    Line-height:1;}

Step three: Style effects when the button is selected

Input[type= "Radio"]:checked + label::before {    background-color: #01cd78;    Background-clip:content-box;    padding:2px;    width:11px; /* Button Size after selected */    height:11px;/* Button size after selected */}

Fourth Step: Hide the original button

Input[type= "Radio"] {    position:absolute;    Clip:rect (0, 0, 0, 0);}

Fifth step: Reference: www.cnblogs.com/xinjie-just/p/5911086.html

Analysis of 4.inline-block attribute spacing phenomenon

This issue is set for style properties Displayinline-block. The common practice is applied when the Li attribute is set horizontally after the gap occurs.

To speak according to the figure;

For example, it is obvious that the second line gap is smaller than the first line, the first behavior Gap sample, I originally set two Li spacing between 15 should be the second line effect, but in the HTML write code:

  <li><div> party in what documents but still feel very hurt. Jpg</div><input id= "Radio4" type= "Radio" name= " Fileradio "><label for=" Radio4 "></label></li>  <li><div> What documents did the party enter but still feel very hurt. Jpg</div><input id= "Radio5" type= "Radio" name= "Fileradio" ><label for= "Radio5" > </label></li>  <li><div> party into what documents but still feel very hurt. Jpg</div><input id= " Radio6 "type=" Radio "name=" Fileradio "><label for=" Radio6 "></label></li>

The effect is the first line effect, the second line is to use JS to add the Li is the correct margin-right:15px. And the second line is definitely a part of the void. Then I modify the HTML code again:

<li><div> party in what documents but still feel very hurt. Jpg</div><input id= "Radio4" type= "Radio" name= " Fileradio "><label for=" Radio4 "></label></li><li><div> What documents did the party enter but still feel very hurt. Jpg</div><input id= "Radio5" type= "Radio" name= "Fileradio" ><label for= "Radio5" > </label></li><li><div> party in what documents but still feel very hurt. Jpg</div><input id= "Radio6" Type= "Radio" name= "Fileradio" ><label for= "Radio6" ></label></li>

The effect is:

So there is no gap, see the problem, is because the code element tag between the space caused by. But we have not all the code is written in line, one is not easy to read not easy to maintain, the second is very messy.

Solution Summary:

1. Write a line (not advisable is also a way, haha ha)
2. The second is that there are rules branch branches, such as I can write this:

                                    <li><div> Party's into what the text has been very hit. Jpg</div><input id= "Radio1" type= "Radio" name= "Fileradio" ><label for= "Radio1" ></label></li><li><div>                                    What documents did the party enter but still feel very hurt. Jpg</div><input id= "Radio2" type= "Radio" name= "Fileradio" ><label for= "Radio2" > </label></li><li><div>                                     party in what documents but still feel very hurt. Jpg</div><input ID = "Radio6" type= "Radio" name= "Fileradio" ><label for= "Radio6" ></label></li>

3. Use comment statements to remove spaces

                                   <li><div> Party's into what the text has been very hit. Jpg</div><input id= "Radio1" type= "Radio" name= "Fileradio" ><label for= "Radio1" ></label></li><!--                                --><li><div> What documents did the party enter but still feel very hurt. Jpg</div><input id= "Radio2" type= "Radio" name= "Fileradio" ><label for= "Radio2" > </label></li><!--                                --><li><div> The party's papers, but still feel very hurt .jpg</div> <input id= "Radio6" type= "Radio" name= "Fileradio" ><label for= "Radio6" ></label></li>

4. Do not write the end tag, that is, Li's end tag does not write:

                                <li><div> Party's into what the text has been very hit. Jpg</div><input id= "Radio1" type= "Radio" name= "Fileradio" ><label for= "Radio1" ></label>                                <li><div> What documents did the party enter but still feel very hurt. Jpg</div ><input id= "Radio2" type= "Radio" name= "Fileradio" ><label for= "Radio2" ></label>

5. The problem of style is solved by style, haha use the text spacing attribute letter-spacing. Just set it to 0px on the gap element, and then see how many more elements are set to the parent element of a simple element with a negative value. For example, this is the LI element setting {letter-spacing:0px;} and then setting ul{letter-spacing:-8px} on the parent element.

5.calc Computed Properties

Left and right part of the layout of a portion of the proportion layout, this time is not very tangled, part of the need for fixed width, the other part of the browser size to adapt to automatically.

The perfect calculation is that the adaptive section uses a hundred-percent layout, but not 100%, because it is already occupied with a portion of the fixed value. This time you need calc to calculate the properties, you can write: 100%-fixed value so the specified width, equivalent to the width of the property here wrote a hundred percent layout just minus some values.

. content_left {    background-color:cadetblue;    width:200px;    height:100%;    border:1px solid #D0D6D9;}. content_right {    background-color:cornflowerblue;
    /* Note Use the calculation symbol before and after the space *    /Width:calc (100%- 215px);    height:100%; margin-left:10px; border:1px solid #D0D6D9;}  

6. Float layout stepfather element does not have an adaptive height

This is the actual project found in the problem, in a large div placed two sub-div elements to the left and right layout: float:left; and float:right; then the parent Div does not fit the child element height, the parent element height is 0;

Workaround: Parent Element Div added: Overflow:hidden;

7. Switch different IE document modes according to the page

Most of the time we don't pay attention to low-version document switching because new projects rarely have to I8 below. Unfortunately, the old project integration or old project expansion new features.

For example, the old project only support IE8 below, and your new page is IE9 start, congratulations you pull haha. You will not let the user go to press F12 according to different pages to switch document mode is too silly. What to do, of course, we automatically switch.

We use the X-ua-compatible property: The new attribute added after IE, used to switch the mode of IE browser rendering. (Of course first of all ensure your environment exists)

For example, the situation I mentioned above can be handled as follows:

Older versions are added in the head tag:

The new version is added in the head tag:


Another way is to always use the latest version so it is not afraid of browser upgrade:


8. Location of border properties
When we are laying out, we tend to create a border that causes the layout to get out of place, which is where the border is created. The borders are generated in only two places, within the content, outside the content, see below.

Box-sizing: This is a CSS3 property where he controls the position of the bounding rectangle to produce.

Box-sizing:border-box: generated in the content, simply say if you set a div width and height are 50px, and then set the border widths of 1px, if you set the properties, then you can use the content of wide pixels is 48px= 50PX-2PX (around two borders), high same.

Box-sizing:content-box: Outside the content, this good understanding, is also the most common we see, is to draw a border outside the content. For example or above, after setting the 50px, you can use the content of wide pixels or 50 will not change. This is the reason that sometimes we set two side elements to add equal to the parent element but the second one will be squeezed.