html元素根據表現形式,常見的可以分為兩類
塊元素在瀏覽器預設顯示狀態下將佔據整行,排斥其他元素與其位於同一行,款元素一般為矩形,可以容納元素和其他的塊元素
塊元素說明
divdiv層
h1~h6
1到6級標題
p段落,會自動給在其前後建立一些空白
hr分割線
ol有序列表
ul無序列表
塊元素的特點:
行內元素與塊元素恰恰相反,行內元素預設顯示狀態可以與其他行內元素共存在同一行,
行內元素
說明strong
加粗強調
em斜體強調
s刪除線
u下劃線
a超連結
span
常用行級,可定義文件中的行內元素
行內元素具有如下特點:
display:在css中,我們可以使用diaplay屬性來改變元素的型別;
display:屬性值
屬性值
說明inline
行內元素
block
塊元素inline-block
行內塊元素
table
以**形式顯示,類似與table元素
table-row
以**行形式顯示,類似與tr元素
table-cell
以**單元格形式顯示,類似於td元素
nono
隱藏元素
inline-block元素,我們可以使用它將元素轉換為行內塊元素,行內塊元素具有以下兩個特點:
也就是說inline-block元素有兩個:img元素和input元素。
dispaly:none 和visibility:hidden的區別:隱藏某個元素怒
dispaly:table-cell
在css中,display-cell可以讓元素以**單元格的形式呈現。
display:table-cell 非常強大,可以實現以下三種功能。
的水平居中可以使用:text-align:center 來實現,而的垂直居中效果可以使用display:table-cell和vertical-align:center 配合來實現
父元素
子元素
當父元素定義:「display:table"而子元素定義diaplay:table-cell時,如果給父元素一定的寬度,父元素寬度就會根據子元素的個數進行自動平均劃分。
可以使用font-size:0 來去除inline-block元素的間距
使用img標籤來表示
圖注文本
figure 元素用於包含和圖注,figcaption元素用於表示圖注文本
在css中,em是相當於「當前元素"的字型大小而言的,其中1em等於」當前元素"字型大小。這裡的字型大小值得是以px為單位的font-size值
(所有瀏覽器的預設字型大小都是16px)
首行縮排: (2em相當於兩個字型)
text-indent:2em
a標籤注意事項
a標籤本身有預設的顏色央視,優先順序比繼承的要高。如果想要改變a標籤的顏色,必須選中a標籤進行操作才行。
css、層次選擇器:
選擇器說明
m n後代選擇器,選擇m元素內部後代n元素(所有n元素)
m>n
子代選擇器,選擇m元素內部子代n元素(所有第一級n元素)
m~n兄弟選擇器,選擇m元素後的所有同級n元素
m+n相鄰選擇器,選擇m元素相鄰的下乙個元素(m,n是同級元素)
為元素之間增加乙個邊框的效果:
li+li
開發階段css檔案命名:
檔名說明
reset.css
重置樣式,重置元素預設樣式
global.css
全域性樣式,全站公用,定義頁面基礎樣式
themes.css
主題樣式,用於實現換**功能
module.css
模組樣式,用於模組的樣式
master.css
母版樣式,用於模組的樣式
columns.css
專欄樣式,用於專欄的樣式
forms.css
表單央視是,用於表單的樣式
mend.css
補丁樣式,用於維護,修改的樣式
print.css
列印樣式,用於列印的樣式
注:為了避免class 命名的重複,命名時一般取父元素class名最為字首
class="column">h3>
class="column-content">div>div>
css盒子
盒子模型由content(內容),padding(內邊距)margin(外邊距)和border(邊框)四個屬性組成,在盒子中還有width和高度height兩大輔助性屬性。
屬性
說明
border
(邊框)元素邊框
margin
(外邊框)用於定義頁面中元素與元素之間的距離
padding
(內邊距)用於定義內容與邊框之間的距離
content
(內容)可以是文字或
未完待續.....
C 使用GDI根據文字規格繪製基準線
由於根據需求需要繪製4線3格顯示字母,所以需要知道字型規格的基線 baseline 這裡記錄下,下面部分摘錄自msdn c 獲取文字規格的方法在fontfamily類中,對於winform提供以下幾個函式 這些方法返回的數字使用的是字型設計單位,因此,它們與特定的 font物件的大小和單位無關。下面...
CSS文字超出部分顯示省略號
overflow hidden 超出的部分隱藏起來 text overflow ellipsis 超出文字以省略號 white space nowrap 不換行 overflow hidden 超出的部分隱藏起來 text overflow ellipsis 超出文字以省略號 display web...
css文字超出部分省略號 CSS強制換行總結
word break break all例如div寬200px,它的內容就會到200px自動換行,如果該行末端有個英文單詞很長 congratulation等 它會把單詞截斷,變成該行末端為conra congratulation的前端部分 下一行為tulation conguatulation 的...