摘要:一水平居中直接父集設置優點兼容性好,甚至可以兼容缺點里的文字也會水平居中,可以在添加還原使用定位優點居中元素不會對其他的產生影響缺點屬于內容,兼容性存在一定問題,高版本瀏覽器需要添加一些前綴彈性布局另一種寫法缺點低版本瀏覽器不支持
一.水平居中
(1)直接父集設置text-align:center;
.parent{text-align:center;}DEMO
優點:兼容性好,甚至可以兼容ie6、ie7
缺點:child里的文字也會水平居中,可以在.child添加text-align:left;還原
(2)使用定位absolute+transform
.parent {position:relative;}
.child {position:absolute;left:50%;transform:translateX(-50%);}
優點:居中元素不會對其他的產生影響
缺點:transform屬于css3內容,兼容性存在一定問題,高版本瀏覽器需要添加一些前綴
(3)彈性布局
.parent {display:flex;}
.child {margin:0 auto;}
另一種寫法
.parent {display:flex;justify-content:center;}
缺點:低版本瀏覽器(ie6 ie7 ie8)不支持
(4)表格
.child {display:table;margin:0 auto;}
缺點:不支持ie6、ie7,將div換成table
(1)表格table-cell+vertical-align
.parent {display:table-cell;vertical-align:middle;}
ie8以上均支持
(2)定位absolute+transform
.parent {position:relative;}
.child {position:absolute;top:50%;transform:translateY(-50%);}
缺點:transform屬于css3內容,兼容性存在一定問題,高版本瀏覽器需要添加一些前綴
(3)彈性布局flex+align-items
.parent {display:flex;align-items:center;}
缺點:兼容性存在一定問題
(1)表格
.parent {text-align:center;display:table-cell;vertical-align:middle;}
.child {display:inline-block;}
優點:兼容性較好
(2)定位
.child {position:absolute;left:50%;top:50%;transform:tranplate(-50%,-50%);}
缺點:兼容性存在一定問題
(3)彈性布局
.parent {display:flex;justify-content:center;align-items:center;}
缺點:兼容性存在一定問題
(1)浮動
.left { float:left; width:100px; } .right { overflow:hidden; } .clear-fix::after { content:""; display: block; clear:both; }left
right
right
另種寫法(左邊居中)
.left { float:left; width:100px; }
缺點:記得清除浮動不支持ie6
(2)表格
.parent { display:table; width:100%; table-layout:fixed; } .left { width:100px; } .right,.left { display:table-cell; }
(3)彈性布局
.parent { display:flex; } .left { width:100px; } .right { flex:1; }五.等分布局
(1)浮動
六.rem布局(1套代碼解決2端).parent{ margin-left: -20px; } .column{ float: left; width: 25%; padding-left: 20px; box-sizing: border-box; } (2)彈性布局 .parent{ display: flex; } .column{ flex: 1; } .column+.column{ margin-left:20px; }1
2
3
4
七.浮動布局(具體)
1.整體給寬高 margin:0 auto
2.局部給寬高 margin:0 auto
3.分別每個給寬高和浮動(有圖片的話,則給圖片設置display:block;margin:0 auto;)
.custom-list{ width:100%; height:6rem; margin-top:1rem; margin:0 auto; } .custom-line{ width:17.2rem; height:2.7rem; margin:1rem auto 0 auto; } .custom-line>div { width: 3.44rem; height:100%; float:left; } .pic{ width:1.5rem; height:1.5rem; display:block; margin:0 auto; } 在要浮動部位的父集上增加class="clear-fix" .clear-fix::after { content:""; display: block; clear:both; }八.不等寬高布局 你就是帥你就是帥
.free-line { margin-top: 1rem; width: 17.2rem; height: 2.49rem; margin: 1rem auto 0 auto; font-size: 0; } .free-line>div { height: 100%; display: inline-block; vertical-align: top; } .indicate { width: 3.07rem; background-color: #fff; color: #333; position: relative; } .indicate>img { width: 1rem; height: 1rem; position: absolute; bottom: 40%; left: 50%; transform: translate(-50%,0); } .free-arrow { width: 1.64rem; position: relative; height: 100%; } .free-arrow>img { position: absolute; width: 0.34rem; height: 0.63rem; top: 0; left: 0; bottom: 0; right: 0; margin: auto; }不等寬高布局
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/116686.html
摘要:整理收藏一些優秀的文章及大佬博客留著慢慢學習原文協作規范中文技術文檔協作規范阮一峰編程風格凹凸實驗室前端代碼規范風格指南這一次,徹底弄懂執行機制一次弄懂徹底解決此類面試問題瀏覽器與的事件循環有何區別筆試題事件循環機制異步編程理解的異步 better-learning 整理收藏一些優秀的文章及大佬博客留著慢慢學習 原文:https://www.ahwgs.cn/youxiuwenzhan...
摘要:等知名網站已經開始測試并使用格式。頁面加載速度更快結構化清晰頁面顯示簡潔。表現與結構相分離。易于優化搜索引擎更友好,排名更容易靠前。用于替換當前元素,用于在當前文檔和引用資源之間確立聯系。 前端面試題總結——HTML(持續更新中) 1.什么是HTML? HTML:HyperText Markup Language超文本標記語言 2.XHTML和HTML有什么區別 HTML是一種基本的W...
摘要:等知名網站已經開始測試并使用格式。頁面加載速度更快結構化清晰頁面顯示簡潔。表現與結構相分離。易于優化搜索引擎更友好,排名更容易靠前。用于替換當前元素,用于在當前文檔和引用資源之間確立聯系。 前端面試題總結——HTML(持續更新中) 1.什么是HTML? HTML:HyperText Markup Language超文本標記語言 2.XHTML和HTML有什么區別 HTML是一種基本的W...
摘要:前言一直混跡社區突然發現自己收藏了不少好文但是管理起來有點混亂所以將前端主流技術做了一個書簽整理不求最多最全但求最實用。 前言 一直混跡社區,突然發現自己收藏了不少好文但是管理起來有點混亂; 所以將前端主流技術做了一個書簽整理,不求最多最全,但求最實用。 書簽源碼 書簽導入瀏覽器效果截圖showImg(https://segmentfault.com/img/bVbg41b?w=107...
閱讀 1441·2023-04-25 17:18
閱讀 1882·2021-10-27 14:18
閱讀 2123·2021-09-09 09:33
閱讀 1839·2019-08-30 15:55
閱讀 2016·2019-08-30 15:53
閱讀 3439·2019-08-29 16:17
閱讀 3429·2019-08-26 13:57
閱讀 1730·2019-08-26 13:46