CSS基本知識4-CSS行模型
display:inline、block、inline-block
block元素的特點是:
總是在新行上開始;
高度,行高以及頂和底邊距都可控制;
寬度預設是它的容器的100%,除非設定一個寬度
inline元素的特點是:
和其他元素都在一行上;
高,行高及頂和底邊距不可改變;
寬度就是它的文字或圖片的寬度,不可改變。
display:inline-block將物件呈遞為內聯物件,但是物件的內容作為塊物件呈遞。旁邊的內聯物件會被呈遞在同一行內,允許空格。
意思就是,這個物件本身是一個行元素,但是它的內容是塊(也就是說它可以設高寬。這可以想象成,一個通道上的一些物件,可以對齊,可以有有自已的大小等。
塊級元素:塊狀元素排斥其他元素與其位於同一行,可以設定元素的寬(width)和高(height),塊級元素一般是其他元素的容器,可容納塊級元素和行內元素。常見的塊級元素有div, p ,h1~h6等。
行內元素:行內元素不可以設定寬(width)和高(height),但可以與其他行內元素位於同一行,行內元素內一般不可以包含塊級元素。行內元素的高度一般由元素內部的字型大小決定,寬度由內容的長度控制。常見的行內元素有a, em ,strong等。
例如:我們可以給div或p應用下面樣式,但是a標籤卻無法應用下面的樣式。
1 |
.test{ width : 100px ; height : 100px ;}
|
當然我們還可以通過樣式display屬性來改變元素的顯示方式。當display的值設為block時,元素將以塊級方式呈現;當display值設為inline時,元素將以行內形式呈現。所以我們可以給a標籤應用以下樣式:
1 |
.test{ display : block ; width : 50px ; height : 50px ;}
|
另外,如果我們即想讓一個元素可以設定寬度高度,又想讓它以行內形式顯示,這時我們可以設定display的值為inline-block。如:
1 |
a{ display :inline- block ; width : 100px ; height : 100px ;}
|
附:
塊元素(block element)
* address - 地址
* blockquote - 塊引用
* center - 舉中對齊塊
* dir - 目錄列表
* div - 常用塊級容易,也是css layout的主要標籤
* dl - 定義列表
* fieldset - form控制組
* form - 互動表單
* h1 - 大標題
* h2 - 副標題
* h3 - 3級標題
* h4 - 4級標題
* h5 - 5級標題
* h6 - 6級標題
* hr - 水平分隔線
* isindex - input prompt
* menu - 選單列表
* noframes - frames可選內容,(對於不支援frame的瀏覽器顯示此區塊內容
* noscript - )可選指令碼內容(對於不支援script的瀏覽器顯示此內容)
* ol - 排序表單
* p - 段落
* pre - 格式化文字
* table - 表格
* ul - 非排序列表
內聯元素(inline element)
* a - 錨點
* abbr - 縮寫
* acronym - 首字
* b - 粗體(不推薦)
* bdo - bidi override
* big - 大字型
* br - 換行
* cite - 引用
* code - 計算機程式碼(在引用原始碼的時候需要)
* dfn - 定義欄位
* em - 強調
* font - 字型設定(不推薦)
* i - 斜體
* img - 圖片
* input - 輸入框
* kbd - 定義鍵盤文字
* label - 表格標籤
* q - 短引用
* s - 中劃線(不推薦)
* samp - 定義範例計算機程式碼
* select - 專案選擇
* small - 小字型文字
* span - 常用內聯容器,定義文字內區塊
* strike - 中劃線
* strong - 粗體強調
* sub - 下標
* sup - 上標
* textarea - 多行文字輸入框
* tt - 電傳文字
* u - 下劃線
* var - 定義變數
可變元素
可變元素為根據上下文語境決定該元素為塊元素或者內聯元素。
* applet - java applet
* button - 按鈕
* del - 刪除文字
* iframe - inline frame
* ins - 插入的文字
* map - 圖片區塊(map)
* object - object物件
* script - 客戶端指令碼
相關推薦
CSS基本知識4-CSS行模型
display:inline、block、inline-block block元素的特點是: 總是在新行上開始; 高度,行高以及頂和底邊距都可控制; 寬度預設是它的容器的100%,除非設定一個寬度 inline元素的特點是: 和其他元素都在一行上; 高,行高及頂和底邊距不可改變; 寬度就是它
CSS基本知識3-CSS盒模型
box-sizing: content-box|border-box|inherit; 值描述 content-box 這是由 CSS2.1 規定的寬度高度行為。 寬度和高度分別應用到元素的內容框。 在寬度和高度之外繪製元素的內邊距和邊框。 border-box
CSS基本知識1-CSS基本概念
CSS基本概念: 選擇器{屬性:值;屬性:值} CSS繼承:子元素繼承父元素樣式,父子關係看DOM結構。 CSS覆蓋: 瀏覽器預設設定 外部樣式表 內部樣式表(位於 <head> 標籤內部) 內聯樣式(在 HTML 元素內部) CSS優先: A:文字從上到下,後宣告的樣式
CSS基本知識2-CSS選擇
選擇就是CSS定義的第一部分,可以用面向物件的模式來理解,或者宣告式的面向物件。 標準選擇: #.E 進階選擇:“,”分隔多個相同項,相當於類的例項。 如:#btn1,#btn2,.btn {...} 後代元素選擇,相當於子類: 空格分隔: .nav p {...} #header .nav
CSS基本知識5-CSS對齊
要對齊的關鍵,在於理解塊,行的概念,塊的對齊主要靠自動計算定位,比如margin:auto,及浮動,所以最好的辦法是儘量使用行來對齊。 例項: .box { border: 1px solid #808080; height: 200
CSS基本知識6-CSS字型
首先要考慮的是文字的排版,實際上有這玩意,Word還需要嗎?不需要了。我們列下文字所涉及的操作: CSS 文字屬性 可見,以上的這些CSS文字屬性,主要就是操作文字的顯示,當然對於網頁來說,大多數不常用。但如果想做個網頁編輯器,那就都可以派上用場了。 有了文字,我們還要設下字型,先看
CSS基本知識
分開 col tle -- body 定義 type text 參考 CSS規則有兩個主要部分組成:選擇器,一條或多條聲明 選擇器通常是需要改變樣式的HTML元素 每條聲明由一個屬性和一個值組成 屬性是希望設置的樣式屬性。每個屬性有一個值。屬性和值之間用冒號分開。 CSS
js基本知識4
elements urn string nts rip txt 相互 last 文檔結構 1. 數組 看電影 電影院 座位 大的變量 裏面可以放很多的值 var arr = [1,3,57]; var
RTL基本知識:邏輯強度模型(Logic Strength Model)
model 多個 描述 gif 並不是 用途 mode 其中 還需 本文主要介紹HDL語言中常用的邏輯強度模型,並且以Verilog示例為主,最後介紹VHDL中常用的各種邏輯值系統.Verilog中提供了大量的模型用於模擬具體的硬件電路,例如and,or,nmos等,同時為
數據庫系統——基本知識與關系模型【一】
字段 三級 介質 結合 圖書館 har 表之間 cep 作用 對於數據庫的學習,我們要註意以下幾個方面: 對於概念:能夠明確各個概念的含義,區分相似的概念,並且能舉出相應的通俗易懂的例子 對於操作:知道操作每個操作的含義,能用韋恩圖以集合的形式表示出來,並且能夠通過說明
css布局基本知識
pad ati 窗口 htm type 適應 ant ans webkit 一,. 頁面導入樣式時,使用link和@import有什麽區別? 語法的角度: link屬於XHTML標簽,除了加載CSS外,還能用於定義RSS, 定義rel連接屬性等作用; 而@import是CS
CSS簡介及基本知識
htm 線型 行內樣式 HR 註意 長春 cell 設置方法 GC (CSS)cascading style sheets:層疊樣式表。級聯式樣式表,簡稱:樣式表。 Sheets :就是一個樣式文件,它的擴展名為.css Style:外觀,個性化 樣式表的位置 為了學習
前端知識整理 CSS盒模型
我們先來說說 什麼是CSS的盒模型呢? 百度一下: 想象一個盒子,它有:外邊距(margin)、邊框(border)、內邊距(padding)、內容(content)四個屬性; 好百度是這樣解釋的。 行 但是我們還有兩個小概念 一個是標準模型(content-box) 和IE模型 (bor
(1)css語法和基本知識
href size 聯網 mar bubuko clas content ont 加粗 1、CSS全稱為“層疊樣式表”,它主要是用於定義HTML內容在瀏覽器內的顯示樣式,如文字大小、顏色、字體加粗等。 註:使用CSS樣式的一個好處是通過定義某個樣式,可以讓不同網
1.4-HTML-CSS-基本用法及頁面引用
摘要:為了讓網頁元素的樣式更加豐富,也為了讓網頁的內容和樣式能拆分開,CSS由此思想而誕生,CSS是 Cascading Style Sheets 的首字母縮寫,意思是層疊樣式表。有了CSS,html中大部分表現樣式的標籤就廢棄不用了,html只負責文件的結構和
CSS樣式基本知識
目錄 內聯式css樣式,直接寫在現有的HTML標籤中 CSS樣式可以寫在哪些地方呢?從CSS 樣式程式碼插入的形式來看基本可以分為以下3種:內聯式、嵌入式和外部式三種。這一小節先來講解內聯式。 內聯式css樣式表就是把css程式碼直接寫在現有的HTM
CSS——NO.2(CSS樣式的基本知識)
*/ * Copyright (c) 2016,煙臺大學計算機與控制工程學院 * All rights reserved. * 檔名:text.cpp * 作者:常軒 * 微信公眾號:Wor
(7)CSS樣式基本知識
CSS樣式基本知識 內聯式css樣式,直接寫在現有的HTML標籤中。 嵌入式css樣式,寫在當前的檔案中。 外部式css樣式,寫在單獨的一個檔案中。 三種方法的優先順序:總結來說,就是–
CSS樣式基本知識,新增樣式,
認識CSS樣式 CSS全稱為”層疊樣式表(Cascading Style Sheets)”, 它主要是用於定於HTML內容在瀏覽器內的顯示樣式,如文字大小,顏色,字型加粗等。 如下列程式碼: p{ font-size:12px; c
css樣式的基本知識
1 css是什麼? 層疊樣式表,修飾網頁結構 2 如何去使用css? a.在html網頁中,加入一個style標籤,在這個style標籤裡面寫css程式碼 b.可以直接把style裡面的程式碼放到一個單獨的檔案中,通過link標籤