12-CSS基礎-CSS顯示模式
12-CSS基礎-CSS顯示模式
Div和Span標籤
- 什麼是div?
- 作用: 一般用於配合css完成網頁的基本佈局
<style>
.header{
width: 980px;
height
background: red;
margin: auto;
margin-bottom: 10px;
}
.content{
width: 980px;
height: 500px;
background: green;
margin: auto;
margin-bottom: 10px;
}
.footer{
width: 980px;
height: 100px;
background: blue;
margin: auto;
}
.logo{
width: 200px;
height: 50px;
background: pink;
float: left;
margin: 20px;
}
.nav{
width: 600px;
height: 50px;
background: yellow;
float: right;
margin: 20px;
}
.aside{
width: 250px;
height: 460px;
background: purple;
float: left;
margin: 20px;
}
.article{
width: 650px;
height: 460px;
background: deepskyblue;
float: right;
margin: 20px;
}
</style>
<div class="header">
<div class="logo"></div>
<div class="nav"></div>
</div>
<div class="content">
<div class="aside"></div>
<div class="article"></div>
</div>
<div class="footer"></div>
- 什麼是span?
- 作用: 一般用於配合css修改網頁中的一些區域性資訊
<style>
span{
color: red;
}
</style>
<p>努力到<span>無能為力</span>, 拼搏到<span>感動自己</span></p>
- div和span有什麼區別?
- 1.div會單獨的佔領一行,而span不會單獨佔領一行
- 2.div是一個容器級的標籤, 而span是一個文字級的標籤
- 容器級的標籤和文字級的標籤的區別?
- 容器級的標籤中可以巢狀其它所有的標籤
- 常見容器級的標籤: div h ul ol dl li dt dd ...
- 文字級的標籤中只能巢狀文字/圖片/超連結
- 常見文字級的標籤:span p buis strong em ins del ...
- 注意點:
- 不用刻意去記憶哪些標籤是文字級的哪些標籤是容器級, 在企業開發中一般情況下要巢狀都是巢狀在div中, 或者按照組標籤來巢狀(ul>li, ol>li , dl>dt+dd)
CSS元素顯示模式
- 在HTML中HTML將所有的標籤分為兩類, 分別是容器級和文字級
- 在CSS中CSS也將所有的標籤分為兩類, 分別是塊級元素和行內元素(其實還有一類, 行內塊級)
- 什麼是塊級元素, 什麼是行內元素?
- 塊級元素會獨佔一行
- 行內元素不會獨佔一行
- 常見容器級的標籤: div h ul ol dl li dt dd ...
- 常見文字級的標籤:span p buis stong em ins del ...
- 常見塊級元素: p div h ul ol dl li dt dd
- 常見行內元素: span buis strong em ins del
- 塊級元素和行內元素的區別?
- 塊級元素
- 獨佔一行
- 如果沒有設定寬度, 那麼預設和父元素一樣寬
- 如果設定了寬高, 那麼就按照設定的來顯示
- 行內元素
- 不會獨佔一行
- 如果沒有設定寬度, 那麼預設和內容一樣寬
- 行內元素是不可以設定寬度和高度的
- 行內塊級元素
- 為了能夠讓元素既能夠不獨佔一行, 又可以設定寬度和高度, 那麼就出現了行內塊級元素
- 不獨佔一行, 並且可以設定寬高
CSS元素顯示模式轉換
- 如何轉換CSS元素的顯示模式?
- 設定元素的display屬性
- display取值
- block 塊級
- inline 行內
- inline-block 行內塊級
- 快捷鍵
- di display: inline;
- db display: block;
- dib display: inline-block;