瘋狂H5講義 大小 定位 輪廓相關屬性

2021-07-24 11:12:31 字數 1012 閱讀 7553

1.css3新增box-sizing屬性,用於指定當前元素所設定的width和height屬性是指定哪一塊,目前只有firefox瀏覽器支援該屬性,因此需要新增-moz-字首使用:

1.content-box:指定width和height設定的是內容區也就是content的寬度和高度

2.padding-box:指定width和height設定的是內容區加內邊距區也就是content+padding的寬度和高度

3.border-box:指定width和height設定的是內容區加內邊距區加邊框區的寬度和高度

舉個小例子:

doctype html>

box-sizing屬性

="author" content=

"chengxi"

/>

div#div1*/

}#div2

}#div3

}div1

div2

div3

position:設定物件的定位方式:

absolute:允許該物件漂浮於頁面之上,無須考慮其他內容的布局,已脫離文件流

relative:仍然在正常的html流中,目標物件的位置將參照前乙個物件的位置進行定位

z-index:設定目標物件的漂浮層的層序,該值越大,漂浮層越處於上面,只有當position=absolute/relative時才有效

top/left/bottom/right:設定目標物件相對於最近的乙個具有定位設定的父物件的對應方向的偏移量

outline:可同時設定目標物件的輪廓的顏色、線型、線寬三個屬性

outline-color:設定元件的輪廓顏色

outline-style:設定元件的輪廓線型,支援的屬性值和border-style一樣

outline-width:設定元件的輪廓寬度

outline-offset:設定元件的輪廓偏移的距離,也就是輪廓和邊框之間的距離

H5浮動與定位

h5的奇妙之處就在於它的變幻莫測,接下來我想談一下我對定位浮動的認知。什麼是浮動 首先要了解什麼是浮動 脫離文件流,預設在當前的行對既定的方向進行移動 預設橫排 用浮動可以解決什麼問題 使用浮動之前我們要想明白浮動都可以解決什麼問題 比如我們要放一排的div或是img,我們故可以通過除錯margin...

標準h5的定位 哈弗H5車定位是什麼

哈弗h5的車型定位是緊湊型suv。suv車型一般分為五個等級,按照由高到低的順序排列依次是 全尺寸suv 中大型suv 中型suv 緊湊型suv 小型suv。像是造車平台 汽車軸距 車身尺寸 車輛配置 汽車動力等等,都會影響車輛的等級。截至2019年11月22日,哈弗h5在售的最新車型是2018款,...

H5學習筆記(十)定位

定位指的就是將指定的元素擺放到頁面的任意位置 通過定位可以任意的擺放元素 通過position屬性來設定元素的定位 可選值static 預設值,元素沒有開啟定位 relative 開啟元素的相對定位 absolute 開啟元素的絕對定位 fixed 開啟元素的固定定位 也是絕對定位的一種 當元素的p...