文章目錄
- 前言
- div
- span
- div 盒子模型
- auto 自動調整
- 水準居中
- 子元素溢出 overflow
前言
div、span 是沒有語義的。他們就是一個盒子（容器），用來裝内容。
- 1、在功能方面：div是一個塊級元素，它包含的元素會自動換行。而span是行内元素，在它的前後不會換行。span沒有結構上的意義，隻是單純的應用樣式，其它元素不适合時，就可以使用span元素。span可以作為div的子元素，但div不能是span的子元素，如果出現span中出現div不符合ws3c的頁面标準。
- 2、在使用方面：span元素寬度是被包圍的内容寬度決定，不建議給span設定寬度屬性width，可以給span設定margin值，設定與父元素之前的距離。span可以通過css聲明（display:block）轉換為塊元素，想對一行中的文字或圖檔單獨設定樣式，而又由不需要換行的條件下又不影響其他行内其他内容，span可以很好解決這些問題
- 3、div 有寬度 width 、高度 height 。 如果不設定寬高、那麼 div 的寬度和高度則由它所包含的内容決定。
div
html
中的
div (division)
标簽是一個塊級元素，浏覽器通常會在
div
元素前後放置一個換行符。
div
标簽可以把文檔分割為獨立的、不同的部分。它可以用作嚴格的組織工具，并且不使用任何格式與其關聯。
<head>
<meta charset="UTF-8">
<title>測試</title>
<style>
.red {
background: coral;
color: red;
}
</style>
</head>
<body>
<div class="red">
<p>我是一個p</p>
<p>我是一個p</p>
</div>
</body> 
span
<head>
<meta charset="UTF-8">
<title>測試</title>
<style>
.red {
background: coral;
color: red;
}
.blue {
background: blue;
}
</style>
</head>
<body>
<div class="red">
<p>我是一個p <span class="blue"> 我是一個span </span> </p>
<p>我是一個p</p>
</div>
</body> 
div 盒子模型
<head>
<meta charset="UTF-8">
<title>測試</title>
<style>
.red {
background: black;
color: red;
float: bottom;
width: 250px;
height: 70px;
padding-top: 10px;
padding-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
margin: 20px;
border: 2px solid #ff0000;
border-left: 10px solid #2c3e50;
border-bottom: 10px solid coral;
border-radius: 8px;
border-top-left-radius: 20px;
}
</style>
</head>
<body>
<div class="red">
<p>我是一個p</p>
<p>我是一個p</p>
</div>
</body> auto 自動調整
div 的寬度預設是 auto
<head>
<style>
.red {
background: black;
color: red;
width: auto;
}
</style>
</head>
<body>
<div class="red">
<p>我是一個p</p>
<p>我是一個p</p>
</div>
</body> 水準居中
如果
margin-left: auto; margin-right: auto;
那麼控件将會水準居中顯示
<head>
<style>
.red {
background: black;
width: 300px;
height: 100px;
}
.child {
width: 100px;
color: red;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="red">
<p class="child">我是一個p</p>
</div>
</body> 小技巧：
margin: 0 auto;
表示上下邊距為 0 ，左右邊距為 auto
子元素溢出 overflow
處理子元素超出父元素的處理情況，在父元素添加
overflow
屬性
overflow: scroll;
overflow-x: scroll;
overflow-y: scroll; - visible 預設值。内容不會被修剪，會呈現在div之外。
- hidden 内容會被修剪，并且其餘内容是不可見的。
- scroll 内容會被修剪，但是浏覽器會顯示滾動條以便檢視其餘的内容，scroll 會出現橫向、縱向滾動條
- auto 如果内容被修剪，則浏覽器會顯示滾動條以便檢視其餘的内容，auto 會自動根據實際情況添加滾動條。
- inherit 規定應該從父元素繼承 overflow 屬性的值。（注：所有IE浏覽器都不支援inherit屬性）