conseils liés au CSS

Lorsque vous cliquez sur la zone de texte de saisie dans les navigateurs IE10 et IE11, un bouton X avec une fonction de suppression apparaîtra après la saisie du texte.

Comment supprimer le bouton X après la zone de texte de saisie : ajoutez le CSS suivant au texte de saisie

input::-ms-clear{ display:none } //Astuce : après l'entrée est deux deux-points, les pseudo-éléments nécessitent deux deux-points.

lecture seule : ne peut pas être modifié, ne peut pas être mis au point, la couleur d'arrière-plan est par défaut transparente, la couleur de la police est par défaut la couleur de premier plan noir, la valeur peut être transmise dans la requête

chorme et ie Pris en charge, Firefox ne supporte pas l'attribut readonly (défini dans l'attribut :

onfocus="this.blur()")

disabled : ne peut pas être modifié, ne peut pas obtenir le focus, la couleur d'arrière-plan par défaut est grise, la couleur de police par défaut est grise et la valeur ne peut pas être transmise dans la requête. La casse de l'attribut de balise

(lecture seule) n'affectera pas ; son effet, mais le DOM de js est strictement sensible à la casse (readOnly ).

Le plug-in d'utilisation CSS de Firefox peut afficher les règles CSS répétées ou inutilisées. L'analyse de chaque page une fois est plus précise que l'analyse automatique.

Firefox ne prend pas en charge l'attribut background-position-x/y, utilisez donc background-position:X Y ;

Les éléments dont la position est fixe ont une largeur minimale adaptative et n'occuperont pas une ligne entière.

Les cellules du tableau seront automatiquement réduites et l'attribut de débordement ne pourra pas être utilisé. Même si l'attribut width est défini sur une largeur fixe, il sera réduit à la largeur minimale du texte. Si vous souhaitez vraiment définir une largeur fixe, vous pouvez imbriquer p dans td et définir la largeur de p. Ou utilisez l'attribut table-layout:fixed;

La première ligne du tableau détermine la largeur des cellules du tableau global.

Si vous souhaitez que le tableau adapte sa largeur en fonction du contenu, ajoutez simplement l'attribut white-space:nowrap. Surtout IE, les autres navigateurs ajusteront automatiquement la largeur.

Changer la taille du navigateur ?

Remarques sur l'abréviation de font

1. Lors de l'abréviation, la taille de la police et la hauteur de la ligne ne peuvent former qu'une seule valeur via une barre oblique/ et ne peuvent pas être écrites séparément.

police : italique gras .8em/1.2 Arial, sans-serif ; // Utilisé entre les familles, numéro

2. L'ordre ne peut pas être modifié. utilisé en même temps Cela ne fonctionne que lorsque les propriétés font-size et font-family sont spécifiées. De plus, si vous ne définissez pas font-weight, font-style et font-varient, ils utiliseront les valeurs par défaut

La méthode pour que les barres de défilement ne sautent pas lorsque la page est centrée :

uniquement Lorsque la marge gauche est automatique, la barre de défilement changera sa valeur et la page sautera lorsqu'elle apparaîtra.

1.body { overflow-y: scroll; } //La barre de défilement apparaîtra lorsque le débordement est dépassé, et une vilaine barre de défilement grise restera lorsqu'elle n'est pas dépassée

2 .wrap-outer { margin-left: calc(100vw - 100%);} //Réserver la largeur de la barre de défilement à gauche à l'avance

//calc() est une fonction en css3 qui peut effectuer quatre opérations arithmétiques (avant et après

Il doit y avoir des espaces ), et des unités telles que pourcentage, px, em, rem peuvent être mélangées

// 100vw fait référence à la largeur de la fenêtre , y compris la largeur de la barre de défilement ; et 100 % est la fenêtre d'affichage sans la largeur des barres de défilement.

Si margin-left est une valeur fixe, elle ne sautera pas. La barre de défilement apparaîtra sur la couche supérieure, supprimant le contenu ci-dessous.

Différentes résolutions affichent différentes largeurs

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

Remarque : ordre du code CSS, composition du CSS de grand à petit (plus la largeur du navigateur est grande, plus elle est élevée is)

L'élément block occupe une ligne par défaut. Si la largeur n'est pas suffisante, il sera automatiquement renvoyé à la ligne. Vous pouvez utiliser l'attribut white-space:nowrap pour forcer l'absence de retour à la ligne.

L'élément enfant définit width=100%. S'il y a une bordure, la largeur de l'élément enfant dépassera la largeur fixe de l'élément parent.

box-sizing : content-box|border-box|inherit;//Spécifiez la façon dont le modèle de boîte calcule la largeur et la hauteur.

content-box : la largeur et la hauteur s'appliquent uniquement à la zone de contenu de l'élément, et le remplissage et les bordures de l'élément sont dessinés en dehors de la largeur et de la hauteur.

border-box : Le remplissage et la bordure spécifiés pour l'élément seront dessinés dans la largeur et la hauteur définies.

.cf:après, .cf:avant {content: " " ; affichage : table;}

.cf:après {effacer : les deux ;}

 :avant En effet, le type de table peut générer un bfc indépendant pour empêcher la marge supérieure de s'effondrer

 : after est responsable de la suppression des flotteurs et d'empêcher la hauteur du parent de s'effondrer, le code est moindre et l'efficacité est moindre ; est élevé.

Centrage vertical et horizontal des images et du texte multiligne à tailles variables ?

1. Définissez le conteneur parent sur display:table et donnez-lui une hauteur fixe, définissez le conteneur enfant sur display:table-cell et utilisez l'attribut vertical-align:middle (dans le tableau et les éléments en ligne prennent effet dans).

Ou : le conteneur parent doit utiliser le positionnement relatif position:relative ; le conteneur enfant doit utiliser le positionnement absolu, top:50%;left:50%;

margin-top et margin-left La valeur est la moitié négative de la hauteur et de la largeur du conteneur.

Ou : positionnement relatif de l'élément parent, positionnement absolu du conteneur enfant , top:0, bottom:0, margin:auto, aucun calcul requis.

Pour centrer horizontalement en même temps : utilisez l'attribut position : relatif ou ajoutez une couche de p et utilisez l'attribut margin : auto.

Le contenu multi-colonnes n'est pas fixe et les CSS de hauteur égale sont modifiés :

Débordement des paramètres du conteneur parent : caché ; éléments enfants : 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中文网！