CSS-bezogene Tipps

Wenn Sie in IE10- und IE11-Browsern auf das Eingabetext-Textfeld klicken, wird nach der Texteingabe eine X-Schaltfläche mit Löschfunktion angezeigt.

So entfernen Sie die X-Schaltfläche nach dem Eingabetext-Textfeld: Fügen Sie dem Eingabetext das folgende CSS hinzu

input::-ms-clear{ display:none } //Tipp: Nach der Eingabe sind zwei Doppelpunkte erforderlich. Pseudoelemente erfordern zwei Doppelpunkte.

schreibgeschützt: kann nicht bearbeitet werden, kann nicht fokussiert werden, die Hintergrundfarbe ist standardmäßig transparent, die Schriftfarbe ist standardmäßig die Vordergrundfarbe Schwarz, der Wert kann in der Anfrage übergeben werden; >

chorme und dh unterstützt, Firefox unterstützt nicht das readonly-Attribut (definiert im Attribut:

onfocus="this.blur()")

deaktiviert: kann nicht bearbeitet werden, kann den Fokus nicht erhalten, die Hintergrundfarbe ist standardmäßig grau, die Schriftfarbe ist standardmäßig grau und der Wert kann in der Anfrage nicht übergeben werden. Die Groß-/Kleinschreibung des Tag-Attributs

hat keine Auswirkungen seine Wirkung, aber im DOM von js wird die Groß-/Kleinschreibung strikt beachtet (readOnly).

Das CSS-Nutzungs-Plug-in von Firefox kann doppelte oder nicht verwendete CSS-Regeln anzeigen. Das einmalige Scannen jeder Seite ist genauer als der automatische Scan.

Firefox unterstützt das Attribut „background-position-x/y“ nicht, daher verwenden Sie stattdessen „background-position:X Y;“

Elemente, deren Position fest ist, haben eine adaptive Mindestbreite und belegen nicht eine ganze Zeile.

Die Zellen der Tabelle werden automatisch verkleinert und das Überlaufattribut kann nicht verwendet werden. Selbst wenn das Breitenattribut auf eine feste Breite eingestellt ist, wird es auf die minimale Textbreite verkleinert. Wenn Sie wirklich eine feste Breite festlegen möchten, können Sie p in td verschachteln und die Breite für p festlegen. Oder verwenden Sie das table-layout:fixed;-Attribut der Tabelle.

Die erste Zeile der Tabelle bestimmt die Zellenbreite der gesamten Tabelle.

Wenn Sie möchten, dass die Tabelle ihre Breite an den Inhalt anpasst, fügen Sie einfach das Attribut „white-space:nowrap“ hinzu. Insbesondere IE, andere Browser passen die Breite automatisch an.

Browsergröße ändern?

Hinweise zur Abkürzung der Schriftart

1. Bei der Abkürzung können Schriftgröße und Zeilenhöhe nur durch einen Schrägstrich / zusammengesetzt sein und nicht getrennt geschrieben werden.

Schriftart: kursiv fett .8em/1.2 Arial, serifenlos; // Wird zwischen Familien verwendet, Zahl

2. Diese Abkürzungsmethode kann nicht geändert werden gleichzeitig verwendet Funktioniert nur, wenn die Eigenschaften „font-size“ und „font-family“ angegeben sind. Wenn Sie außerdem Schriftstärke, Schriftstil und Schriftvariante nicht festlegen, werden die Standardwerte verwendet.

Die Methode, damit die Bildlaufleisten nicht springen, wenn die Seite zentriert ist:

nur Wenn margin-left auf „Auto“ eingestellt ist, ändert die Bildlaufleiste ihren Wert und die Seite springt, wenn sie angezeigt wird.

1.body { overflow-y: scroll } //Die Bildlaufleiste erscheint, wenn der Überlauf überschritten wird, und eine hässliche graue Bildlaufleiste bleibt bestehen, wenn sie nicht überschritten wird

2. wrap-outer { margin-left: calc(100vw - 100%);} //Reservieren Sie die Breite der Bildlaufleiste links im Voraus

//calc() ist eine Funktion in CSS3, die ausgeführt werden kann vier arithmetische Operationen (vor und nach

Es müssen Leerzeichen vorhanden sein ), und Einheiten wie Prozentsatz, px, em und rem können gemischt werden

// 100vw bezieht sich auf die Breite des Ansichtsfensters , einschließlich der Breite der Bildlaufleiste; und 100 % ist die Breite des Ansichtsfensters ohne Bildlaufleisten.

Wenn margin-left ein fester Wert ist, erfolgt kein Sprung. Die Bildlaufleiste erscheint auf der obersten Ebene und unterdrückt den darunter liegenden Inhalt.

Unterschiedliche Auflösungen zeigen unterschiedliche Breiten an

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

Hinweis: CSS-Codereihenfolge, CSS von groß nach klein setzen (je größer die Breite des Browsers, desto höher). ist)

Das Blockelement belegt standardmäßig eine Zeile. Wenn die Breite nicht ausreicht, wird es automatisch umgebrochen. Sie können das Attribut „white-space:nowrap“ verwenden, um keinen Zeilenumbruch zu erzwingen.

Das untergeordnete Element legt die Breite auf 100 % fest. Wenn ein Rand vorhanden ist, überschreitet die Breite des untergeordneten Elements die feste Breite des übergeordneten Elements.

box-sizing: content-box|border-box|inherit;//Geben Sie an, wie das Boxmodell Breite und Höhe berechnet.

Inhaltsfeld: Die Breite und Höhe gelten nur für das Inhaltsfeld des Elements, und die Polsterung und Ränder des Elements werden außerhalb der Breite und Höhe gezeichnet.

border-box: Der für das Element angegebene Abstand und Rand wird innerhalb der festgelegten Breite und Höhe gezeichnet.

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

.cf:after {clear: Both;}

:before Dies liegt daran, dass der Tabellentyp einen unabhängigen BFC generieren kann, um zu verhindern, dass der obere Rand zusammenfällt: Nachher ist dafür verantwortlich, Floats zu löschen und zu verhindern, dass die übergeordnete Höhe zusammenbricht ist hoch.

Vertikale und horizontale Zentrierung von Bildern und mehrzeiligem Text mit variablen Größen?

1. Stellen Sie den übergeordneten Container auf display:table ein und geben Sie ihm eine feste Höhe, stellen Sie den untergeordneten Container auf display:table-cell ein und verwenden Sie das Attribut „vertikal-align:middle“ (in der Tabelle). und Inline-Elemente werden wirksam in).

Oder: Der übergeordnete Container sollte die relative Positionierung position:relative verwenden; der untergeordnete Container sollte die absolute Positionierung verwenden, top:50%;left:50%;

margin-top

und margin-left Der Wert ist die negative Hälfte der Höhe und Breite des Containers. Oder:

relative Positionierung des übergeordneten Elements, absolute Positionierung des untergeordneten Containers

, oben:0, unten:0, margin:auto, keine Berechnung erforderlich. Um gleichzeitig horizontal zu zentrieren: Verwenden Sie das Attribut position: relative oder fügen Sie eine Ebene von p hinzu und verwenden Sie das Attribut margin: auto.

Mehrspaltiger Inhalt ist nicht festgelegt und gleicher CSS-Hack:

Übergeordnete Containereinstellungen overflow:hidden; child elements: padding-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中文网！