在此之前我們先了解一下塊級元素和行內元素的區別

一、塊級元素

1、總是從新的一行開始

2、高度、寬度都是可控的

3、寬度沒有設置時，默認為100%

4、塊級元素中可以包含塊級元素和行內元素

二、行內元素

1、和其他元素都在一行

2、高度、寬度以及內邊距都是不可控的

3、寬高就是內容的高度，不可以改變

4、行內元素只能行內元素，不能包含塊級元素

三、盒模型

1、盒模型簡單示意圖

邊框border： 寬度 px 、 邊形 ： solid實線、 dotted 圓點 、dashed虛線 、 none 沒有邊框 。

外邊距margin：可以通過上top、 下bottom 、左left、右right，單位像素px。

內邊距padding：可以通過上top、 下bottom 、左left、右right，單位像素px。

2、盒模型的一些問題

(1)BFC 塊級元素的一個規則，塊格式化上下文(Block Formatting Context，BFC)

百度去吧這個說不明白。

(2)外邊距重疊 BFC —> 導致父盒子隨著子盒子走 父盒子擁有子盒子的上外邊距屬性

1：解決：

(1) 父盒子設置上邊框 border-top:1px solid orange

(2)父盒子設置內邊距 padding-top:1px

(3)overflow:hidden 溢出的隱藏

2：避免：設置父盒子內邊距 ，而不是子盒子的外邊距 ， 優先： 內邊距 > 外邊距

(3)margin : 10px 四面外邊距值一樣

margin: 10px 20px 左右外邊距為20px 上下外邊距為10px

margin: 10px 20px 30px 10px 上外邊距 20px 左右 30px 下

margin: 10px 20px 30px 40px 上右下左

盒子水平居中：

margin: 0 auto; 上下0 左右auto 瀏覽器自己去算

水平居中只適合于塊級元素 ,偽元素:before,:after是行內元素，想要實現的話需要加display:block;

(4)溢出隱藏

overflow:hidden

當子盒子超出了父盒子的范圍，可以在父盒子里用overflow:hidden來隱藏

前后效果圖

四、浮動

瀏覽器默認展示的元素的位置 ————>標準流

不浮動就是標準流，如圖4個盒子

浮動 float : left /right /none 默認

并排必須同時加浮動屬性 ——————> 破壞標準流 ，浮動流，如圖

五、定位

定位position

left：10px 當前定位元素相對于參考物左邊界的距離 x

top： 10px 當前定位元素相對于參考上邊界的距離 y

right：10px 右邊界

bottom ：10px 底邊界

靜態定位： static

靜態定位這個是元素的默認定位方式，不能使用top，bottom，left，right和z-index屬性，其它三種定位可以使用以上幾個屬性。

相對定位： relative

如果想為元素設置層模型中的相對定位，需要設置position:relative;，自己最初的位置做參考發生位置移動

，沒有脫標 ，只是發生移動，通過left、right、top、bottom屬性確定元素在正常文檔流中的偏移位置，然后相對于以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動。

固定定位： fixed

如果想為元素設置層模型中的固定定位，需要設置position:fixed;，直接以瀏覽器窗口作為參考進行定位，它是浮動在頁面中，元素位置不會隨瀏覽器窗口的滾動條滾動而變化，除非你在屏幕中移動瀏覽器窗口的屏幕位置，或改變瀏覽器窗口的顯示大小，因此固定定位的元素會始終位于瀏覽器窗口內視圖的某個位置，不會受文檔流動影響。比如我們準備一長串的文字，讓文字超出一屏的寬度，設置浮動元素div的left和top為100px，拖動瀏覽器的滾動條，浮動元素div的位置不會發生變化。

絕對定位：absolute

如果想為元素設置層模型中的絕對定位，需要設置position:absolute;，滾動條滾動，固定定位元素位置發生改變，不保留原來位置 ——>脫標，這條語句的作用將元素從文檔流中拖出來,將不占用原來元素的空間，然后使用left、right、top、bottom屬性相對于其最接近的一個具有定位屬性的父級元素進行絕對定位。如果不存在就逐級向上排查，直到相對于body元素，即相對于瀏覽器窗口。

z-index 定義和用法

z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。

注意：元素可擁有負的 z-index 屬性值，Z-index 僅能在定位元素上奏效(例如 position:absolute;)！

顏色

opacity: 0-1 小數 0 完全透明 1代表實色 數值越小越透明

opacity: 盒子里的內容都變透明

background-color:rgba(0,0,0,.2);rgba() 僅僅只是盒子背景透明

背景

背景屬性 background

顏色 background-color

background-image: url(“img/ms.jpg”);引入背景圖片地址

background-repeat: no-repeat;背景圖片是默認平鋪的，用no-repeat表示不平鋪

background-position: 方位值，left 、top 、right 、bottom、center、x 水平 、y 垂直

總結

以上是生活随笔為你收集整理的html盒模型向上浮动,HTML5盒模型、浮动和定位的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。