html入門基礎(六)

2021-09-27 04:22:16 字數 1730 閱讀 2295

/*外盒尺寸計算(元素空間尺寸)*/

element空間高度 = content height + padding + border + margin

element 空間寬度 = content width + padding + border + margin

/*內盒尺寸計算(元素實際大小)*/

element height = content height + padding + border (height為內容高度)

element width = content width + padding + border (width為內容寬度)

注意:

1.width,height僅使用塊級元素,對行內元素無效

2.計算盒子總高度時,還應考慮上下兩個盒子的外邊距合併情況

3.如果乙個盒子沒有給定寬度和高度時,padding不會影響盒子大小

width > padding > margin

1.margin外邊距合併問題,ie6 margin加倍的bug,所以最後使用

2.padding會影響內盒的大小,經常使用加減法

3.width 寬度剩餘法,高度剩餘法

1.content-box :盒子模型 width + padding + boder

2.border-box:盒子模型即為寬度 padding 和boder 都包含再width

1.預設設定,優先保證內部的內容所佔區域不變

2.boder-box 優先保證自己盒子的所佔區域不變,對內容進行壓縮

box-shadow

:水平陰影 垂直陰影 模糊距離 陰影尺寸 陰影顏色 內/**影;

注意:

1.子盒子浮動不會壓住padding

2.浮動的元素會找最近的父級元素對齊,不會超出內邊距的範圍

浮動的目的是,讓多個塊級元素同一行顯示

語法:

選擇器
屬性值

描述left

不允許左側有浮動元素(清除左側浮動的影響)

right

不允許右側有浮動元素(清除右側浮動的影響)

both

同時清除左右兩側浮動的影響

優點:通俗易懂,書寫方便

缺點:新增了許多無意義的標籤,結構化更差。

可以給父級新增overflow:hidden auto scroll

優點:**簡介

缺點:內容增多的時候,不會自動換行,無法顯示溢位元素

p:after

/* 偽元素產生出的是 行內元素

在整個父元素後面內容 轉成塊元素

高度為0 隱藏掉點 清除浮動*/

.clearfix:after

.clearfix

:after 的公升級版

優點:符合閉合浮動的思想,結構語義化正確

缺點: ie6不支援after,

.clearfix:before, .clearfix:after

.clearfix:after

.clearfix

清除浮動:clear:both 塊級元素下移,直到兩邊沒有浮動元素

閉合浮動:使浮動元素閉合,使父元素能夠包含浮動元素,從而減少浮動影響,**更簡潔

html 基礎入門

html的基礎知識 1.html語言的遵循的規範 1 乙個html檔案開始標籤和結束標籤 2 html包含兩部分內容 顯示在頁面上的內容都寫在body裡面 3 html的標籤有開始標籤,也要有結束標籤 4 html的 不區分大小寫的 5 有些標籤是沒有結束標籤的 比如 換行 html的操作思想 網頁...

HTML基礎入門

可以使用專業的html編輯器來編輯html 這裡推薦幾款常用的編輯器 notepad 和 sublime text 還可以配合 emmet 外掛程式來提高編碼速度。emmet 官網 head標籤 作用 用於存放 title,meta,base,style,script,link 注意在head標籤中...

HTML 基礎入門

最近學習html5的知識,屬於入門級別。粗略接觸感覺並不是十分枯燥困難,不過據說html都是入門容易深入很難,但願以後不會被難倒吧。html是hypertext markup language 超文字標記語言 的簡寫,他不是一種程式語言,而是一種標記語言,用於告訴瀏覽器如何構造你的頁面。他可以由一系...