Maison >interface Web >tutoriel CSS >Questions d'entretien classiques CSS 2019
Ce sont quelques points de connaissances que j'ai résumés au cours de mon étude. Je partagerai cet article avec vous sous forme de questions d'entretien. utile à tout le monde. S'il vous plaît, aidez. Cet article est assez long. Si vous le lisez attentivement et le lisez encore et encore, je pense qu'il sera utile pour vos études ou vos entretiens. J'espère également que tout le monde me critiquera et me corrigera !
Le modèle de boîte est la place réelle occupée par l'élément dans la page Web Il existe deux types : Modèle de boîte standard et Modèle de boîte IE<.>
Modèle de boîte standard (W3C) : content+padding+border+border margin
La largeur et la hauteur font référence à la largeur et à la hauteur du contenuModèle de boîte IE version basse : Contenu (contenu+padding+bordure) + marge de bordure,
La largeur et la hauteur font référence à la largeur et à la hauteur du contenu+padding+ partie frontièreRecommandation de sujet :Résumé des questions d'entretien CSS en 2020 (dernière)
Extension de questions :
Comment CSS met-il en place ces deux modèles ?
box-sizing : content-box box-sizing : border-box复制代码
Comment définir la largeur et la hauteur correspondantes du modèle de boîte en JS ?
dom.style.width/height;//设置获取的是内联样式 dom.currentStyle.width/height;//只有IE支持 window.getComputedStyle(dom).width/height;//兼容性好 dom.getBoundingClientRect().width/height;//适用场所:计算一个元素的绝对位置复制代码
Exemple de question (expliquant le chevauchement des marges en fonction du modèle de boîte) ?
Cet exemple est le chevauchement des marges parent et enfant, ainsi que le chevauchement des marges des éléments frères
<style> html *{ padding: 0; margin: 0; } #sec{ background: #f00; overflow: hidden; //创建了一个BFC,块级格式化上下文 } .child{ height: 100px; margin-top: 10px; background: yellow; } </style> <section id="sec"> <article class="child"></article> </section>复制代码
BFC (chevauchement des marges solution)?
2. Attribut de taille de boîte ? est utilisé pour contrôler le mode d'analyse du modèle de boîte de l'élément. La valeur par défaut est content-box
context-box : le modèle de boîte standard du W3C, dont les attributs hauteur/largeur sont définis. l'élément est défini sur . Est la hauteur/largeur de la partie de contenu
border-box : modèle de boîte traditionnel IE. La définition des attributs hauteur/largeur de l'élément fait référence à la hauteur/largeur du contenu + bordure + partie de remplissage
BFC précise comment la Block Box interne est disposée.
Schéma de positionnement :BFC peut être déclenché si l'une des conditions suivantes est remplie
Pour plus d'introduction à BFC, veuillez consulter mon article Qu'est-ce que BFC ? A quoi ça sert ?
4. Que sont les sélecteurs CSS ? Quelles propriétés peuvent être héritées ? Comment est calculé l’algorithme de priorité CSS ?Sélecteur CSS :
1. Sélecteur d'identifiant (# myid) 2. . Sélecteur de balise (élément) (p, h1, p) 4. Sélecteur adjacent (h1 + p) 5. >6. Sélecteur descendant (li a)7. Sélecteur générique (*)8. Sélecteur d'attribut (a[rel = "external"] )9. Sélecteur de pseudo-classe (a:hover, li:nth-child) Sélecteur de pseudo-éléments, sélecteur de regroupement.Héritage :
Styles hérités : taille de police, famille de polices, couleur, ul, li, dl, dt, ddNon ; -styles hérités : border, padding, margin, width, height
Priorité (principe de proximité) : !important > [ id > tag ]!important a priorité sur le niveau élevé en ligne
Calcul de l'algorithme de priorité!important>id > ; class>tag
important a une priorité plus élevée que inline元素选择符的权值:元素标签(派生选择器):1,class选择符:10,id选择符:100,内联样式权值最大,为1000
p:first-of-type 选择属于其父元素的首个 e388a4556c0f65e1904146cc1a846bee 元素的每个 e388a4556c0f65e1904146cc1a846bee 元素。
p:last-of-type 选择属于其父元素的最后 e388a4556c0f65e1904146cc1a846bee 元素的每个 e388a4556c0f65e1904146cc1a846bee 元素。
p:only-of-type 选择属于其父元素唯一的 e388a4556c0f65e1904146cc1a846bee 元素的每个 e388a4556c0f65e1904146cc1a846bee 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 e388a4556c0f65e1904146cc1a846bee 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 e388a4556c0f65e1904146cc1a846bee 元素。
:enabled
:disabled 控制表单控件的禁用状态。
:checked,单选框或复选框被选中。
:before在元素之前添加内容,也可以用来做清除浮动
:after在元素之后添加内容
水平居中p:
border: 1px solid red; margin: 0 auto; height: 50px; width: 80px;复制代码
水平垂直居中一个浮动元素(position定位)
第一种:未知元素宽高
<p class="outer"> <span>我想居中显示</span> </p> <style> .outer{ width:300px; height:300px; position:relative; background-color:#ccc; } span{ float:left; position:absolute; backgroond-color:red; top:50%; left:50%; transform:translate(-50%,-50%); } </style>复制代码
第二种:已知元素宽高的
<p class="outer"> <span>我想居中显示</span> </p> <style> .outer{ width:300px; height:300px; position:relative; background-color:#ccc; } span{ float:left; position:absolute; backgroond-color:red; width:150px; height:50px; top:50%; left:50%; margin:-25px 0px 0px -75px; } </style>复制代码
如何垂直居中一个img(display : table-cell 或者 position定位)
<p class="outer"> <img src="nz.jpg" alt=""> </p> <style> .outer{ width: 300px; height: 300px; border: 1px solid #cccccc; display: table-cell; text-align: center; vertical-align: middle; } img{ width: 150px; height: 150px; } </style>复制代码
绝对定位的p水平垂直居中:
border: 1px solid black; position: absolute; width: 200px; height: 100px; margin: auto; left: 0; right: 0; top:0; bottom:0;复制代码
还有更加优雅的居中方式就是用 flex布局,点击查看我的文章 掌握flex布局,这篇文章就够了
更多的居中问题,点击查看我的文章 p居中的几种方法
值 | 描述 |
---|---|
inline | 默认。此元素会被显示为内联元素,元素前后没有换行符。 |
block | 此元素将显示为块级元素,此元素前后会带有换行符。 |
none | 此元素不会被显示(隐藏)。 |
inline-block | 行内块元素。(CSS2.1 新增的值) |
list-item | 此元素会作为列表显示。 |
table | 此元素会作为块级表格来显示(类似table),表格前后带有换行符 |
值 | 描述 |
---|---|
absolute |
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
fixed |
生成固定定位的元素,相对于浏览器窗口进行定位。(老IE不支持) 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
relative |
生成相对定位的元素,相对于其正常位置进行定位,不脱离文档流。 因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
static | 默认值。没有定位,元素出现在正常的文档流中(忽略 top, bottom, left, right 或者 z-index 声明)。 |
inherit | 规定应该从父元素继承 position 属性的值。 |
css 定位还有一个新增属性,粘性定位 sticky,它主要用在对 scroll 事件的监听上;
粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位,之后为固定定位。例如:
#one { position: sticky; top: 10px; }复制代码
在 viewport 视口滚动到元素 top 距离小于 10px 之前,元素为相对定位。之后,元素将固定在与顶部距离 10px 的位置,直到 viewport 视口回滚到阈值以下。
更多关于 sticky 的介绍,请点击查看 粘性定位介绍
:not(p)
选择每个非p的元素; p:empty
选择每个没有任何子级的p元素(包括文本节点)p{ border:2px solid; border-radius:25px; //用于设置圆角 box-shadow: 10px 10px 5px #888888; //水平阴影 垂直阴影 模糊距离 阴影颜色 border-image:url(border.png) 30 30 round;// 设置所有边框图像的速记属性。 }复制代码
p{ background:url(img_flwr.gif); background-repeat:no-repeat; background-size:100% 100%; //规定背景图的尺寸 background-origin:content-box;//规定背景图的定位区域 } 多背景 body{ background-image:url(img_flwr.gif),url(img_tree.gif); }复制代码
background: linear-gradient(direction, color-stop1, color-stop2, ...);复制代码
更多 CSS3 和 HTML5的新特性,请点击 CSS3 和 HTML5 新特性一览
该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中,block 布局是把块在垂直方向从上到下依次排列的;而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制,可以由开发人员自由操作。
试用场景:弹性布局适合于移动前端开发,在Android和ios上也完美支持。
更多关于 flex 布局,请点击查看我的文章 你真的了解 flex 布局吗?
首先,需要把元素的宽度、高度设为0。然后设置边框样式。
width: 0; height: 0; border-top: 40px solid transparent; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 40px solid #ff0000;复制代码
第一种真正的品字:
第二种全屏的品字布局:
上面的p设置成100%,下面的p分别宽50%,然后使用float或者inline使其不换行。
*{margin:0;padding:0;}
来统一;
display:inline;
将其转化为行内属性。渐进识别的方式,从总体中逐渐排除局部。首先,巧妙的使用“9”这一标记,将IE浏览器从所有情况中分离出来。接着,再次使用“+”将IE8和IE7、IE6分离开来,这样IE8已经独立识别。 渐进识别的方式,从总体中逐渐排除局部。首先,巧妙的使用“9”这一标记,将IE浏览器从所有情况中分离出来。接着,再次使用“+”将IE8和IE7、IE6分离开来,这样IE8已经独立识别。{ background-color:#f1ee18;/*所有识别*/.background-color:#00deff\9; /*IE6、7、8识别*/+background-color:#a200ff;/*IE6、7识别*/_background-color:#1e0bd1;/*IE6识别*/}复制代码
a:link {} a:visited {} a:hover {} a:active {}复制代码
IE下,even对象有x,y属性,但是没有pageX,pageY属性;
Sous Firefox, l'objet événement a les attributs pageX et pageY, mais pas d'attributs x, y.
Solution : (Commentaire conditionnel) L'inconvénient est que des requêtes HTTP supplémentaires peuvent être ajoutées sous le navigateur IE.
1. Bug de double marge causé par l'utilisation de float
2. Problème de 3 pixels causé par l'utilisation de float lors de l'utilisation de dislpay:inline -3px
3. Le survol du lien hypertexte échoue lorsque vous cliquez sur Corriger l'ordre d'écriture. lien visité en survol actif
4. C'est-à-dire le problème d'ajout de position : relatif
5. Png utilise le code js de manière transparente pour changer
6. Solution importante'
7. Utilisez l'imbrication iframe pour couvrir la sélection sous ie6
8 Pourquoi n'y a-t-il aucun moyen de définir un conteneur de largeur d'environ 1 px (en raison de la hauteur de ligne par défaut d'IE6 Oui. , utilisez over:hidden,zoom:0.08 line-height:1px)
9. IE 6 ne prend pas en charge !important
car le navigateur. problèmes de compatibilité. Différents navigateurs ont des valeurs par défaut différentes pour certaines balises. Si CSS n'est pas initialisé, des différences d'affichage des pages entre les navigateurs se produiront souvent. Bien sûr, le style d'initialisation aura un certain impact sur le référencement, mais vous ne pouvez pas avoir le gâteau et le manger aussi, mais essayez de l'initialiser avec le moins d'impact possible.
Peu importe celui auquel vous appartenez, vous devez d'abord trouver l'élément dont la valeur de position la plus proche n'est pas statique parmi ses éléments ancêtres, puis juger :
Si aucun des deux n'est trouvé, il s'agit du bloc contenant initial.
Supplémentaire :
1. statique (par défaut)/relatif : en termes simples, il s'agit de la zone de contenu de son élément parent (c'est-à-dire la suppression de la partie de remplissage)
2. absolu : Trouver l'élément le plus proche positionné comme absolu/relatif
3 fixe : Son bloc conteneur est toujours l'élément racine (html/body), et l'élément racine est également le bloc conteneur initial
.Lorsque l'attribut <code><strong>visibility</strong>
visibilité<strong>collapse</strong>
d'un élément est défini sur la valeur <code><strong>hidden</strong>
collapse<strong>display: none</strong>
, pour les éléments généraux, Son comportement est le même que
. Mais l'exception est que si cet élément est un élément lié au tableau, tel qu'une ligne de tableau, un groupe de tableau, une colonne de tableau, un groupe de colonnes de tableau, il se comporte de la même manière que
, c'est-à-dire que l'espace qu'ils occupent sera également libéré. <strong>collapse</strong>
affichage : aucun<code><strong>hidden</strong>
Dans Google Chrome, il n'y a aucune différence entre l'utilisation de la valeur <strong>collapse</strong>
collapse
<h3>masquée</h3>
. Dans Firefox, Opera et IE11, l'effet de l'utilisation de la valeur collapse
18. Quelle est la différence entre display:none et visibilité:hidden ?
affichage : aucun
Masquer l'élément correspondant et ne plus allouer d'espace dans la mise en page du document (reflow + redessiner)visibilité:hideen
Masquer le l'élément correspondant conserve toujours l'espace d'origine dans la mise en page du document (redessin)
19. Que se passera-t-il lorsque les caractéristiques de position, d'affichage, de débordement et de flottement se superposeront ? L'attribut display spécifie le type de boîte que l'élément doit générer ; l'attribut position spécifie le type de positionnement de l'élément ; l'attribut float est une méthode de mise en page qui définit dans quelle direction l'élément flotte.
Similaire au mécanisme de priorité : position : absolue/fixe a la priorité la plus élevée. Lorsqu'ils sont présents, float ne fonctionne pas et la valeur d'affichage doit être ajustée. Les éléments positionnés par float ou absolu ne peuvent être que des éléments de bloc ou des tableaux. 20. Pourquoi le flotteur apparaît-il ? Quand doit-il être effacé ? Quels sont les moyens de dégager les flotteurs ? Quels sont les avantages et les inconvénients ? Selon vous, lequel est le meilleur ? Pourquoi? La raison du flottement : L'élément flottant rencontre la bordure qui le contient ou reste sur la bordure de l'élément flottant. Dans la spécification CSS, le positionnement flottant n'appartient pas au flux de page normal, mais est positionné indépendamment, de sorte que la zone de bloc du flux de documents se comporte comme si la zone flottante n'existait pas. Les éléments flottants flottent au-dessus de la zone de bloc dans le flux de documents.关于css的定位机制:普通流,浮动,绝对定位(position:fixed是position:absolute的一个子类)。浮动的框可以左右移动,直到它的外边缘遇到包含框或者另一个浮动框的边缘,所以才说浮动定位不属于正常的页面流。文档中的普通流就会表现得和浮动框不存在一样,当浮动框高度超出包含框的时候,就会出现包含框不会自动伸缩高度类笔盒浮动元素。所以,只含有浮动元素的父容器在显示时不需要考虑子元素的位置,就造成显示父容器像空容器一样。
浮动带来的问题:
清除浮动的方式:
1、父级p定义height
原理:父级p手动定义height,就解决了父级p无法自动获取到高度的问题
优点:简单,代码少,容易掌握
缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级p不一样时,会产生问题
建议:不推荐使用,只建议高度固定的布局时使用
2、结尾处加空 p 标签 clear:both
原理:添加一个空p,利用css提高的clear:both清除浮动,让父级p能自动获取到高度
优点:简单,代码少,浏览器支持好,不容易出现怪问题
缺点:不少初学者不理解原理;如果页面浮动布局多,就要增加很多空p,让人感觉很不爽
建议:不推荐使用,但此方法是以前主要使用的一种清除浮动方法
3、父级 p 定义 overflow:hidden
原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度
优点:简单,代码少,浏览器支持好
缺点:不能和position配合使用,因为超出的尺寸的会被隐藏
建议:只推荐没有使用position或对overflow:hidden理解比较深的朋友使用
4、父级p定义伪类 :after 和 zoom
原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE转有属性)可解决ie6,ie7浮动问题
优点:浏览器支持好,不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)
缺点:代码多,不少初学者不理解原理,要两句代码结合使用,才能让主流浏览器都支持
建议:推荐使用,建议定义公共类,以减少CSS代码
(1) 在子元素后添加一个空p p{clear:both;}
(2) 在父元素中{overflow:hidden|auto;zoom:1}
(3) :after伪选择符,在父容器的尾部自动创建一个子元素
.clearfix:after { content: "\0020";display: block;height: 0;clear: both; } .clearfix { zoom: 1; }复制代码
"clearfix"
是父容器的class名称,"content:"020";"
是在父容器的结尾处放一个空白符,
"height:
0;"
是让这个这个空白字符不显示出来,"display:
block; clear: both;"
是确保这个空白字符是非浮动的独立区块。:after
选择符IE 6不支持,添加一条IE 6的独有命令"zoom:1;"
就行了.
在重合元素外包裹一层容器,并触发该容器生成一个BFC。例子:
<p class="aside"></p> <p class="text"> <p class="main"></p> </p> <!--下面是css代码--> .aside { margin-bottom: 100px; width: 100px; height: 150px; background: #f66; } .main { margin-top: 100px; height: 200px; background: #fcc; } .text{ /*盒子main的外面包一个p,通过改变此p的属性使两个盒子分属于两个不同的BFC,以此来阻止margin重叠*/ overflow: hidden; //此时已经触发了BFC属性。 }复制代码
自动变成display:block
通过媒体查询可以为不同大小和尺寸的媒体定义不同的css,适应相应的设备的显示。
<link rel="stylesheet" type="text/css" href="xxx.css" media="only screen and (max-device-width:480px)">复制代码
@media only screen and (max-device-width:480px) { /css样式/}复制代码
预处理器例如:LESS、Sass、Stylus,用来预编译Sass或less,增强了css代码的复用性,还有层级、mixin、变量、循环、函数等,具有很方便的UI组件模块化开发能力,极大的提高工作效率。
后处理器例如:PostCSS,通常被视为在完成的样式表中根据CSS规范处理CSS,让其更有效;目前最常做的是给CSS属性添加浏览器私有前缀,实现跨浏览器兼容性的问题。
CSS 预处理器为 CSS 增加一些编程的特性,无需考虑浏览器的兼容性问题”,例如你可以在 CSS 中使用变量、简单的逻辑程序、函数(如右侧代码编辑器中就使用了变量$color)等等在编程语言中的一些基本特性,可以让你的 CSS 更加简洁、适应性更强、可读性更佳,更易于代码的维护等诸多好处。
其它 CSS 预处理器语言:
为什么要使用它们?
结构清晰,便于扩展。
可以方便地屏蔽浏览器私有语法差异。这个不用多说,封装对浏览器语法差异的重复处理,减少无意义的机械劳动。
可以轻松实现多重继承。
完全兼容 CSS 代码,可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展,所以老的 CSS 代码也可以与 LESS 代码一同编译。
正确使用display的属性:由于display的作用,某些样式组合会无效,徒增样式体积的同时也影响解析性能。
display:inline后不应该再使用width、height、margin、padding以及float。
display:inline-block后不应该再使用float。
display:block后不应该再使用vertical-align。
display:table-*后不应该再使用margin或者float。
不滥用web字体
对于中文网站来说Web Fonts可能很陌生,国外却很流行。web fonts通常体积庞大,而且一些浏览器在下载web fonts时会阻塞页面渲染损伤性能。
-moz-border-radius: 5px; border-radius: 5px; }复制代码
CSS选择器的解析是从右向左解析的,为了避免对所有元素进行遍历。若从左向右的匹配,发现不符合规则,需要进行回溯,会损失很多性能。若从右向左匹配,先找到所有的最右节点,对于每一个节点,向上寻找其父节点直到找到根元素或满足条件的匹配规则,则结束这个分支的遍历。两种匹配规则的性能差别很大,是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点(叶子节点),而从左向右的匹配规则的性能都浪费在了失败的查找上面。
而在 CSS 解析完毕后,需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree,最终用来进行绘图。在建立 Render Tree 时(WebKit 中的「Attachment」过程),浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果(Style Rules)来确定生成怎样的 Render Tree。
使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体(中易宋体)从 Vista 开始只提供 12、14、16 px 这三个大小的点阵,而 13、15、17 px时用的是小一号的点。(即每个字占的空间大了 1 px,但点阵没变),于是略显稀疏。
◆何时应当使用margin
需要在border外侧添加空白时。
空白处不需要背景(色)时。
上下相连的两个盒子之间的空白,需要相互抵消时。如15px+20px的margin,将得到20px的空白。
◆何时应当时用padding
需要在border内测添加空白时。
空白处需要背景(色)时。
上下相连的两个盒子之间的空白,希望等于两者之和时。如15px+20px的padding,将得到35px的空白。
◆浏览器兼容性问题
在IE5.x、IE6中,为float的盒子指定margin时,左侧margin可能会变成两倍的宽度。通过改用padding或指定盒子为display:inline可以解决。
当按百分比设定一个元素的宽度时,它是相对于父容器的宽度计算的,但是,对于一些表示竖向距离的属性,例如 padding-top , padding-bottom , margin-top , margin-bottom 等,当按百分比设定它们时,依据的也是父容器的宽度,而不是高度。
响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端,而不是为每一个终端做一个特定的版本。
基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
页面头部必须有meta声明的viewport。
<meta name=’viewport’ content=”width=device-width, initial-scale=1. maximum-scale=1,user-scalable=no”>复制代码
视差滚动(Parallax Scrolling)通过在网页向下滚动的时候,控制背景的移动速度比前景的移动速度慢来创建出令人惊叹的3D效果。
:before 和 :after 这两个伪元素,是在CSS2.1里新出现的。起初,伪元素的前缀使用的是单冒号语法,但随着Web的进化,在CSS3的规范里,伪元素的语法被修改成使用双冒号,成为::before ::after
注意:对于IE6/7/8仅支持单冒号表示法,而现代浏览器同时支持这两种表示法。另外,在CSS3中单冒号和双冒号的区域主要是用来区分伪类和伪元素的。
行高是指一行文字的高度,具体说是两行文字间基线的距离。CSS中起高度作用的是height和line-height,没有定义height属性,最终其表现作用一定是line-height。
单行文本垂直居中:把line-height值设置为height一样大小的值可以实现单行文字的垂直居中,其实也可以把height删除。
多行文本垂直居中:需要设置display属性为inline-block。
p{ font-size:10px; -webkit-transform:scale(0.8);//0.8是缩放比例 } 复制代码
-webkit-font-smoothing 在 window 系统下没有起作用,但是在 IOS 设备上起作用 -webkit-font-smoothing:antialiased 是最佳的,灰度平滑。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>复制代码
多数显示器默认频率是60Hz,即1秒刷新60次,所以理论上最小间隔为1/60*1000ms = 16.7ms。
La disposition des zones de ligne sera affectée par les espaces intermédiaires (espaces de retour chariot), etc. Comme les espaces sont aussi des caractères, ces espaces seront également appliqués avec des styles et occuperont de l'espace, il y aura donc des espaces. Définissez la taille des caractères sur 0, il n'y a pas d'espaces.
Solution :
Le p externe utilise position : relative ; le p avec des exigences de hauteur adaptatives utilise position : top : 100px left : 0
42. png, jpg, gif Expliquez ces formats d'image et quand les utiliser. Avez-vous déjà entendu parler de Webp ? est écrit après la balise body. Puisque le navigateur analyse le document HTML ligne par ligne, l'analyse de la feuille de style écrite à la fin (contour ou écrite dans la balise style) amènera le navigateur à arrêter le rendu précédent et à attendre. Chargement. Et si la feuille de style est restituée une fois l'analyse de la feuille de style terminée, le phénomène FOUC peut se produire sous IE sous Windows (c'est-à-dire le problème de scintillement de la page causé par un échec de style)
Lorsque le paramètre est auto, une barre de défilement apparaîtra lorsque le contenu de l'élément enfant est plus grand que l'élément parent.
Lorsque le paramètre est visible, le contenu du débordement apparaît en dehors de l'élément parent.
Lorsque le paramètre est masqué, le débordement est masqué.
Avantages :
1. Très efficace pour réduire les demandes de pages Web et améliorer considérablement les performances des pages 2. 🎜>3. Résolvez le problème du nom des images pour les concepteurs de sites Web
4. Facile à changer de style et facile à entretenir.
Inconvénients :1. Un espace suffisant doit être réservé lors de la fusion d'images. 🎜 >2. Le développement est fastidieux et la mesure est fastidieuse (un générateur de style peut être utilisé)
3. css à modifier.
46. Quelle est la différence entre les pseudo-classes CSS et les pseudo-éléments ?
Première réponse :Pseudo-classes : :focus, :hover, :active Pseudo-éléments : :before, :after
Les pseudo-classes servent essentiellement à combler les lacunes des sélecteurs CSS classiques afin d'obtenir plus d'informations
Les pseudo-éléments créent essentiellement un conteneur virtuel avec du contenu
La syntaxe de ; les pseudo-classes et les pseudo-éléments en CSS3 sont différents ;
Vous pouvez utiliser plusieurs pseudo-classes en même temps, mais un seul pseudo-élément peut être utilisé en même temps ;
Deuxième réponse :
Pseudo-classe : L'élément de sélection de pseudo-classe est basé sur l'état actuel de l'élément, ou sur les caractéristiques actuelles de l'élément, plutôt que l'identifiant statique, la classe, les attributs, etc. du signe de l'élément. Puisque l'état change dynamiquement, lorsqu'un élément atteint un état spécifique, il peut acquérir un style de pseudo-classe ; lorsque l'état change, il perdra ce style ; On peut voir que sa fonction est quelque peu similaire à celle d'une classe, mais elle est basée sur une abstraction en dehors du document, c'est pourquoi on l'appelle une pseudo-classe.
伪元素:与伪类针对特殊状态的元素不同的是,伪元素是对元素中的特定内容进行操作,它所操作的层次比伪类更深了一层,也因此它的动态性比伪类要低得多。实际上,设计伪元素的目的就是去选取诸如元素内容第一个字(母)、第一行,选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的,但是它本身只是基于元素的抽象,并不存在于文档中,所以叫伪元素。
:first-line :first-letter :before :after复制代码
外部样式表,引入一个外部css文件
内部样式表,将css代码放在 93f0f5c25f18dab9d176bd4f6de5d30e 标签内部
内联样式,将css样式直接定义在 HTML 元素内部
最基本的:设置 display 属性为 none,或者设置 visibility 属性为 hidden
技巧性:设置宽高为 0,设置透明度为 0,设置 z-index 位置在 -1000
答案:解决各浏览器对 CSS 解释不同所采取的,区别不同浏览器制作不同CSS样式的设置就叫作 CSS Hack。
块级元素( block )特性:
总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性:
和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变(也就是padding和margin的left和right是可以设置的)。
那么问题来了,浏览器还有默认的天生inline-block元素(拥有内在尺寸,可设置高宽,但不会自动换行),有哪些?
答案:d5fd7aea971a85678ba271703566ebfd 、a1f02c36ba31691bcfe87b2722de723b 、bb9345e55eb71822850ff156dfde57c8 、4750256ae76b6b9d804861d8f69e79d3。
相关文章 为何img、input等内联元素可以设置宽高
外边距重叠就是 margin-collapse。
在CSS当中,相邻的两个盒子的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折叠外边距。
折叠结果遵循下列计算规则:
rgba()和opacity都能实现透明效果,但最大的不同是opacity作用于元素,以及元素内的所有内容的透明度,
而rgba()只作用于元素的颜色或其背景色。(设置rgba透明的元素的子元素不会继承透明效果!)
垂直方向:line-height
水平方向:letter-spacing (letter-spacing 属性增加或减少字符间的空白)
那么问题来了,关于letter-spacing的妙用知道有哪些么?
答案:可以用于消除inline-block元素间的换行符空格间隙问题。
px和em都是长度单位,区别是:px的值是固定的,指定是多少就是多少,计算比较容易。em得值不是固定的,并且em会继承父级元素的字体大小。
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。
不同的浏览器对一些元素有不同的默认样式,如果不处理,在不同的浏览器下会存在必要的风险。
你可能会用Normalize来代替你的重置样式文件。它没有重置所有的样式风格,但仅提供了一套合理的默认样式值。既能让众多浏览器达到一致和合理,但又不扰乱其他的东西(如粗体的标题)。
不能。它只能移动x,y轴的位置。translate3d可以。
1. CSS3 implémente des coins arrondis (border-radius), une ombre (box-shadow),
2 Ajouter des effets spéciaux au texte (text-shadow,), un dégradé linéaire (gradient). , Rotation (transformation)
3. transform:rotate(9deg) scale(0.85,0.90) translation(0px,-30px) skew(-9deg,0deg);// Rotation, mise à l'échelle, position, inclinaison
4. Ajout de plus de sélecteurs CSS multi-arrière-plan rgba
5 Le seul pseudo-élément introduit dans CSS3 est ::selection.
6.
7. border-image
Différence fonctionnelle : HTML est une conception de page Web WEB de base. langage ; XHTML est un langage de balisage basé sur XML. XHTML est compatible avec les principaux navigateurs, téléphones mobiles et PDA, et le navigateur peut compiler rapidement et correctement des pages Web.
Convention d'écriture :
(1) Les balises XHTML doivent être en minuscules
(2) Les balises XHTML doivent être par paires
(3) L'ordre des balises XHTML doit être correct
(4) Tous les attributs XHTML doivent utiliser des guillemets doubles
(5) Aucun XHTML n'est autorisé à utiliser target="_blank"
(6) Les documents XHTML doivent avoir un élément racine.
(7) Les éléments XHTML doivent être correctement imbriqués.
Couche structurelle Couche de présentation HTML Couche de comportement CSS js
Sélecteur {Attribut 1 : valeur 1 ; Attribut 2 : valeur 2 ; ...}
Les éléments obsolètes incluent :
· frame
· frameset
· noframe
· applet
· big
· center
· basefront
Réponse : Lien intégré, intégré, externe, import
(1) le lien est une balise XHTML En plus de charger du CSS, il peut également être utilisé pour définir du RSS, définir des attributs de connexion relatifs. , etc. , aucune compatibilité, prend en charge l'utilisation de javascript pour changer le style ; et @import est fourni par CSS, ne peut être utilisé que pour charger CSS, ne prend pas en charge l'utilisation de javascript pour changer le style
(2) Lorsque la page est chargée, les liens seront chargés en même temps, et le CSS référencé par @import attendra que la page soit chargée avant de charger
(3) l'import est proposé par CSS2.1, et les navigateurs inférieurs à CSS2.1 ne le prennent pas en charge. Il ne peut être utilisé que par IE5 ou supérieur, et le lien est une balise XHTML, aucun problème de compatibilité.
Il est principalement divisé en deux parties : le moteur de rendu (ingénieur de mise en page ou Rendering Engine) et le moteur JS.
(1) Moteur de rendu : responsable de l'obtention du contenu de la page Web (HTML, XML, images, etc.), de l'organisation des informations (comme l'ajout de CSS, etc.) et du calcul de la méthode d'affichage de la page Web, puis l'envoyer sur le moniteur ou l'imprimante. Différents noyaux de navigateur auront différentes interprétations grammaticales des pages Web, de sorte que les effets de rendu seront également différents. Tous les navigateurs Web, clients de messagerie et autres applications qui doivent modifier et afficher Internet nécessitent le noyau.
(2) Moteur JS : analyse et exécute JavaScript pour obtenir des effets dynamiques sur les pages Web ;
Au début, le moteur de rendu et JS n'étaient pas clairement distingués. Plus tard, le moteur JS est devenu. de plus en plus indépendant, le noyau aura tendance à ne restituer que le moteur.
Noyau Trident : IE, MaxThon, TT, The World, 360, navigateur Sogou, etc. [Aussi connu sous le nom de MSHTML]
Noyau Gecko : Netscape6 et supérieur, FF, MozillaSuite/SeaMonkey, etc.
Noyau Presto : Opera7 et supérieur. [Le noyau d'Opera était à l'origine : Presto, maintenant : Blink ;]
Noyau du Webkit : Safari, Chrome, etc. [Chrome : Blink (un fork de WebKit)]
EdgeHTML Core : Microsoft Edge. [Ce noyau est en fait issu d'un fork MSHTML, et presque toutes les fonctionnalités privées d'IE ont été supprimées]
Fermeture des balises, balises minuscules, Pas d'imbrication aléatoire. , améliore la probabilité de recherche des robots de recherche, utilise des scripts de liens externes css et js, séparation du comportement structurel et des performances, téléchargement de fichiers et vitesse de page plus rapides, le contenu est accessible à un plus grand nombre d'utilisateurs et le contenu est accessible par une plus large gamme d'appareils. Accès, moins de code et de composants, facile à maintenir, facile à réviser, pas besoin de modifier le contenu de la page, fournir une version imprimée sans copier le contenu et améliorer la convivialité du site Web
HTML5 n'utilise pas SGML ou XHTML. C'est une toute nouvelle chose, vous n'avez donc pas besoin de vous référer à la DTD. Pour HTML5, il vous suffit de placer le code de type de document suivant pour indiquer au navigateur de le faire. reconnaître qu'il s'agit d'un document HTML5
Non, le navigateur ne le reconnaîtra pas comme un document HTML, et les balises HTML5 ne fonctionneront pas correctement
L'élément Datalist en HTML5 permet de fournir une fonctionnalité de saisie semi-automatique des zones de texte, comme indiqué ci-dessous :
La disposition des colonnes CSS vous aide à diviser le texte en colonnes. Par exemple, considérons les actualités du magazine suivantes dans un texte volumineux, mais nous devons le diviser en 3 colonnes en utilisant des bordures entre elles. Ici, la disposition des colonnes HTML5 est utile.
Set background-position:center;
Laissez une police être marquée comme oblique. S'il n'existe pas de tel format, utilisez des polices italiques
Héritage : une fois qu'un attribut est appliqué à une balise spécifique, l'attribut doit également être appliqué aux balises enfants de cette balise. Ce comportement est appelé héritage. Mais toutes les propriétés ne seront pas héritées. Par exemple, les styles de texte sont généralement hérités, mais la largeur et la hauteur des images de boîte ne sont généralement pas héritées. En bref, tout ce qui doit être hérité sera hérité, et tout ce qui ne devrait pas être hérité ne sera pas hérité.
Réutilisation : Un fichier de style peut être utilisé sur plusieurs pages, ce qui est très utile pour la reconstruction de certains styles courants.
Réponse : Cela implique de la main d'œuvre, de la division du travail et de la synchronisation
(1) La première équipe doit déterminer le style global, le mode de codage, etc.
(2) Les habitudes d'écriture doivent être cohérentes
(3) Marquez le rédacteur de style, marquez chaque module dans le temps (marquez l'endroit où le style clé est appelé)
(4) Marquer la page
(5) Css et html sont stockés en parallèle dans des dossiers séparés, et la dénomination doit être unifiée
(6) Les Js sont stockés dans des dossiers et la dénomination est basée sur la fonction JS
(7) Les images sont utilisées dans des fichiers intégrés au format .png et doivent être intégrées autant que possible pour faciliter la gestion future.
Word-break:break-all;
1a309583e26acea4f04ca31122d8c535 est placée en premier dans le document, avant la balise 100db36a723c770d327fc0aef2ce13b1
Ce n'est pas une balise HTML, elle est utilisée pour informer (indiquer) le navigateur Web quelle version HTML est utilisée sur la page
Éléments en ligne :
(1) Les éléments en ligne ne s'enroulent pas
(2) Les éléments en ligne ne peuvent pas être redimensionnés
( 3) La taille des éléments en ligne est déterminée par le contenu
Éléments de bloc :
(1) Les éléments de bloc sont indépendants dans les lignes
(2 ) Les éléments de bloc peuvent être dimensionnés
(3) Si la largeur d'un élément de bloc n'est pas définie, la largeur s'adaptera à la largeur de son parent
Éléments de ligne :
span, img, a, lable, input, abbr (abréviation), em (em (accent), big, cite (citation), i (italique), q (citation courte), textarea, select (liste déroulante), small, sub, sup, strong, u (souligné), bouton (affichage par défaut : inline-block)
Comme le montrent les résultats d'affichage du navigateur, les éléments en ligne adjacents ne s'enroulent pas, la largeur est la largeur du contenu et les quatre directions de remplissage sont valides (comme le montre la balise span, pour les éléments non en ligne). -éléments de remplacement, la hauteur de ligne ne sera pas affectée et l'élément parent ne sera pas étiré ; Pour les éléments remplacés, l'élément parent sera étiré), la marge n'est valable que dans le sens horizontal (la marge verticale est valable pour l'intérieur- line a remplacé les éléments (tels que les éléments img) et n'est pas valide pour les éléments en ligne non remplacés), et les attributs width et height ne peuvent pas être définis. Les éléments de bloc en ligne se comportent de la même manière que les éléments en ligne, sauf qu'ils peuvent définir les attributs de largeur et de hauteur.
Éléments de bloc :
p, p, h1~h6, ul, ol, dl, li, dd, table, hr, blockquote, adresse, tableau, menu, pré, nouvel en-tête HTML5, section, côté, pied de page, etc.
Il ressort des résultats d'affichage du navigateur que les éléments au niveau du bloc ouvrent une nouvelle ligne (même si la largeur l'attribut est défini (il occupe également une ligne exclusive), essayez de remplir la largeur de l'élément parent, vous pouvez définir les attributs de largeur et de hauteur, l'attribut d'affichage par défaut du navigateur d'éléments de tableau est table.
(1) Trouvez le parent correspondant à son étiquette et définissez text-align: center pour son parent
( 2) Convertissez l'élément en élément bloc et définissez la marge : 0 auto, (il doit s'agir d'un élément bloc et avoir une largeur)
Gras :
CSS : police- poids : gras
HTML : a4b561c25d9afb9ac8dc4d70affff4190d36329ec37a2cc24d42c7229b69747a, 8e99a69fbe029cd4e2b854e244eab143128dba7a3a77be0113eb0bea6ea0a5d0
Italique :
CSS : style de police : italique | oblique, style de police : normal (police normale)
HTML : 5a8028ccc7a7e27417bff9f05adf5932 , 907fae80ddef53131f3292ee4f81644bd1c6776b927dc33c5d9114750b586338
Ceci est expliqué dans Google :
L'écart au bas de l'image implique en fait le modèle de mise en page des éléments en ligne. L'alignement vertical par défaut de l'image est la ligne de base et la position de la ligne de base est liée à la police. Ainsi, parfois, l'espace au bas de l'image peut être de 2 px, et parfois, il peut être de 4 px ou plus. Des tailles de police différentes devraient également affecter la taille de cet écart.
解决办法:
最优的解决办是定义vertical-align,注:定义vertical-align为middle时在IE6中大概还有一像素的顶边距,最好为top或bottom。当然还有种极端解决办法大家可以试试就是将 父容器的字体大小为零,font-size:0
(1)转化成(行级)块元素
display : block复制代码
(2)浮动,浮动后的元素默认可以转化为块元素(可以随意设置宽高属性)
float : left;复制代码
(3)给 img 定义 vertical-align(消除底部边距)
img{ border: 0; vertical-align: bottom; }复制代码
(4)将其父容器的font-size 设为 0;
(5)给父标签设置与图片相同的高度
父级的宽度不够,导致元素无法并排显示;
行内样式、内部样式(写一个style)、外部样式
padding margin复制代码
padding : 0; margin : 0;复制代码
word-spacing : 单词
letter-spacing : 字母、中文
text-decoration : underline | overline | line-through
list-style:none; background-image:url()复制代码
宽度(width)
颜色(color)
线形(solid,dashed,dotted,)实线,虚线,点画线
diaplay:block | inline-block
title :鼠标放入时提示的文字,
alt : 图片路径出错时,提示文字
<meta charset="UTF-8">
相关教程推荐:CSS视频教程
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!