Heim >Web-Frontend >CSS-Tutorial >Layoutanzeige
Layoutanzeige
- 高洛峰Original
- 2016-11-01 15:16:551662Durchsuche
Was ist Layout: Der Browser platziert Elemente an der richtigen Stelle und in der richtigen Größe.
Layout: Die Art der Platzierung von Elementen.
CSS-Eigenschaften, die sich auf die Größe und Position von Elementen auswirken: Anzeigeposition Float Flex
Anzeige
Stellen Sie den Anzeigemodus des Elements ein , einschließlich Größe und Position, Anzeigewerte sind:
block
inline
inline-block
none
display : block
Das Blockelement wird auch „Block-Level-Element“ genannt
display : inline
Anzeige: Zeileneigenschaften:
1. Die Standardbreite ist die Inhaltsbreite
2. Die Breite und Höhe können nicht eingestellt werden, da die Breite und Höhe von Elemente auf Zeilenebene können nicht eingestellt werden
3. Peer-Anzeige. Wenn sowohl das vorhergehende als auch das nachfolgende Element display:inline sind (Elemente auf Zeilenebene), werden sie in derselben Zeile angezeigt. Sie können Linien innerhalb von Elementen umbrechen.
Standardanzeige: Inline-Elemente span , a , label, cite , em, …
Zum Beispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>display_inline</title>
<style type="text/css">
.sample{
background-color: pink;
}
/* 行级元素设置宽高无效 */
.sample{
width: 200px;
height: 200px;
}
/* 指定em为块级元素 ，块级元素换行显示（自身相对前序元素是换行的）*/
em{
display: block;
}
</style>
</head>
<body>
<span>before inline</span>
<span class="sample">display : inline;</span>
<em>after inline</em>
</body>
</html>