CSS的再深入（更新中···）

Pluser 發(fā)布于2019-04-23 13:21 / 2830人閱讀

摘要：在上一章我們提到了一個(gè)新的概念，叫做塊級(jí)樣式，講到這里就要科普一下標(biāo)簽又分為兩種塊級(jí)標(biāo)簽元素特征會(huì)獨(dú)占一行，無(wú)論內(nèi)容多少，可以設(shè)置寬高內(nèi)斂標(biāo)簽又叫做行內(nèi)標(biāo)簽元素特征根據(jù)內(nèi)容的多少占用空間大小，它的上下不起作用塊級(jí)內(nèi)斂有時(shí)，我們會(huì)使用塊級(jí)標(biāo)

在上一章我們提到了一個(gè)新的概念，叫做塊級(jí)樣式，講到這里就要科普一下：

標(biāo)簽又分為兩種：

（1）塊級(jí)標(biāo)簽

元素特征：會(huì)獨(dú)占一行，無(wú)論內(nèi)容多少，可以設(shè)置寬高···

（2）內(nèi)斂標(biāo)簽（又叫做行內(nèi)標(biāo)簽）

元素特征：根據(jù)內(nèi)容的多少占用空間大小，它的上下margin不起作用

（塊級(jí)：P? h1- h6 div ul ol dl li···）

（內(nèi)斂：span img i b a em icon···）

有時(shí)，我們會(huì)使用塊級(jí)標(biāo)簽，有時(shí)會(huì)使用內(nèi)斂標(biāo)簽，但老是改標(biāo)簽是不是太麻煩了呢？有沒(méi)有其它的方法呢？

答案是：有。

塊級(jí)和行級(jí)（也就是內(nèi)斂）可以相互轉(zhuǎn)換

塊級(jí)轉(zhuǎn)行級(jí)

給塊級(jí)添加屬性：display:inline;

行級(jí)轉(zhuǎn)塊級(jí)

給行級(jí)添加屬性：display:block;

行級(jí)塊元素

給需要的元素添加屬性

display:linline-block;

行級(jí)塊元素好處：可以設(shè)置寬高，可以在一行，margin可使用

知識(shí)添加：

line-height 行高，可設(shè)置字體的垂直位置

