資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
安卓
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟
心理學
社會科學
時尚研究
法律研究CSS 中的塊級元素和塊級盒子
塊級元素的 CSS 顯示屬性設定為“塊”、“列表項”或“表”，且這些元素強制在它們上方和下方換行。塊級元素會生成塊級盒子，這是定位方案的一部分，且包含子盒子。
塊級容器盒子既可包含塊級盒子並遵循塊級格式化上下文，也可包含內聯級盒子並遵循內聯格式化上下文。如果塊級盒子也是塊級容器，通常稱為塊級盒子。
匿名塊級盒子是指開發者無法控制的盒子。如果一個內聯盒子包含一個塊級盒子，並且方塊盒子周圍的內聯內容被封閉在一個匿名塊級盒子裡。
設定表單
首先，設定表單及其寬度 -
form {
width:70%;
margin: 0 auto;
text-align: center;
}
設定子級樣式
設定子級的高度和寬度 -
.child{
height: 40px;
width: 100%;
color: white;
border: 4px solid black;
}
：nth-of-type(n) 選擇器
對於這些元素，我們使用了 :nth-of-type(n) 選擇器。它匹配父母的相同標籤的第 n 個子元素 -
<div id="container">Color Orange <div class="child"></div>Color Red <div class="child"></div>Color Violet <div class="child"></div> </div>
第 n 個子元素
使用 :nth-of-type(n) 選擇器在上方進行設定 −
.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;*/
}
.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>
</form>
</body>
</html>
更新於: 2023 年 10 月 27 日
1 千+ 次瀏覽
廣告