不確定高度的盒子垂直水平居中，換行樣式的總結

2022-06-22 11:39:15 字數 1050 閱讀 1942

一、不確定寬高的盒子垂直水平居中
1、



.father 


.child 




2、




.container 


.inner 


//衍生


inner




3、vh和vw是兩個比較偏的單位，是指「viewport的height和width的1%」，比如說50vh就是當前視口（視窗的高度，實驗中包含了滾動條）高度的50%。也就是說vw將獲得和1%差不多的window寬度。




.inner


衍生




.inner2


4、彈性盒子


.father


二、換行樣式


先給出各種方式，再具體介紹每乙個屬性。


強制不換行:


p 


自動換行:


p 


強制英文單詞斷行:


p 


注意：設定強制將英文單詞斷行，需要將行內元素設定為塊級元素。


超出顯示省略號:


p


white-space:normal|pre|nowrap|pre-wrap|pre-line|inherit;


word-wrap:normal|break-word;


word-break:normal|break-all|keep-all;


 
DIV不確定高度內部元素水平垂直居中的方法歸納
看題目就知道是利用父標籤的 display table cell,該屬性指讓標籤元素以 單元格的形式呈現，類似於td標籤。目前ie8 以及其他現代瀏覽器都是支援此屬性的。那麼既然父標籤已經是類似 單元了，那麼就可以利用 單元的屬性vertical align middle 來使得內部元素垂直居中了，...


盒子垂直水平居中
1 定位 盒子寬高已知，position absolute left 50 top 50 margin left 自身一半寬度 margin top 自身一半高度 2 table cell布局 父級 display table cell vertical align middle 子級 margin...


盒子垂直水平居中
要設定內部盒子在外部盒子內垂直水平居中，可以有以下幾種做法 假設外部盒子為紅色，大小為10em 10em 內部盒子為黃色，大小為3em 3em。在調整位置之前，盒子情況如下 由於知道兩個盒子的大小，只要設定黃盒子的位置即可，首先設定黃盒子的position為absolute，再將黃盒子向右下方偏移紅...