说明:本文仅作面试回答简述版,详细介绍以及代码演示可以参考:https://blog.csdn.net/Sabrina_cc/article/details/105927401
1. Inline-block + text-algin 属性配合使用
1. Table-cell + vertical-align属性配合使用
1. Table-margin实现水平居中,table-cell + vertical-align实现垂直居中
2. Absolute + transform 实现水平垂直居中
一、水平居中布局
1. Inline-block + text-algin 属性配合使用
(1)text-align属性: 为文本内容设置对齐方 . 其中 left:左对齐 center:居中对齐 right:右对齐
(2)display属性:
block: 块级元素
inline:内联元素(text-align属性有效)问题:当设置成inline后,width和height属性是无效的(只会为文字添加背景)
inline-block: 行内块级元素(块级+内联)整合了块级元素与内联元素的特点,width和height是有效的
(3)优缺点:
优点:浏览器兼容性比较好。
缺点:text-align属性有继承性,导致子级元素的文本也是居中显示的
2. Table + margin 属性配合使用
(1)margin属性:外边距
一个值:上下左右
两个值:第一个表示上下,第二个表示左右
三个值:第一个表示上,第二个值表示左右, 第三个表示下
四个值:上右下左
auto:表示根据浏览器自动分配
(2)优缺点
优点:只需要对子级元素进行设置就可以实现水平方向居中布局效果
缺点:如果子级元素脱离文档流(设置浮动,绝对定位position:absolute,固定定位fixed),导致margin属性无效,这种方法就无法实现水平居中;
3. Absolute + transform属性配合使用
(1)开启定位:
absolute 绝对定位
fixed 相对固定定位
relative 相对定位
(2)当把当前元素设置为绝对定位之后
如果父级元素没有开启定位的话,当前元素是相对于页面定位的;
如果父级元素开启了定位的话,当前元素是相对与父级元素定位的;
(3)优缺点
优点:无论父级元素是否脱离文档流,不影响子级元素水平居中效果
缺点:transform属性是CSS3中新增的属性,浏览器支持情况不好
二、垂直布局
1. Table-cell + vertical-align属性配合使用
(1)display属性
table: 设置当前元素为<table>元素(表格)
table-cell: 设置当前元素为<td>元素(单元格)当设置table-cell相当于把父级元素变成表格中的单元格,而内容可以进行垂直方向的水平,而子级元素就相当于单元格中的内容
(2)vertical-align属性
用于设置文本内容的垂直方向对齐方式
top : 顶部对齐
middle : 居中对齐
bottom : 底部对齐
(3)优缺点
优点:浏览器兼容性比较好
缺点:vertical-align属性具有继承性,导致复元素的文本也是居中显示的
2. Absolute + transform属性配合使用
优点:父级元素是否脱离文档流,不影响子级元素垂直居中效果
缺点:transform属性是CSS3中新增属性,浏览器支持情况不好
三、水平垂直居中布局
1. Table-margin实现水平居中,table-cell + vertical-align实现垂直居中
2. Absolute + transform 实现水平垂直居中
四、两列布局
1. float + margin 属性配合使用
优点:实现方式简单
缺点:自适应元素margin属性值必须与定宽元素的width属性保持一致(需要手动修改)。定宽元素浮动(脱离文档流)与自适应元素不浮动导致浏览器兼容性不好(可能会存在空白区域)。
如果左列元素有子级元素,且设置了clear:both可能存在显示问题。
解决了第一种方法的两个问题:浮动与不浮动的问题;子级元素设置clear清除浮动的问题;
但是没有解决值耦合度高的问题。
2. float + overflow 属性配合使用
优点:第一种解决方法的问题都没有出现
缺点:overflow属性(开启了BFC模式,有副作用)不仅解决了两列布局问题,同时设置了内容溢出的情况。
3. display属性的table相关值使用
优点:浏览器兼容性比较好
缺点:将所有元素的display属性设置为table相关值,受到相应制约。
五、三列布局
1. float + margin属性配合使用
2. Float + overflow属性配合使用
3. Display属性的table相关值使用
六、圣杯布局
简单来说就是三行三列布局。 圣杯布局的核心:实现主体部分左右定宽+中间自适应的布局效果
七、双飞翼布局
主要是优化了圣杯布局中开启定位的问题。增加一个子级元素inner,主要解决问题就是重合问题。
八、等分布局
1. float属性实现等分布局效果
2. Display属性的值有关table实现等分布局效果
3. 等分布局存在间距的情况
实现等分布局时,如果需要每列之间实现空白间隔,设置margin或者padding时会多出一个边界
解决方法:在原有的HTML页面代码基础上再加一个父级容器
九、等高布局
1. display属性的值有关table实现
2. Padding+margin属性实现
十、CSS3多列布局
1. Columns属性
Columns-count属性:定义列的数量(设置列的数量或者允许的最大列数)(auto / number)
Columns-width属性:定义列的宽度(设置列的宽度或者列的最小宽度)(auto / length)
2. 列的间隙
Column-gap属性用于设置列与列之间的间距
3. 列的边框
Columns-rule属性用于定义列与列之间的边框,其中包括边框的宽度(columns-rule-width),颜色(columns-rule-color),边距样式(columns-rule-style)
4. 横跨多列
Columns-span属性用于定义一个列元素是否跨列 (None不跨列 All横跨所有列)
十一、全屏布局
HTML页面铺满整个浏览器窗口,并且没有滚动条。而且还可以跟随浏览器的大小变化而变化。(宽高都为自适应,第二行元素包含两列,高度也是自适应,且有一列宽度自适应)
详细布局介绍参考链接:https://blog.csdn.net/Sabrina_cc/article/details/105927401