瘋狂H5筆記 盒模型與布局相關屬性

2021-07-24 11:23:42 字數 2149 閱讀 6901

float:控制目標html元件的浮動方向。有屬性值:left/right

clear:設定目標html元件的左右是否允許出現浮動物件:有屬性值:none/left/right/both

overflow:設定當目標元件內容溢位時的溢位內容顯示方式。有屬性值:visible/auto/hidden/scroll

overflow-x:設定內容溢位時水平方向溢位的內容顯示方式,屬性值同overflow的屬性值

overflow-y:設定內容溢位時垂直方向溢位的內容顯示方式,屬性值同overflow的屬性值

visibility:設定目標物件是否顯示。有屬性值:visible/hidden

3.盒模型兩種:inline和block兩種,可以通過display屬性來轉換不同的兩個盒模型

4.display有乙個none屬性值,用於隱藏目標物件,和visibility:hidden的區別在於:前者隱藏目標物件後還會釋放目標物件的空間,後者依然會保留目標物件的空間

5.inline-block盒模型:通過display屬性指定該屬性值來實現這種盒模型,它是inline和block兩個盒模型的綜合體:這種盒模型的元素既不會獨佔一行,也支援通過width、height來指定寬度和高度。可以同時增加啊vertical-align:top來讓多個inline-block盒模型的元件在頂端對齊

div>div
6.使用box-shadow屬性可以對盒子新增陰影。box-shadow屬性是乙個復合屬性,它包含如下五個值:hoffset:控制陰影在水平方向的偏移;voffset:控制陰影在垂直方向的偏移;blurlength:控制陰影的模糊程度;scalelength:控制陰影的縮放程度;color:控制陰影的顏色

7.css3新增的分欄功能實現方式很簡單,只需要增加column-count屬性即可,不過該屬性需要指定不同的引擎的瀏覽器:

div#content

style>

css3還提供了大量的屬性用於實現分欄效果:

columns:這是乙個復合屬性,可同時指定欄目寬度、分欄數目兩個屬性值

column-width:為乙個長度值,指定每個欄目的寬度

column-count:指定乙個整數值,指定欄目數

column-rule:這是乙個復合屬性,可同時指定分隔條的寬度、樣式、顏色

column-rule-width:指定欄目之間的分隔條的寬度

column-rule-style:指定分隔條的線型,如solid等

column-rule-color:設定分隔條的顏色

column-gap:為乙個長度值,用於指定各欄目之間的間距

column-fill:用於控制欄目的寬度,有兩個屬性值:

auto:隨著內容的多少自動變化

balance:將會統一成內容最多的那一欄的高度

8.css3還提供了乙個盒模型:多欄布局:display:box;目前瀏覽器不支援標準的box屬性值,因此實際使用時需要新增不同的瀏覽器的字首如moz等:

div

多欄布局和之前的column-count實現的分欄布局不一樣,分欄布局只是將一篇文章分成多個欄目顯示,多蘭布局可以自己控制

css3還為box盒模型提供了如下屬性:

box-orient:設定box盒模型裡子元素的排列方向。有如下兩個屬性值:

horizontal:水平排列。如果沒有指定高度,則預設等於父容器的高度

vertical:垂直排列。如果沒有指定寬度,則預設等於父容器的寬度

box-ordinal

-group:設定box盒模型裡子元素的顯示順序

box-flex:設定box盒模型裡子元素自適應寬度的比例。

如下簡單的例子:

#div1

#div2

style>

id="#div2">

style="box-ordinal-group:2">欄目2div>

style="box-ordinal-group:1">欄目1div>

style="box-ordinal-group:3">欄目3div>

div>

瘋狂H5筆記 背景和邊框相關屬性

background attachment 設定背景是隨著物件內容滾動還是固定,有兩個屬性值 scroll 隨元件內容的滾動而滾動 background position 設定背景的位置,乙個值表示橫座標,縱座標預設50 兩個值分別表示橫縱座標 background repeat 設定背景的鋪展方式...

H5筆記04 表單form

html5中表單提交的新方式 表單元素可以不用被標籤包圍。只需要給標籤設定乙個id,然後把要關聯起來的表單元素加上form id 即可 經測試ie無效 type email 限制使用者輸入必須為email型別 type url 限制使用者輸入必須為url型別 type date 限制使用者輸入必須為...

H5筆記 可以省略結束標籤的元素

整理了一下可以省略結束標籤的元素 1 空元素語法的元素 area base br col command embed hr img input keygen link mata param source wbr 2 可以省略結束標籤的元素 colgroup dt dd li optgroup p r...