width 宽度,css中width指的是内容的宽度,而不是盒子的宽度。 height高度 ,css中Height指的是内容的高度,而不是盒子的高度。 padding 内边距 border 边框 margin 外边距
.box1{ width:100px; height:100px; padding:100px; border:1px solid red;} 计算如下:1+100+100+100+1=302px.box2{ width:250px; height:250px; padding:25px; border:1px solid red;} 计算如下:1+25+250+25+1=302px 上面代码中盒子的真实占有宽度计算公式: 真实占有宽度=左border+左padding+width+右padding+右border
Le premier type : les petits attributs, c'est-à-dire les attributs composites.
padding-top:30px; 上padding-right:20px; 右padding-bottom:40px; 下padding-left:100px; 左
Le deuxième type : des attributs complets.
Séparé par des espaces, en haut, à droite, en bas et à gauche.
padding:30px 20px 40px 100px;
padding:20px;padding-left:30px;
Question 1 :
p{ width:200px; height:200px; padding-left:10px; padding-right:20px; padding:40px 50px 60px; padding-bottom:30px; border:1px solid #000; }
Réponse : padding-left: 10px; et padding-right: 20px ; sont inutiles, car les attributs de remplissage derrière eux sont superposés.
none 定义无边框。 hidden 与 “none” 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。 dotted 定义点状边框。在大多数浏览器中呈现为实线。 dashed 定义虚线。在大多数浏览器中呈现为实线。 solid 定义实线。 double 定义双线。双线的宽度等于 border-width 的值。 groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。 ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。 inset 定义 3D inset 边框。其效果取决于 border-color 的值。 outset 定义 3D outset 边框。其效果取决于 border-color 的值。 inherit 规定应该从父元素继承边框样式。 常用的有:solid 、dashed、 dotted
border-width:10px; 边框宽度border-style:solid; 线型border-color:red; 颜色等价于:border:10px solid red;
border-width:10px 20px;border-style:solid dashed dotted;border-color:red green blue yellow;
border-top:10px solid red;border-right:10px solid red;border-bottom:10px solid red;border-left:10px solid red;等价于:border:10px solid red
border-top-width:10px;border-top-style:solid;border-top-color:red;border-right-width:10px;border-right-style:solid;border-right-color:red;border-bottom-width:10px;border-bottom-style:solid;border-bottom-color:red;border-left-width:10px;border-left-style:solid;border-left-color:red;等价于:border:10px solid red;
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>三角形</title> <style type="text/css"> p{ width: 0px; height: 0px; border: 30px solid white; border-top-color: pink; transition:all 1s ease 0s; } p:hover{ transform: rotate(180deg); } </style> </head> <body> <p> </p> </body> </html>
<2>Propriétés microscopiques du débit standard :
(1) Phénomène de pliage des blancs.
(2) La hauteur est inégale et les bords inférieurs sont alignés.
(3) Retour à la ligne automatique Si vous ne parvenez pas à terminer l'écriture sur une ligne, enveloppez-la dans une nouvelle ligne.
<3>Éléments de niveau bloc et éléments en ligne
(1) Les balises sont divisées en deux niveaux : les éléments de niveau bloc et les éléments en ligne.
(2) Éléments de niveau bloc :
霸占一行,不能与其他任何元素并列。 能接受宽高。 如果不设置宽度,那么宽度将默认变为父亲的100%。
可以与其他行内元素并排。 不能设置宽高。默认的宽度,就是文字的宽度。
文本级:p、span、a、b、i、u、em 容器级:p 、h系列 、li 、dt 、dd
4.2 Conversion entre les éléments de niveau bloc et les éléments en ligne
display:inline; 这个标签将会变为行内元素。 display:block; 这个标签将会变为块级元素。
(2) Positionnement absolu
(3) Positionnement fixe
5. Flottant : C'est l'attribut le plus couramment utilisé pour la mise en page en CSS.
5.3 Les éléments flottants ont un effet de "marge de mot"
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!