本文是針對剛學(xué)編程的小白,都是一些基礎(chǔ)知識,如果想了解更多深層一點的東西,歡迎移步本人博客!!
博客地址 點擊跳轉(zhuǎn)
內(nèi)容LongLongLong是一種情懷
朋友總說我寫的博客老長老長了,誰會有耐心去閱讀呢 ? 而我覺得我把全部的知識概要羅列出來,每一個路過的人至少他不用費心竭力的去網(wǎng)上各種搜各種找,然后還外帶各種坑,學(xué)習(xí)起來太費勁 ! 也不系統(tǒng) ! 如果是一個真正想進(jìn)入互聯(lián)網(wǎng)行業(yè),想成為一個真正的工程師的人,他應(yīng)該不會覺得長的.希望我的文章對你有所幫助 !
CSS格式
- 一定要用一對style標(biāo)簽包裹起來 而且必須要寫在head標(biāo)簽之內(nèi) titile標(biāo)簽的下面
- 示例代碼 :
<style type="text/css">
P{
text-align: center;
color: green;
}
</style>
文字屬性
- 示例代碼 :
<style>
p{
font-style: italic;
/*快捷鍵*/
/*fs font-style:italic; fs然后按Tab就會自動補(bǔ)全带兜，其實想要寫的代碼首字母*/
font-weight: bold;
/*快捷鍵*/
/*fwb font-weight:bold; fwb然后按Tab就會自動補(bǔ)全坏瞄，其實想要寫的代碼首字母*/
font-size: 30px;
/*快捷鍵*/
/*fz30 font-size:30px; */
font-family: '楷體';
}
</style>
- 如果我們設(shè)置的字體用戶電腦不存在壤短，那么系統(tǒng)會用默認(rèn)的字體來顯示宋體
- 如果設(shè)置的字體不存在跪削，而我們又不想用默認(rèn)的字體來顯示怎么辦币他？
- 如果想給中文和英文分別單獨設(shè)置樣式怎么辦鳍置？
- 開發(fā)中一般常見的字體
中文：宋體/黑體/微軟雅黑
英文：Arial/Time New Roma - 示例代碼 :
<style>
p{
/*font-family: '亂七八糟的字體','微軟雅黑'; *//*(備選方案用逗號隔開)*/
font-family: 'Arial','微軟雅黑';
/*font-family: '微軟雅黑','Arial';*/
/*中文字體可以處理英文字體樣式登疗，但是英文字體無法處理中文字體樣式，用備選方案即可*/
}
</style>
文字屬性的縮寫
- 示例代碼 :
<style>
p{
/*font-style: italic;*/
/*font-weight: bold;*/
/*font-size: 30px;*/
/*font-family: '楷體';*/
/* 縮寫格式娱节，中間用空格隔開挠蛉，style和weight可以省略和互換位置，size和family不可以省略肄满，也不可以互換位置谴古，size必須寫在family的前面，否則沒有任何效果 */
font: italic bold 30px '楷體';
/*14px代表字號 24代表行高 楷體代表字形 這是一個語法 缺一不可*/
font:14px/24px "楷體";
/*中文字體的別名*/
font-family:"Microsoft YaHei"; /*微軟雅黑*/
font-family:"SimSun"; /*宋體*/
/*縮寫*/
font:24px/44px "Times New Roman","Microsoft YaHei","SimSun";
}
</style>
文本屬性
- 文本裝飾的屬性
- 格式：
- text-decoration: underline;
- 取值：
underline:下劃線
line-through：刪除線
over-line：上劃線
none：什么都沒有 最常見的用途就是刪除超鏈接的下劃線 - 文本水平對齊的屬性
- 格式：
text-align: center; - 取值：
left/right/center - 文本縮進(jìn)的屬性
- 格式：
- text-indent: 2em;
- 取值：
em縮進(jìn)兩個字符
顏色的屬性
- 在CSS中如何通過color屬性來修改文字顏色
- 格式：color：值;
- 取值：
1.英文單詞（表達(dá)有限制稠歉，不是所有顏色都可以用英文來表達(dá)的）
2.rgb
三原色掰担，r代表red，g代表green怒炸，b代表blue） rgb（0恩敌，0，0）里面的取值就是取色的比例横媚，0-255
紅色：rgb(255,0,0);
綠色：rgb(0,255,0);
藍(lán)色：rgb(0,0,255);
黑色：rgb(0,0,0);
灰色：rgb(150,150,150);
只要讓其中的取值都相同就是灰色，值越小越偏黑月趟，值越大越偏白灯蝴。企業(yè)開發(fā)中一般都用灰色的多
3.rgba
CSS3的時候推出來的，前面的rgb和上面的都是一樣的孝宗，后面的a是代表透明度穷躁，最大值是1
4.十六進(jìn)制
十六進(jìn)制的本質(zhì)就是rgb，例如：#FFEE00 FF代表r EE代表g 00代表b
十進(jìn)制是0-9因妇，逢十進(jìn)一
十六進(jìn)制是0-F问潭，逢十六進(jìn)一
十六進(jìn)制和十進(jìn)制轉(zhuǎn)換的公式
用十六進(jìn)制的第一位 x16 + 十六進(jìn)制的第二位 = 十進(jìn)制
15 == 1x16 + 5 = 21
12 == 1x16 + 2 = 18
FF == Fx16 + F = 15x16 + 15 = 240 + 15 = 255
00 == 0x16 + 0 = 0
5.十六進(jìn)制縮寫
在CSS中只要十六進(jìn)制的顏色每兩位的值都是一樣的，那么就可以簡寫為一位
例如：#FF0000 = #F00
6.注意點：
如果當(dāng)前顏色對應(yīng)的數(shù)字不一樣婚被，那就不能簡寫狡忙，例如：#123455
如果兩位相同的數(shù)字不是屬于同一個顏色的，也不能簡寫址芯，例如：#122334
標(biāo)簽選擇器
- 作用：根據(jù)指定的標(biāo)簽名稱灾茁，在當(dāng)前界面找到找有該名稱的標(biāo)簽窜觉，然后設(shè)置屬性
- 格式：
- 標(biāo)簽名稱{
屬性：值；
} - 注意點：
1.標(biāo)簽選擇器選中的是當(dāng)前界面中所有的標(biāo)簽北专，而不能單獨選中某一個標(biāo)簽
2.標(biāo)簽選擇器無論標(biāo)簽藏的多深禀挫，被包裹幾層，都能選中
3.只要是HTML中的標(biāo)簽就可以作為標(biāo)簽選擇器
- 示例代碼 :
<style>
p{ /* p標(biāo)簽 就是一個標(biāo)簽選擇器 */
color: red;
}
</style>
id選擇器
- 作用：根據(jù)指定的id名稱找到對應(yīng)的標(biāo)簽拓颓，然后給它設(shè)置屬性语婴，
- 格式：id前面必須 + #
- 注意點：
1.每個HTML標(biāo)簽都有一個屬性就做id，每個標(biāo)簽都可以設(shè)置id
2.id是獨一無二的驶睦，必須是唯一的
3.id選擇器前面必須加 #
4.id的名稱只能由字母/數(shù)字/下劃線 （a-z砰左，0-9，_）啥繁，其他的一律不行
5.id的名稱不能由數(shù)字開頭
6.id名稱不能是HTML標(biāo)簽的名稱（a菜职，img，h1...）
7.在開發(fā)中一般情況下如果只是為了設(shè)置樣式旗闽，我們不會用id酬核，因為在前端開發(fā)中id是留給js使
- 示例代碼 :
<p id="identity1">遲到毀一生</p>
<p id="identity2">早退窮三代</p>
<p id="identity3">按時上下班</p>
<p id="identity4">必成高富帥</p>
<style>
#identity1{
color: red;
}
#identity2{
color: blue;
}
#identity3{
color: green;
}
#identity4{
color: yellow;
}
</style>
類選擇器
- 作用:根據(jù)指定的類名稱找到對應(yīng)的標(biāo)簽,然后設(shè)置屬性
- 格式:
- . 類名{ }
- 注意點:
1.每個HTML標(biāo)簽都有一個屬性就做class，每個標(biāo)簽都可以設(shè)置class
2.class是可以重復(fù)的
3.id選擇器前面必須加 .
4.類名的命名規(guī)范和id名稱的命名規(guī)范一樣
5.類名就是專門用來給某個特定的標(biāo)簽設(shè)置樣式的
6.在HTML中每一個標(biāo)簽可以同時綁定多個類名
7.格式:
<標(biāo)簽名稱 class="類名1 類名2...">
<p class="類名1" class="類名2" ...></p> 錯誤的寫法
id選擇器和class選擇器的區(qū)別
- id相當(dāng)于人的身份證不可以重復(fù)
- class相當(dāng)于人的名稱可以重復(fù)
- 一個HTML標(biāo)簽只能綁定一個id名稱
- 一個HTML標(biāo)簽可以綁定多個class名稱
- id選擇器是以#開頭
- class選擇器是以.開頭
- 開發(fā)中到底用id選擇器和class選擇器呢
1.id一般情況下是給js使用的,所以除非是特殊情況,否則不要使用id去設(shè)置樣式
2.在企業(yè)開發(fā)中一個開發(fā)人員對類的使用可以看出這個開發(fā)人員的技術(shù)水平
3.一般情況在企業(yè)開發(fā)中要注重冗余代碼的抽取,可以將一些公共的代碼抽取到一個類選擇器中,然后讓標(biāo)簽和這個類 選擇器綁定即可
后代選擇器
- 找到指定標(biāo)簽的所有后代標(biāo)簽,設(shè)置屬性
- 格式:
標(biāo)簽名稱1 標(biāo)簽名稱2{
屬性:值;
} - 先找到名稱叫做標(biāo)簽1的標(biāo)簽,然后再在這個標(biāo)簽下面查找所有名稱叫做標(biāo)簽2的標(biāo)簽,然后設(shè)置屬性
- 注意點:
1.后代選擇器必須用空格隔開
2.后代選擇器不僅僅是兒子,也包括孫子/重孫子,只要最終是放到指定標(biāo)簽中的都是后代
3.后代選擇器不僅僅可以使用標(biāo)簽的名稱,還可以選擇其他的選擇器**
子元素選擇器
- 作用:找到指定標(biāo)簽中所有特定的直接資源色,然后設(shè)置屬性
- 格式:
標(biāo)簽名稱1>標(biāo)簽名稱2{
屬性:值;
} - 注意點:
1.子元素選擇器只會查找兒子,不會查找其他的元素
2.子元素選擇器之間需要用>符號鏈接 不能有空格
3.子元素選擇器不僅僅可以使用標(biāo)簽的名稱,還可以選擇其他的選擇器
4.子元素選擇器可以通過>符號一直延續(xù)下去
- 示例代碼 :
<p>我是段落</p>
<div id="identity">
<p>我是段落</p>
<p>我是段落</p>
<ul>
<li>
<p>我是段落</p>
</li>
</ul>
</div>
<p>我是段落</p>
<style>
/*
div>p{
color: red;
}
*/
/*
#identity>p{
color: red;
}
*/
div>ul>li>p{
color: red;
}
</style>
后代選擇器和子元素選擇器
區(qū)別
- 后代選擇器使用空格作為連接符號
- 子元素選擇器使用>作為連接符號
- 后代選擇器會選中指點標(biāo)簽中所有的特定后代標(biāo)簽 也就是會選中兒子/孫子... 只要被放到指定標(biāo)簽中的特定標(biāo)簽都會被選中
- 子元素選擇器智慧選中指定標(biāo)簽中所有的特定直接標(biāo)簽 也就是只會選中- 特定的兒子標(biāo)簽
共同點
- 后代選擇器和子元素選擇器都可以使用標(biāo)簽名稱/id名稱/class名稱來作為選擇器
- 后代選擇器和子元素選擇器都可以通過各自的連接符號一直延續(xù)下去
- 開發(fā)中如何選擇
1.如果想選中指定標(biāo)簽中所有特定的標(biāo)簽 那么就使用后代選擇器
2.如果紙箱選中指定標(biāo)簽中的所有特定的兒子標(biāo)簽 那么就使用子元素選擇器
交集選擇器
- 作用:給所有選擇器選中的標(biāo)簽中相交的那部分標(biāo)簽設(shè)置屬性
- 格式:
選擇器1選擇器2{
屬性:值;
} - 注意點:
1.選擇器和選擇器之間沒有任何的連接符號
2.選擇器可以使用標(biāo)簽名稱/id名稱/class名稱
3.只做了解 開發(fā)中很少用到
- 示例代碼 :
<p class="para1" id="identity">我是段落</p>
<p class="para1">我是段落</p>
p.para1#identity{ color: red;}
并集選擇器
- 作用:給所有選擇器選中的標(biāo)簽設(shè)置屬性
-
格式:
選擇器1,選擇器2{
屬性:值;
} - 注意點:
1.并集選擇器必須用,隔開
2.選擇器可以使用標(biāo)簽名稱/id名稱/class名稱
- 示例代碼 :
<h1 class="ht">我是標(biāo)題</h1>
<p class="para">我是段落</p>
<style>
/*
.ht{
color: red;
}
.para{
color: red;
}
*/
.ht,.para{
color:blue;
}
</style>
兄弟選擇器
相鄰兄弟選擇器 CSS2
- 作用:給指定選擇器后面緊跟的那個選擇器選中的標(biāo)簽設(shè)置屬性
-
格式:
選擇器1+選擇器2{
屬性:值;
} - 注意點:
1.相鄰兄弟選擇器之間必須用+連接起來
2.相鄰兄弟選擇器只能選擇緊跟其后的那個標(biāo)簽 不能選中被隔開的標(biāo)簽
通用兄弟選擇器=
- 作用:給指定選擇器后面的所有選擇器選中的所有標(biāo)簽設(shè)置屬性
- 格式:
選擇器1~選擇器2{
屬性:值;
} - 注意點:
1.通過兄弟選擇器必須用~隔開
2.通用兄弟選擇器選中的是指定選擇器后面某個選擇器中所有的標(biāo)簽 不管中間有沒有被其他標(biāo)簽隔開 - 示例代碼 :
<h1 class="ht">我是標(biāo)題</h1>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<h1>我是標(biāo)題</h1>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<style>
/*
.ht+p{
color: red;
}
*/
h1~p{
color: blue;
}
</style>
序選擇器
CSS3中新增的選擇器最具代表的就是序選擇器
同級別中的第幾個
- :first-child 選中同級別中的第一個標(biāo)簽
- :last-child 選中同級別中的最后一個標(biāo)簽
- nth-child(n) 選中同級別中的第n個標(biāo)簽
- :nth-last-child(n) 選中同級別中的倒數(shù)第n個標(biāo)簽
- :only-child 選中父元素中唯一的這個元素
- 注意點:這幾個都不區(qū)分類型
同級別同類型中的第幾個
- :first-of-type 選中同級別中同類型的第一個標(biāo)簽
- :last-of-type 選中同級別中同類型的最后一個標(biāo)簽
- :nth-of-type(n) 選中同級別中同類型的第n個一個標(biāo)簽
- :nth-last-of-type(n) 選中同級別中同類型的倒數(shù)第n個標(biāo)簽
- :only-of-type 選中父元素唯一類型的某個標(biāo)簽
- :nth-child(odd) 選中同級別中的所有奇數(shù)
- :nth-child(even) 選中同級別中的所有偶數(shù)
- :nth-child(xn+y)
- x和y是用戶自定義的 而n是一個計數(shù)器 從0開始遞增
- 示例代碼 :
<style>
p:first-child{
color: red;
}
p:first-of-type{
color: blue;
}
p:last-child{
color: red;
}
p:last-of-type{
color: blue;
}
p:nth-child(3){
color: green;
}
p:nth-of-type(3){
color: red;
}
p:nth-last-child(2){
color: red;
}
p:nth-last-of-type(2){
color: red;
}
p:only-child{
color: purple;
}
p:only-of-type{
color: red;
}
p:nth-child(odd){
color: red;
}
p:nth-child(even){
color: blue;
}
p:nth-of-type(odd){
color: red;
}
p:nth-of-type(even){
color: blue;
}
p:nth-child(2n+0){
color: red;
}
p:nth-child(3n+0){
color: red;
}
</style>
屬性選擇器
- 作用:根據(jù)指定的屬性名稱找到對應(yīng)的標(biāo)簽設(shè)置屬性
- 格式:
[attribute=value]
1.作用:找到有指定屬性 并且屬性的取值等于value的標(biāo)簽 然后設(shè)置屬性
2.最常見的場景就是區(qū)分input屬性 - 示例代碼 :
input[type=password]{}
<input type="text" name="" id="">
<input type="password" name="" id="">
<input type="checkbox" name="" id="">
<input type="radio" name="" id="">
- 示例代碼 :
<p id="identity1">我是段落1</p>
<p id="identity2" class="cc">我是段落2</p>
<p class="cc">我是段落3</p>
<p id="identity3" class="para">我是段落4</p>
<p>我是段落5</p>
<style>
/*
p[id]{
color: red;
}
*/
p[class=cc]{
color: blue;
}
</style>
屬性選擇器2
屬性取值是以什么開頭的
- [attribute^=value] CSS3
- [attribute|=value] CSS2
- 區(qū)別:
1.CSS2中的只能找到value開頭 value是被-和其他內(nèi)容隔開的
2.CSS中只要是以value開頭的都可以找到,無論它是不是被隔開
3.屬性的取值是以什么結(jié)尾的
[attribute$=value] CSS3
4.屬性的取值是否包含某個特定的值
[attribute~=value] CSS2
[attribute=value] CSS3*
- 示例代碼 :
<img src="" alt="abcwwwmmm">
<img src="" alt="wwwmmmabc">
<img src="" alt="wwwabcmmm">
<img src="" alt="def abc">
<img src="" alt="ppp abc">
<style>
/*
img[alt^=abc]{
color: red;
}
*/
/*
img[alt|=abc]{
color: red;
}
img[alt$=abc]{
color: blue;
}
*/
img[alt*=abc]{
color: red;
}
</style>
通配符選擇器
- 由于通配符選擇器是設(shè)置界面上所有的標(biāo)簽屬性 所以在設(shè)置之前會遍歷所有的標(biāo)簽 如果當(dāng)前界面的標(biāo)簽比較多 那么性能就會比較差 所以在企業(yè)開發(fā)中一般不會使用通配符選擇器
- 示例代碼 :
<style>
/* 不推薦使用 */
*{
margin:0;
padding:0;
}
</style>
CSS三大特性之繼承性
什么是繼承性
- 作用:給父元素設(shè)置的屬性 他的子元素也可以使用
- 注意點:
** 1.并不是所有的屬性都可以繼承 只有以color/font-/text-/line開頭的屬性才可以繼承
2.在CSS的繼承中 不僅僅是兒子可以繼承 只要是后代 都可以繼承
3.CSS繼承性中的特殊性
a標(biāo)簽的文字顏色和下劃線是不能繼承的
h標(biāo)簽的文字大小是不能繼承的**
-
應(yīng)用場景:
一般用于設(shè)置網(wǎng)頁上的一些共性信息 例如網(wǎng)頁的文字顏色 字體 字體大小等內(nèi)容 body{} - 示例代碼 :
<div>
<p>我是段落</p>
</div>
<div>
<ul>
<li>
<p>我是段落</p>
</li>
</ul>
</div>
<div>
<a href="#">我是超鏈接</a>
</div>
<div>
<h1>我是大標(biāo)題</h1>
</div>
<style>
div{
color:red;
font-size: 30px;
}
</style>
CSS三大特性之層疊性
什么是層疊性
- 作用:層疊性就是CSS處理沖突的一種能力
-
注意點:
層疊性只有在多個選擇器選中"同一個標(biāo)簽" 然后又設(shè)置了"相同的屬性" 才會發(fā)生層疊性 - CSS全稱 Cascading StyleSheet
- 示例代碼 :
<p id="identity" class="para">我是段落</p>
<style>
p{
color: red;
}
.para{
color: blue;
}
</style>
CSS三大特性之優(yōu)先級
什么是優(yōu)先級
- 作用:當(dāng)多個選擇器選中同一個標(biāo)簽 并且給同一個標(biāo)簽設(shè)置相同屬性時 如何層疊就由優(yōu)先級來確定
- 優(yōu)先級判斷的三種方式
1.是否是直接選中(間接選中就是繼承) 遵循就近原則 誰離的近 就層疊誰的樣式
2.相同的選擇器 如果都是直接選中 都是同類型的選擇器 誰寫在后面就層疊誰的樣式
3.不同的選擇器 如果都是直接選中 但是是不同類型的選擇器
id>類>標(biāo)簽>通配符>繼承>瀏覽器默認(rèn)
- 示例代碼 :
<ul>
<lu>
<li>
<p id="identity" class="para">我是段落</p>
</li>
</lu>
</ul>
<style>
p{}
#identity{}
.para{}
ul{
color: red;
}
li{
color: blue;
}
</style>
優(yōu)先級之 important
- 作用:用于提升某個標(biāo)簽直接選中標(biāo)簽的選擇器的某個屬性的優(yōu)先級的 可以將被指定的屬性的優(yōu)先級提升為最高
-
注意點:
1.important只能用于直接選中 不能用與間接選中
2.通配符選擇器選中的標(biāo)簽也是直接選中的
3.!important只能提升被指定的屬性的優(yōu)先級 其他屬性的優(yōu)先級不會被提升
4.!important必須寫在屬性值的后面 感嘆號不能省略 必須寫在分號里面 - 示例代碼 :
<ul>
<lu>
<li>
<p id="identity" class="para">我是段落</p>
</li>
</lu>
</ul>
<style>
#identity{
color: red;
}
p{
color: deepskyblue ;
}
li{
color: blue !important; (間接選中的無效)
}
</style>
優(yōu)先級之權(quán)重問題
- 作用:當(dāng)多個選擇器混合在一起使用時 我們可以通過計算權(quán)重來判斷誰的優(yōu)先級最高
權(quán)重的計算規(guī)則
- 首選計算選擇器中誰的id最多
- 如果id的個數(shù)一樣 那么再看類名的個數(shù) 類名個數(shù)多的優(yōu)先級別高
- 如果類名的個數(shù)一樣 那么再看標(biāo)簽名的個數(shù) 標(biāo)簽名個數(shù)多的優(yōu)先級別高
- 如果id/類名/標(biāo)簽名的個數(shù)都一樣 那么誰寫在最后面就層疊誰的樣式
-
注意點:
只有選擇器是直接選中標(biāo)簽的 才需要計算權(quán)重 - 示例代碼 :
<div id="identity" class="box1">
<ul>
<li>
<p id="identity1" class="box2">我是段落</p>
</li>
</ul>
</div>
<style>
#identity1.box2{
color: red;
}
.box1 .box2{
color: aqua;
}
div ul li p{
color: blue;
}
</style>
div和span標(biāo)簽
div
- 作用:配合CSS完成網(wǎng)頁的基本布局
span
- 作用:一般配合CSS修改網(wǎng)頁中的局部信息
div和span有什么區(qū)別
- div會獨占一行 而span不會獨占一行
- div是一個容器級別的標(biāo)簽 而span是文本級別的標(biāo)簽
- 容器級的標(biāo)簽和文本級的標(biāo)簽的區(qū)別
容器級的標(biāo)簽
- 容器級的標(biāo)簽中可以嵌套其他所有的標(biāo)簽
- 文本級的標(biāo)簽中只可以嵌套文字/超鏈接/圖片
- 容器級的標(biāo)簽
例如:div h ul ol dl li ... - 文本級的標(biāo)簽
例如:span p buis strong em ins del... -
注意點:
那些標(biāo)簽是文本級的 那些標(biāo)簽是容器級的 不用可以記憶 在企業(yè)開發(fā)中要嵌套都是嵌套在div中
CSS元素的顯示模式
- 在HTML中將所有的標(biāo)簽分為兩類 分別是容器級標(biāo)簽和文本級標(biāo)簽
- 在CSS中也將所有的標(biāo)簽分為兩類 分別是塊級標(biāo)簽和行內(nèi)標(biāo)簽
塊級標(biāo)簽 特點:獨占一行
- 所有的容器級標(biāo)簽都是塊級標(biāo)簽
例如:p div h ul ol dl li ...
行內(nèi)標(biāo)簽 特點:不會獨占一行
- 所有文本級的標(biāo)簽都是行內(nèi)標(biāo)簽 除p標(biāo)簽以外
例如:span b u i s strong em ins del...
塊級標(biāo)簽和行內(nèi)標(biāo)簽的區(qū)別
- 塊級標(biāo)簽
1.獨占一行
2.如果沒有設(shè)置寬度 默認(rèn)和父元素一樣寬高
3.如果設(shè)置了寬高 那就按照設(shè)置的來顯示
- 行內(nèi)標(biāo)簽
1.不會獨占一行
2.如果沒有設(shè)置寬度 默認(rèn)和字體寬度一樣
3.行內(nèi)標(biāo)簽是不可以設(shè)置寬度和高度**
-
行內(nèi)塊級標(biāo)簽
為了能夠讓標(biāo)簽既能夠不獨占一行 又可以設(shè)置寬度和高度 就出現(xiàn)了行內(nèi)塊級標(biāo)簽 - 示例代碼 :
<div>我是div</div>
<p>我是段落</p>
<h1>我是標(biāo)題</h1>
<hr>
<span>我是span</span>
<b>我是加粗</b>
<strong>我是強(qiáng)調(diào)</strong>
<hr>
<style>
div{
background-color: red;
width: 200px;
height: 100px;
}
img{
width: 50px;
height: 50px;
}
</style>
CSS顯示模式轉(zhuǎn)換
- 轉(zhuǎn)換CSS中元素的顯示模式
- 通過display屬性來轉(zhuǎn)換
- display取值:
inline ----- > 行內(nèi)
block ------ > 塊級
inline-block -----> 行內(nèi)塊級
- 示例代碼 :
<div>我是div</div>
<div>我是div</div>
<span>我是span</span>
<span>我是span</span>
<p class="cc">我是段落</p>
<b class="cc">我是加粗</b>
<style>
div{
display: inline;
background: red;
width: 200px;
height: 200px;
}
span{
display: block;
width: 200px;
height: 200px;
background: green;
}
.cc{
background: blue;
width: 200px;
height: 200px;
display: inline-block;
/*
快捷鍵
di display: inline;
db display: block;
dib display: inline-block;
*/
}
</style>
