我愛你
資訊專欄INFORMATION COLUMN
摘要：最外層的是必須的，是的百分比參考物。網(wǎng)上其他的文章需要給和加，試了下不加也可以。缺點(diǎn)如果頁面要內(nèi)嵌在里的話，手機(jī)在里的系統(tǒng)標(biāo)題會擋住頁面頂部的一部分，設(shè)置了也沒好使，應(yīng)該是是導(dǎo)致的，無奈只能采取下面的方法。
布局問題 水平垂直居中
.box父元素，.innerbox子元素
css設(shè)置元素水平垂直居中4顯示
1,子元素不要求寬高
.box{
width: 400px;
height: 200px;
border: 5px solid #ffffd;
margin: 50px auto;
position: relative;
}
.innerbox{
position: absolute;
left: 50%;
top: 50%;
border: 5px solid #f00;
transform: translate(-50%,-50%);
}
2,
.box{
width: 400px;
height: 200px;
border: 5px solid #ffffd;
margin: 50px auto;
position: relative;
}
.innerbox{
position: absolute;
left: 50%;
top: 50%;
border: 5px solid #f00;
width:20px;
height:20px;
margin-left:-10px;
margin-top:-10px
}
3,
.box{
width: 400px;
height: 200px;
border: 5px solid #ffffd;
margin: 50px auto;
position: relative;
}
.innerbox{
position: absolute;
left: 0;
top: 0;
right:0;
bottom:0;
border: 5px solid #f00;
width:20px;
height:20px;
margin:auto
}
4，
flex布局
.box{
width: 400px;
height: 200px;
border: 5px solid #ffffd;
margin: 50px auto;
display: flex;
align-items:center;
justify-content: center;
}
.innerbox{
width:50px;
height:50px;
background: mediumspringgreen;
}
5，
.cell {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 240px;
height: 180px;
border:1px solid #666;
}
.child{
width:50px;
height:100px;
display: inline-block;
}
我愛你
6,
水平居中
法一：子元素是非塊級 text-align:center
法二：子元素是塊級元素margin:0 auto;此法要求塊級有寬度，但有時未知寬度，則可用width:fit-content
法三：父集relative 向左移動一半。子集relative，向右移動一半或向左移動-50%。最外層的#macji是必須的，是.macji-skin的百分比參考物。網(wǎng)上其他的文章需要給.macji-skin 和li加floatleft，試了下不加也可以。
#macji{
width:100%;
height:80px;
background-color:#eee;
}
#macji .macji-skin{
display: inline-block;
position:relative;
left:50%;
}
#macji .macji-skin li{
position:relative;
right:50%;
display: inline-block;
margin:10px;
padding:0 10px;
border:solid 1px #000;
line-height:60px;
}
- 列表一
7,垂直居中
line-height vertical-align
//tip1
.left{
float: left;
width: 100px;
}
.right{
margin-left: 120px;
}
34343434
22222
//tip2
.left{
float: left;
width: 100px;
margin-right: 20px;
}
.right{
overflow: hidden;
}
34343434
22222
//tip3
.parent{
display: table;
width: 100%;
table-layout: fixed;
}
.left,.right{
display: table-cell;
}
.left{
width: 100px;
padding-right: 20px;
}
34343434
22222
//tip4
.parent{
display: flex;
}
.left{
width: 100px;
padding-right: 20px;
}
.right{
flex: 1;
}
34343434
22222
一列或多列不定寬，一列自適應(yīng)
//tip1
.left,.center{
float: left;
margin-right: 20px;
}
.right{
overflow: hidden;
}
34343434
34343434
22222
//tip2
.parent{
display: table;
width: 100%;
}
.left,.right{
display: table-cell;
}
.left{
width: 0.1%;
padding-right: 20px;
}
34343434
22222
//tip3
.parent{
display: flex;
}
.left,.center{
width: 100px;
padding-right: 20px;
}
.right{
flex: 1;
}
34343434
34343434
22222
等分
1,等寬
//tip1
.parent{
margin-left: -20px;
}
.column{
float: left;
width: 25%;
padding-left: 20px;
box-sizing: border-box;
}
1
2
3
4
//tip2
.parent-fix{
margin-left: -20px;
}
.parent{
display: table;
width:100%;
table-layout: fixed;
}
.column{
display: table-cell;
padding-left: 20px;
}
1
2
3
4
//tip3
n從0開始，選擇第一個div并且是倒數(shù)第幾個（暗示總共個數(shù)）以及它的鄰居元素
效果如圖
少于5個是一行顯示
多于5個時，每行三個
//tip4
效果圖
.main {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.item {
display: inline-block;
height:50px;
width:200px;
}
.empty{
height: 0;
visibility: hidden;
}
1
2
3
4
em
em
就是要求多個元素并排排列，多出來的居左，empty的數(shù)量不小于單行最多元素的數(shù)量即可。試了下不加empty元素也可以達(dá)到呢。
2，等高
//tip1
.parent{
overflow: hidden;
}
.left,.right{
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.left{
float: left; width: 100px;
}
.right{
overflow: hidden;
}
34343434
2323
//tip2
.parent{
display: table;
width: 100%;
}
.left{
display:table-cell;
width: 100px;
margin-right: 20px;
}
.right{
display:table-cell;
}
//tip3
.parent{
display:flex;
width: 100%;
}
.left{
width: 100px;
}
.right{
flex:1;
}
圣杯布局 左右定寬，中間自適應(yīng)
.wrapper {padding: 0 100px 0 100px; overflow:hidden;}
.col {position: relative; float: left;}
.main {width: 100%;height: 200px;}
.left {width: 100px; height: 200px; margin-left: -100%;left: -100px;}
.right {width: 100px; height: 200px; margin-left: -100px; right: -100px;}
main
雙飛翼布局（圣杯布局的不足屏幕窄時 dom會掉下來 彌補(bǔ)）
.wrapper {padding: 0; overflow:hidden;}
.col {float: left;}
.main {width: 100%;}
.main-wrap {margin: 0 100px 0 100px;height: 200px;}
.left {width: 100px; height: 200px; margin-left: -100%;}
.right {width: 100px; height: 200px; margin-left: -100px;}
main
容易忘記的樣式
::-webkit-input-placeholder{
font-size:.35rem;
color:#bdbdbd;
text-align: center
} /* 使用webkit內(nèi)核的瀏覽器 */
:-moz-placeholder{
font-size:.35rem;
color:#bdbdbd;
text-align: center
} /* Firefox版本4-18 */
::-moz-placeholder{
font-size:.35rem;
color:#bdbdbd;
text-align: center
} /* Firefox版本19+ */
:-ms-input-placeholder{
font-size:.35rem;
color:#bdbdbd;
text-align: center
}
::-ms-input-placeholder{
font-size:.35rem;
color:#bdbdbd;
text-align: center
}
前面可加具體的input的選擇器
不同寬度屏幕的一些適配方案
1，運(yùn)用media媒體查詢
2，運(yùn)用max-width、margin:0 auto
Error 這是一個可以滾動的diviphonex的劉海胡子兼容
網(wǎng)頁的內(nèi)容只在安全區(qū)域內(nèi)，不希望有元素出現(xiàn)的劉海胡子處。/* iOS 11.0 */ constant(safe-area-inset-top)：在Viewport頂部的安全區(qū)域內(nèi)設(shè)置量（CSS像素） constant(safe-area-inset-bottom)：在Viewport底部的安全區(qū)域內(nèi)設(shè)置量（CSS像素） constant(safe-area-inset-left)：在Viewport左邊的安全區(qū)域內(nèi)設(shè)置量（CSS像素） constant(safe-area-inset-right)：在Viewport右邊的安全區(qū)域內(nèi)設(shè)置量（CSS像素） /* iOS 11.2 */ env(safe-area-inset-top)：在Viewport頂部的安全區(qū)域內(nèi)設(shè)置量（CSS像素） env(safe-area-inset-bottom)：在Viewport底部的安全區(qū)域內(nèi)設(shè)置量（CSS像素） env(safe-area-inset-left)：在Viewport左邊的安全區(qū)域內(nèi)設(shè)置量（CSS像素） env(safe-area-inset-right)：在Viewport右邊的安全區(qū)域內(nèi)設(shè)置量（CSS像素）viewport-fit必須為cover 否則constant和env不生效
viewport-fit 有3個值：
contain: 可視窗口完全包含網(wǎng)頁內(nèi)容（左圖）
cover：網(wǎng)頁內(nèi)容完全覆蓋可視窗口（右圖）
auto：默認(rèn)值，跟 contain 表現(xiàn)一致底部有按鈕fixed頁面實(shí)例
在正常手機(jī)，按鈕在底部，在iphonex，在安全區(qū)底部。
缺點(diǎn)bug：如果頁面要內(nèi)嵌在app里的話，iphonexr iphone8p手機(jī)在app里的系統(tǒng)標(biāo)題會擋住頁面頂部的一部分，設(shè)置了padding-top也沒好使，應(yīng)該是viewfits是cover導(dǎo)致的，無奈只能采取下面的方法。
另一種方法是通過媒體查詢，這種方法局限在于如果ipx出了好多款，那么media不限制于以下一種
@media only screen and (-webkit-device-pixel-ratio: 3) and (device-height: 812px) and (device-width: 375px) { .has-bottombar { height: 100%; -moz-box-sizing: border-box; box-sizing: border-box; padding-bottom: 34px; } .has-bottombar:after { content: ""; z-index: 9999; position: fixed; left: 0; bottom: 0; width: 100%; height: 34px; background: #fff; } }文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/98234.html
相關(guān)文章
CSS 布局經(jīng)典問題初步整理
摘要：布局經(jīng)典問題初步整理標(biāo)簽前端本文主要對布局中常見的經(jīng)典問題進(jìn)行簡單說明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù)，清除浮動，居中布局，響應(yīng)式設(shè)計(jì)，布局，等等。 CSS 布局經(jīng)典問題初步整理 標(biāo)簽 ： 前端 [TOC] 本文主要對 CSS 布局中常見的經(jīng)典問題進(jìn)行簡單說明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù) margin，清除浮動，居中布局，響應(yīng)式設(shè)計(jì)，F(xiàn)l...
Web前端經(jīng)典面試試題（二）
摘要：上次由于時間有限只分享了一部分的前端面試題，所以本篇繼續(xù)分享前端經(jīng)典面試試題一棧和隊(duì)列的區(qū)別棧的插入和刪除操作都是在一端進(jìn)行的，而隊(duì)列的操作卻是在兩端進(jìn)行的。 上次由于時間有限只分享了一部分的前端面試題，所以本篇繼續(xù)分享前端經(jīng)典面試試題 一. 棧和隊(duì)列的區(qū)別? 棧的插入和刪除操作都是在一端進(jìn)行的，而隊(duì)列的操作卻是在兩端進(jìn)行的。 隊(duì)列先進(jìn)先出，棧先進(jìn)后出。 棧只允許在表尾一端進(jìn)行插入和刪...
Web前端經(jīng)典面試試題（二）
摘要：上次由于時間有限只分享了一部分的前端面試題，所以本篇繼續(xù)分享前端經(jīng)典面試試題一棧和隊(duì)列的區(qū)別棧的插入和刪除操作都是在一端進(jìn)行的，而隊(duì)列的操作卻是在兩端進(jìn)行的。 上次由于時間有限只分享了一部分的前端面試題，所以本篇繼續(xù)分享前端經(jīng)典面試試題 一. 棧和隊(duì)列的區(qū)別? 棧的插入和刪除操作都是在一端進(jìn)行的，而隊(duì)列的操作卻是在兩端進(jìn)行的。 隊(duì)列先進(jìn)先出，棧先進(jìn)后出。 棧只允許在表尾一端進(jìn)行插入和刪...
Web前端經(jīng)典面試試題（二）
摘要：上次由于時間有限只分享了一部分的前端面試題，所以本篇繼續(xù)分享前端經(jīng)典面試試題一棧和隊(duì)列的區(qū)別棧的插入和刪除操作都是在一端進(jìn)行的，而隊(duì)列的操作卻是在兩端進(jìn)行的。 上次由于時間有限只分享了一部分的前端面試題，所以本篇繼續(xù)分享前端經(jīng)典面試試題 一. 棧和隊(duì)列的區(qū)別? 棧的插入和刪除操作都是在一端進(jìn)行的，而隊(duì)列的操作卻是在兩端進(jìn)行的。 隊(duì)列先進(jìn)先出，棧先進(jìn)后出。 棧只允許在表尾一端進(jìn)行插入和刪...
發(fā)表評論
0條評論
閱讀 1508·2023-04-26 00:25
閱讀 906·2021-09-27 13:36
閱讀 930·2019-08-30 14:14
閱讀 2172·2019-08-29 17:10
閱讀 1006·2019-08-29 15:09
閱讀 1942·2019-08-28 18:21
閱讀 962·2019-08-26 13:27
閱讀 971·2019-08-26 10:58
