Css related tips, csstips

Css related tips, csstips

In IE10 and IE11 browsers, When you click the input text box, a delete function X button appears after you enter the text.

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

Input:-ms-clear {display: none;} // prompt: the input is followed by two colons, and the pseudo element requires two colons.

 

Readonly: It cannot be edited or focused. The background color is transparent by default, and the font color is black by default. The value can be transmitted in the request;

Chorme and ie are supported. firefox does not support the readonly attribute (defined in the attribute:Onfocus = "this. blur ()")

Disabled: It cannot be edited or focused. The default background color is gray. The default font color is gray. The value cannot be transmitted in the request;

The label attributes (readonly) are case-insensitive, but the Javascript DOM is case-sensitive ).

 

The css usage plug-in of Firefox can display duplicate or useless css rules. Each page scan is more accurate than autoscan.

 

Firefox does not support the background-position-x/y attribute. It must be replaced by background-position: x y.

 

Position is a fixed element. Its width is the adaptive minimum width and does not occupy the entire row.

 

The table's cells automatically contract and cannot use the overflow attribute. Even if the width attribute is set to a fixed width, it is reduced to the minimum text width. If you want to set a fixed width, You can nest the div in td and set a width for the div. Or use the table-layout: fixed; Attribute of the table.

The first row of the table determines the cell width of the entire table.To adjust the table width according to the content, add the white-space: nowrap attribute. In particular, ie, other browsers will automatically adjust the width.

 

Changing the browser size?

 

 

Notes for simplified font

1. In short, font-size and line-height can only form one value through a slash/, and cannot be written separately.

Font: italic bold. 8em/1.2 Arial, sans-serif; // used between family, no.

2. The order cannot be changed. This shorthand method takes effect only when both the font-size and font-family attributes are specified. Moreover, if you do not set font-weight, font-style, and font-varient, they will use the default value.

 

 

When the page is in, the scroll bar does not beat:

When the value of margin-left is auto, the value of the scroll bar changes and the page beats.

1. body {overflow-y: scroll;} // a scroll bar appears when the body is exceeded. If the body is not exceeded, an ugly gray scroll bar is retained.

2. wrap-outer {margin-left: calc (100vw-100%);} // reserve the scroll bar width on the left.

// Calc () is a function in css3, which can perform four arithmetic operations (There must be spaces before and after), Which can be used in units such as percentage, px, em, and rem.

// 100% VW indicates the width of the viewport, which includes the width of the scroll bar. indicates the width of the viewport that does not contain the scroll bar.

If margin-left is a fixed value, it does not beat. The scroll bar will appear at the top layer and press the following content.

 

Display different widths at different resolutions

. Abc {height: 300px; border: 1px solid #000; margin: 0 auto} // general style

@ Media screen and (min-width: 1201px) {// when the browser width is set to not less than 1201px, abc displays the pixel width.

. Abc {width: pixel PX}

}

@ Media screen and (max-width: pixel px) {// when the browser width is set to not greater than pixel PX, abc displays 900px width.

. Abc {width: 900px}

}

Note: CSS code sequence, from large to small typographical CSS (determine the larger the browser width, the more before the release)

 

The block element occupies one row by default. If the width is insufficient, it will automatically wrap the line. You can use the white-space: nowrap attribute to force the line break.

 

The width of the child element is set to 100%. If border exists, the width of the child element exceeds the fixed width of the parent element.

Box-sizing: content-box | border-box | inherit; // specify the width and height of the box model.

Content-box: the width and height apply only to the content box of the element. The padding and border of the element are drawn out of the width and height.

Border-box: the padding and border specified for the element are drawn within the configured 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 used to clear the Floating State to prevent parent-level High collapse. It is used with less code and high efficiency.

What is the vertical horizontal center of an image with an unfixed size and multiple lines of text?

1. set the parent container to "display: table" and a fixed height. Set the sub-container to "display: table-cell" and use vertical-align: the middle attribute (takes effect in the table and in-row elements.

Or: the parent container must use relative position: relative; the sub-container must be absolute, top: 50%; left: 50%;Margin-topAnd the value of margin-left is the negative value of the half of the container height and width.

Or:Parent element relative positioning, sub-container absolute positioning, Top: 0, bottom: 0, margin: auto, no need to calculate.

To horizontally center at the same time: Use the position: relative attribute or set another layer of div to use the margin: auto attribute.

 

 

 

 

Css Hack with non-fixed content of multiple columns:

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

Each div increases the same height. A div with less content will be hidden by the parent container.

 

 

The for Attribute of the label specifies the form element to which the label is bound.

Implicit and explicit connections

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 explicitly associate the text "Social Security Number:" With the form's Social Security Number input control ("SocSecNum,The value of its for attribute is the same as the control id.And SSN. The second tag ("Date of Birth:") does not require the for attribute, and its related controls do not require the id attribute,They are implicitly connected by placing the <input> label in the <label> label.

 

Ie8 does not support the opacity attribute. You must use the filter: alpha (opacity = 30);/* IE 4-9 */

The filter attribute proprietary to IE is only applicable to layout elements. That is to say, if you set a DIV to be transparent, filter: alpha (opacity = 80) is used ); if you do not allow DIV to trigger hasLayout, this transparency will not work. You need to set zoom: 1; to trigger this attribute.

 

<Metahttp-equiv = "X-UA-Compatible" content = "IE = edge, chrome = 1"> attributes added starting with IE8, specify the browser to simulate the rendering mode of a specific version of IE browser to solve the compatibility problem of IE.

 

 

 

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

Position the padding-box background image relative to the padding box (default)

Border-box background image is located relative to the border box;

The content-box background image is located relative to the content box.

Background-position:Set the start position of the background image.

Default Value: 0% 0% (starting from the top left of the background image); if only one value is set, the other value is "center" (50%/center)

Background-size:Value (IE8 does not support this attribute)

Percentage/length: the size of the background image relative to the background area. Set only one, and the second is auto (the proportion remains unchanged without deformation ).

Contain: the background area is proportional to the background image.Contains the entire background image. The size of the background image is increased by a fixed proportion of the background image. Any side of the background image reaches the border of the background area, which often leads to blank space on the other side.

Cover: Specifies the aspect ratio of the background image.Zoom to fill the entire background area, One side of the background image will be removed because it exceeds the background area.

IE8 compatibility:

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

Crop: the size of the background image remains unchanged. Cut the image to fit the area size.

Image: default value. Increase or decrease the size boundary of the area to adapt to the size of the background image, which is equivalent to overflow: visible.

Scale: scale the background image to adapt to the size boundary of the area.

① The percentage of background cannot be specified at any size ② it is only applicable to a single image and cannot use image genie or other puzzles ③ reference absolute path picture ④ compatible with ie7, 8

 

JPG: lossy compression, high compression ratio, small size, and fast opening. It does not support transparency, rich colors, the most common formats for digital cameras, and a high compression ratio.

PNG: lossless compression, large size.

Png8: supports transparent/opaque, small size, and 256 colors. It is suitable for images with a single color, such as solid colors, logos, and icons.

Png24: Support translucent, slightly larger, 16 million colors, suitable for pictures with rich colors.