Feuille de style en cascade CSS
CSS (Cascading Style Sheet) est une feuille de style en cascade. Il s'agit d'un langage informatique utilisé pour représenter des styles de documents tels que HTML (une application du Standard Generalized Markup Language) ou XML (un sous-ensemble du Standard Generalized Markup Language).
Comprendre ce qu'est l'effondrement des marges
Contrairement à de nombreuses autres propriétés, les marges verticales du modèle de boîte s'effondreront lorsqu'elles se rencontreront, c'est-à-dire lorsqu'elles Lorsque la marge inférieure d'un élément est adjacente à la marge supérieure d'un autre élément, seule la plus grande valeur des deux sera conservée. Vous pouvez apprendre de l'exemple simple suivant :
.square { width: 80px; height: 80px;
}.red { background-color: #F44336; margin-bottom: 40px;
}.blue { background-color: #2196F3; margin-top: 30px;
}dans ce qui précède. Par exemple, nous constaterons que les marges des carrés rouge et bleu ne s'additionnent pas pour obtenir 70px, mais seule la marge inférieure rouge est conservée. Nous pouvons utiliser certaines méthodes pour éviter ce comportement, mais il est recommandé d'utiliser l'attribut margin-bottom aussi uniformément que possible, afin qu'il apparaisse plus harmonieux.
Utilisez Flexbox pour la mise en page
Dans la mise en page traditionnelle, nous sommes habitués à utiliser des flotteurs ou des blocs en ligne, mais ils sont plus adaptés au formatage de documents plutôt que de sites Web entiers. Flexbox est un outil spécialisé pour la mise en page. Le modèle Flexbox permet aux développeurs d'utiliser de nombreux attributs pratiques et extensibles pour la mise en page. On estime qu'une fois que vous l'utiliserez, vous ne le lâcherez plus :
.container { display: flex; /* Don't forget to add prefixes for Safari */display: -webkit-flex;
}Nous avons fourni de nombreuses introductions et conseils sur ce sujet. Flexbox sur Tutorialzine, comme 5 techniques Flexbox que vous devez connaître.
Utiliser la réinitialisation CSS
Bien qu'avec le développement rapide des navigateurs et l'unification des spécifications au fil des ans, la fragmentation des fonctionnalités des navigateurs s'est améliorée, mais il existe encore des différences entre les différents navigateurs. beaucoup de différences comportementales. La meilleure façon de résoudre ce problème est d'utiliser une réinitialisation CSS pour définir un style unifié pour tous les éléments, garantissant ainsi que vous pouvez commencer à travailler sur la base d'une feuille de style relativement unifiée et propre. Les bibliothèques de réinitialisation actuellement populaires incluent normalize.css, minireset et ress, qui peuvent corriger de nombreuses différences connues entre les navigateurs. Et si vous ne prévoyez pas d'utiliser une bibliothèque externe, alors il est recommandé d'utiliser les règles de base suivantes :
* { margin: 0; padding: 0; box-sizing: border-box;
}Les règles ci-dessus semblent inutiles, mais si différents navigateurs utilisent la valeur par défaut Définir des valeurs par défaut différentes pour les marges/rembourrage, cela peut encore être assez gênant pour vous.
Tout devrait être Border-box
Bien que de nombreux débutants ne comprennent pas l'attribut box-sizing, il est en effet assez important. La meilleure façon de le comprendre est de regarder ses deux valeurs :
La valeur par défaut est content-box, c'est-à-dire que lorsque nous définissons l'attribut hauteur/largeur d'un élément, cela n'affectera que la taille du contenu. . Tous les remplissages et côtés sont accumulés dessus. Par exemple, si une balise
border-box : Le remplissage et les côtés sont inclus dans la largeur/hauteur. Par exemple, un
Définir l'élément sur border-box sera très pratique pour vous en matière de style et de mise en page. De cette façon, vous pouvez définir des restrictions de hauteur et de largeur sur l'élément parent sans vous soucier du remplissage ou des côtés de l'élément enfant. briser cette restriction.
Utiliser les images comme image d'arrière-plan
如果需要在响应式的环境下展示图片，有个简单的小技巧就是使用该图片作为某个
img { width: 300px; height: 200px;
}div { width: 300px; height: 200px;
background: url('http://cdn.tutorialzine.com/wp-content/uploads/2016/08/bicycle.jpg');
background-position: center center; background-size: cover;
}section{ float: left; margin: 15px;
}不过这种方式也是存在缺陷的，譬如你无法设置图片的懒加载、图片无法被搜索引擎或者其他类似的工具抓取到，有个不错的属性叫object-fit可以解决这个问题，不过该属性目前的浏览器支持并不是很完善。
Better Table Borders
HTML中使用Tables进行布局一直是个很头疼的问题，它们使用起来很简单，但是无法进行响应式操作，并且也不方便进行全局样式设置。譬如，如果你打算为Table的边与单元的边添加样式，可能得到的结果如下:
table { width: 600px; border: 1px solid #505050; margin-bottom: 15px; color:#505050;
}td{ border: 1px solid #505050; padding: 10px;
}
这里存在的问题是出现了很多的重复的边，会导致视觉上不协调的情况，那么我们可以通过设置border-collapse:collapse来进行处理:
注释格式优化
CSS虽然谈不上一门编程语言但是其仍然需要添加注释以保障整体代码的可读性，只要添加些简单的注释不仅可以方便你更好地组织整个样式表还能够让你的同事或者未来的自己更好地理解。对于CSS中整块的注释或者使用在Media-Query中的注释，建议是使用如下形式：
/*---------------
#Header
---------------*/header { }header nav { }/*---------------
#Slideshow
---------------*/.slideshow { }而设计的细节说明或者一些不重要的组件可以用如下单行注释的方式:
/* Footer Buttons */.footer button { }.footer button:hover { }同时，不要忘了CSS中是没有//这种注释方式的:
/* Do */p {
padding: 15px; /*border: 1px solid #222;*/}/* Don't */p {
padding: 15px; // border: 1px solid #222; }使用Kebab-case命名变量
对于样式类名或者ID名的命名都需要在多个单词之间添加-符号，CSS本身是大小写不敏感的因此你是用不了camelCase的，另一方面，很久之前也不支持下划线，所以现在的默认的命名方式就是使用-:
/* Do */.footer-column-left { }/* Don't */.footerColumnLeft { }.footer_column_left { }而涉及到具体的变量命名规范时，建议是使用BEM规范，只要遵循一些简单的原则即可以保证基于组件风格的命名一致性。你也可以参考CSS Tricks来获得更多的细节描述。
避免重复代码
大部分元素的CSS属性都是从DOM树根部继承而来，这也是其命名为级联样式表的由来。我们以font属性为例，该属性往往是继承自父属性，因此我们并不需要再单独地为元素设置该属性。我们只需要在html或者body中添加该属性然后使其层次传递下去即可:
html { font: normal 16px/1.4 sans-serif;
}使用transform添加CSS Animations
不建议直接改变元素的width与height属性或者left/top/bottom/right这些属性来达到动画效果，而应该优先使用transform()属性来提供更平滑的变换效果，并且能使得代码的可读性会更好:
.ball { left: 50px; transition: 0.4s ease-out;
}/* Not Cool*/.ball.slide-out { left: 500px;
}/* Cool*/.ball.slide-out { transform: translateX(450px);
}Transform的几个属性translate、rotate、scale都具有比较好的浏览器兼容性可以放心使用。
不要重复造轮子
现在CSS社区已经非常庞大，并且不断地有新的各式各样的库开源出来。这些库可以帮助我们解决从小的代码片到用于构建完整的响应式应用的全框架。所以如果下次你再碰到什么CSS问题的时候，在打算撸起袖子自己上之前可以尝试在GitHUB或者CodePen上搜索可行方案。
尽可能使用低优先级的选择器
并不是所有的CSS选择器的优先级都一样，很多初学者在使用CSS选择器的时候都是考虑以新的特性去复写全部的继承特性，不过这一点在某个元素多状态时就麻烦了，譬如下面这个例子:
a{ color: #fff; padding: 15px;
}a#blue-btn { background-color: blue;
}a.active { background-color: red;
}我们本来希望将.active类添加到按钮上然后使其显示为红色，不过在上面这个例子中很明显起不了作用，因为button已经以ID选择器设置过了背景色，也就是所谓的Higher Selector Specificity。一般来说，选择器的优先级顺序为：ID(#id) > Class(.class) > Type(header)
避免使用!important
认真的说，千万要避免使用!important，这可能会导致你在未来的开发中无尽的属性重写，你应该选择更合适的CSS选择器。而唯一的可以使用!important属性的场景就是当你想去复写某些行内样式的时候，不过行内样式本身也是需要避免的。
使用text-transform属性设置文本大写
<div class="movie-poster">Star Wars: The Force Awakens</div>.movie-poster {
text-transform: uppercase;
}Em, Rem, 以及 Pixel
已经有很多关于人们应该如何使用em，rem，以及px作为元素尺寸与文本尺寸的讨论，而笔者认为，这三个尺寸单位都有其适用与不适用的地方。不同的开发与项目都有其特定的设置，因此并没有通用的规则来决定应该使用哪个单位，这里是我总结的几个考虑:
em – 其基本单位即为当前元素的font-size值，经常适用于media-queries中，em是特别适用于响应式开发中。
rem – 其是相对于html属性的单位，可以保证文本段落真正的响应式尺寸特性。
px – Pixels 并没有任何的动态扩展性，它们往往用于描述绝对单位，并且可以在设置值与最终的显示效果之间保留一定的一致性。
在大型项目中使用预处理器
估计你肯定听说过 Sass, Less, PostCSS, Stylus这些预处理器与对应的语法。Preprocessors可以允许我们将未来的CSS特性应用在当前的代码开发中，譬如变量支持、函数、嵌套式的选择器以及很多其他的特性，这里我们以Sass为例:
$accent-color: #2196F3;a {
padding: 10px 15px;
background-color: $accent-color;
}
a:hover {
background-color: darken($accent-color,10%);
}使用Autoprefixers来提升浏览器兼容性
使用特定的浏览器前缀是CSS开发中常见的工作之一，不同的浏览器、不同的属性对于前缀的要求也不一样，这就使得我们无法在编码过程中记住所有的前缀规则。并且在写样式代码的时候还需要加上特定的浏览器前缀支持也是个麻烦活，幸亏现在也是有很多工具可以辅助我们进行这样的开发:
Online tools: Autoprefixer
Text editor plugins: Sublime Text, Atom
Libraries: Autoprefixer (PostCSS)
Utiliser le code minifié dans l'environnement de production
Afin d'améliorer la vitesse de chargement de la page, nous devons utiliser le code de ressource compressé par défaut dans l'environnement de production. Pendant le processus de compression, tous les blancs et répétitions seront supprimés pour réduire la taille de l’ensemble du fichier. Bien entendu, le code compressé est illisible, nous devons donc toujours utiliser la version normale pendant la phase de développement. Il existe de nombreux outils actuels pour la compression CSS :
Outils en ligne – CSS Minifier (API incluse), CSS Compressor
Plugins d'éditeur de texte : Sublime Text, Atom
Bibliothèques : Minfiy (PHP), CSSO et CSSNano (PostCSS, Grunt, Gulp)
L'outil que vous choisissez dépend certainement de votre propre flux de travail~
Voir Caniuse
Les différents navigateurs varient considérablement selon compatibilité, donc si nous pouvons cibler le navigateur auquel nous devons nous adapter, nous pouvons interroger la compatibilité de la version du navigateur d'une certaine fonctionnalité sur caniuse, si nous devons ajouter un préfixe spécifique ou y a-t-il des bugs sur une certaine plate-forme, etc. Cependant, il ne suffit certainement pas d’utiliser caniuse. Nous devons également utiliser des services supplémentaires pour la détection.
Valider : Validation
La validation CSS n'est peut-être pas aussi importante que la validation HTML ou la validation JavaScript, mais il est toujours utile d'utiliser l'outil Lint pour vérifier votre code CSS avant la sortie officielle. significatif. Il vous informera des erreurs potentielles dans votre code, vous signalera certains codes qui ne répondent pas aux meilleures pratiques et vous donnera quelques suggestions pour améliorer les performances de votre code. Tout comme les Minifers et les Autoprefixers, de nombreux outils sont disponibles :
Outils en ligne : W3 Validator, CSS Lint
Plugins d'éditeur de texte : Sublime Text, Atom
Bibliothèques : lint ( Node.js, PostCSS), css-validator (Node.js)
Les 20 suggestions ci-dessus pour écrire du code CSS moderne. Pour plus de contenu connexe, veuillez prêter attention à. Site Web chinois PHP (m.sbmmt.com) !
Logiciel de surveillance de serveur
si qu'est-ce que ça veut dire
Quel langage est généralement utilisé pour écrire du vscode ?
utilisation de la commande head
Comment vérifier si le mot de passe MySQL est oublié
Marché ondulation aujourd'hui
Que signifie la passerelle Edge Computing ?
utilisation du latex
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
