資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學CSS生成的盒子型別
在文件樹經過視覺化格式化模型處理後，每個元素都會生成一個或多個盒子。生成的盒子與某些CSS屬性相關聯，並據此在HTML中呈現。為了顯示元素，以下是兩種常用的值：
塊級(block) - 從新行開始。佔據可用的全部寬度。
內聯(Inline) - 不從新行開始。只佔據所需寬度。
CSS中生成的盒子型別如下：
塊級元素和塊級盒子
匿名塊級盒子
內聯級元素和內聯盒子
匿名內聯盒子
塊級元素和塊級盒子
讓我們來看一個塊級元素和塊級盒子的例子。我們將使用的塊級元素包括：<form>，<fieldset>，<div>等。
首先建立一個帶有子容器的div父容器：
<div id="container">Color Orange <div class="child"></div>Color Red <div class="child"></div>Color Violet <div class="child"></div> </div>
現在，設定子容器的高度和寬度：
.child{
height: 40px;
width: 100%;
color: white;
border: 4px solid black;
}
設定子容器的顏色。可以使用nth-of-type()偽類：
.child:nth-of-type(1){
background-color: #FF8A00;
}
.child:nth-of-type(2){
background-color: #F44336;
}
.child:nth-of-type(3){
background-color: #C303C3;
}
示例
這是一個例子：
<!DOCTYPE html>
<html>
<head>
<title>CSS Block-level Elements and Block Boxes</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
box-sizing: border-box;
/*margin:5px;*/
}
input[type="button"] {
border-radius: 10px;
}
.child{
height: 40px;
width: 100%;
color: white;
border: 4px solid black;
}
.child:nth-of-type(1){
background-color: #FF8A00;
}
.child:nth-of-type(2){
background-color: #F44336;
}
.child:nth-of-type(3){
background-color: #C303C3;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS Block-level Elements and Block Boxes</legend>
<div id="container">Color Orange
<div class="child"></div>Color Red
<div class="child"></div>Color Violet
<div class="child"></div>
</div><br>
</fieldset>
</form>
</body>
</html>
內聯級元素和內聯盒子
讓我們來看一個內聯級元素和內聯盒子的例子。這裡我們將使用的內聯級元素是<span>。將內聯元素設定在<div>中。我們將<span>設定在<div>內部：
<div><span class="child">Orange</span> Color<span class="child">Red</span> Color<span class="child">Violet</span> Color</div>
設定父<div>內子容器的顏色。可以使用nth-of-type()偽類：
.child:nth-of-type(1){
background-color: #FF8A00;
}
.child:nth-of-type(2){
background-color: #F44336;
}
.child:nth-of-type(3){
background-color: #C303C3;
}
示例
這是一個例子：
<!DOCTYPE html>
<html>
<head>
<title>CSS Inline-level Elements and Inline Boxes</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
}
input[type="button"] {
border-radius: 10px;
}
.child{
color: white;
border: 4px solid black;
}
.child:nth-of-type(1){
background-color: #FF8A00;
}
.child:nth-of-type(2){
background-color: #F44336;
}
.child:nth-of-type(3){
background-color: #C303C3;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS Inline-level Elements and Inline Boxes</legend>
<div><span class="child">Orange</span> Color<span class="child">Red</span> Color<span class="child">Violet</span> Color</div><br>
</fieldset>
</form>
</body>
</html>
更新於：2024年1月2日
1K+ 瀏覽量
廣告