line-height的值和height的值相同，文本就可以上下居中，（水平居中為text-align:center)(text-align 文本居中方式? center居中? left居左? right居右）

line-height:50px/2

當(dāng)屬性值中有不帶單位的2時(shí)，line-height的值為2 x font-size（字體大小）的大小

GPU云服務(wù)器云服務(wù)器 cdn183 183是移動(dòng)還是聯(lián)通更新中 css中

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/1754.html

相關(guān)文章

css的再深入6（更新中&#183;&#183;&#183;）

摘要：宋體雪碧圖宋體我們的宋體和宋體中有三個(gè)屬性可以向服務(wù)器發(fā)送請(qǐng)求，宋體。宋體類型，客戶端和服務(wù)器之間的暗號(hào)，根據(jù)拓展名而定。注內(nèi)容包含圖片和文字 background-position ?雪碧圖我們的html和css中有三個(gè)屬性可以向服務(wù)器發(fā)送請(qǐng)求，src href url。 overflow 　　(1)?值hidden 超出就隱藏　　(2)?值scroll ?出現(xiàn)滾動(dòng)條　　vis...

Bowman_han 2019-04-23 13:19 評(píng)論0 收藏0
css的再深入7（更新中&#183;&#183;&#183;）

摘要：宋體可以繼承的屬性有哪些宋體系列宋體系列宋體的值的問(wèn)題宋體四個(gè)值的順序是宋體左上宋體右上宋體右下宋體左下。宋體在宋體下宋體為負(fù)讓元素居中，前提是知道元素的寬高。宋體如宋體正常狀態(tài)宋體宋體設(shè)值時(shí)1.transparent 透明的 2.placeholder 提示語(yǔ) 寫(xiě)頁(yè)面搞清結(jié)構(gòu)層次，保證模塊化，讓他們之間不能受到影響 (1)元素性質(zhì) (2)標(biāo)準(zhǔn)流浮動(dòng)帶來(lái)的脫離文檔流撐不起父級(jí)的高度...

番茄西紅柿 2019-04-23 13:18 評(píng)論0 收藏0
css的再深入9（更新中&#183;&#183;&#183;）

摘要：宋體二宋體瀏覽器瀏覽器和瀏覽器之間是由差距的，這個(gè)差距是由瀏覽器自身的內(nèi)核決定的。宋體每個(gè)瀏覽器都有自己的前綴，主要解決宋體中的兼容問(wèn)題。宋體是彈性子元素在彈性容器中所占的份數(shù)。一單位 1.px 就是一個(gè)基本的單位像素 2.em 也是一個(gè)單位用父級(jí)元素的字體大小乘以em前面的數(shù)字。如果父級(jí)沒(méi)有就繼承上一個(gè)父級(jí)直到body，如果body沒(méi)有那就默認(rèn)是16px。 3.rem 也是一個(gè)單位，...

yexiaobai 2019-04-23 13:18 評(píng)論0 收藏0
CSS的再深入2（更新中&#183;&#183;&#183;）

摘要：層疊行選不中的情況下，走繼承性。繼承性的權(quán)重為。選中情況下，首先需要考慮權(quán)重的問(wèn)題，誰(shuí)的權(quán)重大，就選誰(shuí)的樣式屬性。如果權(quán)重相同，因?yàn)楹笳邥?huì)覆蓋前者，所以誰(shuí)的樣式屬性在后面，就選擇誰(shuí)的樣式屬性。在上一章中，我們又引出了一個(gè)知識(shí)點(diǎn)： margin的問(wèn)題 margin：0 auto；（上下為0，左右自適應(yīng)）會(huì)解決元素的居中問(wèn)題（auto 自適應(yīng)）前提是給這個(gè)元素設(shè)置width 同時(shí)，我們又要學(xué)習(xí)新...

enrecul101 2019-04-23 13:20 評(píng)論0 收藏0
CSS的再深入3（更新中&#183;&#183;&#183;）

摘要：而第一個(gè)依然存在，所以就會(huì)疊加。宋體行級(jí)加只要加了，這個(gè)元素就會(huì)脫離標(biāo)準(zhǔn)文檔流行級(jí)元素加了，脫離了標(biāo)準(zhǔn)文檔流，會(huì)變得塊不像塊，行不像行，能設(shè)置快高，能并排排列，則也不用給行級(jí)標(biāo)簽加了，沒(méi)有意義。在前面，我們學(xué)習(xí)了標(biāo)準(zhǔn)文檔流，但在實(shí)際制作的過(guò)程中，用標(biāo)準(zhǔn)文檔流書(shū)寫(xiě)顯然是不現(xiàn)實(shí)的，因此，我們來(lái)了解幾種脫離標(biāo)準(zhǔn)文檔流的方法： 1.float 浮動(dòng) float：left/right；（左浮/右?。?...

RayKr 2019-04-23 13:19 評(píng)論0 收藏0
CSS的再一次深入（更新中&#183;&#183;&#183;）

全面我們學(xué)了6個(gè)選擇器，今天再來(lái)學(xué)習(xí)兩個(gè)選擇器，分別是通配符選擇器和并集選擇器： 1.通配符選擇器：　　*{ } 表示body里所有的標(biāo)簽都被選中 2.并集選擇器: 選中的標(biāo)簽之間用逗號(hào)隔開(kāi)，表示這幾個(gè)標(biāo)簽都被選中 *選擇器有好處也有弊端好處就是省事，弊端，就是因?yàn)樘∈铝?，加大了瀏覽器的負(fù)荷。解決辦法 ?按需選擇。再來(lái)學(xué)習(xí)幾個(gè)列表標(biāo)簽 1.無(wú)序列表? ul ? （1）內(nèi)部必須有子標(biāo)...

Jackwoo 2019-04-23 13:21 評(píng)論0 收藏0