css related tips-CSS Tutorial-php.cn

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}
}

Copy after login

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" />

Copy after login

隐式的联系：

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

Copy after login

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

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

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

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

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

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

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

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

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

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

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

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

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