css related tips

When clicking the input text text box in IE10 and IE11 browsers, an X button with a delete function will appear after entering the text.

How to remove the Two colons, pseudo-elements require two colons.

readonly

: cannot be edited, cannot get focus, the background color defaults to transparent, the font color defaults to the foreground color black, the value can be passed in the request; chorme and ie Supported, Firefox does not support the readonly attribute (defined in the attribute:

onfocus="this.blur()"

)

disabled

: cannot be edited, cannot obtain focus, The background color defaults to gray, the font color defaults to gray, and the value cannot be passed in the request; The case of the

tag attribute (readonly) will not affect its effect, but the DOM of js is strictly case-sensitive (readOnly ).

Firefox’s css usage plug-in can display repeated or unused css rules. Scanning each page once is more accurate than autoscan.

Firefox does not support the background-position-x/y attribute, so use background-position:X Y; instead.

For elements whose position is fixed, the width is the adaptive minimum width and will not occupy a whole line.

The cells of the table will automatically shrink and the overflow attribute cannot be used. Even if the width attribute is set to a fixed width, it will shrink to the minimum text 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; attribute of the table.

The first row of the table determines the cell width of the overall table. If you want the table to adapt its width according to the content, just add the white-space:nowrap attribute. Especially IE, other browsers will automatically adjust the width.

Change browser size?

Notes on the abbreviation of font

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

font: italic bold .8em/1.2 Arial, sans-serif; // Used between families, number

2. The order cannot be changed. This abbreviation method can only be used at the same time It only works when the font-size and font-family properties are specified. Moreover, if you do not set font-weight, font-style, and font-varient, they will use the default values

Method to prevent the scroll bar from jumping when the page is centered:

Only When margin-left is auto, the scroll bar will change its value and the page will jump when it appears.

1.body { overflow-y: scroll; } //The scroll bar will appear when the overflow is exceeded, and an ugly gray scroll bar will remain when it is not exceeded

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

//calc() is a function in css3 that can perform four arithmetic operations (before and after There must be spaces ), and you can use percentage, px, em, rem and other units in combination

// 100vw refers to the width of the viewport, including the width of the scroll bar; and 100% is the viewport without scroll bars width.

If margin-left is a fixed value, it will not jump. The scroll bar will appear on the top layer, suppressing the content below.

Different resolutions display different widths

.abc{ height:300px; border:1px solid #000; margin:0 auto} //通用样式
@media screen and (min-width: 1201px) { //设置了浏览器宽度不小于1201px时 abc 显示1200px宽度
      .abc {width: 1200px}
}
@media screen and (max-width: 1200px) {//设置了浏览器宽度不大于1200px时 abc 显示900px宽度
      .abc {width: 900px}
}

Note: CSS code order, typesetting CSS from large to small (the larger the width of the browser, the higher it is)

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

Set width=100% for the child element. If there is a border, the width of the child element will exceed the fixed width of the parent element.

box-sizing: content-box|border-box|inherit;//Specify the way the box model calculates width and height.

content-box: Width and height apply only to the element's content box. The element's padding and borders are drawn outside the width and height.

border-box: The padding and border specified for the element will be drawn within the set width and height.

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

.cf:after {clear: both;}

：before This is because the table type can generate an independent bfc to prevent the top margin from collapsing.

: after is responsible for clearing floats and preventing the parent height from collapsing; used together, the code is less and the efficiency is high.
How to vertically and horizontally center images with variable sizes and multi-line text?

1. Set the parent container to display:table and give it a fixed height, set the child container to display:table-cell, and use the vertical-align:middle attribute (in the table and inline elements takes effect in).

Or: the parent container should use relative positioning position:relative; the child container should use absolute positioning, top:50%;left:50%;margin-topand margin-left The value is the negative half of the container's height, width.

Or: Relative positioning of the parent element, absolute positioning of the child container , top:0, bottom:0, margin:auto, no calculation required.

If you want to center it horizontally at the same time: use the position: relative attribute or add a layer of p and use the margin: auto attribute.

Multi-column content is not fixed and equal height css Hack:

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

每个p都增加相同的高度，内容少的增加的p会被父容器hidden掉。

  label标签的for 属性规定 label 与哪个表单元素绑定。

隐式和显式的联系

例如，在 XHTML 中：

显式的联系：

<labelfor="SSN">SocialSecurity Number:</label>
<inputtype="text" name="SocSecNum" id="SSN" />

隐式的联系：

<label>Date of Birth: <inputtype="text" name="DofB" /></label>

第一个标记是以显式形式将文本 "Social Security Number:" 和表单的社会安全号码的文本输入控件 ("SocSecNum") 联系起来，它的 for 属性的值和控件的 id 一样，都是 SSN。第二个标记 ("Date of Birth:") 不需要 for 属性，它的相关控件也不需要 id 属性，它们是通过在 2e1cf0710519d5598b1f0f14c36ba674 标签中放入 d5fd7aea971a85678ba271703566ebfd 标签来隐式地连接起来的。

 ie8之前不支持opacity属性，需要使用滤镜：filter:alpha(opacity=30);  /* IE 4-9 */ 

IE专有的滤镜属性filter是只适用于 layout 元素的，也就是说如果你给一个p设置透明用的是filter:alpha(opacity=80);如果你没有让p触发hasLayout，那么这个透明将无效。需要另外设置zoom：1；这个属性进行触发。

 a32b6b784e0bd382bf2765eccb4a2120IE8开始添加的属性，指定浏览器去模拟某个特定版本的IE浏览器的渲染方式，解决IE的兼容性问题。

   background-origin: 规定 background-position 属性相对于什么位置来定位。

padding-box      背景图像相对于内边距框来定位；（默认）

border-box背景图像相对于边框盒来定位；

content-box背景图像相对于内容框来定位。

background-position ：设置背景图像的起始位置。

默认值：0% 0%（从背景图的左上点开始）；如果只设置一个值，另一个值将为“居中”（50%/center）

background-size:取值（IE8不支持此属性）

百分比/length：背景图的尺寸相对于背景区域的长度。只设一个，第二个为auto（会保持比例不变，不变形）。

如果都设为100%，则背景图会铺满背景区域，但长宽比率会跟着变化。

contain:背景区域按背景图的固定比例包含整个背景图。背景图的尺寸以背景图按固定比例扩大，其任意一条边到达背景区域的边界为止，经常会导致另一边空白。

cover:背景图按固定长宽比缩放至填充满整个背景区域，有一边的背景图会因超出背景区域而被切除。

IE8兼容：

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='绝对路径',sizingMethod='scale/crop');

      crop : 背景图大小不变，剪切图片以适应区域尺寸。

      image : 默认值。增大或减小区域的尺寸边界以适应背景图的尺寸，相当于overflow：visible的效果。

      scale : 缩放背景图以适应区域的尺寸边界。

①不能指定任意大小background百分比②只适于单张图片不能使用图片精灵等拼图③要引用绝对路径图片④兼容ie7，8

 JPG：有损压缩，压缩比例高，体积小，打开快。不支持透明，色彩丰富，数码相机最常用的格式，压缩比率高。

PNG：无损压缩，体积大。

      png8：支持透明/不透明，体积小，256种颜色，适合颜色比较单一的图像，如纯色、logo、图标等。

      png24：支持半透明，体积稍大，1600万种颜色，适合颜色比较丰富的图片。

更多css相关tips相关文章请关注PHP中文网！