html盒模型向上浮动,HTML5盒模型、浮动和定位
在此之前我們先了解一下塊級元素和行內元素的區(qū)別
一、塊級元素
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 塊級元素的一個規(guī)則,塊格式化上下文(Block Formatting Context,BFC)
百度去吧這個說不明白。
(2)外邊距重疊 BFC —> 導致父盒子隨著子盒子走 父盒子擁有子盒子的上外邊距屬性
1:解決:
(1) 父盒子設置上邊框 border-top:1px solid orange
(2)父盒子設置內邊距 padding-top:1px
(3)overflow:hidden 溢出的隱藏
2:避免:設置父盒子內邊距 ,而不是子盒子的外邊距 , 優(yōu)先: 內邊距 > 外邊距
(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是行內元素,想要實現(xiàn)的話需要加display:block;
(4)溢出隱藏
overflow:hidden
當子盒子超出了父盒子的范圍,可以在父盒子里用overflow:hidden來隱藏
前后效果圖
四、浮動
瀏覽器默認展示的元素的位置 ————>標準流
不浮動就是標準流,如圖4個盒子
浮動 float : left /right /none 默認
并排必須同時加浮動屬性 ——————> 破壞標準流 ,浮動流,如圖
五、定位
定位position
left:10px 當前定位元素相對于參考物左邊界的距離 x
top: 10px 當前定位元素相對于參考上邊界的距離 y
right:10px 右邊界
bottom :10px 底邊界
靜態(tài)定位: static
靜態(tài)定位這個是元素的默認定位方式,不能使用top,bottom,left,right和z-index屬性,其它三種定位可以使用以上幾個屬性。
相對定位: relative
如果想為元素設置層模型中的相對定位,需要設置position:relative;,自己最初的位置做參考發(fā)生位置移動
,沒有脫標 ,只是發(fā)生移動,通過left、right、top、bottom屬性確定元素在正常文檔流中的偏移位置,然后相對于以前的位置移動,移動的方向和幅度由left、right、top、bottom屬性確定,偏移前的位置保留不動。
固定定位: fixed
如果想為元素設置層模型中的固定定位,需要設置position:fixed;,直接以瀏覽器窗口作為參考進行定位,它是浮動在頁面中,元素位置不會隨瀏覽器窗口的滾動條滾動而變化,除非你在屏幕中移動瀏覽器窗口的屏幕位置,或改變?yōu)g覽器窗口的顯示大小,因此固定定位的元素會始終位于瀏覽器窗口內視圖的某個位置,不會受文檔流動影響。比如我們準備一長串的文字,讓文字超出一屏的寬度,設置浮動元素div的left和top為100px,拖動瀏覽器的滾動條,浮動元素div的位置不會發(fā)生變化。
絕對定位:absolute
如果想為元素設置層模型中的絕對定位,需要設置position:absolute;,滾動條滾動,固定定位元素位置發(fā)生改變,不保留原來位置 ——>脫標,這條語句的作用將元素從文檔流中拖出來,將不占用原來元素的空間,然后使用left、right、top、bottom屬性相對于其最接近的一個具有定位屬性的父級元素進行絕對定位。如果不存在就逐級向上排查,直到相對于body元素,即相對于瀏覽器窗口。
z-index 定義和用法
z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
注意:元素可擁有負的 z-index 屬性值,Z-index 僅能在定位元素上奏效(例如 position:absolute;)!
顏色
opacity: 0-1 小數(shù) 0 完全透明 1代表實色 數(shù)值越小越透明
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盒模型、浮动和定位的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 白条取现审核不通过多久再试
- 下一篇: 车险保单在哪里查询