您現在的位置是:電腦技術吧?>? 基礎知識 ??>??css行內元素,css元素分類??>??正文詳情

css行內元素,css元素分類

和曉暢2019-11-06 09:01:38 人圍觀
簡介css元素選擇器一。可更換元件和不可更換元件根據各自的特點可分為可更換元件和不可更換元件a)替換元素替換元素是瀏覽器根據元素的標簽和屬性確定元素的具體顯示內容。例如,瀏

1. 替換和不可替換元素從元素本身的特點來講,可以分為替換和不可替換元素。

a) 替換元素替換元素就是瀏覽器根據元素的標簽和屬性,來決定元素的具體顯示內容。

例如瀏覽器會根據img標簽的src屬性的值來讀取圖片信息并顯示出來,而如果查看(x)html代碼,則看不到圖片的實際內容;又例如根據input標簽的type屬性來決定是顯示輸入框,還是單選按鈕等。

(x)html中的img、input、textarea、select、object都是替換元素。

這些元素往往沒有實際的內容,即是一個空元素,例如:img src=cat.jpg / input type=submit name=submit value=提交 /瀏覽器會根據元素的標簽類型和屬性來顯示這些元素。

可替換元素也在其顯示中生成了框。

b) 不可替換元素(x)html 的大多數元素是不可替換元素,即其內容直接表現給用戶端(例如瀏覽器)。

例如:p段落的內容/p段落p是一個不可替換元素,文字段落的內容全被顯示。

2. 顯示元素除了可替換元素和不可替換元素的分類方式外,css 2.1中元素還有另外的分類方式:塊級元素(block-level)和行內元素(inline-level,也譯作內聯元素)。

a) 塊級元素在視覺上被格式化為塊的元素,最明顯的特征就是它默認在橫向充滿其父元素的內容區域,而且在其左右兩邊沒有其他元素,即塊級元素默認是獨占一行的。

典型的塊級元素有:div、p、h1到h6,等等。

通過css設定了浮動(float屬性,可向左浮動或向右浮動)以及設定顯示(display)屬性為block或list-item的元素都是塊級元素。

但是浮動元素比較特殊,由于浮動,其旁邊可能會有其他元素的存在。

而list-item(列表項li),會在其前面生成圓點符號,或者數字序號。

b) 行內元素行內元素不形成新內容塊,即在其左右可以有其他元素,例如a、span、strong等,都是典型的行內級元素。

display屬性等于inline的元素都是行內元素。

幾乎所有的可替換元素都是行內元素,例如img、input等等。

不過元素的類型也不是固定的,通過設定css 的display屬性,可以使行內元素變為塊級元素,也可以讓塊級元素變為行內元素。

替換元素與塊級元素在格式編排中很多地方相同,如垂直邊界壓縮而水平邊界不壓縮,邊框和補白默認為0。

所有的替換元素都可以用height和width屬性進行縮放,如img /標簽,如果一張圖片的寬,高為100px,那么將height和width設置為auto時,圖片保持原來大小,但是設置為其它值時,就會發生縮放。

版權聲明:本文由 和曉暢 整理編輯。

原標題:css隱藏元素,css元素

轉載注明出處:http://www.dn9ww09s.icu/basics/11253.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 惠普筆記本好用嗎,惠普筆記本怎么樣

    惠普筆記本好用嗎,惠普筆記本怎么樣 相關圖片聯想和惠普根據小編的一項調查,用戶對惠普筆記本電腦的使用評價與其他品牌電腦相比相對較高。很多網友認為惠普的電腦性能比較好,但近年來,隨著越來越多的其他品牌電腦上市...

  • 光影涂鴉,光影涂鴉怎么拍

    光影涂鴉,光影涂鴉怎么拍 相關圖片手機拍攝光影涂鴉這種沒有繪畫的涂鴉很受歡迎它的魅力不僅體現在夜晚的輝煌,更體現在人們對一幅隨時都會幻滅的美麗圖畫的迷戀總之,在黑暗中,用手電筒對著相機,揮手拍照。...

  • 戴爾筆記本黑屏怎么辦,戴爾筆記本開機黑屏

    戴爾筆記本黑屏怎么辦,戴爾筆記本開機黑屏 相關圖片戴爾電腦黑屏我相信每個人都知道筆記本里有個叫戴爾的人。戴爾筆記本電腦是全球個人電腦銷售500強企業,因此戴爾筆記本電腦仍然深受用戶歡迎。而據網友反映,戴爾的售后服務也...

  • 漸隱用不了,漸隱

    漸隱用不了,漸隱 相關圖片ps怎么做漸隱問了很多,其實漸開線的方法很簡單一般來說,有兩種方法:一種是矩形填充另一種是矩形法(適用于大多數情況):1使用矩形工具繪制像素高度為的矩形2在面板上選擇“...

  • 怎樣給筆記本降溫,筆記本降溫

    怎樣給筆記本降溫,筆記本降溫 相關圖片筆記本降溫神器筆記本的便攜性贏得了大眾的青睞,筆記本的散熱一直保持著相對較高的關注度。專家認為,筆記本電腦的理想工作溫度比周圍環境高出30度,但事實上,這樣理想的工作...

  • 晶瑩剔透還是晶瑩剔透,晶瑩剔透的露珠

    晶瑩剔透還是晶瑩剔透,晶瑩剔透的露珠 相關圖片晶瑩剔透的水珠像什么本教程主要使用焰火來創建水晶般清晰的效果。讓我們學習以下內容。首先,看看最終效果圖:第一步是隨意創建一個新的畫布,填充背景色為000066,畫出鋼筆的...

  • 筆記本小鍵盤怎么切換,聯想筆記本小鍵盤切換

    筆記本小鍵盤怎么切換,聯想筆記本小鍵盤切換 相關圖片聯想筆記本小鍵盤怎么關閉筆記本電腦以其體積小、便攜性強等特點,成為目前最主流的個人電腦產品。越來越多的朋友在購買電腦時選擇筆記本作為首選,使用筆記本的問題也在不斷...

  • 支付,支付寶推出刷臉支付

    支付,支付寶推出刷臉支付 相關圖片支付寶刷臉支付軟件現在HTML已經成為一個熱門話題,關于HTML5的各種應用、游戲和存儲也在如火如荼地進行著各大主流瀏覽器也開始支持HTML5標準,以打贏新一輪瀏覽器大戰請看:谷微信...

  • 筆記本藍屏怎么解決,筆記本藍屏

    筆記本藍屏怎么解決,筆記本藍屏 相關圖片筆記本開機按了沒反應電腦藍屏,又稱藍屏死機這是Microsoft Windows系列操作系統強制顯示的屏幕圖像,以保護計算機中的數據文件在無法從系統錯誤中恢復時不受損壞。但現在我們筆記本...

  • 系統安裝找不到分區,安裝系統找不到引導分區

    系統安裝找不到分區,安裝系統找不到引導分區 相關圖片重裝系統無法創建新的分區計算機進入我們的生活,一些用戶會使用pe引導盤和pe引導盤來安裝系統。然而,當加載ISO安裝時,我們遇到了一種情況,我們無法創建新的分區或找到現有的...

