CSS笔试题
思维导图：https://gitmind.cn/app/docs/mgmvoyil
防止高度坍塌
问题描述
子元素浮动脱离文档流，导致父元素高度坍塌，父元素页脚被子元素遮挡
解决方案(4种)
父元素设置overflow:hidden属性
原理：CSS中的overflow:hidden属性回强制要求父元素必须包裹住所有内部浮动的元素,以及所有元素的margin范围
缺点：父元素中某些超出范围的子元素需要显示时会产生冲突
父元素结尾最佳一个空的块级元素，并设置子元素clear:both属性(如<div style="clear:both"/>)
缺点：增加了无用元素，影响性能，且影响选择器和查找元素
父元素设置浮动，后续元素需要增加clear:both属性
缺点：会产生新的浮动影响
父元素末尾伪元素设置clear:both属性(推荐)
::after{content:'';clear:both;display:table;height:0}
height:0是为了避免某些浏览器会给table默认高度
BFC(Block formatting context)
由块级元素产生的独立的渲染区域，外部内部互不影响，竖直排列
BFC布局特点
同一个BFC中的两个相邻块级元素垂直的margin会发生重叠/合并，水平方向不会
计算BFC高度会将内部浮动元素的高度计算在内
形成BFC的条件
float属性的值不是none
position属性的值不是static或relative
display属性的值是inline-block、table-cell、flex、table-caption或inline-flex
overflow属性的值不是visible
利用BFC区域来解决高度坍塌、垂直方向margin合并、垂直方向margin溢出(5种)
IFC(Inline formatting context)
由行内元素产生的独立的渲染区域，水平排列
左定宽，右自适应
解决方案（兼容性好）
还有flex、table方案
.left{
float:left;
width:定宽;
}
.right{
overflow:hidden;
}弹性布局（flex布局）
父元素{
display:flex/inline-flex; //
flex-direction: row/row-reverse/column/column-reverse; // 主轴方向
flex-wrap: nowrap/wrap; // 是否换行
flex-flow: flex-direction flex-wrap; // 主轴和换行的简写
justify-content: flex-start/flex-end/space-between/space-around; // 主轴对齐方式
align-items: flex-start/flex-end/center/baseline/stretch; // 交叉轴对齐方式(基线)
...
}
子元素{
order: number; // 排列顺序
flex-grow: number; //放大比例
flex-shrink: 0/1; // 缩小比例
aligh-self: flex-start/flex-end/center/baseline/stretch/auto; // 交叉轴对齐方式(基线)
}居中
水平居中
父元素固定宽度块级元素
p元素嵌套h1元素会产生PHP (<p>1<h1>2</h1></p> => <p />1<h1>2</h1><p />)
子元素为行内元素：text-align:center
子元素为定宽块元素
margin: 0 auto;
计算边距
子绝父相，子：left:50% transform:translateX(-50%)/margin-left:-50%子宽
flex布局
垂直居中
父元素盒子容器
子元素为行内元素：
单行：子：line-height:父元素高度；
多行： 父：display: inline/inline-block/table-cell;vertical-align:middle
子元素为定宽块元素
父：display: inline/inline-block/table-cell;vertical-align:middle
flex布局
计算边距
子绝父相
响应式布局(5种)
flex布局(最简单)
子相父相布局（最麻烦）
grid布局（最强大最新）
父元素{ grid-template-columns: 30px 30px 40px ; // 列数(几列，每列多宽) grid-template-row: repeat(4,20px)/repeat(auto-fill,20px)/repeat(3,1fr); // 行数(fr:等分，minmax()范围) column-gap: ; // 列间距 column-gap: ; // 列间距 gap: ; // 间距 grid-auto-flow: row/column; // 先行后列|先列后行 justify-items: start/end/center/stretch; // 水平对齐方式 align-items: start/end/center/stretch; // 单元格垂直对齐方式 place-items:start/end/center/stretch; // 单元格对齐方式 justify-content:start/end/center/stretch/space-around/space-between/space-evenly; // 整个区域对齐方式 align-content:start/end/center/stretch/space-around/space-between/space-evenly; ... } 子元素{ grid-column-start/grid-column-end/grid-row-start/grid-row-end: ; // 指定该元素的具体位置(哪根网格线) justify-self/align-self: ; // 该元素的对齐方式 }float布局（易挤压换行）
rem布局+媒体查询（小于12px布局需要设置缩放点为左上角并缩放）
百分比布局（不稳定）
评论区