資訊專欄INFORMATION COLUMN
摘要：前端技術(shù)之詳解第三天二權(quán)重問(wèn)題深入同一個(gè)標(biāo)簽，攜帶了多個(gè)類名，有沖突我是什么顏色我是什么顏色我是什么顏色我是什么顏色微軟雅黑紅色的。
Document
我是什么顏色？
我是什么顏色？
1 我是什么顏色？
2 我是什么顏色？
1 .spec2{ 2 color:blue; 3 } 4 .spec1{ 5 color:red; 6 } 7
紅色的。因?yàn)?/span>css中red寫在后面。和在標(biāo)簽中的掛類名的書序無(wú)關(guān)，只和css的順序有關(guān)：
Document
文字
1
1 k:v !important;
來(lái)給一個(gè)屬性提高權(quán)重。這個(gè)屬性的權(quán)重就是無(wú)窮大。important是英語(yǔ)里面的“重要的”的意思。我們可以通過(guò)語(yǔ)法：
一定要注意語(yǔ)法：
正確的：
1 font-size:60px !important;
錯(cuò)誤的：
1 font-size:60px; !important; → 不能把!important寫在外面
1 font-size:60px important; → 不能忘記感嘆號(hào)
!important需要強(qiáng)調(diào)3點(diǎn)：
1） !important提升的是一個(gè)屬性，而不是一個(gè)選擇器
1 p{ 2 color:red !important; → 只寫了這一個(gè)!important，所以就字體顏色屬性提升權(quán)重 3 font-size: 100px ; → 這條屬性沒(méi)有寫!important，所以沒(méi)有提升權(quán)重 } 5 #para1{ 6 color:blue; 7 font-size: 50px; 8 } 9 .spec{ 10 color:green; 11 font-size: 20px; 12 }
所以，綜合來(lái)看，字體顏色是red（聽important的）；字號(hào)是50px（聽id的）;
2） !important無(wú)法提升繼承的權(quán)重，該是0還是0
比如HTML結(jié)構(gòu)：
1
2 哈哈哈哈哈哈哈哈
3
1 div{ 2 color:red !important; 3 } 4 p{ 5 color:blue; 6 }
由于div是通過(guò)繼承性來(lái)影響文字顏色的，所以!important無(wú)法提升它的權(quán)重，權(quán)重依然是0。
Document
哈哈哈哈哈哈哈哈
有CSS樣式：
干不過(guò)p標(biāo)簽，因?yàn)閜標(biāo)簽是實(shí)實(shí)在在選中了，所以字是藍(lán)色的（以p為準(zhǔn)）。
3）!important不影響就近原則
Document
- 猜猜我是什么顏色
如果大家都是繼承來(lái)的，按理說(shuō)應(yīng)該按照“就近原則”，那么important能否影響就近原則呢？
答案是：不影響。遠(yuǎn)的，永遠(yuǎn)是遠(yuǎn)的。不能給遠(yuǎn)的寫一個(gè)important，干掉近的。
! important做站的時(shí)候，不允許使用。因?yàn)闀?huì)讓css寫的很亂。
現(xiàn)在，我們知道層疊性能比較很多東西：
選擇器的寫法權(quán)重，誰(shuí)離的近，誰(shuí)寫在下面。
還要知道 ! important 的性質(zhì)。
Document
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
一個(gè)盒子中主要的屬性就5個(gè)：width、height、padding、border、margin。
width是“寬度”的意思，CSS中width指的是內(nèi)容的寬度，而不是盒子的寬度。
height是“高度”的意思，CSS中height指的是內(nèi)容的高度，而不是盒子的高度
padding是“內(nèi)邊距”的意思
border是“邊框”
margin是“外邊距”
盒模型的示意圖：
代碼演示：
這個(gè)盒子width:200px; height:200px; 但是真實(shí)占有的寬高是302*302。 這是因?yàn)檫€要加上padding、border。
寬度和真實(shí)占有寬度，不是一個(gè)概念?。?/strong>
Document
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
一定要知道，在前端開發(fā)工程師眼中，世界中的一切都是不同的：
比如丈量一個(gè)包子多寬？前端開發(fā)工程師，只會(huì)丈量包子餡：
丈量稿紙，前端開發(fā)工程師只會(huì)丈量?jī)?nèi)容寬度：
丈量人臉，只會(huì)丈量五官：
下面這兩個(gè)盒子，真實(shí)占有寬高，完全相同，都是302*302：
1 .box1{ 2 width: 100px; 3 height: 100px; 4 padding: 100px; 5 border: 1px solid red; 6 } 7 8 .box2{ 9 width: 250px; 10 height: 250px; 11 padding: 25px; 12 border:1px solid red; 13 }
這兩個(gè)盒子的盒模型圖，見下表：真實(shí)占有寬度= 左border + 左padding + width + 右padding + 右border
答案（答案有無(wú)窮多種，我們只寫其中三種）：小練習(xí)，大家自己寫三個(gè)402*402的盒子
1 .box1{ 2 width: 400px; 3 height: 400px; 4 border: 1px solid red; 5 } 6 .box2{ 7 width: 200px; 8 height: 200px; 9 border: 6px solid red; 10 padding: 95px; 11 } 12 .box3{ 13 width: 0px; 14 height: 0px; 15 padding: 200px; 16 border: 1px solid red; 17 }
這三個(gè)盒子的盒模型圖：
如果想保持一個(gè)盒子的真是占有寬度不變，那么加width就要減padding。加padding就要減width。
padding就是內(nèi)邊距。padding的區(qū)域有背景顏色，css2.1前提下，并且背景顏色一定和內(nèi)容區(qū)域的相同。
也就是說(shuō)，background-color將填充所有boder以內(nèi)的區(qū)域。
padding是4個(gè)方向的，所以我們能夠分別描述4個(gè)方向的padding。
Document
內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容
方法有兩種，第一種寫小屬性；第二種寫綜合屬性，用空格隔開。
Document
內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容
小屬性：
1 padding-top: 30px;
2 padding-right: 20px;
3 padding-bottom: 40px;
4 padding-left: 100px;
這種屬性，就是復(fù)合屬性。比如不寫padding-left那么就是沒(méi)有左內(nèi)邊距。top上、right右、bottom下、left左。
快捷鍵就是pdt、pdr、pdb、pdl 然后按tab。
綜合屬性：
如果寫了4個(gè)值：
1 padding:30px 20px 40px 100px;
上、右、下、左
空格隔開的，四個(gè)數(shù)字就是上、右、下、左。
也就是說(shuō)，前端開發(fā)工程師眼中的順序不一樣。
老百姓：上下左右
強(qiáng)調(diào)開發(fā)工程師：上、右、下、左
如果只寫3個(gè)值：
1 padding: 20px 30px 40px;
上、右、下、??和右一樣
如果只寫2個(gè)值：
1 padding: 30px 40px;
也就是說(shuō)，
1 padding: 30px 40px;
等價(jià)于：
1 padding-top: 30px;
2 padding-bottom: 30px;
3 padding-left: 40px;
4 padding-right: 40px;
要懂得，用小屬性層疊大屬性：
對(duì)應(yīng)的盒模型圖：
1 padding: 20px;
2 padding-left: 30px;
下面的寫法錯(cuò)誤：
1 padding-left: 30px;
2 padding: 20px;
不能把小屬性，寫在大屬性前面。
下面的題，會(huì)做了，說(shuō)明你聽懂了：
Document
題目1，說(shuō)出下面盒子真實(shí)占有寬高，并畫出盒模型圖：
1 div{ 2 width: 200px; 3 height: 200px; 4 padding: 10px 20px 30px; 5 padding-right: 40px; 6 border: 1px solid #000; 7 }
真實(shí)占有寬度 = 200 + 20 + 40 + 1 + 1 = 262px
題目2，說(shuō)出下面盒子真實(shí)占有寬高，并畫出盒模型圖：
1 div{ 2 width: 200px; 3 height: 200px; 4 padding-left: 10px; 5 padding-right: 20px; 6 padding:40px 50px 60px; 7 padding-bottom: 30px; 8 border: 1px solid #000; 9 }
padding-left:10px； 和padding-right:20px; 沒(méi)用，因?yàn)楹竺娴膒adding大屬性，層疊掉了他們。
強(qiáng)調(diào)一點(diǎn)，padding-left 不是padding-left-width
1 padding-left:10px; √
2 padding-left-width:30px; ×
第3題，我現(xiàn)在給你盒模型圖，請(qǐng)寫出代碼，試著用最最簡(jiǎn)單的方法寫
width:123px;
height:123px;
padding:20px 40px;
border:1px solid red;
第4題：
width:123px;
height:123px;
padding:20px;
padding-right:40px;
border:1px solid red;
一些元素，默認(rèn)帶有padding，比如ul標(biāo)簽。
所以，我們?yōu)榱俗稣镜臅r(shí)候，便于控制，總是喜歡清除這個(gè)默認(rèn)的padding：
1 *{ 2 margin: 0; 3 padding: 0; 4 }
1 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{ 2 margin:0; 3 padding:0 4 }
*的效率不高，所以我們使用并集選擇器，羅列所有的標(biāo)簽（不用背，有專業(yè)的清除默認(rèn)樣式的樣式表，今后學(xué)習(xí)）：
就是邊框。邊框有三個(gè)要素：粗細(xì)、線型、顏色。
顏色如果不寫，默認(rèn)是黑色。另外兩個(gè)屬性不寫，要命了，顯示不出來(lái)邊框。
Document
1 border: 1px dashed red;
所有的線型：
比如，border:10px ridge red; 在chrome和firefox、IE中有細(xì)微差別：
如果公司里面的設(shè)計(jì)師，處女座的，追求極高的頁(yè)面還原度，那么不能使用css來(lái)制作邊框。
就要用到圖片，就要切圖了。所以，比較穩(wěn)定的就幾個(gè)：solid、dashed、dotted
border是一個(gè)大綜合屬性，
1 border:1px solid red;
border屬性能夠被拆開，有兩大種拆開的方式：就是把4個(gè)邊框，都設(shè)置為1px寬度、線型實(shí)線、red顏色。
1） 按3要素:border-width、border-style、border-color
2） 按方向：border-top、border-right、border-bottom、border-left
Document
按3要素拆開：
1 border-width:10px; → 邊框?qū)挾?2 border-style:solid; → 線型
3 border-color:red; → 顏色。
1 border:10px solid red;
現(xiàn)在心里要明白，原來(lái)一個(gè)border是由三個(gè)小屬性綜合而成：等價(jià)于：
border-width border-style border-color。
如果某一個(gè)小要素后面是空格隔開的多個(gè)值，那么就是上右下左的順序：
1 border-width:10px 20px;
2 border-style:solid dashed dotted;
3 border-color:red green blue yellow;
按方向來(lái)拆
1 border-top:10px solid red;
2 border-right:10px solid red;
3 border-bottom:10px solid red;
4 border-left:10px solid red;
等價(jià)于
1 border:10px solid red;
按方向還能再拆一層，就是把每個(gè)方向的，每個(gè)要素拆開，一共12條語(yǔ)句：
1 border-top-width:10px;
2 border-top-style:solid;
3 border-top-color:red;
4 border-right-width:10px;
5 border-right-style:solid;
6 border-right-color:red;
7 border-bottom-width:10px;
8 border-bottom-style:solid;
9 border-bottom-color:red;
10 border-left-width:10px;
11 border-left-style:solid;
12 border-left-color:red;
等價(jià)于
1 border:10px solid red;
工作中到底用什么？很簡(jiǎn)答：什么簡(jiǎn)單用什么？
寫法：
1 border:10px solid red;
2 border-right-color:blue;
寫法：
1 border:10px solid red;
2 border-style:solid dashed;
border可以沒(méi)有，
1 border:none;
也可以調(diào)整左邊邊框的寬度為0：某一條邊沒(méi)有：
1 border-left: none;
1 border-left-width: 0;
宏觀的講，我們的web頁(yè)面和photoshop等設(shè)計(jì)軟件有本質(zhì)的區(qū)別：web頁(yè)面的制作，是個(gè)“流”，必須從上而下，像“織毛衣”。而設(shè)計(jì)軟件，想往哪里畫個(gè)東西，都能畫。
我們要看看標(biāo)準(zhǔn)流有哪些微觀現(xiàn)象：
Document
人人人人 人人姚明人人人人人人人
1） 空白折疊現(xiàn)象：
比如，如果我們想讓img標(biāo)簽之間沒(méi)有空隙，必須緊密連接：
1
2
3 
2） 高矮不齊，底邊對(duì)齊：
3） 自動(dòng)換行，一行寫不滿，換行寫。
Document
哈哈哈哈
嘻嘻嘻嘻
哈哈哈哈
嘻嘻嘻嘻
學(xué)習(xí)的初期，你就要知道，標(biāo)準(zhǔn)文檔流等級(jí)森嚴(yán)。標(biāo)簽分為兩種等級(jí)：
1） 塊級(jí)元素
● 霸占一行，不能與其他任何元素并列
● 能接受寬、高
● 如果不設(shè)置寬度，那么寬度將默認(rèn)變?yōu)楦赣H的100%。
2） 行內(nèi)元素
● 與其他行內(nèi)元素并排
● 不能設(shè)置寬、高。默認(rèn)的寬度，就是文字的寬度。
在HTML中，我們已經(jīng)將標(biāo)簽分過(guò)類，當(dāng)時(shí)分為了：文本級(jí)、容器級(jí)。
文本級(jí)：p、span、a、b、i、u、em
容器級(jí)：div、h系列、li、dt、dd
CSS的分類和上面的很像，就p不一樣：
所有的文本級(jí)標(biāo)簽，都是行內(nèi)元素，除了p，p是個(gè)文本級(jí)，但是是個(gè)塊級(jí)元素。
所有的容器級(jí)標(biāo)簽都是塊級(jí)元素。
塊級(jí)元素可以設(shè)置為行內(nèi)元素
Document
我是一個(gè)div
我是一個(gè)div
我
愛
你
們
行內(nèi)元素可以設(shè)置為塊級(jí)元素
Document
點(diǎn)擊我去網(wǎng)易
我是一個(gè)span
我是一個(gè)span
View Code
1 div{ 2 display: inline; 4 width: 500px; 5 height: 500px; 6 }
inline就是“行內(nèi)”。display是“顯示模式”的意思，用來(lái)改變?cè)氐男袃?nèi)、塊級(jí)性質(zhì)
一旦，給一個(gè)標(biāo)簽設(shè)置
1 display: inline;
● 此時(shí)這個(gè)div不能設(shè)置寬度、高度；那么，這個(gè)標(biāo)簽將立即變?yōu)樾袃?nèi)元素。此時(shí)它和一個(gè)span無(wú)異：
● 此時(shí)這個(gè)div可以和別人并排了
同樣的道理，
1 span{ 2 display: block; 3 width: 200px; 4 height: 200px; 5 6 }
讓標(biāo)簽變?yōu)閴K級(jí)元素。此時(shí)這個(gè)標(biāo)簽，和一個(gè)div無(wú)異：“block”是“塊”的意思
● 此時(shí)這個(gè)span能夠設(shè)置寬度、高度
● 此時(shí)這個(gè)span必須霸占一行了，別人無(wú)法和他并排
● 如果不設(shè)置寬度，將撐滿父親
標(biāo)準(zhǔn)流里面限制非常多，標(biāo)簽的性質(zhì)惡心。比如，我們現(xiàn)在就要并排、并且就要設(shè)置寬高。
所以，移民！脫離標(biāo)準(zhǔn)流！
css中一共有三種手段，使一個(gè)元素脫離標(biāo)準(zhǔn)文檔流：
1） 浮動(dòng)
2） 絕對(duì)定位
3） 固定定位
浮動(dòng)是css里面布局用的最多的屬性。
Document
View Code
1 .box1{ 2 float: left; 3 width: 300px; 4 height: 400px; 6 } 7 .box2{ 8 float: left; 9 width: 400px; 10 height: 400px; 12 }
兩個(gè)元素并排了，并且兩個(gè)元素都能夠設(shè)置寬度、高度了（這在剛才的標(biāo)準(zhǔn)流中，不能實(shí)現(xiàn)）。
浮動(dòng)想學(xué)好，一定要知道三個(gè)性質(zhì)。
證明1：
Document
View Code
證明2：
Document
我是span
我是span
我是span
我是span
我是span
View Code
一個(gè)span標(biāo)簽不需要轉(zhuǎn)成塊級(jí)元素，就能夠設(shè)置寬度、高度了。所以能夠證明一件事兒，就是所有標(biāo)簽已經(jīng)不區(qū)分行內(nèi)、塊了。也就是說(shuō)，一旦一個(gè)元素浮動(dòng)了，那么，將能夠并排了，并且能夠設(shè)置寬高了。無(wú)論它原來(lái)是個(gè)div還是個(gè)span。
1 span{ 2 float: left; 3 width: 200px; 4 height: 200px; 6 }
如果有足夠空間，那么就會(huì)靠著2哥。如果沒(méi)有足夠的空間，那么會(huì)靠著1號(hào)大哥。
如果沒(méi)有足夠的空間靠著1號(hào)大哥，自己去貼左墻。
右浮動(dòng)： float:right;
Document
1
2
3
View Code
Document
1
2
3
View Code
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/2297.html
摘要：前端技術(shù)之詳解第四天一第三天的小總結(jié)盒模型，什么是盒子所有的標(biāo)簽都是盒子。如果不在標(biāo)準(zhǔn)流，比如盒子都浮動(dòng)了，那么兩個(gè)盒子之間是沒(méi)有塌陷現(xiàn)象的盒子居中的值可以為，表示自動(dòng)。前端技術(shù)之_CSS詳解第四天 一、第三天的小總結(jié) 盒模型box model，什么是盒子？ 所有的標(biāo)簽都是盒子。無(wú)論是div、span、a都是盒子。圖片、表單元素一律看做文本。 盒模型有哪些組成： width、hei...
摘要：希望幫助更多的前端愛好者學(xué)習(xí)。前端開發(fā)者指南作者科迪林黎，由前端大師傾情贊助。翻譯最佳實(shí)踐譯者張捷滬江前端開發(fā)工程師當(dāng)你問(wèn)起有關(guān)與時(shí)，老司機(jī)們首先就會(huì)告訴你其實(shí)是個(gè)沒(méi)有網(wǎng)絡(luò)請(qǐng)求功能的庫(kù)。 前端基礎(chǔ)面試題(JS部分) 前端基礎(chǔ)面試題(JS部分) 學(xué)習(xí) React.js 比你想象的要簡(jiǎn)單 原文地址：Learning React.js is easier than you think 原文作...
摘要：實(shí)戰(zhàn)之微信錢包騰訊服務(wù)界面網(wǎng)格布局是讓開發(fā)人員設(shè)計(jì)一個(gè)網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。對(duì)于移動(dòng)端適配，不同的公司不同的團(tuán)隊(duì)有不同的解決方案。柵格系統(tǒng)用于處理頁(yè)面多終端適配的問(wèn)題。 grid實(shí)戰(zhàn)之微信錢包 騰訊服務(wù)界面 CSS3網(wǎng)格布局是讓開發(fā)人員設(shè)計(jì)一個(gè)網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。而不是使用浮動(dòng)制作一個(gè)網(wǎng)格，實(shí)際上是你將一個(gè)元素聲明為一個(gè)網(wǎng)格容器，并把元素內(nèi)容置于網(wǎng)格中。 移動(dòng)端頁(yè)面適配—...
摘要：掘金原文地址譯文出自掘金翻譯計(jì)劃譯者請(qǐng)持續(xù)關(guān)注中文維護(hù)鏈接獲取最新內(nèi)容。由于以下的瀏覽器市場(chǎng)份額已逐年下降，所以對(duì)于瀏覽器技巧三視覺(jué)效果前端掘金揭秘學(xué)習(xí)筆記系列，記錄和分享各種實(shí)用技巧，共同進(jìn)步。 沉浸式學(xué) Git - 前端 - 掘金目錄 設(shè)置 再談設(shè)置 創(chuàng)建項(xiàng)目 檢查狀態(tài) 做更改 暫存更改 暫存與提交 提交更改 更改而非文件 歷史 別名 獲得舊版本 給版本打標(biāo)簽 撤銷本地更改... ...
摘要：前言月份開始出沒(méi)社區(qū)，現(xiàn)在差不多月了，按照工作的說(shuō)法，就是差不多過(guò)了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了一般來(lái)說(shuō)，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議那么今天我就把看過(guò)的一些學(xué)習(xí)資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒(méi)社區(qū)，現(xiàn)在差不多9月了，按照工作的說(shuō)法，就是差不多過(guò)了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了！一般來(lái)說(shuō)，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議！那么今天我就...
閱讀 735·2023-04-25 19:43
閱讀 3981·2021-11-30 14:52
閱讀 3807·2021-11-30 14:52
閱讀 3871·2021-11-29 11:00
閱讀 3802·2021-11-29 11:00
閱讀 3904·2021-11-29 11:00
閱讀 3580·2021-11-29 11:00
閱讀 6182·2021-11-29 11:00
