html基礎知識點

2021-10-22 17:24:29 字數 3355 閱讀 9965

html基礎知識

display

元素顯示模式

display:block(塊級)/inline(行內)/inlne-block;、

margin

設定乙個p元素的所有四個邊距

border

設定邊框

border-color邊框顏色

border-style邊框風格solid實線/dashed點虛線/dotted短橫線虛線

border-width邊框粗細

padding

內邊距注意點:

1.給標籤設定內邊距後標籤占有的寬度和高度會發生改變

2.內邊距也會有背景顏色

margin

外邊距標籤與標籤之間的距離叫做外邊距

/html中標籤之間換行和多個空格會被當做乙個空格來處理 不是外邊距/

/外邊距和內邊合併現象

水平方向上的距離可以疊加/

/為了開發的的行為方便 一般會設定margin 0 padding 0;/

background-repeat

/乙個標籤可以同時設定多個屬性 background屬性如果同時設定color和image image會覆蓋color/

背景平鋪方式

repeat 預設,在水平和垂直都需要平鋪

no-repeat 在水平和垂直都不需要平鋪

repeat-x在水平方向上平鋪

repeat-y在垂直方向上平鋪

background-position

控制背景位置

1.具體方位right top/left bottom/center top/水平 垂直

2.畫素

背景屬性縮寫

background:背景顏色 背景 平鋪方式 定位方式

background-attachment

背景關聯方式:可以設定背景不隨滾動條滾動

scroll會滾動/fixed不會滾動

背景和插入的區別

1.背景不會占用div的儲存空間,插入會占用

2.背景有定位屬性,插入沒有定位屬性

3.插入的語義比背景語義要強,在企業開發中如果要被搜尋引擎收錄,推薦使用插入

box-sizing

可以保證給盒子元素新增boder或padding盒子寬高不變

content-box預設(元素的寬高=邊框+內邊距+內容寬高)/boder-box(元素的寬高=width/height屬性)-ie8不支援

text-align

盒子中/文字居中

margin:0 auto

讓盒子本身居中

line-hight

行高一行文字在它的行高中是垂直居中的

/要想文字在盒子中垂直居中的話只需要設定行高等於盒子高度/

若果多行文字只能設定padding來讓它垂直居中

前端常見三種排版方式

ⅰ.標準流排版方式

垂直排版(塊級) 水平排版(行內/行內塊級)

ⅱ.浮動流排版方式

半脫離標準流排版方式,只能設定某個元素左對齊或者右對齊

在浮動流中沒有margin 0 auto的

在浮動流中不區分行內塊級兩種元素

在浮動流中的元素都可以設定寬高

浮動元素的脫標:當某元素脫標之後相當於在標準流中刪除

如果乙個元素浮動了而後面的元素沒有浮動,那麼前面的元素會蓋住後面的元素

浮動元素的排序規則

1.相同方向上的浮動元素,先浮動的元素會顯示在前面

2.不同方向上的浮動元素,左浮動找左浮動,右浮動找右浮動

3.浮動元素浮動之後的位置上,有浮動元素浮動之前在標準流中的位置來確定

浮動元素的貼靠現象

當父元素的寬度足以放下所有元素時他會從左向右依次顯示

如果不夠會找到前面的元素貼靠直到找到父元素為止

浮動元素的字圍現象

浮動元素不會蓋住沒有浮動元素當中的文字 沒有浮動的元素文字會給浮動的元素讓位置

浮動元素不能撐起父元素的高度/標準流可以

清除浮動方式

1.給前面乙個父元素設定高度(用的較少)

2.clear屬性

none(按照預設浮動方式浮動)/left(不找前面的左浮動元素)/right/both

/新增clear屬性後margin屬性失效/

3.隔牆法(外牆/內牆法)

在兩個元素之間加乙個塊級元素,給塊級元素加乙個clear屬性(外牆)

/可以使用第二個盒子的margin-top第乙個盒子的margin不能用/

在第乙個元素的最後寫乙個塊級元素,給塊級元素設定clear屬性(內牆)

/內牆法兩個元素都可以使用margin屬性/

/外牆法不可以撐起第乙個元素的高度,內牆法可以撐起/

偽元素標籤選擇器

偽元素標籤選擇器作用就是給指定標籤中內容前面或後面新增乙個子元素

標籤名稱::before/after

overflow:hidden

1.可以將超出標籤範圍中的內容裁減掉

2.清除浮動(ie6不相容)

可以讓裡面的盒子設定margin-top後外面的盒子不被頂下來

ⅲ定位流

相對/絕對/固定/靜態

①相對定位

相對自己以前的位置移動

/1不會脫離標準流

2在同一方向上的屬性只能使用乙個)(區分行內/塊級元素

3由於相對定位不脫離標準流,所有相對定位的元素會占用標準流的位置,所有給相對定位元素設定margin/padding

等屬性時候會影響到標準流的布局/

應用場景:1.用於微調元素2.配合絕對定位使用

②絕對定位相對於boby來定位

如何讓絕對的元素水平居中

只需要設定定位元素的left:50%

然後再設定絕對定位元素的margin-left:元素的一半px

/1脫離標準流

2.如果乙個絕對定位有祖先元素,並且祖先元素也是定位流,

那麼這個絕對定位的元素就會以定位流的祖先元素作為參考點(同時滿足就近原則)

3.絕對定位/相對定位/固定定位都行,靜態定位不行

4.絕對定位的元素可以會忽略祖先元素的padding

5.以body作為絕對定位元素的參考點時,只是首屏的寬高,並不是整個網頁頁面的寬高

/③固定定位

讓某乙個元素不隨滾動條的滾動而滾動

/脫離標準流,不區分行內塊級/

z-index

專門控制定位流元素的覆蓋關係

那個元素的z-index屬性較大,誰就顯示在上面

如果兩個元素的父元素設定了index,那麼元素的index失效

a標籤偽類選擇器

/ :link修改從未被訪問過狀態下的樣式 /

/ :visited修改被訪問過後的狀態下的樣式/

/ :hover 滑鼠懸停狀態下的樣式 */

HTML基礎知識點

採用中文字符集 常用的編碼格式如下utf 8 是一種字首碼,又稱萬國碼,是一種針對unicode的可變長度字元編碼 gb2312 gb 2312 或 gb 2312 80 是中國國家標準簡體中文字符集,收錄 6763 個漢字,對任意乙個圖形字元都採用兩個位元組表示 gbk gbk即漢字內碼擴充套件規...

HTML基礎知識點一

ie trident 核心 firefox gecko 核心 safari webkit 核心 opera 以前是presto 核心,opera 現已改用google chrome 的blink 核心 chrome blink 基於webkit,google 與opera software 共同開發...

基礎知識點

1 inline block布局 2 table布局 3 justify的末行不對齊 4 兩個圖示之間有空格 換行 5 背景中的的 路徑的 全部斜槓都為 不是 命令列下的這種 doctype html html head meta charset utf 8 title xx title head ...