熱評文章

  • 筆記本開不了機,筆記本電腦關不了機怎么解決

    筆記本開不了機,筆記本電腦關不了機怎么解決 相關圖片筆記本突然開不了機筆記本電腦也被稱為“便攜式電腦”,因為它的體積小,攜帶方便,深受廣大用戶的喜愛,但筆記本也有缺點,在使用過程中很容易出現問題,筆記本開不了機相信...

  • 內存條可以不同品牌嗎,內存條品牌

    內存條可以不同品牌嗎,內存條品牌 相關圖片國產內存條有什么品牌內存模塊是計算機的重要硬件,直接影響計算機的速度和穩定性內存越大,計算機就越快。我們都知道,存儲模塊的質量和穩定性對很多朋友來說不是很清楚很多...

  • 網頁菜單設計,網頁二級菜單怎么設置

    網頁菜單設計,網頁二級菜單怎么設置 相關圖片網頁二級菜單設計首先,看下面的例子(鼠標向上):link 1 link 2 link 3 link n菜單示例與這個類似于windows的下拉菜單類似,在Internet上很常瀏覽器文件菜單在哪...

  • 電腦突然黑屏,電腦突然黑屏怎么辦

    電腦突然黑屏,電腦突然黑屏怎么辦 相關圖片電腦黑屏在使用計算機時,我們經常遇到一些計算機問題而不知所措例如,用戶經常會遇到黑屏的情況對于初學者來說,這似乎是一場電腦災難,無所適從其實,只要你明白原因,就不...

  • 葡萄酒酒瓶,紅酒瓶

    葡萄酒酒瓶,紅酒瓶 相關圖片紅酒開瓶器怎么用看上去精致漂亮的酒瓶其實制作起來很簡單。它可以很容易地與煙花在幾個步驟首先,使用形狀工具畫出相應的形狀通過這些形狀的組合,我們可以得到一個瓶身然后...

  • n卡自帶幀數,n卡自帶幀數怎么開

    n卡自帶幀數,n卡自帶幀數怎么開 相關圖片n卡顯示幀數GeForce Experience可以通過提醒新的Divia運行和關閉,以及根據硬件配置優化游戲中的圖形設置來優化您的PC。這樣,您的計算機就可以保持最新,并n卡自帶fps...

  • 一鍵啟動怎么用,一鍵卸載大師

    一鍵啟動怎么用,一鍵卸載大師 相關圖片一鍵啟動正確用法圖解當我們使用計算機時,打開網頁的概率可以高達70-80%當我們打開互聯網時,我們可以使用高達80%的搜索功能但編輯近日發現,一些網友并不太擅長使用網頁的搜索...

  • 段落縮進,段落首行縮進

    段落縮進,段落首行縮進 相關圖片各段落首行縮進2字符style type=text/css!--p{text indent:2em;/*em是相對單位,2em是當前一個單詞大小*/}--/stylep段落前面兩個各段落懸掛縮進2字符...

  • windows產品密鑰,windows7產品密鑰

    windows產品密鑰,windows7產品密鑰 相關圖片windows密鑰有些東西需要密鑰或密碼才能打開或使用Windows系統也是如此我們并不是說它可以在安裝后永久使用,但只能在使用Windows的產品密鑰激活后使用。今天,我要給你window7產品激活...

  • 如何創建站點,創建站點內容

    如何創建站點,創建站點內容 相關圖片站內站如何創建在開始之前,本教程假設您對HTML、CSS和JavaScript有一些基本的經驗假設您知道什么是html元素或標記,什么屬性表示,html標記的基本語法,webweb站點怎么創建...

關注微信

变脸官网查询