CSS布局與定位（2）

2021-09-02 01:16:56 字數 874 閱讀 2101

left 


right
父級元素新增clearfix

#content 


left 


middle 


right
塊級元素， 設定固定寬度，左右margin等於auto

#box
對塊級的父級使用，能讓內部的匿名行盒(文字)、行內元素(span)、inline-block元素在父親裡水平居中

.container
1、flex垂直居中

.container
可以使用margin-left:auto進行元素內左右布局

2、flex垂直水平居中

.container
3、grid垂直居中

.container
4、grid垂直水平居中

.container
grid的相容性有待提高

5、table-cell垂直居中

.container
元素寬度會發生收縮，需要對其父級元素進行調整

.father
6、table-cell垂直水平居中

.container
7、絕對定位

適用於絕對定位場景（如彈窗、元素之間重疊覆蓋）

.container 


.child

深入css布局 2 定位與浮動

在css知識體系中，除了css選擇器，樣式屬性等基礎知識外，css布局相關的知識才是css比較核心和重要的點。今天我們來深入學習一下css布局相關的知識。上篇文章我們講完了css布局中盒模型和元素分類的相關知識，同時介紹了box sizing和行框。這篇我們繼續.上篇我們講解了不同型別元素的特點，我...

CSS 浮動布局與定位布局

布局常用的方法 用float設計浮動布局 float預設值為none,可根據頁面需要設定為左浮動left，或右浮動right 瀏覽器中效果 因為 div 是區塊元素，每個 div 獨佔一行，要想讓三個 div 在同一行裡顯示，就需要給三個子元素設定浮動，但浮動會使元素脫離文件流，父元素高度崩塌，所以...

CSS頁面布局基礎2 定位

1 四種定位型別 通過position屬性指定分別是static 預設值 relative absolute fixed static 靜態定位 表示按照正常定位方案，元素盒按照在文件流中出現的順序依次格式化 relative 相對定位 將移動元素盒，但是它在文件流中的原始空間會保留下來。absol...