溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“css頁面布局的常用技巧分享”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“css頁面布局的常用技巧分享”吧！
css居中布局
<divclass="parent">
<divclass="child">居中布局</div>
</div>
水平居中（寬度自適應）
1.inline-block+text-align
.child{
display:inline-block;/*變成行內塊元素，讓元素寬度自適應，不繼承父元素寬度；*/
}
.parent{
text-align:center;
}
2.table+margin
.child{
display:table;/*變成table元素，可以讓元素寬度自適應，不繼承父元素寬度；*/
margin:0auto;
}
css多列布局
<divclass="parent">
<divclass="left">
<p>left</p>
</div>
<divclass="right">
<p>right</p>
<p>right</p>
</div>
</div>
左邊定寬，右邊自適應
float+margin
.left{
width:100px;
float:left;
}
.right{
margin-left:120px;
}
float+overflow
/*和1方法表現的效果一樣*/
.left{
width:100px;
float:left;
}
.right{
margin-left:20px;
overflow:hidden;
}
table
.parent{
display:table;
width:100%;
table-layout:fixed;
}
.left,.right{
display:table-cell;
}
.left{
width:100px;
padding-right:20px;
}
感謝各位的閱讀，以上就是“css頁面布局的常用技巧分享”的內容了，經過本文的學習后，相信大家對css頁面布局的常用技巧分享這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
