继承性和层叠性 权重 盒模型 padding(内边距) border(边框) margin 标准文档流 块级元素和行内元素...
內(nèi)容總結(jié):
1.繼承性和層疊性繼承性: 像 一些文本的屬性: color,text-*,line-*,font-* 這些屬性是可以繼承下來(lái)的2.層疊性就是權(quán)重 ,誰(shuí)的權(quán)重大就顯示誰(shuí)的屬性如何看權(quán)重:就是數(shù)數(shù),選擇器的個(gè)數(shù) :id class 標(biāo)簽 1.針對(duì)于選中的標(biāo)簽(誰(shuí)的權(quán)重大 就會(huì)顯示誰(shuí)的屬性)2.如果權(quán)重一樣大,以 =>后設(shè)置的為準(zhǔn)3.如果是繼承下來(lái)的屬性,它權(quán)重為0 ,跟**選中的標(biāo)簽**沒(méi)有可比性4.如果權(quán)重都都為0,那么誰(shuí)描述的近(就近原則),就顯示誰(shuí)的屬性5.如果權(quán)重為0,描述的一樣近的時(shí)候,回顧原始狀態(tài)(數(shù)權(quán)重)3.盒模型:屬性:width :內(nèi)容的寬度height: 內(nèi)容的高度padding:內(nèi)容到border的區(qū)域border:邊框margin:標(biāo)準(zhǔn)流的標(biāo)簽 margin的使用通常是用在兄弟之間的標(biāo)簽坑: margin水平方向是沒(méi)有任何問(wèn)題垂直方向 會(huì)出現(xiàn)'塌陷問(wèn)題' 以設(shè)置最大的值為基準(zhǔn),以后在寫(xiě)網(wǎng)站標(biāo)準(zhǔn)流的盒子 垂直方向只設(shè)置一個(gè)方向即可如果兒子踹他爹可以踹 那么只需要給父加border,那么問(wèn)題來(lái)了頁(yè)面冗余,可能會(huì)影響界面的布局記住:前提是標(biāo)準(zhǔn)流下的盒子如果是父子之間,調(diào)整位置,那么使用paddingmargin的塌陷要避免,只設(shè)置一個(gè)方向浮動(dòng)元素 對(duì)行內(nèi)元素和塊元素的影響:(1)如果標(biāo)準(zhǔn)流下的標(biāo)簽浮動(dòng),定位(絕對(duì)定位,固定定位)了 不區(qū)分是行內(nèi)還是塊級(jí)元素可以任意的設(shè)置寬高(2)浮動(dòng)對(duì)塊元素的影響,像把塊元素轉(zhuǎn)化成行內(nèi)元素*************浮動(dòng)不做壓蓋現(xiàn)象*****************
07-css的繼承性和層疊性
css有兩大特性：繼承性和層疊性
繼承性
面向?qū)ο笳Z(yǔ)言都會(huì)存在繼承的概念，在面向?qū)ο笳Z(yǔ)言中，繼承的特點(diǎn)：繼承了父類(lèi)的屬性和方法。那么我們現(xiàn)在主要研究css，css就是在設(shè)置屬性的。不會(huì)牽扯到方法的層面。
繼承：給父級(jí)設(shè)置一些屬性，子級(jí)繼承了父級(jí)的該屬性，這就是我們的css中的繼承。
記住：有一些屬性是可以繼承下來(lái) ：?color?、?font-*、?text-*、line-*?。主要是文本級(jí)的標(biāo)簽元素。
但是像一些盒子元素屬性，定位的元素（浮動(dòng)，絕對(duì)定位，固定定位）不能繼承。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="./reset.css"><style>/**{padding: 0;margin: 0;}ul{list-style: none;}a{text-decoration: none;}*/.box{/*width: 420px;*/height: 50px;background-color: purple;}.box ul{/*width: 100%;*/height: 50px;}.box ul li{/*浮動(dòng)的標(biāo)簽不區(qū)分塊還是行內(nèi)標(biāo)簽,浮動(dòng)的標(biāo)簽可以任意的設(shè)置寬高*//*background-color: red;*/float: left;/*width: 70px;*/height: 50px;/*像一些字體屬性是可以繼承下來(lái): text-*,color,font-**/font-size: 14px;color: green;/*文本水平居中*/text-align: center;/*盒子水平居中*//*margin: 0 auto;*//*行高 == 盒子的高度 實(shí)現(xiàn)文本垂直居中*/line-height: 50px;margin: 0 10px;/*cursor: pointer;*/}.box ul li a{color: green;height: 50px;display: block;}</style> </head> <body><div class="box"><ul><li><span>秒殺啊啥的當(dāng)</span></li><li><a href="#">優(yōu)惠券摳腳大漢就看得見(jiàn)肯定會(huì)</a></li><li><a href="#">PLUS會(huì)員</a></li><li><a href="#">閃購(gòu)</a></li><li><a href="#">拍賣(mài)</a></li><li><a href="#">京東服飾</a></li></ul></div><!-- <audio src="./Deadmau5 - Battle 3.mp3" controls></audio> --></body> </html> 列表浮動(dòng) <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>繼承性</title><style>.father{width: 100px;height: 100px;background-color: yellow;color: red;line-height: 100px;text-align: center;font-size: 20px;text-decoration: underline;}p{background-color: green;}</style> </head> <body><div class="father"><div class="child"><a href="#">alexsb</a></div></div></body> </html> 繼承層疊性
層疊性： 權(quán)重的標(biāo)簽覆蓋掉了權(quán)重小的標(biāo)簽，說(shuō)白了 ，就是被干掉了
權(quán)重： 誰(shuí)的權(quán)重大，瀏覽器就會(huì)顯示誰(shuí)的屬性
誰(shuí)的權(quán)重大？ 非常簡(jiǎn)單就是小學(xué)的數(shù)數(shù)。
數(shù)：id的數(shù)量 class的數(shù)量 標(biāo)簽的數(shù)量，順序不能亂
是不是感覺(jué)明白了呢？好的，再給大家加深點(diǎn)難度。
1 <div id='box1' class="wrap1"> 2 <div id="box2" class="wrap2"> 3 <div id="box3" class="wrap3"> 4 <p>再來(lái)猜猜我是什么顏色？</p> 5 </div> 6 </div> 7 </div> View Code #box1 #box2 p{ color: yellow;}#box2 .wrap3 p{ color: red;}div div #box3 p{ color: purple;}div.wrap1 div.wrap2 div.wrap3 p{color: blue;} View Code好的。那么上面的這個(gè)案例大家是否懂了呢？那么接下來(lái)我們繼續(xù)看案例
還是上面那個(gè)html結(jié)構(gòu)，如果我設(shè)置以下css，會(huì)顯示什么顏色呢。
1 #box2 .wrap3 p{ 2 color: yellow; 3 } 4 5 #box1 .wrap2 p{ 6 color: red; 7 } View Code答案是紅色的。結(jié)論：當(dāng)權(quán)重一樣的時(shí)候 是以后來(lái)設(shè)置的屬性為準(zhǔn)，前提必須權(quán)重一樣 。‘后來(lái)者居上 ’。
?
Good,我們繼續(xù)看下面的css，你來(lái)猜以下此時(shí)字什么顏色？
#box1 #box2 .wrap3{ color: red; }#box2 .wrap3 p{ color: green; } View Code答案是綠色。哈哈，是不是感覺(jué)快懵掉了。其實(shí)大家只要記住這點(diǎn)特性就可以。第一條css設(shè)置的屬性值，是通過(guò)繼承性設(shè)置成的紅色，那么繼承來(lái)的屬性，它的權(quán)重為0。它沒(méi)有資格跟我們下面選中的標(biāo)簽對(duì)比。
那大家猜想一下如果都是被繼承來(lái)的屬性，那么字會(huì)顯示什么顏色呢？
#box1 #box2 .wrap3{color: red; } .wrap1 #box2{color: green; }小案例證明：權(quán)重都是0:那么就是"就近原則" ： 誰(shuí)描述的近，就顯示誰(shuí)的屬性。所謂描述的近，就是選中到最內(nèi)層的距離越近。
小總結(jié)一下：
總結(jié)：
1.先看標(biāo)簽元素有沒(méi)有被選中，如果選中了，就數(shù)數(shù) （id,class,標(biāo)簽的數(shù)量） 誰(shuí)的權(quán)重大 就顯示誰(shuí)的屬性。權(quán)重一樣大，后來(lái)者居上
2.如果沒(méi)有被選中標(biāo)簽元素，權(quán)重為0。
如果屬性都是被繼承下來(lái)的 權(quán)重都是0 。權(quán)重都是0:"就近原則" ： 誰(shuí)描述的近，就顯示誰(shuí)的屬性
08-層疊性權(quán)重相同處理
直接上代碼，看效果！
第一種現(xiàn)象：當(dāng)權(quán)重相同時(shí)，以后來(lái)設(shè)置的屬性為準(zhǔn)，前提一定要權(quán)重相同
?
#box2 .wrap3 p{ color: yellow; }#box1 .wrap2 p{ color: red; }我們會(huì)發(fā)現(xiàn)此時(shí)顯示的是紅色的。
?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style>/*繼承性權(quán)重為0*/#box1{ color: yellow;}.wrap1 .wrap2{color: red;}</style> </head> <body><div class="wrap1" id="box1"><div class="wrap2" id='box2'><div class="wrap3" id="box3"><p>猜猜我的顏色</p></div></div></div></body> </html> 權(quán)重深入1 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style>/*繼承性權(quán)重為0*/.wrap1 #box2 div{ color: yellow;}#box1 .wrap2 div{ color: red;}</style> </head> <body><div class="wrap1" id="box1"><div class="wrap2" id='box2'><div class="wrap3" id="box3"><p>猜猜我的顏色</p></div></div></div></body> </html> 權(quán)重深入2?
第二種現(xiàn)象： 第一個(gè)選擇器沒(méi)有選中內(nèi)層標(biāo)簽，那么它是通過(guò)繼承來(lái)設(shè)置的屬性，那么它的權(quán)重為0。第二個(gè)選擇器選中了內(nèi)層標(biāo)簽，有權(quán)重。
所以 繼承來(lái)的元素 權(quán)重為0。跟選中的元素沒(méi)有可比性。
#box1 #box2 .wrap3{ color: red; } #box2 .wrap3 p{ color: green; }我們會(huì)發(fā)現(xiàn)此時(shí)顯示的是綠色的。
?
第三種現(xiàn)象：如果都是繼承來(lái)的屬性，誰(shuí)描述的近，顯示誰(shuí)的屬性。'就近原則'
#box1 #box2 .wrap3{ color: red; }.wrap1 #box2{ color: green; }!important 的使用。
！important:設(shè)置權(quán)重為無(wú)限大?
!important 不影響繼承來(lái)的權(quán)重，只影響選中的元素。不要隨便使用!important,因?yàn)槭褂盟鼤?huì)影響頁(yè)面的布局
09-盒模型
盒模型
在CSS中，"box model"這一術(shù)語(yǔ)是用來(lái)設(shè)計(jì)和布局時(shí)使用，然后在網(wǎng)頁(yè)中基本上都會(huì)顯示一些方方正正的盒子。我們稱(chēng)為這種盒子叫盒模型。
盒模型有兩種：標(biāo)準(zhǔn)模型和IE模型。我們?cè)谶@里重點(diǎn)講標(biāo)準(zhǔn)模型。
?
盒模型示意圖
?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style>.box{width: 200px;height: 200px;background-color: red;padding: 20px;border: 5px solid green;}</style> </head> <body><div class="box"></div> </body> </html> 盒模型盒模型的屬性
width：內(nèi)容的寬度
height: 內(nèi)容的高度
padding：內(nèi)邊距，邊框到內(nèi)容的距離
border: 邊框，就是指的盒子的寬度
margin：外邊距，盒子邊框到附近最近盒子的距離
?
如果讓你做一個(gè)寬高402*402的盒子，您如何來(lái)設(shè)計(jì)呢？
答案有上萬(wàn)種，甚至上一種。
盒模型的計(jì)算
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style>.box{width: 0;height: 0;background-color: red;padding: 150px; border: 1px solid green;}</style> </head> <body><!-- 302*302 如果想保持盒子的寬度不變,減width加padding,加width就要減padding--><!-- 標(biāo)準(zhǔn)盒子模型的計(jì)算盒子的寬度 = width+2*padding + 2*border--><div class="box"></div> </body> </html> 計(jì)算盒模型如果一個(gè)盒子設(shè)置了padding，border，width，height，margin(咱們先不要設(shè)置margin，margin有坑，后面課程會(huì)講解)
?
盒子的真實(shí)寬度=width+2*padding+2*border
盒子的真實(shí)寬度=height+2*padding+2*border
?
那么在這里要注意看了。標(biāo)準(zhǔn)盒模型，width不等于盒子真實(shí)的寬度。
另外如果要保持盒子真實(shí)的寬度，那么加padding就一定要減width，減padding就一定要加width。真實(shí)高度一樣設(shè)置。
?
10-padding(內(nèi)邊距)
padding
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style>.box{width: 80px;height: 70px;background-color: purple;/*padding-left: 20px;padding-top: 10px;*/color: green;border: 1px solid red;cursor: pointer;/**/padding: 10px;/*兩個(gè)值: 上下 左右*/padding: 10px 20px;/*三個(gè)值: 上 左右 下*/padding: 10px 20px 30px;/*上 右 下 左*/padding: 10px 20px 30px 40px;}</style> </head> <body><div class="box">李寧</div></body> </html> paddingpadding：就是內(nèi)邊距的意思，它是邊框到內(nèi)容之間的距離
另外padding的區(qū)域是有背景顏色的。并且背景顏色和內(nèi)容的顏色一樣。也就是說(shuō)background-color這個(gè)屬性將填充所有的border以?xún)?nèi)的區(qū)域
?
padding的設(shè)置
padding有四個(gè)方向，分別描述4個(gè)方向的padding。
描述的方法有兩種
1、寫(xiě)小屬性,分別設(shè)置不同方向的padding
padding-top: 30px; padding-right: 30px; padding-bottom: 30px; padding-left: 30px;?
2、寫(xiě)綜合屬性，用空格隔開(kāi)
/*上 右 下 左*/ padding: 20px 30px 40px 50px ;/*上 左右 下*/ padding: 20px 30px 40px;/* 上下 左右*/ padding: 20px 30px;/*上下左右*/ padding: 20px;一些標(biāo)簽?zāi)J(rèn)有padding
?
比如ul標(biāo)簽，有默認(rèn)的padding-left值。
那么我們一般在做站的時(shí)候，是要清除頁(yè)面標(biāo)簽中默認(rèn)的padding和margin。以便于我們更好的去調(diào)整元素的位置。
我們現(xiàn)在初學(xué)可以使用通配符選擇器
*{padding:0;margin:0; }But，這種方法效率不高。
所以我們要使用并集選擇器來(lái)選中頁(yè)面中應(yīng)有的標(biāo)簽（不同背，因?yàn)橛腥艘呀?jīng)給咱們寫(xiě)好了這些清除默認(rèn)的樣式表，reset.css）
https://meyerweb.com/eric/tools/css/reset/
11-border(邊框)
邊框
border:邊框的意思，描述盒子的邊框
邊框有三個(gè)要素： 粗細(xì) 線(xiàn)性樣式 顏色
border: solid <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style>.box{width: 200px;height: 200px;background-color: blue;/*border: 1px solid red;*//*一般用這個(gè)屬性干掉按鈕或者表單控件的默認(rèn)邊框*//*border: none;*//*border-width: 5px 1px 5px 1px;border-style: solid dotted double dashed;border-color: red;*/border-top: 1px solid red;}</style> </head> <body><div class="box"></div></body> </html> border如果顏色不寫(xiě)，默認(rèn)是黑色。如果粗細(xì)不寫(xiě)，不顯示邊框。如果只寫(xiě)線(xiàn)性樣式，默認(rèn)的有上下左右 3px的寬度,實(shí)體樣式，并且黑色的邊框。
按照3要素來(lái)寫(xiě)border
border-width: 3px; border-style: solid; border-color: red; /* border-width: 5px 10px; border-style: solid dotted double dashed; border-color: red green yellow; */按照方向劃分
border-top-width: 10px; border-top-color: red; border-top-style: solid;border-right-width: 10px; border-right-color: red; border-right-style: solid;border-bottom-width: 10px; border-bottom-color: red; border-bottom-style: solid;border-left-width: 10px; border-left-color: red; border-left-style:solid;上面12條語(yǔ)句，相當(dāng)于 bordr: 10px solid red;
另外還可以這樣：
border-top: 10px solid red; border-right: 10px solid red; border-bottom: 10px solid red; border-left: 10pxb solid red;?
border:none；
border：0；
表示border沒(méi)有設(shè)置樣式。
使用border來(lái)制作小三角
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>.box{width: 0px;height: 0px;/*background-color:red;*/border-left: 10px solid green;border-top: 10px solid transparent;border-bottom: 10px solid transparent; /*color: transparent;*/}</style> </head> <body><div class="box"></div> </body> </html> 制作三角?
/*小三角 箭頭指向下方*/div{width: 0;height: 0;border-bottom: 20px solid red;border-left: 20px solid transparent;border-right: 20px solid transparent;}12-簡(jiǎn)單認(rèn)識(shí)下margin
margin
margin：外邊距的意思。表示邊框到最近盒子的距離。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>.box{width: 300px;height: 300px;background-color: red;border: 1px solid green;/*border: 0px solid transparent;*//*padding-top: 50px;*/}.child{width: 200px;height: 200px;background-color: yellow;/*margin: 0 auto;*/margin-top: 50px;}</style> </head> <body><div class="box"><div class="child"></div></div></body> </html> 父子margin <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title> </title><style>div{width: 200px;height: 200px;}div.a{background-color: yellow;margin-bottom: 100px;}div.w{background-color: green;margin-top: 50px }</style> </head> <body><div class="box"><div class="a"></div><div class="w"></div></div></body> </html> 塌陷問(wèn)題 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style> .a{background-color: red;margin-right: 20px;}.w{background-color: green;margin-left: 20px;}</style> </head> <body><span class="a">alex</span><span class="w">wusir</span></body> </html> View Code /*表示四個(gè)方向的外邊距離為20px*/ margin: 20px; /*表示盒子向下移動(dòng)了30px*/ margin-top: 30px; /*表示盒子向右移動(dòng)了50px*/ margin-left: 50px;margin-bottom: 100px; 復(fù)制代碼13-標(biāo)準(zhǔn)文檔流
什么是標(biāo)準(zhǔn)文檔流
宏觀的將，我們的web頁(yè)面和ps等設(shè)計(jì)軟件有本質(zhì)的區(qū)別，web 網(wǎng)頁(yè)的制作，是個(gè)“流”，從上而下 ，像 “織毛衣”。而設(shè)計(jì)軟件 ，想往哪里畫(huà)東西，就去哪里畫(huà)
標(biāo)準(zhǔn)文檔流下 有哪些微觀現(xiàn)象？
1.空白折疊現(xiàn)象
多個(gè)空格會(huì)被合并成一個(gè)空格顯示到瀏覽器頁(yè)面中。img標(biāo)簽換行寫(xiě)。會(huì)發(fā)現(xiàn)每張圖片之間有間隙，如果在一行內(nèi)寫(xiě)img標(biāo)簽，就解決了這個(gè)問(wèn)題，但是我們不會(huì)這樣去寫(xiě)我們的html結(jié)構(gòu)。這種現(xiàn)象稱(chēng)為空白折疊現(xiàn)象。
2.高矮不齊，底邊對(duì)齊
文字還有圖片大小不一，都會(huì)讓我們頁(yè)面的元素出現(xiàn)高矮不齊的現(xiàn)象，但是在瀏覽器查看我們的頁(yè)面總會(huì)發(fā)現(xiàn)底邊對(duì)齊
3.自動(dòng)換行，一行寫(xiě)不滿(mǎn)，換行寫(xiě)
如果在一行內(nèi)寫(xiě)文字，文字過(guò)多，那么瀏覽器會(huì)自動(dòng)換行去顯示我們的文字。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>a{font-size: 30px;}</style> </head> <body><span>alex</span><img src="../day45/timg.jpg" alt=""><a href="#">百度一下</a></body> </html> View Code <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>a{width: 100px;height: 100px;background-color: red;/*display: block;*//*在一行內(nèi)顯示可以設(shè)置寬高*/display: inline-block;}</style> </head> <body><a href="#">百度一下</a><a href="#">百度一下</a><!-- 行內(nèi)標(biāo)簽:塊級(jí)標(biāo)簽:--></body> </html> display屬性的使用 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>a{float: left;background-color: red;width: 100px;height: 100px;}</style> </head> <body><a href="#">百度一下</a><a href="#">百度一下</a></body> </html> 浮動(dòng)的元素不區(qū)分標(biāo)準(zhǔn)流的標(biāo)簽 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>div{float: left;background-color: red;width: 200px;height: 200px;}</style> </head> <body><div>alex</div><div>nvshen</div><img src="./logo16366.gif" alt=""> </body> </html> 浮動(dòng)元素對(duì)塊級(jí)標(biāo)簽的影響14-塊級(jí)元素和行內(nèi)元素
學(xué)習(xí)的初期，我們就要知道，標(biāo)準(zhǔn)文檔流等級(jí)森嚴(yán)。標(biāo)簽分為兩種等級(jí)：
- 行內(nèi)元素
- 塊級(jí)元素
比如h1標(biāo)簽和span，同時(shí)設(shè)置寬高，來(lái)看瀏覽器效果，那么你會(huì)發(fā)現(xiàn)：
?
行內(nèi)元素和塊級(jí)元素的區(qū)別：（非常重要）
行內(nèi)元素：
- 與其他行內(nèi)元素并排；
- 不能設(shè)置寬、高。默認(rèn)的寬度，就是文字的寬度。
塊級(jí)元素：
- 霸占一行，不能與其他任何元素并列；
- 能接受寬、高。如果不設(shè)置寬度，那么寬度將默認(rèn)變?yōu)楦赣H的100%。
塊級(jí)元素和行內(nèi)元素的分類(lèi)：
在以前的HTML知識(shí)中，我們已經(jīng)將標(biāo)簽分過(guò)類(lèi)，當(dāng)時(shí)分為了：文本級(jí)、容器級(jí)。
從HTML的角度來(lái)講，標(biāo)簽分為：
- 文本級(jí)標(biāo)簽：p、span、a、b、i、u、em。
- 容器級(jí)標(biāo)簽：div、h系列、li、dt、dd。
PS：為甚么說(shuō)p是文本級(jí)標(biāo)簽?zāi)?#xff1f;因?yàn)閜里面只能放文字&圖片&表單元素，p里面不能放h和ul，p里面也不能放p。
?
現(xiàn)在，從CSS的角度講，CSS的分類(lèi)和上面的很像，就p不一樣：
-
行內(nèi)元素：除了p之外，所有的文本級(jí)標(biāo)簽，都是行內(nèi)元素。p是個(gè)文本級(jí)，但是是個(gè)塊級(jí)元素。
-
塊級(jí)元素：所有的容器級(jí)標(biāo)簽都是塊級(jí)元素，還有p標(biāo)簽。
塊級(jí)元素和行內(nèi)元素的相互轉(zhuǎn)換
我們可以通過(guò)display屬性將塊級(jí)元素和行內(nèi)元素進(jìn)行相互轉(zhuǎn)換。display即“顯示模式”。
塊級(jí)元素可以轉(zhuǎn)換為行內(nèi)元素：
一旦，給一個(gè)塊級(jí)元素（比如div）設(shè)置：
display: inline;那么，這個(gè)標(biāo)簽將立即變?yōu)樾袃?nèi)元素，此時(shí)它和一個(gè)span無(wú)異。inline就是“行內(nèi)”。也就是說(shuō)：
- 此時(shí)這個(gè)div不能設(shè)置寬度、高度；
- 此時(shí)這個(gè)div可以和別人并排了
行內(nèi)元素轉(zhuǎn)換為塊級(jí)元素：
同樣的道理，一旦給一個(gè)行內(nèi)元素（比如span）設(shè)置：
display: block;那么，這個(gè)標(biāo)簽將立即變?yōu)閴K級(jí)元素，此時(shí)它和一個(gè)div無(wú)異。block”是“塊”的意思。也就是說(shuō)：
- 此時(shí)這個(gè)span能夠設(shè)置寬度、高度
- 此時(shí)這個(gè)span必須霸占一行了，別人無(wú)法和他并排
- 如果不設(shè)置寬度，將撐滿(mǎn)父親
標(biāo)準(zhǔn)流里面的限制非常多，導(dǎo)致很多頁(yè)面效果無(wú)法實(shí)現(xiàn)。如果我們現(xiàn)在就要并排、并且就要設(shè)置寬高，那該怎么辦呢？辦法是：移民！脫離標(biāo)準(zhǔn)流！
css中一共有三種手段，使一個(gè)元素脫離標(biāo)準(zhǔn)文檔流：
- （1）浮動(dòng)
- （2）絕對(duì)定位
- （3）固定定位
轉(zhuǎn)載于:https://www.cnblogs.com/ls13691357174/p/9448579.html
總結(jié)
以上是生活随笔為你收集整理的继承性和层叠性 权重 盒模型 padding(内边距) border(边框) margin 标准文档流 块级元素和行内元素...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 9 README，全套代码
- 下一篇： 信足球vs.信上帝——从全球疯世界杯谈起