CSS Related tips

Ie10,ie11 Browser When you click the input text box, a Delete function X button appears after you enter the text.

How to remove the X button after the input text box: Add the following CSS to input text

input::-ms-clear{Display:none;}//Hint: After input is two colons, the pseudo-element requires two colons.

readonly : Non-editable, not focusable, background color default transparent, font color default to the foreground color black, the value can be passed in the request;

Chorme and IE support, Firefox does not support ReadOnly properties (defined within attributes:onfocus= "This.blur ()")

disabled : Non-editable, not focusable, background color default gray, font color default is gray, value can not be passed in the request;

The label attribute (readonly) case does not affect its effect, but the JavaScript Dom is strictly case-sensitive (readonly).

The CSS usage plugin for Firefox can display duplicate or unused CSS rules, one per page scan than AutoScan.

Firefox does not support background-position-x/y properties, use Background-position:x Y instead.

The position is a fixed element with a width of adaptive minimum width and does not occupy a whole line.

Table cells are automatically shrunk and cannot take advantage of the overflow property. The Width property is shrunk to the minimum text width even if it is set to a fixed width. If you really want to set a fixed width, you can nest p in TD and set the width for p. Or use the table-layout:fixed of a table; properties.

The first row of the table determines the cell width of the overall table. If you want the table to fit the width according to the content, just add the White-space:nowrap property. In particular, IE, other browsers will automatically adjust the width.

Change browser size?

Shorthand Considerations for Font

1, shorthand, font-size and line-height only through the slash/form a value, can not be written separately.

Font:italic Bold. 8em/1.2 Arial, sans-serif;//family between, number

2, the order can not be changed. This shorthand method only works if you specify both the Font-size and Font-family properties. Also, if you do not set Font-weight, Font-style, and font-varient, they will use the default value

The way the scroll bar does not bounce when the page is centered:

When only Margin-left is auto, the scroll bar changes its value and the page bounces.

1.body {overflow-y: scroll;}//The scroll bar appears when it is out of bounds and still retains an ugly gray scrollbar

2.wrap-outer {Margin-left:calc (100vw-100%);}//The width of the scrollbar is reserved in advance on the left

Calc () is a function in CSS3 that can be arithmetic ( space is required before and after ), and can be mixed with percentages, px, EM, REM, and other units

100VW refers to the width of the viewport, which contains the width of the scrollbar, while 100% is the width of the viewport that does not contain the scroll bar.

If the margin-left is a fixed value, it will not bounce. The scroll bar appears on the topmost layer, pressing the contents below.

display different widths at different resolutions

