摘要:在上一章我們提到了一個新的概念,叫做塊級樣式,講到這里就要科普一下標簽又分為兩種塊級標簽元素特征會獨占一行,無論內容多少,可以設置寬高內斂標簽又叫做行內標簽元素特征根據內容的多少占用空間大小,它的上下不起作用塊級內斂有時,我們會使用塊級標
在上一章我們提到了一個新的概念,叫做塊級樣式,講到這里就要科普一下:
標簽又分為兩種:
(1)塊級標簽
元素特征:會獨占一行,無論內容多少,可以設置寬高···
(2)內斂標簽(又叫做行內標簽)
元素特征:根據內容的多少占用空間大小,它的上下margin不起作用
(塊級:P? h1- h6 div ul ol dl li···)
(內斂:span img i b a em icon···)
有時,我們會使用塊級標簽,有時會使用內斂標簽,但老是改標簽是不是太麻煩了呢?有沒有其它的方法呢?
答案是:有。
塊級和行級(也就是內斂)可以相互轉換
塊級轉行級
給塊級添加屬性:display:inline;
行級轉塊級
給行級添加屬性:display:block;
行級塊元素
給需要的元素添加屬性
display:linline-block;
行級塊元素好處:可以設置寬高,可以在一行,margin可使用
?
知識添加:
line-height 行高,可設置字體的垂直位置
line-height的值和height的值相同,文本就可以上下居中,(水平居中為text-align:center)(text-align 文本居中方式? center居中? left居左? right居右)
line-height:50px/2
當屬性值中有不帶單位的2時,line-height的值為2 x font-size(字體大小)的大小
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/1754.html
摘要:宋體雪碧圖宋體我們的宋體和宋體中有三個屬性可以向服務器發送請求,宋體。宋體類型,客戶端和服務器之間的暗號,根據拓展名而定。注內容包含圖片和文字 background-position ?雪碧圖 我們的html和css中有三個屬性可以向服務器發送請求,src href url。 overflow (1)?值hidden 超出就隱藏 (2)?值scroll ?出現滾動條 vis...
摘要:宋體可以繼承的屬性有哪些宋體系列宋體系列宋體的值的問題宋體四個值的順序是宋體左上宋體右上宋體右下宋體左下。宋體在宋體下宋體為負讓元素居中,前提是知道元素的寬高。宋體如宋體正常狀態宋體宋體設值時1.transparent 透明的 2.placeholder 提示語 寫頁面 搞清結構層次, 保證模塊化,讓他們之間不能受到影響 (1)元素性質 (2)標準流 浮動帶來的脫離文檔流撐不起父級的高度...
摘要:宋體二宋體瀏覽器瀏覽器和瀏覽器之間是由差距的,這個差距是由瀏覽器自身的內核決定的。宋體每個瀏覽器都有自己的前綴,主要解決宋體中的兼容問題。宋體是彈性子元素在彈性容器中所占的份數。一 單位 1.px 就是一個基本的單位 像素 2.em 也是一個單位 用父級元素的字體大小乘以em前面的數字。如果父級沒有就繼承上一個父級直到body,如果body沒有那就默認是16px。 3.rem 也是一個單位,...
摘要:層疊行選不中的情況下,走繼承性。繼承性的權重為。選中情況下,首先需要考慮權重的問題,誰的權重大,就選誰的樣式屬性。如果權重相同,因為后者會覆蓋前者,所以誰的樣式屬性在后面,就選擇誰的樣式屬性。在上一章中,我們又引出了一個知識點: margin的問題 margin:0 auto;(上下為0,左右自適應)會解決元素的居中問題(auto 自適應)前提是給這個元素設置width 同時,我們又要學習新...
摘要:而第一個依然存在,所以就會疊加。宋體行級加只要加了,這個元素就會脫離標準文檔流行級元素加了,脫離了標準文檔流,會變得塊不像塊,行不像行,能設置快高,能并排排列,則也不用給行級標簽加了,沒有意義。在前面,我們學習了標準文檔流,但在實際制作的過程中,用標準文檔流書寫顯然是不現實的,因此,我們來了解幾種脫離標準文檔流的方法: 1.float 浮動 float:left/right;(左浮/右浮) ...
全面我們學了6個選擇器,今天再來學習兩個選擇器,分別是通配符選擇器和并集選擇器: 1.通配符選擇器: *{ } 表示body里所有的標簽都被選中 2.并集選擇器: 選中的標簽之間用逗號隔開,表示這幾個標簽都被選中 *選擇器 有好處也有弊端 好處 就是省事,弊端,就是因為太省事了,加大了瀏覽器的負荷。 解決辦法 ?按需選擇。 再來學習幾個列表標簽 1.無序列表? ul ? (1)內部必須有子標...
閱讀 1872·2021-11-15 11:39
閱讀 1078·2020-12-03 17:06
閱讀 733·2019-12-27 11:42
閱讀 3271·2019-08-30 13:59
閱讀 1459·2019-08-26 13:22
閱讀 3285·2019-08-26 12:15
閱讀 2473·2019-08-26 10:22
閱讀 1562·2019-08-23 18:40