. abc{height:300px; border:1px solid #000; margin:0 Auto}//Universal style @media screen and (min-width:1201px) {//Set browser width not less than 1201p x when ABC displays 1200px width      . ABC {width:1200px}} @media screen and (max-width:1200px) {//Set the 900px width      of the ABC display when the browser width is less than 1200px . ABC {width:900px}}

Note: CSS code order, from large to small layout css (the larger the size of the browser to determine the width of the pre-release)

The block element occupies a row by default, and if it is not wide enough, it wraps, and you can use the White-space:nowrap property to force non-wrapping.

The child element is set to width=100%, and if there is border, the child element width exceeds the fixed width of the parent element.

box-sizing:content-box|border-box|inherit;//Specifies the method of calculating width and height of the box model.

Content-box: Width and height apply only to the content box of the element, and the inner margins and borders of the elements are drawn outside the widths and heights.

Border-box: The padding and borders specified for the element are drawn within the set width and height.

. cf:after,.cf:before {content: ""; display:table;}

. cf:after {Clear:both;}

: Before is because the table type can generate independent BFC to prevent the top margin from collapsing,

: After is responsible for clearing floating, prevent the parent height collapse, with use, code is small, high efficiency.
is the vertical horizontal center of the picture and multiline text not fixed in size?

1. Set the parent container to display:table and give the fixed height, the child container to Display:table-cell, and use the Vertical-align:middle property (in the table and in the inline element).

Or: The parent container to use relative positioning position:relative, sub-container absolute positioning, top:50%;left:50%; Margin-top and Margin-left values for the container height, half the width of the negative value.

or: parent element relative positioning, sub-container absolute positioning , Top:0,bottom:0,margin:auto, do not calculate.

To center horizontally: Use the Position:relative property or a second layer of p using the Margin:auto property.

Multi-column content is not fixed, such as high CSS Hack:

Parent container set Overflow:hidden; child element: padding-bottom:9999px;margin-bottom:9999px;

Each p increases the same height, and the increased p with less content is hidden by the parent container.

The label label's for property specifies which form element the label binds to.

Implicit and explicit contact

For example, in XHTML:

Explicit Contact:

<labelfor= "SSN" >socialsecurity number:</label><inputtype= "text" name= "Socsecnum" id= "ssn"/>

Implicit contact:

<label>date of Birth: <inputtype= "text" name= "DOFB"/></label>

The first tag is to associate the text "Social Security Number:" With the text input control ("Socsecnum") of the form's Social Security numbers in an explicit form, with the value of the for property being the same as the ID of the control , which is SSN. The second tag ("Date of Birth:") does not require a for property, and its related controls do not require an id attribute, which is implicitly connected by placing the <input> tag in the <label> tag.

The opacity attribute is not supported before IE8 and requires the use of a filter: Filter:alpha (opacity=30); /*ie 4-9 */

IE Proprietary Filter properties filter is only applicable to layout elements, that is, if you give a P set transparent with Filter:alpha (opacity=80), if you do not have P trigger haslayout, then this transparency will be invalid. You need to set zoom:1 separately; This property is triggered.

<metahttp-equiv= "x-ua-compatible" content= "ie=edge,chrome=1" >ie8 to start adding the properties, specify the browser to simulate a particular version of IE browser rendering method, Solve the IE compatibility problem.

Background-origin: Specifies where the background-position attribute is positioned relative to.

Padding-box background image is positioned relative to the inner margin box; (default)

The Border-box background image is positioned relative to the bounding box;

The Content-box background image is positioned relative to the content box.

background-position : Sets the starting position of the background image.

Default value: 0% 0% (starting from the top left of the background); If you set only one value, the other value will be "centered" (50%/center)

background-size: value (IE8 does not support this property)

Percent/length: The size of the background map relative to the length of the background area. Set only one, the second is auto (will remain proportional, not deformed).

If both are set to 100%, the background map fills the background area , but the length-to-width ratio changes accordingly.

Contain: The background area contains the entire background map in a fixed proportion of the background map. The size of the background map is enlarged by a fixed scale on the background map, and any one of its edges reaches the boundary of the background area, often leading to the other side blank.

Cover: The background map is scaled to fill the entire background area by a fixed aspect ratio, and the background image on one side is cut out of the background area.

IE8 compatible:

Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src= ' absolute path ', sizingmethod= ' scale/crop ');

Crop: The size of the background image is unchanged, and the image is clipped to fit the area size.

Image: Default value. Increase or decrease the size boundaries of the area to fit the size of the background map, which is equivalent to the overflow:visible effect.

Scale: Scales the background map to fit the area's dimension boundaries.

① can not specify any size background percent ② only suitable for single picture can not use picture Sprite and other puzzles ③ to reference absolute path picture ④ compatible ie7,8

JPG: lossy compression, high compression ratio, small size, open fast. Does not support transparent, color-rich, digital camera most commonly used format, high compression ratio.

PNG: Lossless compression, large volume.

PNG8: Support transparent/opaque, small size, 256 colors, suitable for a single color image, such as solid color, logo, icons and so on.

Png24: Support translucent, slightly larger size, 16 million colors, suitable for the color of the more rich pictures.